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

machine.js

const alwaysClasses = 'px-4 rounded'
const primaryAlways = `text-white`
const secondaryAlways = `bg-transparent border`

const buttonMachine = Machine(
  {
    id: 'button',
    initial: 'active',
    on: {
      CHOOSE_BTN_TYPE: {
        actions: ['choose_btn_type'],
      },
    },
    context: {
      buttonType: 'primary',
      currentClasses: null,
      classes: {
        primary: `${alwaysClasses} ${primaryAlways} bg-blue-400 hover:bg-blue-500`,
        secondary: `${alwaysClasses} ${secondaryAlways} hover:bg-blue-400 text-blue-400 hover:text-white border-blue-400 hover:border-transparent`,
        loading: `${alwaysClasses} ${primaryAlways} bg-blue-100`,
        disabled: {
          primary: `${alwaysClasses} ${primaryAlways} bg-blue-100`,
          secondary: `${alwaysClasses} ${secondaryAlways} border-blue-100 text-blue-100`,
        },
      },
    },
    states: {
      active: {
        on: {
          DISABLE: {
            target: 'disabled',
            actions: 'change_classes',
          },
          LOADING: {
            target: 'loading',
            actions: 'change_classes',
          },
        },
      },
      loading: {
        on: {
          DISABLE: {
            target: 'disabled',
            actions: 'change_classes',
          },
          ACTIVATE: {
            target: 'active',
            actions: 'change_classes',
          },
        },
      },
      disabled: {
        on: {
          ACTIVATE: {
            target: 'active',
            actions: 'change_classes',
          },
          LOADING: {
            target: 'loading',
            actions: 'change_classes',
          },
        },
      },
    },
  },
  {
    actions: {
      change_classes: assign({
        currentClasses: function(context, event) {
          const variant = context.buttonType
          const eventKey = event.type
          if (eventKey === 'LOADING') {
            return context.classes['loading']
          } else if (eventKey === 'DISABLE') {
            return context.classes.disabled[variant]
          } else if (eventKey === 'ACTIVATE') {
            return context.classes[variant]
          }
        },
      }),
      choose_btn_type: assign({
        currentClasses: (context, event) => {
          const buttonType = event.buttonType
          return context.classes[buttonType] || context.classes['primary']
        },
        buttonType: (context, event) => {
          const buttonType = event.buttonType
          if (buttonType === 'primary' || buttonType === 'secondary') {
            return buttonType
          } else {
            return 'primary'
          }
        },
      }),
    },
  }
)