一、安装配置
在next.js项目中执行
npx sb init
yarn storybook
.storybook/preview.js为 Storybook 配置 Next.js Images
+ import * as NextImage from "next/image";
+ const OriginalNextImage = NextImage.default;
+ Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => (
<OriginalNextImage
{...props}
unoptimized
/>
),
});
package.json为 Storybook 提供 Next.js 公共目录
{
...
"scripts": {
- "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "storybook": "start-storybook -p 6006 -s ./public",
+ "build-storybook": "build-storybook -s public"
},
...
}
配置全局样式，这里使用 antd
yarn add antd
// `.storybook/preview.js` 为 Storybook 配置全局样式
import 'antd/dist/antd.css';
export const parameters = {
...
...
layout: 'fullscreen'
};
二、编写故事流程 （组件 -> 故事）
故事细节
三、args 获取 状态数据 和 事件
使用其他故事的 args
传递给Storybook的事件的写法 (必须带有 …props, 否则事件无法触发)
四、parameters 静态参数 & loaders 加载器
parameters 通常用于控制 Storybook 功能和插件的行为。（一般情况下不需要使用，但不可不知）
loaders 用于加载故事的数据，加载器可用于加载任何资产、延迟加载组件或从远程 API 获取数据。（一般不需要使用，但不可不知）
五、添加描述的方式
在组件的 interface 中，用多行注释的方式，SB会自动添加到Docs中的描述
注意：注释格式一定要这样，否则不能显示; 如果不能自动刷新，则需要重启 yarn storybook
|
|
