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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const validateUserName = (context, event) =>
  [validateMinLength(context, event, 2), validateMaxLength(context, event, 10)].every(x => x === true);
const validateMinLength = (context, { value = '' }, minLength = 0) => String(value).length >= minLength;
const validateMaxLength = (context, { value = '' }, maxLength = Number.MAX_VALUE) => String(value).length <= maxLength;

const formMachine = Machine({
  id: 'form',
  type: 'parallel',
  context: {
    username: undefined,
  },
  states: {
    editing: {
      on: {
        USERNAME: [
          { target: 'errors.username.none', cond: validateUserName },
          { target: 'errors.username.minLength', cond: (context, event) => !validateMinLength(context, event, 2) },
          { target: 'errors.username.maxLength', cond: (context, event) => !validateMaxLength(context, event, 10) },
        ],
      },
    },
    errors: {
      type: 'parallel',
      states: {
        username: {
          initial: 'none',
          states: {
            none: {
              target: 'editing',
              onEntry: assign({ username: (context, event) => event.value || '' }),
            },
            minLength: {
              onEntry: assign({ username: (context, event) => event.value || '' }),
            },
            maxLength: {
              onEntry: assign({ username: (context, event) => event.value || '' }),
            },
          },
        },
      },
    },
  },
});