@cloud-ru/ft-storybook-brand-addon

Пакет для переключения между темами брендов

用法

npm i @cloud-ru/ft-storybook-brand-addon


// .storybook/main.js в массив addons добавить запись
addons: [
    '@cloud-ru/ft-storybook-brand-addon',
    ...другие аддоны
]

// preview.ts в массив decorators добавить запись
decorators: [
    'withBrand',
    ...другие декораторы
]

在 preview.ts 中設定全域變數的預設值

• PARAM_KEY（品牌名稱 - 例如使用常數 DEFAULT_BRAND），
• PARAM_COLOR_MAP_KEY（帶有顏色提示的可用品牌列表）
• DEFAULT_BRAND（淺色和深色主題的類別名稱）
• 與 DEFAULT_BRAND 格式相同的其他品牌

// preview.ts
import {PARAM_KEY, PARAM_COLOR_MAP_KEY, DEFAULT_BRAND} from '@cloud-ru/ft-storybook-brand-addon';
import DefaultBrandThemes from '@cloud-ru/figma-tokens/build/css/brand.module.css';
import BrandTheme1 from 'some-theme-package1/theme.css';
import BrandTheme2 from 'some-theme-package2/theme.css';

enum Brand {
  Default = 'Default', // либо = [DEFAULT_BRAND]
  Brand1 = 'Brand1',
  Brand2 = 'Brand2',
}

const defaultBrandMap = {
  [Brand.Default]: DefaultBrandThemes,
  [Brand.Brand1]: BrandTheme1,
  [Brand.Brand2]: BrandTheme2,
}

const globalTypes = {
  [PARAM_KEY]: {
    name: 'Brand',
    description: 'Changing brands',
    defaultValue: DEFAULT_BRAND,
  },
  [PARAM_COLOR_MAP_KEY]: {
    name: 'Brand Map with Colors',
    description: 'Map of color for brands list',
    defaultValue: {
      [Brand.Default]: '#95cdf3',
      [Brand.Brand1]: '#69ce86',
      [Brand.Brand2]: '#a69dfa',
    },
  },
  [DEFAULT_BRAND]: {
    name: 'Brand Default',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.Default] },
  },
  [Brand.Brand1]: {
    name: 'Brand 1',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.Brand1] },
  },
  [Brand.Brand2]: {
    name: 'Brand 2',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.Brand2] },
  },
};