import { createModel } from 'xstate/lib/model';

const userModel = createModel({
  name: '',
  age: 0
}, {
  events: {
    updateName: (name: string) => ({ name }),
    updateAge: (age: number) => ({ age })
  }
});

const userMachine = userModel.createMachine({
  // ...
  
  on: {
    updateName: {
      actions: userModel.assign({
        // strongly typed!
        name: (_, event) => event.name
      })
    }
  }
});

import { fromReducer } from 'xstate/lib/behaviors';

const countBehavior = fromReducer(
  (count, event) => {
    if (event.type === 'INC') {
      return count + 1;
    } else if (event.type === 'DEC') {
      return count - 1;
    }

    return count;
  },
  0 // initial state
);

const countMachine = createMachine({
  invoke: {
    id: 'count',
    src: () => fromReducer(countReducer, 0)
  },
  on: {
    INC: {
      actions: forwardTo('count')
    },
    DEC: {
      actions: forwardTo('count')
    }
  }
});

import { createMachine, createSchema } from 'xstate';

const machine = createMachine({
  schema: {
    actions: createSchema<
      { type: 'greet'; message: string } | { type: 'sayHello' }
    >()
  },
  entry: [
    { type: 'greet', message: 'hello' },
    { type: 'sayHello' },

    // @ts-expect-error (missing `message`)
    { type: 'greet' },

    // @ts-expect-error
    { type: 'other' }
  ]
});

const ToggleButton = () => {
  // ...
  return <button
    disabled={!state.can('TOGGLE')}
    onClick={() => state.send('TOGGLE')}
  >
    Toggle me!
  </button>;
}

import { and, or, not } from 'xstate/guards';

const someGuard = () => false;

const someMachine = createMachine({
  // ...
  on: {
    EVENT: {
      target: 'somewhere',
      guard: and([
        'stringGuard',
        or([{ type: 'anotherGuard' }, not(someGuard)])
      ])
    }
  }
});

const machine = createMachine({
  // ...
  on: {
    // "mouse", "mouse.click", "mouse.move.out", etc.
    'mouse.*': {/* ... */}
  }
});