Storybook adalah library UI yang dapat digunakan untuk mendokumentasikan komponen yang cukup populer di area front-end. Sering kali kami mungkin harus menyesuaikan buku cerita kami agar sesuai dengan branding klien. Blog ini berbicara tentang cara menyesuaikan buku cerita Anda.

Saya akan mulai dengan tema langsung dengan asumsi Anda telah membuat cerita Anda. Jika Anda baru mengenal buku cerita, silakan buka tautan di bawah ini untuk membaca lebih lanjut tentang cara menulis cerita.

Langkah pertama adalah memastikan bahwa Anda telah menginstal @storybook/addonsdan @storybook/themingmengemasnya. Jalankan perintah di bawah ini jika belum.

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

Misalnya, mari coba ubah tema buku cerita menjadi gelap (Buku cerita selalu memiliki tema terang secara default).

Tambahkan manager.jsfile ke .storybookfolder.

// .storybook/manager.js

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

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

Sekarang mari tambahkan lebih banyak gaya.

Mari buat file bernama dan tambahkan semua gaya kita di sana myTheme.js..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,
});

Itu saja. Anda akan menemukan tautan ke repositori git di sini .

Referensi:

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