Generated by XState Viz: https://xstate.js.org/viz

machine.js

function produce() {
  return {}
}

const machine = new Machine(
  {
    id: `text-input-machine`,
    type: `parallel`,
    context: {
      errorMessage: null,
      name: ``,
      value: ``
    },
    states: {
      focus: {
        initial: `blurred`,
        states: {
          blurred: {
            on: {
              FOCUS: `focused`
            }
          },
          focused: {
            on: {
              BLUR: `blurred`,
              CHANGE: {
                actions: [`setValue`, `sendValueToParent`]
              }
            }
          }
        }
      },
      pristine: {
        initial: `pristine`,
        states: {
          pristine: {
            on: {
              CHANGE: `dirty`
            }
          },
          dirty: {}
        }
      },
      touched: {
        initial: `untouched`,
        states: {
          untouched: {
            on: {
              FOCUS: `touched`
            }
          },
          touched: {}
        }
      },
      validity: {
        initial: `valid`,
        states: {
          invalid: {
            on: {
              CHANGE: {
                target: `valid`,
                actions: `resetErrorMessage`
              },
              SET_VALID: {
                target: `valid`,
                actions: `resetErrorMessage`
              }
            }
          },
          valid: {
            on: {
              SET_INVALID: {
                target: `invalid`,
                actions: `setErrorMessage`
              }
            }
          }
        }
      }
    }
  },
  {
    actions: {
      resetErrorMessage: assign(
        produce(ctx => {
          ctx.errorMessage = null
        })
      ),
      setErrorMessage: assign(
        produce((ctx, e) => {
          ctx.errorMessage = e.errorMessage
        })
      ),
      setValue: assign(
        produce((ctx, e) => {
          ctx.value = e.value
        })
      ),
      sendValueToParent: sendParent(ctx => ({
        name: ctx.name,
        type: `INPUT`,
        value: ctx.value
      }))
    }
  }
)