Skip to content

Instantly share code, notes, and snippets.

@x7ddf74479jn5
Last active July 15, 2023 08:36
Show Gist options
  • Save x7ddf74479jn5/c593293026835b5a20cfa3f741017693 to your computer and use it in GitHub Desktop.
Save x7ddf74479jn5/c593293026835b5a20cfa3f741017693 to your computer and use it in GitHub Desktop.
Storybook Tips

id と title の名前決定

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

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

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

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

タイトルはデフォルトでは.storybook/main.tsstoriesに指定した 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment