Skip to main content

Storybook

# 初始化
npx sb init

# 手动安装
npm add -D @storybook/{react,addons,testing-library,builder-vite,react-vite}
# knob
npm add -D @storybook/addon-{actions,links,essential,interactions}

配置

  • .storybook/manager.js - 控制 StoryBook UI
.storybook/preview.js
// 全局样式
import '../src/styles/globals.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},

// 全局参数
backgrounds: {
values: [
{ name: 'red', value: '#f00' },
{ name: 'green', value: '#0f0' },
],
},
};

import React from 'react';

export const decorators = [
(Story) => (
<div style={{ margin: '3em' }}>
<Story />
</div>
),
];

export const globalTypes = {};

docs

  • 所有 stories 都会生成 DocsPage
import { Meta } from '@storybook/addon-docs';
import Changelog from '../CHANGELOG.md';

<Meta title="Changelog" />

<Changelog />

隐藏 Docs

export default {
title: 'YourTitle',
parameters: {
previewTabs: {
'storybook/docs/panel': { hidden: true },
},
viewMode: 'canvas',
},
};

默认 Docs

export default {
title: 'YourTitle',
parameters: {
previewTabs: {
canvas: { hidden: true },
},
viewMode: 'docs',
},
};

Meta

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Example/Button',
component: Button,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

FAQ

Invariant failed: No matching indexer found for Loaders.stories.mdx

  • Loaders.stories.mdx -> Loaders.mdx