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

machine.js

const modelMachine = Machine({
  id: 'model',
  initial: 'summary',
  context: {
    size: 100,
  },
  states: {
    loading: {
      on: {
        LOADED: {
            target: 'summary'
        },
      },
    },
    summary: {
      meta: {
        buttonText: 'make big',
      },
      on: {
        CHANGE_VARIATION: {
          action: ['REMOVE_ITEM', "ADD_ITEM"]
        },
        ADD_ITEM: {
          action: ['ADD_ITEM']
        },
        REMOVE_ITEM: {
          action: ['REMOVE_ITEM']
        },
        TOGGLE_SIZE: {
          target: 'full',
          actions: ['MAXIMISE']
        }  
      }
    },
    full: {
      meta: {
        buttonText: 'make small',
      },
      on: {
        EXPORT: {
          actions: ['EXPORT']
        },
        TOGGLE_SIZE: {
          target: 'summary',
          actions: ['MINIMISE']
          }
        }
      },
  }
}, {
    actions: {
    EXPORT: () => {
        
    },
    ADD_ITEM: () => {
    
    },
    REMOVE_ITEM: () => {
      
    },
    MINIMISE: (context, event) => {
        context.size = 10
      },
    MAXIMISE: (context, event) => {
      context.size = 600
    }
  }
});