Storybook Jotai 擴充功能

一個用於 Jotai 的 Storybook 擴充功能和 Decorator，並在面板中追蹤狀態。

待辦：在此處新增螢幕截圖

安裝

yarn add -D storybook-addon-jotai

在 .storybook/main.js 中註冊擴充功能

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],
  addons: ['storybook-addon-jotai'],
};

用法

給定一個簡單的元件

import { useAtom, atom } from 'jotai';

const userAtom = atom(null);

export const User = () => {
  const [user] = useAtom(userAtom);

  return (
    <div>
      {user ? (
        <div>
          <div>{`Logged in as ${user.name}`}</div>
          <Button size="small" label="Log out" onClick={() => setUser(null)} />
        </div>
      ) : (
        <div>
          <div>No one is signed in</div>
          <Button size="small" label="Log in" onClick={() => setUser({ name: 'John' })}/>
        </div>
      )}
    </div>
  );
};

您可以將 story 寫成

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) => <User {...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 = {};

開發腳本

• yarn start 以監看模式執行 babel 並啟動 Storybook
• yarn build 建置並封裝您的擴充功能程式碼

發佈管理

建立發佈

推送到 GitHub 時自動建立