Traffic Light State Machine

trafficLightMachine.tsx

import { createMachine, send } from "xstate";

createMachine({
  id: "traffic-light-machine",
  type: "parallel",
  states: {
    trafficSignal: {
      initial: "greenLight",
      states: {
        greenLight: {
          on: {
            YIELD: {
              target: "yellowLight",
              actions: send("HURRY"),
            },
            STOP: {
              target: "redLight",
              actions: send("WALK")
            },
          },
        },
        redLight: {
          on: {
            GO: {
              target: "greenLight",
              actions: send("HALT"),
            },
          },
        },
        yellowLight: {
          on: {
            STOP: {
              target: "redLight",
              actions: send("WALK"),
            },
          },
        },
      },
    },

    walkSignal: {
      initial: "redLight",
      states: {
        redLight: {
          on: {
            WALK: {
              target: "whiteLight",
              actions: send("STOP"),
            },
          },
        },
        whiteLight: {
          on: {
            HURRY: {
              target: "yellowLight",
              actions: send("YIELD"),
            },
            HALT: {
              target: "redLight",
            },
          },
        },
        yellowLight: {
          on: {
            HALT: {
              target: "redLight",
              actions: send("GO"),
            },
          },
        },
      },
    },
  },
});