O Storybook é uma biblioteca de interface do usuário que pode ser usada para documentar componentes que são populares na área de front-end há algum tempo. Na maioria das vezes, podemos ter que personalizar nosso livro de histórias para combinar com a marca do cliente. Este blog fala sobre como personalizar seu livro de histórias.

Vou começar com temas diretamente, assumindo que você criou suas histórias. Se você é novo no livro de histórias, acesse o link abaixo para ler mais sobre como escrever histórias.

A primeira etapa é certificar-se de que você instalou @storybook/addonse @storybook/themingpackages. Execute o comando abaixo se você não tiver.

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

Por exemplo, vamos tentar mudar o tema do livro de histórias para escuro (o livro de histórias sempre tem um tema claro por padrão).

Adicione o manager.jsarquivo à .storybookpasta.

// .storybook/manager.js

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

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

Agora vamos adicionar mais estilos.

Vamos criar um arquivo chamado myTheme.jsin .storybooke adicionar todos os nossos estilos lá.

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

Isso é tudo. Você encontrará o link para o repositório git aqui .

Referências:

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