react storybook addon chapters

⛔ [Depreciado] Este addon não é mais mantido e agora é considerado depreciado em favor da hierarquia de nidificação e componentes nativos do livro de histórias. Recomendamos que a versão 6 do livro de histórias seja usada.

React Capítulos do livro de histórias Addon

Os capítulos do React Storybook Addon permitem a exibição de vários componentes dentro de uma história dividindo -o em categorias menores (capítulos) e subcategorias (seções) para obter mais bondade organizacional.

Usando o addon, uma história pode consistir em vários capítulos e um capítulo consiste em várias seções. Cada seção pode renderizar um bloco de código, que normalmente usado para mostrar um componente ou um estado específico de um componente.

Os capítulos podem ser usados ​​para agrupar componentes relacionados ou mostrar estados variados de um componente. Cada capítulo vem com um título do capítulo , legenda do capítulo , informações do capítulo e uma lista de seções . Basta omitir qualquer um deles para escondê -los da renderização.

Cada seção vem com um título de seção , legenda da seção , informação da seção .

Este addon foi modificado do React-StoryBook-Addon-Info e usa parte do código do componente a partir daí.

Uso

Instale o seguinte módulo NPM:

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

Em seguida, defina o addon no local em que você configura o Storybook como este:

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

setAddon ( chaptersAddon ) ;

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

Para desligar os estilos padrão, adicione:

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

Todos os componentes renderizados têm uma classe especificada. Com o 'USetheme' definido como False, você não deve ter problemas para modelar seus capítulos.

Em seguida, crie suas histórias com a API .addWithChapters .

 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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Dê uma olhada neste exemplo de histórias para saber mais sobre a API addWithChapters .

Opções globais

Para configurar as opções padrão para todas as seções de capítulo ( section.options ), use setDefaults no .storybook/config.js .

 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 ) ; 

Formato de configuração

História

Chave	Descrição	Tipo	Padrão
Legenda	Legenda da história	Corda	-
informações	Informações adicionais para a história	String (Markdown)	-
capítulos	Uma variedade de objetos de capítulo	Variedade	-

Capítulo

Chave	Descrição	Tipo	Padrão
título	Título do capítulo	Corda	-
Legenda	Legenda do capítulo	Corda	-
informações	Informações adicionais para o capítulo	String (Markdown)	-
seções	Uma variedade de objetos de seção	Variedade	-

Seção

Chave	Descrição	Tipo	Padrão
título	Título da seção	Corda	-
Legenda	Legenda da seção	Corda	-
informações	Informações adicionais para a seção	String (Markdown)	-
Seção	Uma função que retorna um componente react a ser exibido	Função	-
opções	Um objeto de configuração para esta seção. Consulte as próximas linhas para as chaves	Objeto	-
options.showsource	Exibir a fonte do componente	Booleano	Verdadeiro
Options.allowsourceTogGling	Permitir mostrar/ocultar a fonte do componente	Booleano	Verdadeiro
options.showProptables	Exibir os sinais de soma do componente	Booleano	Falso
options.allowProptableStogGling	Permitir mostrar/ocultar os prectipos do componente	Booleano	Verdadeiro
options.Decorator	Uma função de decorador opcional que será usada para renderizar o componente na seção	Função	-

A FAQ

Os componentes perdem seus nomes na construção estática

Os nomes dos componentes também são ministrados com outro código JavaScript ao criar para produção. Ao criar componentes, defina a propriedade displayName Static para mostrar o nome do componente correto em construções estáticas.