Storybook to biblioteka interfejsu użytkownika, która może być używana do dokumentowania komponentów, która jest popularna w obszarze front-end od dłuższego czasu. W większości przypadków możemy być zmuszeni dostosować nasz storybook, aby pasował do brandingu klienta. Ten blog mówi o tym, jak dostosować swoją książeczkę.

Zacznę od motywowania bezpośrednio, zakładając, że stworzyłeś swoje historie. Jeśli jesteś nowy w książeczce, przejdź do poniższego łącza, aby dowiedzieć się więcej o tym, jak pisać historie.

Pierwszym krokiem jest upewnienie się, że masz zainstalowane @storybook/addonsi @storybook/themingpakiety. Uruchom poniższe polecenie, jeśli jeszcze tego nie zrobiłeś.

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

Na przykład spróbujmy zmienić motyw książeczki na ciemny (domyślnie Storybook zawsze ma jasny motyw).

Dodaj manager.jsplik do .storybookfolderu.

// .storybook/manager.js

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

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

Teraz dodajmy więcej stylów.

Stwórzmy plik o nazwie myTheme.jsin .storybooki dodajmy tam wszystkie nasze style.

// .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,
});

To wszystko. Link do repozytorium git znajdziesz tutaj .

Bibliografia:

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