🧮 Counter Example

This is the classic counter app, implemented with Retomus state machines.
It’s a perfect introduction to actions, state, and React integration.

---

Status: idle

Count: 0

---

🔧 Machine Definition

import { createRetomus, createMachineConfig } from 'retomus';

const retomus = createRetomus();

const counterMachine = retomus.createMachine(
  createMachineConfig({
    id: 'counter',
    status: ['idle', 'active'],
    actions: ['increment', 'decrement', 'reset'],
    transitions: {
      idle: {
        increment: 'active',
        decrement: 'active',
      },
      active: {
        increment: 'active',
        decrement: 'active',
        reset: 'idle',
      },
    },
    actionHandlers: {
      increment: ({ ctx, done }) => {
        ctx.state.count++;
        done();
      },
      decrement: ({ ctx, done }) => {
        ctx.state.count--;
        done();
      },
      reset: ({ ctx, done }) => {
        ctx.state.count = 0;
        done();
      },
    },
    initialStatus: {
      status: 'idle',
    },
    ctx: {
      state: { count: 0 },
    },
  }),
);

---

🧩 React Component

import React, { CSSProperties } from 'react';

const CounterComponent = ({ counterMachine }) => {
  const count = counterMachine.useState('count');
  const status = counterMachine.useStatus();
  const increment = counterMachine.useAction('increment');
  const decrement = counterMachine.useAction('decrement');
  const reset = counterMachine.useAction('reset');

  return (
    <div style={styles.container}>
      <h2>Status: {status}</h2>
      <p>Count: {count}</p>
      <div style={styles.buttonGroup}>
        <button onClick={increment}>increment</button>
        <button onClick={decrement}>decrement</button>
        <button onClick={reset}>reset</button>
      </div>
    </div>
  );
};

const styles: { container: CSSProperties; buttonGroup: CSSProperties } = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '1rem',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '1rem',
  },
};

---

🧠 What You Learn

✅ State and status separation
✅ Action dispatching
✅ Reactive UI using useState, useStatus, useAction

---