Empty*

SketchSystems.spec

Empty*
  error -> Invalid
  focus -> Empty Focus
  success -> Valid
Empty Focus
  blur -> Empty
  error -> Invalid Focus
  success -> Valid Focus
Invalid
  delete -> Empty
  error -> Invalid
  focus -> Invalid Focus
  success -> Valid
Invalid Focus
  blur -> Invalid
  delete -> Empty Focus
  error -> Invalid Focus
  success -> Valid Focus
Valid
  delete -> Empty
  error -> Invalid
  focus -> Valid Focus
  success -> Valid
Valid Focus
  blur -> Valid
  delete -> Empty Focus
  error -> Invalid Focus
  success -> Valid Focus

SketchSystems_prototype.js

const input = ({ error, focus = false, placeholder = "Empty", style, value = "" } = {}) => $(
  "div",
  {},
  [
    $("textarea", { placeholder, style, value }),
    !!error ? $("div", { style: { color: "red" } }, error) : undefined
  ]
)

const inputFactory = style => (props = {}) => input(Object.assign(props, { style }))

const focus = inputFactory({
  borderColor: "lightblue",
  borderWidth: "2px"
})

const textarea = ({ active_states: [next] }) => {
  switch(next.name) {
    case "Invalid":
      return input({ error: "Only greetings are allowed.", value: "Good Bye!" });
    case "Invalid Focus":
      return focus({ error: "Only greetings are allowed.", value: "Good Bye!" });
    case "Valid":
      return input({ value: "Hello!" });
    case "Valid Focus":
      return focus({ value: "Hello!" });
    case "Empty Focus":
      return focus();
    case "Empty":
    default: 
      return input()
  }
}

const title = ({ active_states: [next] }) => $(
  "h1",
  { style: {color: "darkBlue" } },
  `The current state is: ${next.name}`
)

const render = model => $(
  "div",
  {},
  [
    title(model),
    textarea(model)
  ]
)