CSF3. Type Script x React x Storybook 프로젝트0 대응하기 위해 형식적인 문제를 조정하여 읽은 글

개시하다
며칠 전Storybook 6.4에 발표되었는데CSF 3.0특색 로고 없이 사용할 수 있습니다.
의기양양하게 옮기려 했지만 스토리 오브젝트에 적용할 수 있는 타입이 많이 늘었고, 어느 것을 사용하는 게 옳은지 이해하기까지 시간이 많이 걸렸다.
같은 고민을 하는 사람을 도울 수 있다면 메모로 조사한 내용을 남겨두고 싶다.
TL;DR
전제는 Storybook 6.4지만 CSF3.0이면ComponentStoryObj, CSF2.0이면ComponentStoryFn이 맞습니다.
Meta와 Story-Storybook6.2 이전의 story object 유형 정의
Storybook6.2에서 story를 어떻게 썼는지 살펴보겠습니다.
※ 포맷은 CSF 2.0에 해당하므로 storiies Of API를 사용하는 사람에게는 참고가 되지 않을 수 있습니다.미안합니다.

// SomeComponent.stories.tsx

import { Meta, Story } from "@Storybook/react";
import React from "react";

import { SomeComponent, SomeComponentProps } from "..";

const meta: Meta = {
  title: "SomeComponent",
  component: SomeComponent,
};
export default meta;

export const MyStory: Story<SomeComponentProps> = (args) => (
  <SomeComponent {...args} />
);
MyStory.args = {
  // 省略
};

여기에 등장하는 유형은 메타와 스토리 두 가지뿐이다.유형 정보는 다음과 같이 확인할 수 있습니다.
https://github.com/storybookjs/Storybook/blob/v6.2.9/app/react/src/client/preview/types-6-0.ts
ComponentMeta와 ComponentStory-Story-Storybook6.3로 등장한 신형
Storybook 6.3부터 ComponentMeta, ComponentStory라는 유형이 새로 등장했다.
기존 메타, Story와 어떻게 다릅니까?라이브러리에서 제공하는 형식 파일을 보십시오.
https://github.com/storybookjs/Storybook/blob/v6.3.0/app/react/src/client/preview/types-6-3.ts

// types-6.3.d.ts

/**
 * For the common case where a component's stories are simple components that receives args as props:
 *
 * ```tsx
 * export default { ... } as ComponentMeta<typeof Button>;
 * ```
 */
export declare type ComponentMeta<
  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = Meta<ComponentProps<T>>;
/**
 * For the common case where a story is a simple component that receives args as props:
 *
 * ```tsx
 * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
 * ```
 */
export declare type ComponentStory<
  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = Story<ComponentProps<T>>;

ComponentMeta는 Meta의 별명이고, ComponentStory는 Story의 별명이다.
또한ComponentMeta,ComponentStory를 사용할 때는 반드시 모델이 있어야 하며, 이때story의 기본 구성 요소 유형만 전달할 수 있다.
이러한 새로운 유형의 출현으로 인해 Storybook을 위해서만 export 구성 요소의 props가 필요하지 않습니다.
마침 이 issue에 답할 때 ComponentMeta,ComponentStory라는 유형을 추가하려는 의도를 설명했다.
그런데 사실 이렇게 쓰면 구성 요소의 프로포즈는 export를 쓰지 않아도 돼요...Story<React.ComponentProps<typeof SomeComponent>>그래도 역시 이쪽은 시원하고 좋네요! ComponentStory<typeof SomeComponent>Storybook 6.4 변경 사항
Storybook 6.4부터 기본적으로 CSF3.0이 지원됩니다.이에 따라 유형 파일도 대폭 변경됐다.
지금부터 보기형 파일의 내용은 길어지기 때문에 먼저 정리를 해보면 스토리북 6.4에 등장하는 장르가 모두 이런 느낌이다.
많네.
Meta
이전 메타와 동일합니다.
ComponentMeta
Meta형 별칭입니다.Storybook 6.3의 ComponentMeta와 동일합니다.
StoryFn
CSF2.0용 유형입니다.상세한 상황을 후술하다.
ComponentStoryFn
StoryFn의 별칭입니다.모드에story의 기본 구성 요소 형식을 추가해서 사용합니다.
StoryObj
CSF3.0형.상세한 상황을 후술하다.
ComponentStoryObj
StoryObj의 별칭입니다.모드에story의 기본 구성 요소 형식을 추가해서 사용합니다.
Story
지금은 스토리Fn의 별명입니다.Storybook 7.0에서 StoryObj의 별칭으로 변경됩니다.
ComponentStory
이야기의 별명.모드에story의 기본 구성 요소 형식을 추가해서 사용합니다.
types-6.3.d.ts가 업데이트되어 ComponentXX계의 유형이 증가했습니다.일단 저쪽부터 보시죠.
ComponentXX형 사용 방법
결론적으로 ComponentXX계의 유형은 모두 XX형의 별명이다.
ComponentMeta,ComponentStory 때와 마찬가지로 모드에서story로 구성된 구성 요소의 유형에 따라 사용됩니다.
https://github.com/storybookjs/Storybook/blob/v6.4.0/app/react/src/client/preview/types-6-3.ts
어떤 걸 써도 상관없고 개인적으로 편하게 쓸 수 있는 ComponentXX형이 좋아요.
이어서 새로 추가된 StoryObj, StoryFn 등의 모델을 확인한다.
그렇다면 어떤 스타일을 써야 할까요?는 story 구성과 CSF 버전에 따라 달라집니다.
순서대로 봅시다.
Storybook 6.4 x CSF 2.0 시
결론: ComponentMeta와 ComponentStoryFn을 사용하는 것이 좋습니다.
최초로 붙여넣은 구성 요소 story의 코드 예시 부분을 다시 보여 줍니다.
Storybook 버전을 업그레이드하더라도 CSF 버전을 옮기지 않으면 기본적으로 story 코드는 변경하지 않아도 이동합니다.
그러나 참조 유형의 컨텐트가 변경되었습니다.

