Storybook LocalStorage 擴充功能

一個用於模擬和顯示 window.localStorage 當前值的 Storybook v8 擴充功能和裝飾器，並將其顯示在 Storybook 面板中。

如果您想將 parameters 設定為強型別，請參閱 @alexgorbatchev/storybook-parameters。

安裝

npm i --save-dev @alexgorbatchev/storybook-addon-localstorage

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

export default {
  stories: ['../stories/**/*.stories.tsx'],
  addons: ['@alexgorbatchev/storybook-addon-localstorage'],
};

重要

• 如果設定了 parameters.localStorage，則在填入值之前會呼叫 localStorage.clear()。
• 傳遞到 parameters.localStorage 的值必須是字串，因為 localStorage 僅適用於字串。您可以使用 JSON.stringify，或者使用擴充功能提供的輔助函式 localStorageForStorybook。
• 最後，需要注意的是，該擴充功能的工作原理是每 100 毫秒輪詢和差異化 localStorage 中的模擬值。

用法

假設有一個簡單的元件

export const Header = () => {
  const [user, setUser, { removeItem }] = useLocalStorage<{ name: string }>('user');

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

您可以將 Story 寫成

import { localStorageForStorybook } from '@alexgorbatchev/storybook-addon-localstorage';
import { Meta, StoryObj } from '@storybook/react';

import { Header } from './Header';

const meta: Meta<typeof Header> = {
  title: 'Example/Header',
  component: Header,
};

export default meta;

type Story = StoryObj<typeof Header>;

export const JohnLoggedIn: Story = {
  parameters: {
    // this helper automatically stringifies the values using `JSON.stringify`
    localStorage: localStorageForStorybook({
      value: 123,
      user: { name: 'John' },
    }),
  },
};

export const JaneLoggedIn: Story = {
  parameters: {
    // if you have own serialzer, you can use it as well
    localStorage: {
      value: '123',
      user: JSON.stringify({ name: 'Jane' }),
    },
  },
};

強型別範例

import { Meta, StoryObj } from '@alexgorbatchev/storybook-parameters';
import { LocalStorageParameters } from '@alexgorbatchev/storybook-addon-localstorage';

interface StoryParameters extends LocalStorageParameters {}

const meta: Meta<typeof Header, StoryParameters> = {
  title: 'Header',
  component: Header,
};

export default meta;

type Story = StoryObj<typeof Header, StoryParameters>;

export const JohnLoggedIn: Story = {
  parameters: {
    // `localStorage` will show up in `Parameters`
    localStorage: {
      key: 'value',
    },
  },
};

開發腳本

• npm run storybook 啟動 Storybook
• tsup 建置 ./dist