Zenn
Open2

StroybookのCSFを2.0から3.0に上げる

React
Storybook
TypeScript
白雀白雀
  • ComponentStory型をComponentStoryObj型に置き換える＆関数をrenderプロパティに入れる
  • Template.bindのargsを上のComponentStoryObj型のargsにいれてしまう
  • 複数のTemplateを使っている場合、 { ...Primary, args: { hoge } } のようにする
白雀白雀

before

import { SimpleGrid } from '@chakra-ui/react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Card } from '.';

export default {
  title: 'parts/Card',
  component: Card,
} as ComponentMeta<typeof Card>;

const Template: ComponentStory<typeof Card> = (props) => {
  return (
    <SimpleGrid columns={[1, 2, 6]} gap={4}>
      <Card {...props}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Card>
      <Card {...props}>
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Card>
      <Card {...props}>hoge</Card>
    </SimpleGrid>
  );
};

export const Normal = Template.bind({});
Normal.args = {
  borderWidth: 1,
  width: '100%',
  padding: 4,
};

after

import { SimpleGrid } from '@chakra-ui/react';
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import { Card } from '.';

export default {
  title: 'parts/Card',
  component: Card,
} as ComponentMeta<typeof Card>;

export const Primary: ComponentStoryObj<typeof Card> = {
  render: (props) => {
    return (
      <SimpleGrid columns={[1, 2, 6]} gap={4}>
        <Card {...props}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Card>
        <Card {...props}>
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Card>
        <Card {...props}>hoge</Card>
      </SimpleGrid>
    );
  },
  args: {
    borderWidth: 1,
    width: '100%',
    padding: 4,
  },
};