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

machine.js

const buttonA = {
  id: 'buttonA',
  initial: 'hist',
  states: {
    off: {
      on: {
        TOGGLEA: 'on'
      }
    },
    on: {
      on: {
        TOGGLEA: 'off'
      }
    },
    hist: {
      type: 'history',
      target: 'off',
    },
  },
}


const buttonFactory = id => {
  const toggleName = `TOGGLE${id}`
  return {
    id: `button${id}`,
    initial: 'hist',
    states: {
      off: {
        on: {
          [toggleName]: 'on'
        }
      },
      on: {
        on: {
          [toggleName]: 'off'
        }
      },
      hist: {
        type: 'history',
        target: 'off',
      },
    },
  }
}


const buttonB = {
  id: 'buttonB',
  initial: 'lastSelected',
  states: {
    off: {
      on: {
        TOGGLEB: 'on'
      }
    },
    on: {
      on: {
        TOGGLEB: 'off'
      }
    },
    hist: {
      type: 'history',
      target: 'off',
    }
  },
}


const buttons = {
  id: 'buttons',
  type: 'parallel',
  states: {
    button1: buttonFactory(1),
    buttonB
  },
  on: {
    SLEEP: '#idle',
    offA: {
      target: [
        '#button1.off',
        '#buttonB.hist'
      ]
    },
    offB: {
      target: [
        '#buttonB.off',
        '#button1.hist'
      ]
    },
  }
}


const parallelTest = Machine({
  id: 'test',
  initial: 'idle',
  states: {
    idle: {
      id: 'idle',
      on: {
        START: 'buttons',
      }
    },
    buttons,
  }
});