在 Storybook 中使用插件

在 Storybook 中使用插件可以提供额外的功能和扩展性。下面是一些常用的 Storybook 插件以及它们的用法。

1. @storybook/addon-actions: 这个插件可以帮助你在 Storybook 中捕获和显示组件的事件。使用 action 函数将组件的事件连接到 Storybook UI 中。

import { action } from '@storybook/addon-actions';

export const Button = ({ onClick }) => (
  <button onClick={onClick}>Click me</button>
);

export default {
  title: 'Button',
};

export const Default = () => (
  <Button onClick={action('button-click')}>Click me</Button>
);

2. @storybook/addon-links: 这个插件允许你在 Storybook 中创建和浏览链接。使用 linkTo 函数将组件连接到 Storybook UI。

import { linkTo } from '@storybook/addon-links';

export const Button = () => (
  <button onClick={linkTo('Button', 'Default')}>Go to default</button>
);

export default {
  title: 'Button',
};

export const Default = () => <Button>Click me</Button>;
export const Primary = () => <Button>Primary</Button>;

3. @storybook/addon-docs: 这个插件可以为你的组件生成文档。使用 Markdown 或 JSX 编写文档，并在 Storybook UI 中显示。

import { PrimaryButton } from '../components/Button';
import docs from './Button.md';

export default {
  title: 'Button',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => <PrimaryButton>Click me</PrimaryButton>;

4. @storybook/addon-knobs: 这个插件允许你在 Storybook 中以可视化的方式编辑组件的 props。使用 knobs 函数将组件的 props 转换为可编辑的控件。

import { withKnobs, text, boolean } from '@storybook/addon-knobs';

export const Button = () => (
  <button disabled={boolean('disabled', false)}>
    {text('text', 'Click me')}
  </button>
);

export default {
  title: 'Button',
  decorators: [withKnobs],
};

这只是一些常用的 Storybook 插件示例，还有很多其他有用的插件可供使用。你可以在官方文档中查找更多插件并了解它们的用法。