CSF3

CSF란?

'Component Story Format'(CSF)는 컴포넌트의 스토리를 작성하는 방법이다.

Storybook v7 부터 CSF3을 기본 포맷으로 지원한다.

이전 버전 대비해서 상용구 코드의 양을 크게 줄여 간결함과 재사용성이 증가하여 생산성이 향상됨

Story란 컴포넌트의 특정 상태를 의미하며, 각 스토리는 개별적으로 문서화된다.

개선된점

• 기본 렌더 함수를 생략해도 된다.

  • 기본적으로 각 스토리는 컴포넌트를 렌더링하고 모든 인자를 전달한다.

• 스토리 재사용성을 위해 스프레드 문법을 지원

• 인터렉션을 위한 play 함수 지원

  • 스토리가 렌더링 된후 실행되며, 테스팅 라이브러리로 사용자 상호작용을 작성한다.

• 경로에 따른 스토리 타이틀 자동 지정

  • 루트 경로를 기준으로 스토리 파일의 위치에 따라 제목을 자동으로 결정짓는다.

Example

// default export할 객체에서 스토리가 작성할 컴포넌트를 선언
const meta: Meta<typeof Button> = {
  title: 'Button',
  component: Button,
  tags: ['autodocs'],
  parameters: {
    controls: { exclude: ["className", "IconOnly"], expanded: true },
  },
  decorators: [
    Story => (
      <StoryLayout  className="space-y-2">
        <Story />
      </StoryLayout>
    )
  ],
}

export default meta;

type Story = StoryObj<typeof Button>;

// 스토리는 객체 형태로 개별적으로 export
export const Default: Story = {
  args: {
    variant: "primary",
    size: "md",
    disabled: false,
    label: "Default Button",
    onClick: action('clicked'),
  },
}

export const Icon: Story = {
  args: {
  // 스프레드 문법을 사용하여 스토리간 중복되는 설정 재사용
    ...Default.args,
    IconOnly: <AiFillGithub />,
    label: '깃허브 바로가기',
  },
};