[PLASMA-3849]: Работа с draft конфигурациями компонентов в `finportal-draft`

Yakutoc commented 2 weeks ago

What/why changed

Задача

Нужно вносить изменения в конфигурации компонентов, но нельзя чтобы они

протекали в текущие реализации
были доступны только в storybook для проверки

Решение

Создаем дубликат конфигурации компонент, например для компонента - Badge.config.draft.ts.

ИМХО c таким подходом

все изменения изолированы
находятся рядом с родными компонентами
малый шанс сделать ошибку и не внести изменения в draft когда меняется основной конфиг

На уровне сборки storybook в файле main.ts объявляем флаг IS_DRAFT:

define: {
     'import.meta.env.IS_DRAFT': process.env.IS_DRAFT || false,
},

и когда мы хотим собрать/посмотреть в storybook компонент с draft конфигурацией то вызываем storybook:draft

Под капотом команды лежит

"IS_DRAFT=true storybook dev -p ${PORT:-7007} -c .storybook",

Теперь в в самой stories вносим изменения

import { badgeConfig } from '@salutejs/plasma-new-hope/styled-components';

// Метод чтобы понять черновки или нет
import { hasComponentDraftConfig } from '../../helpers/hasComponentDraftConfig';
// Метод который собирает компонент на основе конфигураций
import { createComponentByConfig } from '../../helpers/createComponentByConfig';

import { config as defaultConfig } from './Badge.config';
import { config as draftConfig } from './Badge.config.draft';

const config = hasComponentDraftConfig() ? draftConfig : defaultConfig;

// Конечный компонент
const Badge = createComponentByConfig(badgeConfig, config);

...

Build

Результат build кладем в директорию build-sb-draft на уровне пакета

Deploy

Результат build-sb-draft кладем в директорию {название пакета}-draft-storybook на наш сайт

Примечания:

Изменения для CI будут в отдельном PR Изменения для комнентов будут в отдельном PR's

Как пример можно глянуть в песочнице - https://github.com/Yakutoc/plasma-dev-stage/actions/runs/11735924904?pr=32

Примеры для компонента Badge

https://plasma.sberdevices.ru/pr/pr-32/sdds-finportal-storybook/?path=/story/content-badge--default

https://plasma.sberdevices.ru/pr/pr-32/sdds-finportal-draft-storybook/?path=/story/content-badge--default

Codesandbox

https://codesandbox.io/p/sandbox/plasma-sdds-serv-example-forked-t2gc9z

📦 Published PR as canary version: Canary Versions

:sparkles: Test out this PR locally via: ```bash npm install @salutejs/sdds-finportal@0.168.1-canary.1524.11908718187.0 # or yarn add @salutejs/sdds-finportal@0.168.1-canary.1524.11908718187.0 ```

github-actions[bot] commented 2 weeks ago

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1524/

github-actions[bot] commented 2 weeks ago

Documentation preview deployed!

website:https://plasma.sberdevices.ru/pr/pr-1524/ sdds-finportal storybook: https://plasma.sberdevices.ru/pr/pr-1524/sdds-finportal-storybook/

salute-developers / plasma