react storybook addon chapters

⛔ [déprécié] Cet addon n'est plus maintenu et est maintenant considéré comme déprécié en faveur de la nidification indigène de Storybook et de la hiérarchie des composants. Nous recommandons à la version 6 de la version 6 de Storybook.

React CHEPTEURS CHEMPTES ADDON

React Storybook Chapters Addon permet de présenter plusieurs composants dans une histoire en le décomposant en catégories (chapitres) et sous-catégories (sections) plus petites pour plus de bonté organisationnelle.

En utilisant l'addon, une histoire peut être composée de plusieurs chapitres et un chapitre se compose de plusieurs sections. Chaque section peut rendre un bloc de code, qui utilise généralement pour présenter un composant ou un état particulier d'un composant.

Les chapitres peuvent être utilisés pour regrouper les composants associés ou afficher des états variables d'un composant. Chaque chapitre est livré avec un titre de chapitre , un sous-titre du chapitre , des informations de chapitre et une liste de sections . Omettez simplement l'un d'eux pour les cacher du rendu.

Chaque section est livrée avec un titre de section , un sous-titre de section , des informations de section .

Cet addon a été modifié à partir de React-StoryBook-Addon-Info et utilise une partie du code de composant à partir de là.

Usage

Installez le module NPM suivant:

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

Ensuite, définissez l'addon à l'endroit où vous configurez un livre de contes comme ceci:

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

setAddon ( chaptersAddon ) ;

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

Pour désactiver les styles par défaut, ajoutez:

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

Tous les composants rendus ont une classe spécifiée. Avec le «Usethème» réglé sur False, vous ne devriez avoir aucun problème à styliser vos chapitres.

Créez ensuite vos histoires avec l'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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Jetez un œil à cet exemple d'histoires pour en savoir plus sur l'API addWithChapters .

Options mondiales

Pour configurer les options par défaut pour toutes les sections de chapitre ( section.options ), utilisez setDefaults dans .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 ) ; 

Format de configuration

Histoire

Clé	Description	Taper	Défaut
sous-titre	Sous-titre d'histoire	Chaîne	-
informations	Informations supplémentaires pour l'histoire	String (Markdown)	-
chapitres	Un tableau d'objets de chapitre	Tableau	-

Chapitre

Clé	Description	Taper	Défaut
titre	Titre de chapitre	Chaîne	-
sous-titre	Sous-titre de chapitre	Chaîne	-
informations	Informations supplémentaires pour le chapitre	String (Markdown)	-
sections	Un tableau d'objets de section	Tableau	-

Section

Clé	Description	Taper	Défaut
titre	Titre de la section	Chaîne	-
sous-titre	Sous-titre de section	Chaîne	-
informations	Informations supplémentaires pour la section	String (Markdown)	-
sectionfn	Une fonction qui renvoie un composant React à afficher	Fonction	-
options	Un objet de configuration pour cette section. Reportez-vous aux prochaines lignes pour les clés	Objet	-
options.showsource	Afficher la source du composant	Booléen	Vrai
options.AllowsourceToggling	Autoriser la diffusion / cacher de la source du composant	Booléen	Vrai
options.showproptables	Afficher les propypes du composant	Booléen	FAUX
options.	Autoriser la diffusion / se cacher des propypes de la composante	Booléen	Vrai
Options.decorator	Une fonction de décorateur en option qui sera utilisée pour rendre le composant dans la section	Fonction	-

La FAQ

Les composants perdent leurs noms sur la construction statique

Les noms de composants sont également minifiés avec un autre code JavaScript lors de la construction pour la production. Lors de la création de composants, définissez la propriété statique displayName pour afficher le nom du composant correct sur les versions statiques.