스토리북 x React x Typescript | 복잡한 소품을 간단한 컨트롤로 관리하는 방법

문제

Storybook을 구현할 때 Storybook's controls을 사용하여 구성 요소 소품을 변경할 수 있습니다. 그러나 때로는 복잡한 소품이 있는 경우 컨트롤이 조정되지 않고 하나의 소품에 대해 여러 컨트롤이 필요하거나 일부 데이터를 모의해야 할 수 있습니다.

Typescript에서 문제가 발생합니다. 귀하argTypes는 구성 요소 소품 유형과 동일한 유형을 기다리고 있습니다. 하지만 좋은 소식이 있습니다! 이 문제를 적절하게 우회할 수 있는 트릭을 알려드리겠습니다.

트릭

"단순한"복잡한 소품을 예로 들어 보겠습니다.
다음 유형의 소품이 있는 구성 요소Heading가 있습니다.

type HeadingPropType = {
  text : {
    text : string
    html : ReactNode
    raw : string
  }
  image : {
    url : string
    alt : string
  }
}

보시다시피 두 가지 소품이 있습니다.

text : 배수 형식으로 표시되는 문자열

image : Storybook에서 그다지 유용하지 않은 alt 속성이 있는 이미지 URL

이러한 유형의 소품을 사용하여 Storybook은 사용자에게 개체를 채우도록 요청하는 컨트롤을 표시하지만 문자열과 입력 파일이 더 적합하다는 데 모두 동의합니다.
ArgTypes로 간단하게 표시할 수 있지만 작동시키는 것은 좀 더 복잡합니다.
필요한 것은 HOC (Higher Order Component) 구성 요소를 반환하지만 단순화된 소품을 사용하는 것입니다.

이 같은 :

const componentSimplifier = <T1, T2>(
  ComplexComp: React.ComponentType<T2>,
  propsConverter: (props: T1) => T2
) => (props: T1) => <ComplexComp {...propsConverter(props)} />

이 라인은 두 개의 제네릭 유형(단순 유형인 T1과 구성 요소 소품 유형인 T2)과 두 개의 인수를 취하는 함수componentSimplifier를 정의합니다.

ComplexComp : 단순히 스토리에 추가하려는 구성 요소

propsConverter : 간단한 소품을 복잡한 소품으로 변환하는 함수

이 예에서는 다음이 있습니다.

T1 = {
  text : string
  image : string
}
T2 = HeadingPropType
ComplexComp = Heading //The component we want to display
propsConverter = ({text, image}: T1) => ({
  text : {
    text : text,
    html : <h1>${text}</h1>,
    raw : text,
  },
  image : {
    url : image,
    alt : "default alt string"
  }
})

이 함수에 대한 최종 호출은 다음과 같습니다.

const SimpleHeadingPropsType = {
  text : string
  image : string
}

const propsConverter = ({text, image}: T1) => ({
  text : {
    text : text,
    html : <h1>${text}</h1>,
    raw : text,
  },
  image : {
    url : image,
    alt : "default alt string"
  }
})

const SimplifiedHeading = componentSimplifier<
  SimpleHeadingPropsType,
  HeadingPropType
>(
  Heading,
  propsConverter
)

그게 다야! 이제 적응된 컨트롤로 스토리에서 SimplifiedHeading를 사용할 수 있습니다!