[FRNT-592] feat: implement level decrement

[rchubarkin]

Уменьшение уровня

Реализовано через css селекторы

API

<div {...levelDowngrade.wrapperProps()}>
  <div {...levelDowngrade.props({ diff: 2 })}>
    Level = Level - 2
  </div>
</div>

Что в итоговой верстке выглядит

<div data-woly-component-level-downgrade-wrapper>
  <div data-woly-component-level-downgrade="2">
    Level = Level - 2
  </div>
</div>

Селекторы

В скоупе с data-woly-component-level-downgrade-wrapper мы создаем временные переменные, в которых хранятся все возможные уменьшенные значения текущего уровня (level - 1, level -2, level -3). (Делается JS функциями, примеры далее - итоговый css)

[data-woly-component-level-downgrade-wrapper] {
    --woly-component-level-temp-1: max(calc(var(--woly-component-level) - 1),0);
    --woly-component-level-temp-2: max(calc(var(--woly-component-level) - 2),0);
    --woly-component-level-temp-3: max(calc(var(--woly-component-level) - 3),0);
    --woly-component-level-temp-4: max(calc(var(--woly-component-level) - 4),0);
    --woly-component-level-temp-5: max(calc(var(--woly-component-level) - 5),0);
    --woly-component-level-temp-6: max(calc(var(--woly-component-level) - 6),0);
}

Для каждого значения атрибута data-woly-component-level-downgrade пишем селектор следующего вида. Он позволяет нам записать в уровень необходимую нам временную переменную, которая инициализирована в родительском элементе

[data-woly-component-level-downgrade-wrapper] > [data-woly-component-level-downgrade='2'] {
  --woly-component-level: var(--woly-component-level-temp-2);
}

Global

Описанные выше селекторы не относятся ни к одному из компонентов, это стили, которые должны быть чтобы дизайн система работала корректно. Это не относится к конфигам, которые пользователь может настроить, как например палитры.

Отсюда напрашиватеся компонент Global, который мы экспортируем наружу и расширяем при настройке woly.

import styled from 'styled-components';
import { levelDowngradeCss } from 'lib/level-downgrade';

export const WolyGlobalStyles = styled.div`
  ${levelDowngradeCss}
`;

Где-то в локальном проекте

// App.tsx
import { WolyGlobalStyles } from 'woly';

export const Global = styled(WolyGlobalStyles)`
 // local settings, palettes etc.
`

Вопрос с неймингом [РЕШЕН]

Сейчас идет дублирование переменных Global, что создает путаницу, но адекватный нейминг у меня лично придумать не вышло, может у кого есть идеи?
Варианты

• GlobalBase
• WolyStylesConfig
• GlobalSetup
• WolyGlobalStyles [ВЫБРАНО]

[risen228]

А у нас вообще могут всякие внутренние штуки быть в atoms? Или решаем просто на уровне экспортов?

P.S. Все ок, не заметил что в elements

[Irinaristova]

suggestion(blocking): у тебя получается 2 файла названы одним и тем же именем, один находится в src/lib/global.ts, второй - src/woly/global.ts и стайледы названы одинаково, почему нельзя использовать разные названия? сейчас из-за этого ты вынужден переопределять название стайледа на 1 строчке. Лучше сделать разные названия, например, GlobalStylesConfig & BaseStylesConfig

[risen228]

Плюс за Base

А наружу можно экспортировать как WolyGlobalStyles и WolyBaseStyles

[rchubarkin]

@Irinaristova @risenforces поправил на WolyGlobalStyles

[Irinaristova]

Тут суть в том, что одни стили у тебя глобальные только для воли, другие стили базовые для проекта, в котором используются компоненты воли. Поэтому минимальный конфиг, который экспортиться наружу для корректной работы воли с другим проектом, не стоит называть WolyGlobalStyles, поскольку название не соответсвует назначению конфига + у воли есть свой глобальный конфиг в проекте.

[rchubarkin]

Не вижу почему слова после "поэтому" следуют из того что было до них. Можешь развернуть? Как стоит назвать по-твоему?

[Irinaristova]

Мне кажется, Женя предложил хороший вариант для нейминга

[rchubarkin]

11