设置 – codthing

编写 Story

从项目中选择一个简单的组件，比如一个 Button，然后编写一个 .stories.ts 或一个 .stories.mdx 文件来配合它。

它可能看起来像这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21



// YourComponent.stories.ts|tsx

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { YourComponent } from './YourComponent';

//👇 此默认导出决定您的故事在故事列表中的位置
export default {
  title: 'YourComponent',
  component: YourComponent,
} as ComponentMeta<typeof YourComponent>;

//👇 args 如何映射到渲染的 template
const Template: ComponentStory<typeof YourComponent> = (args) => <YourComponent {...args} />;

export const FirstStory = Template.bind({});

FirstStory.args = {
  /*👇 此处的参数取决于组件 */
};

编写文档（可选）

<!-- YourComponent.stories.mdx -->

import { Meta, Story } from '@storybook/addon-docs';
import { YourComponent } from './YourComponent';

<!--👇 标题 prop 决定了故事在故事列表中的位置 -->
<Meta title="YourComponent" component={YourComponent} />

<!--👇 args 如何映射到渲染的 template -->
export const Template = (args) => <YourComponent {...args} />;

<!-- 👇 此处的参数取决于组件 -->
<Story
  name="FirstStory"
  args={{}}>
  {Template.bind({})}
</Story>

转到 Storybook 以查看呈现的组件。如果现在看起来有点不寻常也没关系。

根据技术堆栈，可能还需要进一步配置 Storybook 环境。

为堆栈配置 Storybook

Storybook 带有一个宽松的默认配置。
它尝试自定义自己以适合您的设置。但这并非万无一失。

在单独呈现组件之前，项目可能有其他要求。这需要进一步定制配置。
您可能需要三大类配置。

1. 像 webpack 和 Babel 一样构建配置

如果在运行 yarn storybook 命令时在 CLI 上看到错误，则可能需要更改 Storybook 的构建配置。以下是一些可以尝试的事情：

Presets 将各种技术的通用配置捆绑到 Storybook 中。
特别是 Create React App、SCSS 和 Ant Design 的预设。
为 Storybook 指定自定义 Babel 配置。如果可以，Storybook 会自动尝试使用您项目的配置。
调整 Storybook 使用的 webpack 配置。如果需要，请尝试在自己的配置中打补丁。

2. 运行时配置

如果 Storybook 已构建，但浏览器连接到它时立即看到错误，在这种情况下，很可能输入文件之一未正确编译/转译以供浏览器解释。
Storybook 支持现代浏览器和 IE11，但可能需要检查 Babel 和 webpack 设置（见上文）以确保组件代码正常工作。

3. Component context

如果某个特定的故事在渲染时出现问题，通常意味着组件希望该组件可以使用特定的环境。

一个常见的前端模式是让组件假设它们在特定的“上下文”中渲染，父组件在渲染层次结构中更高（例如，主题提供者）。

使用 Decorators 装饰器将每个故事“包装”在必要的上下文提供者中。
.storybook/preview.js 文件允许自定义组件在 Canvas（预览 iframe）中的呈现方式。
在下面的示例中，了解如何使用 Styled Components ThemeProvider 主题提供程序组件来包装 Storybook 中呈现的每个组件。

React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14



// .storybook/preview.ts

import React from 'react';

import { ThemeProvider } from 'styled-components';

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];

React(STORY-FUNCTION):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14



// .storybook/preview.ts

import React from 'react';

import { ThemeProvider } from 'styled-components';

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      {Story()}
    </ThemeProvider>
  ),
];

渲染组件样式

Storybook 对如何生成或加载 CSS 并不抱有偏见。
它呈现您提供的任何 DOM 元素。但有时，开箱即用的东西不会“看起来正确”。

可能需要为 Storybook 的渲染环境配置 CSS 工具。以下是一些可以提供帮助的提示：

CSS-in-JS like styled-components and Emotion

如果正在使用 CSS-in-JS，那么样式很可能是有效的，因为它们是在 JavaScript 中生成并与每个组件一起提供的。主题用户可能需要在 .storybook/preview.js 中添加 decorators（装饰器）

@import CSS into components

Storybook 允许直接在组件中导入 CSS 文件。但在某些情况下，可能需要调整其 webpack 配置。

Global imported styles

如果有全局导入的样式，请创建一个名为 .storybook/preview.js 的文件并在那里导入样式。 Storybook 会自动为所有故事添加它们。

Add external CSS or webfonts in the <head>

或者，如果想直接将 CSS 链接标记注入 <head>（或其他一些资源，如 webfont 链接），可以使用 .storybook/preview-head.html 添加任意 HTML。

如果从本地目录引用字体或图像，则需要配置 Storybook 脚本以提供静态文件。

加载资产和资源

如果要链接到项目或故事中的静态文件（例如，/fonts/XYZ.woff），请使用 -s path/to/folder 标志指定一个静态文件夹，以便在启动 Storybook 时提供服务。
为此，请编辑 package.json 中的 storybook 和 build-storybook 脚本。

建议使用 Storybook 静态提供组件中请求的外部资源和资产。它确保资产始终可用于您的故事。

设置

设置