[Storybook] Controlsの値によってargsの内容を変更する方法

環境

• Storybook + React

仕様

• Controls で desktop / mobile の値を切り替えられる
• desktop / mobile の値は hooks で取得できる
• args の内容を desktop / mobile によって変更する

方法

decorators で args を変更すると良い。

const Banner = {
  desktop: 'https://placehold.jp/300x250.png',
  mobile: 'https://placehold.jp/300x100.png',
};

const Mock = {
  banner: '',
};

export default {
  component: Component,
  args: {
    banner: Mock.banner,
  },
  decorators: [
    (Story, ctx) => {
      const { device } = useDevice();

      ctx.args.banner = device.isDesktop ? Banner.desktop : Banner.mobile;

      return <Story />;
    },
  ],
} as Meta<typeof Component>;