Storybook es una biblioteca de interfaz de usuario que se puede usar para documentar componentes que es popular en el área de interfaz de usuario durante bastante tiempo. La mayoría de las veces es posible que tengamos que personalizar nuestro libro de cuentos para que coincida con la marca del cliente. Este blog habla sobre cómo personalizar tu libro de cuentos.

Comenzaré con la tematización directamente suponiendo que haya creado sus historias. Si es nuevo en el libro de cuentos, vaya al siguiente enlace para leer más sobre cómo escribir cuentos.

El primer paso es asegurarse de que ha instalado @storybook/addonsy @storybook/themingpaquetes. Ejecute el siguiente comando si no lo ha hecho.

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

Por ejemplo, intentemos cambiar el tema del libro de cuentos a oscuro (Storybook siempre tiene un tema claro de forma predeterminada).

Agregue el manager.jsarchivo a la .storybookcarpeta.

// .storybook/manager.js

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

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

Ahora agreguemos más estilos.

Vamos a crear un archivo llamado myTheme.jsy .storybookagregar todos nuestros estilos allí.

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

Eso es todo. Encontrará el enlace al repositorio de git aquí .

Referencias:

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