Storybook with React Application

title 변경

• story의 title 변경시 주소가 적용되지 않아 오류가 나면 / 로 이동한다.

---

Story 파일 생성하기

1. {component 이름}.stories.tsx 파일 생성

2. import 하고 Prop 타입 가져오기

import { ComponentProps } from 'react';
import { Button } from './Button';

type StoryProps = ComponentProps<typeof Button>;

• StoryProps에 &를 통해 Storyboard에서만 사용될 prop을 추가할수도 있다.

3. meta 변수 선언하고 export

const meta: Meta<StoryProps> = {
  /**
   * 스토리에 포함될 컴포넌트
   */
  component: Button,

  /**
   * args로 넘겨줄 props를 지정
   * 어떻게 보여질지 설정하고 ( select )
   * 어떤 값을 설정할지 ( options )
   * 지정한다.
   */
  argTypes: {
    color: {
      control: {
        /**
         * 이 args는 html의 select 태그로 렌더링된다.
         */
        type: 'select',
        options: ['primary', 'success', 'info', 'warning', 'error'],
      },
    },
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large'],
      },
    },
    buttonText: {
      control: {
        /**
         * 이 args는 html의 text 태그로 렌더링된다.
         */
        type: 'text',
      },
    },
  },
  /**
   * 전역으로 적용할 args를 지정한다.
   */
  args: {
    /**
     * 목업 함수를 넣을수 있다.
     */
    onClick: fn(),
  },
};

export default meta;

4. Story 타입 선언하고 story 만들기

• 이렇게 추가된다.x
  

type Story = StoryObj<StoryProps>;

export const Primary: Story = {
  /**
   * 기본 props
   */
  args: {
    color: 'primary',
    size: 'medium',
  },

  /**
   * 렌더링 함수 지정
   */
  render: (props) => <Button {...props}>Primary</Button>,
};

children

• 위와 같이 render 함수를 지정해도 되고
• args 에 children으로 추가해도 된다.
  • 이 경우 storyboard에서 값을 바꿔가며 테스트도 가능하다.

---

Stack 등의 레이아웃

type StoryProps = ComponentProps<typeof Stack> & {
   numberOfChildren: number;
};

export const Default: Story = {
   args: {
       direction: 'column',
       spacing: 'medium',
   },

   render: ({ direction, spacing, numberOfChildren }) => (
       <Stack
           direction={direction}
           spacing={spacing}
       >
           {Array(numberOfChildren)
               .fill(null)
               .map((_, index) => (
                   <div
                       key={index}
                       style={{
                           width: '100px',
                           height: '100px',
                           backgroundColor: 'black',
                       }}
                   />
               ))}
       </Stack>
   ),
};

• 이런식으로 목업 Element들의 갯수 지정이 가능하다.

---

meta

tags: ['autodocs']

• 자동으로 도큐먼트를 생성해준다.