Storybook v7 覚書

10/17/2023

storybookバージョン7を触る機会があったのでメモ

typescriptです

非推奨になった型など変更になった部分がありました

(CSF（Component Story Format）2,3混じってるかも)

※一部<>がうまく表示されないので全角になっています

バージョン6.xでは下記のような感じ

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

export default {
  title: 'Features🤗/Component/NanikaNoUiComponent',
  component: NanikaNoUiComponent,
  parameters: {
    layout: 'fullscreen',
  },
} as ComponentMeta;

const Template: ComponentStory = (args) => (
＜NanikaNoUiComponent {...args} /＞
)

export const Default = Template.bind({});
Default.args = {//ここにpropsの値をつらつら書く}

バージョン7.xではComponentStory, ComponentMetaが非推奨になりました

代わってMeta,StoryObj型を使います

import type { Meta, StoryObj } from '@storybook/react';
import { NanikaNoUiComponent } from '.';

const meta: Meta = {
  title: 'Features🤗/Component/NanikaNoUiComponent',
  component: NanikaNoUiComponent,
};
export default meta;

export const Default: StoryObj = {
  args: {//ここにpropsの値をつらつら書く},
};

おまけ

Provider的なものを使っていてコンポーネント内でuseContextなどで値を読み出している場合

バージョン6.x

import { ComponentStory, ComponentMeta } from '@storybook/react';
import { NnikaNoContext } from './Provider/NanikaNoProvider';
import { NanikaNoUiComponent } from '.';

export default {
  title: 'Features🤗/Component/NanikaNoUiComponent',
  component: NanikaNoUiComponent,
  parameters: {
    layout: 'fullscreen',
  },
} as ComponentMeta;

const Template: ComponentStory = (args) => {
  return (
    ＜NanikaNoContext.Provider
      value={{
      data: data,//ここにcontextの値を渡す
      }}
    ＞
     ＜NanikaNoUiComponent {...args} /＞
   ＜/NanikaNoContext.Provider＞
  )
};

export const Default = Template.bind({});
Default.args = {//ここにpropsの値をつらつら書く}

バージョン7.xでdecoratorsを使った場合

import type { Meta, StoryObj } from '@storybook/react';
import { NnikaNoContext } from './Provider/NanikaNoProvider';
import { NanikaNoUiComponent } from '.';

const meta: Meta = {
  title: 'Features🤗/Component/NanikaNoUiComponent',
  component: NanikaNoUiComponent,
  //storyのパターン全体に使う場合はここ
  decorators: [
    (Story) => {
      return (
　　　　　//~プロバイダーやコンポーネントを何かの要素（divなど）で囲いたい場合~
        ＜NnikaNoContext.Provider
          value={{
            data: data,
          }}
        ＞
          ＜Story /＞
        ＜/NnikaNoContext.Provider＞
      )
    },
  ],
};
export default meta;

export const Default: StoryObj = {
  args: {//ここにpropsの値をつらつら書く},
  //storyのパターンごとにdecoratorsを設定する場合はここ
  decorators: [
    (Story) => {
      return (
　　　 //~プロバイダーやコンポーネントを何かの要素（divなど）で囲いたい場合~
       ＜div style={{cssプロパティ}}＞
　　　　　＜Story /＞
       ＜/div＞
       )
      }
 　 ],
};

またdecoratorsを使いまわしたい場合はこんな感じで定義してdecoratorsに渡すこともできます

引数であるStoryの型はPartialStoryFn<ReactRenderer>

//decoratorsを定義してdecorators:decoratorsみたい感じで渡してあげればおｋ
const decorators = [
  (Story: PartialStoryFn) => {
    return (
      //~プロバイダーやコンポーネントを何かの要素（divなど）で囲いたい場合~
       ＜div style={{cssプロパティ}}＞
        ＜Story /＞
      ＜/div＞
     )
  },
];

storybookは楽しいけど難しい

Storybook v7 覚書

以上！