2.3.9 • Published 4 months ago

storybook-xstate-addon v2.3.9

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

xState Storybook Addon

npm.io

Installation

npm install -D @storybook/addons storybook-xstate-addon @xstate/inspect @xstate/react

Usage

To use this in storybook simply add addons: ["storybook-xstate-addon/preset"] to your storybook config.

If you want to enable the inspector in all stories, set the following in your /.storybook/preview.js file. With this setting on you can disable the inspector in certain stories

export const parameters = {
  xstate: true,
};

To enable the inspector in a single story/stories file, set the xstate parameter to true or an options object.

// this will turn on the inspector for all stories in the current file
export default {
  title: "Example",
  parameters: {
    xstate: true,
    // this option is passed to the inspect function
    xstateInspectOptions: {
      url: 'https://stately.ai/viz?inspect',
      serialize: null
    }
  },
};

// this turns the inspector on for only a single story
StoryComponent.parameters = {
  xstate: true,
};

To assist with viewing larger state charts, you can pass the height option in the xstate parameter to force the height of the inspector.

StoryComponent.parameters = {
  xstate: {
    height: "1000px",
  },
};

Additionally, you can send events to a machine by id when it is registered by adding the xstate parameter.

For more example usages see ./stories/Button.stories.tsx and ./stories/Machines.stories.tsx.

StoryComponent.parameters = {
  xstate: {
    machine_id1: {
      events: "event",
    },
    machine_id2: {
      events: { type: "event" },
    },
    machine_id3: {
      events: [{ type: "event1" }, { type: "event2" }],
    },
    machine_id4: {
      events: (state) => "event",
    },
    machine_id5: {
      events: ["event1", "event2"],
      delay: 2.5e3, // milliseconds to delay before sending the next event
      shouldRepeatEvents: true, // for looping event sequences
    },
  },
};

If you wish to use the Inspector as the main story itself, simply use the following snippet (uses react).

import { RenderMachine } from 'storybook-xstate-addon/RenderMachine';

export const MachinePreview = () => <RenderMachine machine={confirmMachine.withConfig({ ... })} events={[...events]} />;
2.3.9

4 months ago

2.3.8

11 months ago

2.3.7

1 year ago

2.3.2

2 years ago

2.3.4

1 year ago

2.3.3

2 years ago

2.3.6

1 year ago

2.3.5

1 year ago

2.3.0

2 years ago

2.2.1

2 years ago

2.3.1

2 years ago

2.2.2

2 years ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.1.8

2 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.1.2

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.3

3 years ago

0.1.0

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago