Для create-react-app можно использовать команду $ npm install --save react-styleguidist
Для отдельной установки $ npm install --save-dev react-styleguidist
Установить как dev dependency $ yarn add react-styleguidist -D
В packaje.json можно добавить скрипты:
"scripts": {
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build"
}
По умолчанию на главную Стайлгайда добавляются все компоненты, кроме описанных исключений выше. Если у компонента в папке есть т.н. "примеры" с именем - Readme.md или ИмяКомпонента.md, то компонент описывается с учетом этих примеров, то есть с указанием props, редактором и возможностью добавить другие компоненты.
Соответственно, для каждого компонента разумно сделать одноименную директорию/папку, либо создать отдельную папку для всей документации (тогда нужно будет вручную указывать путь для каждого .md примера).
При добавлении нового компонента сервер придётся остановить и запустить заново для отображения.
По умолчанию компоненты ищутся в src/components/**/*.{js,jsx,ts,tsx}, игнорируя папку tests и .test.js .test.tsx и проч.
Поведение описано в файле конфигурации styleguide.config.js
Опция skipComponentsWithoutExample: true (по умолчанию false), позволяет пропустить компоненты без примеров (About.md ComponentName.md)
Чтобы исключить компонент, в файле конфигураций можно указать опцию ignore:
module.exports = {
ignore: ['/*.spec.js', '/components/Button.js'] // игнорирует компонент Button и все файлы с префиксом scec.
}
Структура документации может быть описана в файле конфигурации. Подробнее
При описании sections в файле конфигурации, автоматический подбор компонентов прекращается, их нахождение нужно указать вручную.