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

machine.js

const increment = assign({
  count: ctx => ctx.count + 1
});

const decrement = assign({
  count: ctx => ctx.count - 1
});

const MIN = 0;
const MAX = 10;

const countMachine = Machine({
  initial: 'min',
  context: { count: 0 },
  states: {
    min: {
      on: {
        '': {
          target: 'mid',
          cond: ctx => ctx.count > MIN
        },
        // disallow decrementing
        DEC: undefined
      }
    },
    mid: {
      on: {
        '': [
          {
            target: 'min',
            cond: ctx => ctx.count === MIN
          },
          {
            target: 'max',
            cond: ctx => ctx.count === MAX
          },
        ]
      }
    },
    max: {
      on: {
        '': {
          target: 'mid',
          cond: ctx => ctx.count < MAX
        },
        // disallow incrementing
        INC: undefined
      }
    }
  },
  on: {
    INC: { actions: increment },
    DEC: { actions: decrement }
  }
})