// SomeComponent.stories.tsx

// Story 型は StoryFn のエイリアスとなった
const MyStory: Story<SomeComponentProps> = (args) => (
  <SomeComponent {...args} />
);

// ので、こう書いてもよい
const MyStory: StoryFn<SomeComponentProps> = (args) => (
  <SomeComponent {...args} />
);

// こう書くこともできる
const MyStory: ComponentStory<typeof SomeComponent> = (args) => (
  <SomeComponent {...args} />
);

// ということは、こう書いても良いことになる
const MyStory: ComponentStoryFn<typeof SomeComponent> = (args) => (
  <SomeComponent {...args} />
);

유형 정보
https://github.com/storybookjs/Storybook/blob/v6.4.0/app/react/src/client/preview/types-6-0.ts
https://github.com/storybookjs/Storybook/blob/v6.4.0/app/react/src/client/preview/types-6-3.ts
위의 모든 쓰기 방법은 현재 문제가 없지만 유형 파일NOTE that in Storybook 7.0, this type will be renamed to StoryFn and replaced by the current StoryObj type.에서 Storybook 7.0으로 업그레이드되었을 때 Story형은 StoryFn이 아니라 StoryObj의 별명이었다.
좀 이해가 안 가요. 스토리북의migration guide에도 이렇게 쓰여 있어요.
따라서 특별한 이유가 없다면 스토리Fn형을 사용하는 것이 좋다.
위에서 말한 바와 같이 CoponentStoryFn의 인코딩은 비교적 유창하고 개인적으로 비교적 좋아한다.
Storybook 6.4 x CSF3.0의 경우
결론: ComponentMeta와 ComponentStoryObj를 사용하는 것이 좋습니다.
CSF3.0에서 story까지의 기술 방법에 큰 변화가 생겼다.최초의 견본 코드를 CSF3.0 흐름으로 바꾸면 이런 느낌이 든다.

// SomeComponent.stories.tsx

import SomeComponent from "..";

export default { component: SomeComponent };

export const Sample = {
  args: {
    // 省略
  },
};

CSF 2.0에서 함수 story가 객체가 됩니다.여기에 이르면 StoryFn과 StoryObj의 차이를 사용하면 길을 잃지 않을 것이다.
그럼 금형을 여기다 놓을게요.틀이 없어도 틀리지 않는 경우도 있지만 틀 추론이 효과가 있다면 즐거울 것이다.

// SomeComponent.stories.tsx

import SomeComponent from "..";

const meta: ComponentMeta<typeof SomeComponent> = { component: SomeComponent };
export default Meta;

// 公式ドキュメントでは type assertion を使って以下のようにするのが推奨されていたのですが、
// export default { component: SomeComponent } as ComponentMeta<typeof SomeComponent>;
// 個人的に type assertion は型エラーを握り潰してしまう可能性があるのであまり使いたくなく、上記のように書き直しています。

export const Sample: ComponentStoryObj<typeof SomeComponent> = {
  args: {
    // 省略
  },
};

스토리북 7.0 이후 스토리형이 스토리Obj의 별명으로 바뀌었기 때문에 조금 짧게 쓸 수 있다.
세 글자만 줄여서 아무거나 할 수 있어요.

// SomeComponent.stories.tsx for Storybook 7.0

export const Sample: ComponentStory<typeof SomeComponent> = {
  args: {
    // 省略
  },
};

총결산
문서에 명확한 기록이 없기 때문에 저는 Storybook의 버전을 높이고 유형 파일을 확인하거나 CSF의 문서를 노려보며 고생을 했지만 이렇게 정리하면 의외로 간단합니다.

ComponentXX형은 XX형의 별명으로 구성 요소의 유형을 모델에 직접 전달하는 것이 편리하다

Storybook 6.4에서 Story형으로 StoryFn의 별명이 됨

Storybook 7.0 이후의 Story형도 StoryObj의 별명이 될 수 있으므로 버전 업그레이드 시기에 수정

↑ 말은 그렇지만 수정하려면 CSF3.0을 일찍 처리하는 게 좋을 것 같다

올해는 이래도 되나?
괜찮다


감사합니다!!