Генерация нобов для Storybook из TS-типов.md

Используемые библиотеки:

• react-docgen-typescript-loader для генерации документации
• addon-smart-knobs для автогенерации нобов
• Отображение документации по просам:
  • storybook-addon-react-docgen — на табе Props
  • @storybook/addon-info — под компонентом или в попапе
  • @storybook/addon-docs — на вкладке Docs

Настройка

• Лоадер

   withDocgen && {
   	loader: 'react-docgen-typescript-loader',
   	options: {
   		compilerOptions: {
   			...require('./tsconfig.json').compilerOptions,
   			strict: false,
   		},
   		shouldExtractLiteralValuesFromEnum: true,
   	},
   }

  • Подключаем лоадер только для сторибука (и в дев, и в прод-режимах)
  • Добавляем в compilerOptions strict: false, чтобы к типам опциональных пропсов не добавлялось | undefined
  • shouldExtractLiteralValuesFromEnum, чтобы енамы и юнионы конвертировались в react-docgen-енамы
• Смарт-нобы

   import { withSmartKnobs } from 'storybook-addon-smart-knobs'
   
   storiesOf('components/MyComponent', module)
   	.addDecorator(withSmartKnobs())
   	.add('interactive', () => <MyComponent />)

Альтернативный способ генерации документации

• babel-plugin-react-docgen — из propTypes компонента или Flow-типов (TS этот плагин тоже поддерживает, но с ограничениями)

Известные проблемы

• Импортированные типы становятся any

   import { Type } from './other-file'
   type Props = {
   	type: Type, // в документации отобразится как any, ноб не сгенерится
   }

• Не генерятся нобы для именованных типов объектов

   type Data = { a: number, b: string }
   type Props = {
   	data: Data, // в документации отобразится как Data, ноб не сгенерится
   }

• Библиотека смарт-нобов умеет генерить нобы-экшены для пропсов-функций, но для этого нужно не передавать проп в стори. TS на это будет ругаться, так что проще добавлять нобы-экшены самому.
• Если для пропа хочется указать другой ноб (например, ноб date для number-поля в милисекундах), то нужно исключить этот проп из автогенерации нобов:

   .addDecorator(withSmartKnobs({
   	ignoreProps: ['propNameToIgnore'],
   }))

Отладка

• Посмотреть сгенерированную документацию можно в js-исходниках: документация записывается в поле __docgenInfo каждого компонента