Storybook — это библиотека пользовательского интерфейса, которую можно использовать для документирования компонентов, которая уже довольно давно популярна во внешнем интерфейсе. В большинстве случаев нам, возможно, придется настроить нашу книгу рассказов, чтобы она соответствовала брендингу клиента. В этом блоге рассказывается о том, как настроить сборник рассказов.

Я начну с тематики, предполагая, что вы создали свои истории. Если вы новичок в сборнике рассказов, перейдите по ссылке ниже, чтобы узнать больше о том, как писать рассказы.

Первый шаг — убедиться, что вы установили @storybook/addonsи установили @storybook/themingпакеты. Запустите приведенную ниже команду, если вы этого не сделали.

yarn add --dev @storybook/addons @storybook/theming

Например, давайте попробуем изменить тему сборника рассказов на темную (по умолчанию у сборника рассказов всегда светлая тема).

Добавьте manager.jsфайл в .storybookпапку.

// .storybook/manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

Теперь давайте добавим больше стилей.

Создадим файл с именем myTheme.jsin .storybookи добавим туда все наши стили.

// .storybook/YourTheme.js

import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorPrimary: 'white',
  colorSecondary: '#A4D87B',

  // UI
  appBg: 'white',
  appContentBg: '#E5ECE0',
  appBorderColor: 'grey',
  appBorderRadius: 6,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'black',
  barBg: '#A4D87B',

  // Form colors
  inputBg: 'white',
  inputBorder: '#4B9611',
  inputTextColor: 'black',
  inputBorderRadius: 6,

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://i.postimg.cc/pLp2tZjx/icons8-green-64.png',
  brandTarget: '_self',
});

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import myTheme from './myTheme';

addons.setConfig({
  theme: myTheme,
});

Это все. Ссылку на репозиторий git вы найдете здесь .

Использованная литература:

1. https://storybook.js.org/docs/react/configure/theming