react storybook addon chapters

[[더 이상 사용되지 않은]이 애드온은 더 이상 유지 관리되지 않으며 이제는 Storybook의 기본 중첩 및 구성 요소 계층 구조에 찬성하여 더 이상 사용되지 않는 것으로 간주됩니다. 대신 스토리 북 버전 6을 사용하는 것이 좋습니다.

반응 스토리 북 챕터 애드온

React Storybook 챕터 Addon은 스토리 내에서 여러 구성 요소를 더 작은 범주 (챕터) 및 하위 범주 (섹션)로 나누어보다 조직의 장점을 보여줌으로써 여러 구성 요소를 선보일 수 있습니다.

Addon을 사용하면 스토리는 여러 장으로 구성 될 수 있으며 장은 여러 섹션으로 구성됩니다. 각 섹션은 코드 블록을 렌더링 할 수 있으며, 일반적으로 하나의 구성 요소 또는 구성 요소의 특정 상태를 표시하는 데 사용됩니다.

챕터를 사용하여 관련 구성 요소를 함께 그룹화하거나 구성 요소의 다양한 상태를 표시 할 수 있습니다. 각 장에는 장 제목 , 장 자막 , 장 정보 및 섹션 목록이 함께 제공됩니다. 렌더링에서 숨기기 위해 그들 중 하나를 생략하십시오.

각 섹션에는 섹션 제목 , 섹션 자막 , 섹션 정보가 제공됩니다.

이 애드온은 React-Storybook-Addon-Info에서 수정되었으며 거기에서 일부 구성 요소 코드를 사용합니다.

용법

다음 NPM 모듈을 설치하십시오.

npm install --save-dev react-storybook-addon-chapters

그런 다음 다음과 같이 스토리 북을 구성하는 장소에서 애드온을 설정하십시오.

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon from 'react-storybook-addon-chapters' ;

setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ;

기본 스타일을 끄려면 추가 :

 setDefaults ( { sectionOptions : { useTheme : false } } ) ;

모든 렌더링 된 구성 요소에는 지정된 클래스가 있습니다. 'usetheme'이 거짓으로 설정되면 장을 스타일링하는 데 아무런 문제가 없어야합니다.

그런 다음 .addWithChapters api로 스토리를 만듭니다.

 import React from 'react' ;
import Button from './Button' ;
import { storiesOf } from '@storybook/react' ;

storiesOf ( 'Addon Chapters' )
  . addWithChapters (
    'Story With Chapters' ,
    {
      subtitle : < Optional story subtitle > ,
      info: < Optional story info > ,
      chapters: [
        // List of chapters. Refer to Configuration Format section.
        {
          title : < Optional chapter title > ,
          subtitle : < Optional chapter subtitle > ,
          info : < Optional chapter info > ,
          sections : [
            // List of sections.
            {
              title : < Optional section title > ,
              subtitle: < Optional section subtitle > ,
              info: < Optional section info > ,
              sectionFn: () = > ( < Button label = "My Button" onClick = { ( ) => { alert ( 'Hello World!' ) ; } } /> ),
              options: {
                showSource : true ,
                allowSourceToggling : true ,
                showPropTables : true ,
                allowPropTablesToggling : true ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

addWithChapters API에 대해 자세히 알아 보려면이 예제 이야기를 살펴보십시오.

글로벌 옵션

모든 장 섹션 ( section.options )에 대한 기본 옵션을 구성하려면 .storybook/config.js 에서 setDefaults 사용하십시오.

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon , { setDefaults } from 'react-storybook-addon-chapters' ;

// optionally override defaults
setDefaults ( {
  sectionOptions : {
    showSource : true ,
    allowSourceToggling : true ,
    showPropTables : false ,
    allowPropTablesToggling : true ,
    decorator : story => ( < div > { story ( ) } </ div > ) ,
  }
} ) ;
setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ; 

구성 형식

이야기

열쇠	설명	유형	기본
부제	이야기 자막	끈	-
정보	이야기에 대한 추가 정보	문자열 (Markdown)	-
챕터	챕터 객체의 배열	정렬	-

장

열쇠	설명	유형	기본
제목	제목 제목	끈	-
부제	챕터 자막	끈	-
정보	장에 대한 추가 정보	문자열 (Markdown)	-
섹션	섹션 객체 배열	정렬	-

부분

열쇠	설명	유형	기본
제목	섹션 제목	끈	-
부제	섹션 자막	끈	-
정보	섹션에 대한 추가 정보	문자열 (Markdown)	-
Sectionfn	표시 할 React 구성 요소를 반환하는 함수	기능	-
옵션	이 섹션의 구성 객체. 키의 다음 몇 행을 참조하십시오	물체	-
옵션 .Showsource	구성 요소의 소스를 표시합니다	부울	진실
옵션. Allowsourcetoggling	구성 요소의 소스를 표시/숨기기를 허용하십시오	부울	진실
showProptables	구성 요소의 proptypes를 표시하십시오	부울	거짓
옵션	구성 요소의 proptypes를 표시/숨기기를 허용하십시오	부울	진실
옵션 .corator	섹션에서 구성 요소를 렌더링하는 데 사용될 선택적 데코레이터 기능	기능	-

FAQ

구성 요소는 정적 빌드에서 이름을 잃습니다

구성 요소 이름은 생산을 위해 구축 할 때 다른 JavaScript 코드와 함께 조정됩니다. 구성 요소를 작성할 때 displayName STATIC 속성을 설정하여 정적 빌드에서 올바른 구성 요소 이름을 표시하십시오.