Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SimeonC/storybook-xstate-addon
A storybook addon to assist with writing stories that rely on xstate
https://github.com/SimeonC/storybook-xstate-addon
addon storybook storybook-addon xstate
Last synced: 3 months ago
JSON representation
A storybook addon to assist with writing stories that rely on xstate
- Host: GitHub
- URL: https://github.com/SimeonC/storybook-xstate-addon
- Owner: SimeonC
- License: mit
- Created: 2021-03-18T09:58:41.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-12T05:30:34.000Z (about 1 year ago)
- Last Synced: 2024-10-28T14:18:24.114Z (3 months ago)
- Topics: addon, storybook, storybook-addon, xstate
- Language: TypeScript
- Homepage: https://SimeonC.github.io/storybook-xstate-addon/
- Size: 9.85 MB
- Stars: 54
- Watchers: 2
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - storybook-xstate-addon
README
# xState Storybook Addon
![](./preview.png)
### 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
```js
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.
```jsx
// 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.
```js
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].
```jsx
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).
```jsx
import { RenderMachine } from 'storybook-xstate-addon/RenderMachine';export const MachinePreview = () => ;
```