@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] },
  },
};