Storybook est une bibliothèque d'interface utilisateur qui peut être utilisée pour documenter des composants populaires dans le domaine frontal depuis un certain temps. La plupart du temps, nous devrons personnaliser notre livre d'histoires pour qu'il corresponde à l'image de marque du client. Ce blog explique comment personnaliser votre livre de contes.

Je vais commencer par la thématisation en supposant que vous avez créé vos histoires. Si vous êtes nouveau dans le livre d'histoires, veuillez cliquer sur le lien ci-dessous pour en savoir plus sur la façon d'écrire des histoires.

La première étape consiste à vous assurer que vous avez installé @storybook/addonset les @storybook/themingpackages. Exécutez la commande ci-dessous si vous ne l'avez pas fait.

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

Par exemple, essayons de changer le thème du livre de contes en sombre (Storybook a toujours un thème clair par défaut).

Ajoutez le manager.jsfichier au .storybookdossier.

// .storybook/manager.js

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

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

Ajoutons maintenant plus de styles.

Créons un fichier appelé myTheme.jsin .storybooket ajoutons-y tous nos styles.

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

C'est tout. Vous trouverez le lien vers le dépôt git ici .

Références:

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