react storybook addon chapters

⛔ [устарело] Этот аддон больше не поддерживается и в настоящее время считается устаревшим в пользу родной иерархии в гнездовании и компонентах рассказов. Мы рекомендуем вместо этого использовать версию Storybook версии 6.

Реакция главах рассказов Аддон

Редакция главах рассказов Addon позволяет демонстрировать несколько компонентов в истории, разбивая его на более мелкие категории (главы) и подкатегории (разделы) для большей организационной доброты.

Используя аддон, история может состоять из нескольких глав, а глава состоит из нескольких разделов. Каждый раздел может отображать блок кода, который обычно используется для демонстрации одного компонента или определенного состояния компонента.

Главы могут быть использованы для объединения составных компонентов или показывать различные состояния компонента. Каждая глава поставляется с заголовком главы , подзаголовок главы , информацией о главе и списком разделов . Просто опустите любой из них, чтобы скрыть их от рендеринга.

Каждый раздел поставляется с заголовком раздела , подзаголовок раздела , информация о разделе .

Этот аддон был изменен из Reactstorybook-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», установленным на ложь, у вас не должно быть проблем с стилем ваших глав.

Затем создайте свои истории с 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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Посмотрите на этот пример истории, чтобы узнать больше об API addWithChapters .

Глобальные варианты

Чтобы настроить параметры по умолчанию для всех разделов главы ( section.options ), используйте setDefaults в .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 ) ; 

Формат конфигурации

История

Ключ	Описание	Тип	По умолчанию
подзаголовок	Сюжетный субтитры	Нить	-
информация	Дополнительная информация для истории	Строка (Markdown)	-
главы	Множество объектов главы	Множество	-

Глава

Ключ	Описание	Тип	По умолчанию
заголовок	Название главы	Нить	-
подзаголовок	Глава субтитров	Нить	-
информация	Дополнительная информация для главы	Строка (Markdown)	-
разделы	Массив объектов секции	Множество	-

Раздел

Ключ	Описание	Тип	По умолчанию
заголовок	Раздел заголовок	Нить	-
подзаголовок	Секция субтитров	Нить	-
информация	Дополнительная информация для раздела	Строка (Markdown)	-
SectionFn	Функция, которая возвращает отображение компонента React	Функция	-
параметры	Объект конфигурации для этого раздела. Обратитесь к следующим нескольким рядам для ключей	Объект	-
Options.showsource	Показать источник компонента	Логический	Истинный
Options.allowsourcetoggling	Разрешить показывать/скрывать источник компонента	Логический	Истинный
Options.showproptables	Отображать проптип компонента	Логический	ЛОЖЬ
Options.AllowPropTabLeStoggling	Разрешить показывать/скрывать проптип компонента	Логический	Истинный
Options.Decorator	Дополнительная функция декоратора, которая будет использоваться для рендеринга компонента в разделе	Функция	-

FAQ

Компоненты теряют свои имена на статической сборке

Название компонентов также получают мини -код с другим кодом JavaScript при создании для производства. При создании компонентов установите свой свойство displayName , чтобы показать правильное имя компонента на статических сборках.