https://github.com/johnf/storybook-addon-jotai
https://github.com/johnf/storybook-addon-jotai
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/johnf/storybook-addon-jotai
- Owner: johnf
- License: mit
- Created: 2022-01-07T02:43:18.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-13T09:10:37.000Z (about 3 years ago)
- Last Synced: 2025-03-09T14:34:12.633Z (over 1 year ago)
- Language: TypeScript
- Size: 1.6 MB
- Stars: 6
- Watchers: 4
- Forks: 10
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Jotai Addon
A [Storybook](https://storybook.js.org/) Addon and Decorator for [Jotai](https://jotai.org) and track the state in a Panel.
TODO: Add screenshot here
## Install
```sh
yarn add -D storybook-addon-jotai
```
Register the addon in `.storybook/main.js`
```ts
module.exports = {
stories: ['../stories/**/*.stories.tsx'],
addons: ['storybook-addon-jotai'],
};
```
## Usage
Given a simple component:
```tsx
import { useAtom, atom } from 'jotai';
const userAtom = atom(null);
export const User = () => {
const [user] = useAtom(userAtom);
return (
{user ? (
{`Logged in as ${user.name}`}
setUser(null)} />
) : (
No one is signed in
setUser({ name: 'John' })}/>
)}
);
};
```
You can write a story as
```tsx
import { withJotai } from 'storybook-addon-jotai';
import { User, userAtom } from '../components/User';
import { Header } from './Header';
export default {
title: 'Example/User',
component: User,
decorators: [withJotai],
};
const Template = (args) => ;
export const JohnLoggedIn = Template.bind({});
JohnLoggedIn.parameters = {
jotai: {
atoms: {
user: userAtom,
},
values: {
user: {
name: 'John Doe',
},
},
},
};
export const JaneLoggedIn = Template.bind({});
JaneLoggedIn.parameters = {
jotai: {
atoms: {
user: userAtom,
},
values: {
user: {
name: 'Jane Doe',
},
},
},
};
export const LoggedOut = Template.bind({});
LoggedOut.args = {};
```
### Development scripts
- `yarn start` runs babel in watch mode and starts Storybook
- `yarn build` build and package your addon code
## Release Management
### Creating a release
Automatically created when pushing to GitHub