Я большой поклонник автоматически создаваемой документации.
Сегодня я хочу показать вам документацию Storybook. Storybook замечателен тем, что позволяет вам вести самостоятельную разработку в песочнице. Никаких зависимостей. Никакого ожидания бэкенда. Только код. Это также хорошая документация. Она может показать менеджерам продукта, какие компоненты доступны для использования, чтобы они не изобретали колесо для каждого макета.
Весь упомянутый код можно найти в моем репозитории remotify.
Установка storybook
Это просто: выполните npx sb init в корне проекта.
Дополнительно я рекомендую установить storybook essentials (npm i -D @storybook/addon-essentials), который собирает все необходимые аддоны.
Теперь вам нужно перейти к файлу .storybook/main.js и добавить аддон essentials так, чтобы он выглядел примерно следующим образом:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-essentials',
],
...
Теперь выполните npm run storybook и посмотрите результаты в браузере. У вас уже должно быть несколько предварительно сгенерированных историй.
Настройка для TypeScript docs
Начиная с версии 6 Storybook не требуется никакой конфигурации.
Так и есть 🙂
Единственное, о чем вы должны позаботиться, это объявить компонент в экспорте по умолчанию.
export default {
title: 'EditToolbar',
decorators: [ComponentDecorator],
component: EditToolbar, // <-- important
Настройте storybook docs
Если у вас еще нет этого в package.json, добавьте следующие строки в часть «scripts».
"storybook-docs": "start-storybook --docs --no-manager-cache",
"build-storybook-docs": "build-storybook --docs -o ./docs",
Теперь запустите storybook docs командой npm run storybook-docs. Браузер должен открыться, и вы увидите несколько историй.
Поскольку у меня уже есть несколько историй в моем проекте remotify, для меня это выглядит так:
Теперь выполните вторую команду для создания документации. Затем зафиксируйте файлы и выложите их на github.
Активируйте страницы Github
Откройте ваш проект github в браузере и перейдите в раздел Settings -> Pages. Там активируйте github pages и выберите вашу основную ветку и папку docs, которую вы ранее создали и опубликовали.
Теперь вы должны иметь возможность видеть документацию в браузере.
Для remotify вы можете найти документацию здесь.
Я также активировал пользовательский домен прямо под выбором ветки, который я назвал docs.remotify.place.
Счастливого создания историй 🙂