@cloud-ru/ft-storybook-brand-addon v1.1.1

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

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

Usage

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 CloudBrandThemes from '@cloud-ru/figma-tokens-cloud-platform/build/css/brand.module.css';
import MLSpaceBrandThemes from '@cloud-ru/figma-tokens-mlspace/build/css/brand.module.css';
import DefaultBrandThemes from '@cloud-ru/figma-tokens/build/css/brand.module.css';

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

const defaultBrandMap = {
  [Brand.Default]: DefaultBrandThemes,
  [Brand.Cloud]: CloudBrandThemes,
  [Brand.MLSpace]: MLSpaceBrandThemes,
}

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.Cloud]: '#69ce86',
      [Brand.MLSpace]: '#a69dfa',
    },
  },
  [DEFAULT_BRAND]: {
    name: 'Brand Default',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.Default] },
  },
  [Brand.Cloud]: {
    name: 'Brand Cloud',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.Cloud] },
  },
  [Brand.MLSpace]: {
    name: 'Brand MLSpace',
    description: '',
    defaultValue: { ...defaultBrandMap[Brand.MLSpace] },
  },
};