react storybook addon chapters

⛔ [veraltet] Dieses Addon wird nicht mehr aufrechterhalten und wird nun zugunsten der nativen Verschachtung und Komponentenhierarchie von Storybook als veraltet angesehen. Wir empfehlen stattdessen, Storybook Version 6 zu verwenden.

React Storybook -Kapitel Addon

React Storybook Chapters Addon ermöglicht die Präsentation mehrerer Komponenten in einer Geschichte, indem es in kleinere Kategorien (Kapitel) und Unterkategorien (Abschnitte) für mehr organisatorische Güte zerlegt wird.

Mit dem Addon kann eine Geschichte aus mehreren Kapiteln bestehen und ein Kapitel besteht aus mehreren Abschnitten. Jeder Abschnitt kann einen Codeblock rendern, der typischerweise verwendet wird, um eine Komponente oder einen bestimmten Zustand einer Komponente zu präsentieren.

Kapitel können verwendet werden, um verwandte Komponenten zusammen zu gruppieren oder unterschiedliche Zustände einer Komponente zu zeigen. Jedes Kapitel enthält einen Kapitel -Titel , einen Untertitel von Kapitel , Kapitelinformationen und eine Liste von Abschnitten . Lassen Sie einfach einen von ihnen aus, um sie vor dem Rendern zu verstecken.

Jeder Abschnitt verfügt über einen Abschnittstitel , Abschnitt Untertitel , Abschnitt Info .

Dieses Addon wurde aus React-Storybook-Addon-Info modifiziert und verwendet einige der Komponentencode von dort.

Verwendung

Installieren Sie das folgende NPM -Modul:

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

Stellen Sie dann das Addon an der Stelle ein, an der Sie das Storybook so konfigurieren:

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

setAddon ( chaptersAddon ) ;

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

Um die Standardstile auszuschalten, fügen Sie hinzu:

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

Alle gerenderten Komponenten haben eine bestimmte Klasse. Mit dem "UseScheme", der auf False gesetzt ist, sollten Sie kein Problem damit haben, Ihre Kapitel zu stylen.

Erstellen Sie dann Ihre Geschichten mit der 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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Schauen Sie sich diese Beispielgeschichten an, um mehr über die addWithChapters -API zu erfahren.

Globale Optionen

Um Standardoptionen für alle Kapitelabschnitte ( section.options ) zu konfigurieren, verwenden Sie setDefaults in .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 ) ; 

Konfigurationsformat

Geschichte

Schlüssel	Beschreibung	Typ	Standard
Untertitel	Story Untertitel	Saite	- -
Info	Zusätzliche Informationen für die Geschichte	String (Markdown)	- -
Kapitel	Eine Reihe von Kapitelobjekten	Array	- -

Kapitel

Schlüssel	Beschreibung	Typ	Standard
Titel	Kapitel Titel	Saite	- -
Untertitel	Kapitel Untertitel	Saite	- -
Info	Zusätzliche Informationen für das Kapitel	String (Markdown)	- -
Abschnitte	Eine Reihe von Abschnittsobjekten	Array	- -

Abschnitt

Schlüssel	Beschreibung	Typ	Standard
Titel	Abschnittstitel	Saite	- -
Untertitel	Abschnitt Untertitel	Saite	- -
Info	Zusätzliche Informationen für den Abschnitt	String (Markdown)	- -
Abschnitt	Eine Funktion, die eine zu angezeigte React -Komponente zurückgibt	Funktion	- -
Optionen	Ein Konfigurationsobjekt für diesen Abschnitt. Beziehen Sie sich auf die nächsten Zeilen für die Schlüssel	Objekt	- -
options.showsource	Zeigen Sie die Quelle der Komponente an	Boolean	WAHR
Optionen.AllowSourcetoggling	Ermöglichen Sie das Anzeigen/Verstecken der Quelle der Komponente	Boolean	WAHR
options.showProptables	Zeigen Sie die ProTtypen der Komponente an	Boolean	FALSCH
Optionen.AllowProptablestoggling	Zeigen/Versteck der ProTtype der Komponente zulassen	Boolean	WAHR
Optionen.Dekorator	Eine optionale Dekorationsfunktion, die zum Rendern der Komponente im Abschnitt verwendet wird	Funktion	- -

Die FAQ

Komponenten verlieren ihre Namen im statischen Build

Komponentennamen werden beim Erstellen der Produktion auch mit anderen JavaScript -Code abgebaut. Legen Sie beim Erstellen von Komponenten die statische Eigenschaft displayName fest, um den richtigen Komponentennamen für statische Builds anzuzeigen.