Storybook Tips

00-moc.md

Storybook Tips

• title と id の名前決定

01-naming-id-and-title.md

id と title の名前決定

idの形式は Storybook の Story のタイトルを分解して"-"でつなげたものになっている。

形式：<category>-(<folder>-).*<component>-<story | docs>

Story のタイトルはデフォルトの場合 Story ファイルまでの階層構造と Story 名に由来し、自分で指定する場合は Story ファイルで export しているメタ情報と Story 名から組み立てられる。

形式：<category>/(<folder>/).*<component>

タイトルはデフォルトでは.storybook/main.tsでstoriesに指定した glob pattern(**)の階層構造から自動算出される。

// .storybook/main.ts
  stories: [
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../docs/**/*.mdx",
  ],

src
  └──components
    └── ui
      └── Button
        └── Button.stories.tsx

// src/components/ui/Button/Button.stories.tsx
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

export const Default: Story = {};

Components        // Category
  └── UI          // Folder
    └── Button    // Component
      ├── Docs    // Docs
      └── Default // Story

title を明示的に設定している場合、"/"で区切れったところで階層構造が反映される。

// src/components/ui/Button/Button.stories.tsx
const meta = {
  title: "Components/UI/Button",
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

export const Default: Story = {};

Components        // Category
  └── UI          // Folder
    └── Button    // Component
      ├── Docs    // Docs
      └── Default // Story

結果的に次の URL が生成される。

• title: Components/UI/Button/Default
• id: components-ui-button-default
• URL: http://localhost:6006/?path=/story/components-ui-button--default
• URL(iframe): http://localhost:6006/iframe.html?id=components-ui-button--default

References

• Naming components and hierarchy
• Configure Storybook