react storybook addon chapters

⛔ [Depreciado] Este complemento ya no se mantiene y ahora se considera en favor de la anidación nativa y la jerarquía de componentes de Storybook. Recomendamos que Storybook versión 6 se use en su lugar.

React Storybook Chapters Addon

React Storybook Chapters Addon permite la exhibición de múltiples componentes dentro de una historia dividiéndola en categorías (capítulos) y subcategorías (secciones) más pequeñas para una mayor bondad organizacional.

Usando el complemento, una historia puede consistir en múltiples capítulos y un capítulo consta de múltiples secciones. Cada sección puede representar un bloque de código, que generalmente se usa para mostrar un componente o un estado particular de un componente.

Los capítulos se pueden utilizar para agrupar componentes relacionados, o mostrar estados variables de un componente. Cada capítulo viene con un título de capítulo , subtítulo del capítulo , información del capítulo y una lista de secciones . Simplemente omita cualquiera de ellos para que los oculten de la representación.

Cada sección viene con un título de sección , subtítulo de sección , información de sección .

Este complemento se modificó de React-Storybook-Addon-Info y utiliza parte del código de componentes desde allí.

Uso

Instale el siguiente módulo NPM:

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

Luego establezca el complemento en el lugar que configure el libro de cuentos 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 apagar los estilos predeterminados Agregar:

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

Todos los componentes renderizados tienen una clase específica. Con el 'Usetheme' establecido en falso, no debería tener problemas para diseñar sus capítulos.

Luego cree sus historias con la 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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Eche un vistazo a estas historias de ejemplo para obtener más información sobre la API addWithChapters .

Opciones globales

Para configurar las opciones predeterminadas para todas las secciones de capítulos ( section.options ), use setDefaults en .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 configuración

Historia

Llave	Descripción	Tipo	Por defecto
subtitular	Subtítulo de la historia	Cadena	-
información	Información adicional para la historia	String (Markdown)	-
capítulos	Una variedad de objetos del capítulo	Formación	-

Capítulo

Llave	Descripción	Tipo	Por defecto
título	Título del capítulo	Cadena	-
subtitular	Subtítulo del capítulo	Cadena	-
información	Información adicional para el capítulo	String (Markdown)	-
secciones	Una matriz de objetos de sección	Formación	-

Sección

Llave	Descripción	Tipo	Por defecto
título	Título de sección	Cadena	-
subtitular	Sección Subtítulo	Cadena	-
información	Información adicional para la sección	String (Markdown)	-
Sección FN	Una función que devuelve un componente React para mostrar	Función	-
opción	Un objeto de configuración para esta sección. Consulte las siguientes filas para las teclas	Objeto	-
opciones. Showsurce	Muestra la fuente del componente	Booleano	Verdadero
opciones.	Permitir/ocultar la fuente del componente	Booleano	Verdadero
opciones.showProptables	Muestra los proptypes del componente	Booleano	FALSO
opciones.	Permitir/ocultar las proptetas del componente	Booleano	Verdadero
opciones. Decorador	Una función de decoración opcional que se utilizará para representar el componente en la sección	Función	-

Las preguntas frecuentes

Los componentes pierden sus nombres en la construcción estática

Los nombres de los componentes también se minifican con otro código JavaScript cuando se construyen para la producción. Al crear componentes, configure la propiedad estática displayName para mostrar el nombre del componente correcto en las compilaciones estáticas.