Nelfimov commented 8 months ago

Сводка

Новая библиотека css-in-js

Мотивация

Библиотека позволяет уйти от операций в рантайме, но оставаясь в парадигме css-in-js

Дизайн в деталях

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

Недостатки

пока не замечено

Альтернативы

stylex

Стратегия адаптации

протестировать на одном компоненте, в том числе использовав в одном из наших проектов
добавить в конфиг бандлера

Как мы будем этому обучать

через примеры использования. Разница между emotion и vanilla-extract небольшая.

archeon-atls commented 7 months ago

Статус?

Nelfimov commented 7 months ago

в очереди

archeon-atls commented 7 months ago

Статус?

Nelfimov commented 7 months ago

в очереди

archeon-atls commented 6 months ago

Статус?

Nelfimov commented 6 months ago

в очереди

Amiditin commented 6 months ago

протестировать на одном компоненте, в том числе использовав в одном из наших проектов

Прочитав доку vanilla/extract, попробовал создать базовую версию кнопки из Candify ButtonElement, получившейся код: vanilla-extract.zip.

Поэтапно:

Добавил по гайду в next.config.js плагин createVanillaExtractPlugin
Создал глобальную тему на основе уже имеющейся в candify, и импортировал в энтрипоинт по гайду. Проверил в дев и билд версиях css переменные создаются.

Создал apperience и shape стили по структуре напоминающие гиперионовские


const appearanceBlueDefaultStyles = createAppearanceStyles({
fontColor: vars.colors.button.blue.default.font,
backgroundColor: vars.colors.button.blue.default.background,
borderColor: vars.colors.button.blue.default.border,
})

const mediumStyles = createShapeStyles({ size: 40, rounding: vars.radii.f24, })

4. Воспользовался [`@vanilla-extract/recipes`](https://vanilla-extract.style/documentation/packages/recipes/) для создание разных вариантов состояния конпки:
```ts
export const buttonStyles = recipe({
  base: baseStyles,

  variants: {
    variant: appearanceVariant,
    hover: appearanceHover,
    pressed: appearancePressed,
    disabled: appearanceDisabled,
    size: shapeStyles,
  },

  defaultVariants: {
    variant: 'blue',
    size: 'medium',
  },
})

Прокидываю получившиеся стили состояний в className кнопки:

<button
className={buttonStyles({
size,
variant,
pressed: pressed ? `${variant}Pressed` : undefined,
hover: hover ? `${variant}Hover` : undefined,
disabled: disabled ? `${variant}Disabled` : undefined,
})}
...

По сути, вышел рабочий вариант ButtonElement, который может автоматически генерировать типы для пропсов, указанных в variants, благодаря RecipeVariants. Переписать гиперионовкий генератор стилей для кнопок, думаю, будет не сложно, тк по структуре почти тоже самое.

Для добавления локальных свойств у получившейся кнопки, например фиксированная ширина, нужно будет создавать локальный класс, либо же попробовать создать отдельный sprinkles для кнопки. В теории, можно будет ограничить доступные для редактирования свойства, и получать их через пропсы в runtime через Sprinkles.

Недостатки

Значениями для ключей у темы могут быть только строчки
```
type Tokens = {
[key: string]: string | Tokens;
};
```
Прокидывать кастомные пропсы в компонент, чтобы достать их в стилях и как-то использовать, те аналоги prop, ifProp, switchProp, явного такого функционала не нашел. Но, по идее, как замену можно использовать фунции обертки, либо же пакет @vanilla-extract/recipes.

Nelfimov commented 6 months ago

@Amiditin теперь давай попробуем реализовать то же самое со stylex и сравним.

Нам важно следующее:

удобство и максимальная совместимость с нашим текущим подходом, особенно с темой
Работа в nextjs без use client
Минимум операций в рантайме

TorinAsakura commented 6 months ago

@Nelfimov И пожалуйста, делай пры, не надо прикреплять архивы

Nelfimov commented 6 months ago

@Amiditin https://github.com/atls-lab/frontend

archeon-atls commented 5 months ago

Статус?

Nelfimov commented 5 months ago

в работе

archeon-atls commented 5 months ago

Статус?

Nelfimov commented 5 months ago

в работе

archeon-atls commented 4 months ago

Статус?

Nelfimov commented 4 months ago

в очереди

archeon-atls commented 4 months ago

Статус?

Nelfimov commented 4 months ago

В оереди

Nelfimov commented 4 months ago

@aliceinapple @Amiditin обновите статус плиз

Amiditin commented 4 months ago

обновите статус плиз

Работаю в ветке feat/vanilla-extract, добавлена глобальная тема vanilla/extract, Button и Text компоненты. В работе универсальные свойства, аналоги space layout typography из styled-system.

aliceinapple commented 4 months ago

@Amiditin сориентируй пожалуйста над чем сейчас работаешь и что еще осталось?

Amiditin commented 4 months ago

@Amiditin сориентируй пожалуйста над чем сейчас работаешь и что еще осталось?

@aliceinapple работаю над нашими базовыми компонентами из hyperion, переписывая на vanilla/extract. Для этого нужно добавить аналоги space layout из styled-system через @vanilla-extract/sprinkles, пример typography ссылка. В планах Box, Layout, Input компоненты. Как промежуточный результат реализовать сложный компонент по типу Autocomplete из hyperion

aliceinapple commented 3 months ago

что сделано:

добавлены базовые стили для инпута
добавлен компонент инпут

Amiditin commented 3 months ago

@aliceinapple FYI

Что сделано:

Переход с @vanilla-extract/sprinkles на rainbow-sprinkles. Таким образом, решаем проблему с динамическими пропсами не завязанных на теме width, height и тд, и определением всех доступных свойств для пропса не через их перечисление flexDirection: ['row', 'column'], а передавая булевое значение flexDirection: true
Добавлены универсальные свойства space layout flexbox typography
Добавлен базовый компонент Box на основе перечисленных свойств выше
Что дальше:
Добавить оставшиеся универсальные свойства color position boxShadow и тд
Доделать компонент Box на основе новых универсальных свойств
Добавить компоненты Layout Column Row Grid

Nelfimov commented 3 months ago

@Amiditin @aliceinapple обязательно в конце перехода проверьте сторибуки для компонентов.

aliceinapple commented 3 months ago

Что сделано:

Добавлены компоненты link image scrollbar
Что дальше:
Доработать добавленные компоненты
Использовать rainbow-sprinkles где необходимо

Amiditin commented 3 months ago

@aliceinapple FYI

Что сделано:

Удалена emotion тема, теперь только vanilla/extract
Добавлены универсальные свойства border, color, grid, position, shadow
Добавлены компоненты Layout Column Row Grid
Что дальше:
Добавить универсальные свойства и дефолтные пропсы для Text и Button компонентов
Добавить Space и Currency компоненты, аналоги @atls-ui-parts/text компонентам

aliceinapple commented 3 months ago

Что сделано:

Рефактор компонентов link и image (использование rainbow-sprinkles)
Что дальше:
Добавить компонент select

Amiditin commented 3 months ago

Что сделано:

Доработаны Text и Button компоненты
Добавлены Space и Currency компоненты для @ui/text
Добавлен Condition компонент
Что дальше:
Подтянуть ветку @aliceinapple
Добавить компонент Autocompolete из hyperion

aliceinapple commented 3 months ago

Что сделано:

Добавлен компонент select
Что дальше:
Доработатьselect
Добавить switch
Пообщаться с @Amiditin по поводу дальнейших действий

aliceinapple commented 3 months ago

Что сделано:

Добавлен компонент switch
Что дальше:
Доработатьselect и switch
Добавить modal, divider

Amiditin commented 3 months ago

Что сделано:

Добавлен компонент Autocompolete
Что дальше:
Добавить Progress и Tooltip компоненты
Проработать сторибуки для добавленных компонентов

Amiditin commented 3 months ago

Что сделано:

Добавлены Progress и Tooltip компоненты
Что дальше:
Проработать сторибуки для добавленных компонентов

Amiditin commented 3 months ago

Что сделано:

Добавлен storybook последней версии, для совместимости с @vanilla/extract docs
Добавлен stories для Tooltip
Что дальше:
Добавить остальные stories для компонентов

@Nelfimov для нас важно, чтобы stories лежали рядом с компонентами? или продолжать их в модуле storybook создавать ссылка? При первом варианте падают ошибки, когда пытаюсь выйти за пределы модуля, и мне не особо нравится, что в таком случае для некоторых модулей, например @atls-ui-parts/tooltip, создаются дополнительные ненужные зависимости, например @atls-ui-parts/layout

![image](https://github.com/atls/hyperion/assets/80476878/2a4d3bff-e8dc-41a1-8fad-a80aaeaa3f3c)

Nelfimov commented 3 months ago

@Nelfimov для нас важно, чтобы stories лежали рядом с компонентами?

Так нагляднее - компонент, а рядом история как использовать.

При первом варианте падают ошибки, когда пытаюсь выйти за пределы модуля, и мне не особо нравится, что в таком случае для некоторых модулей, например @atls-ui-parts/tooltip, создаются дополнительные ненужные зависимости, например @atls-ui-parts/layout

Ты же их добавляешь в дев зависимости, поэтому все норм.

Какие ошибки падают?

Amiditin commented 3 months ago

Какие ошибки падают?

В консоли такая, толком не разбирался ещё

ERROR in ../../.yarn/__virtual__/@ui-layout-virtual-f4b5a3b82e/1/ui/layout/src/box/box.css.ts
Module build failed (from ../../.yarn/__virtual__/@vanilla-extract-webpack-plugin-virtual-468c0998f7/0/cache/@vanilla-extract-webpack-plugin-npm-2.3.11-96bc4d2d50-b18b88d4dc.zip/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
ModuleNotFoundError: Module not found: Error: rainbow-sprinkles tried to access @vanilla-extract/dynamic (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @vanilla-extract/dynamic
Required by: rainbow-sprinkles@virtual:ff71f372cc3486cd89139b4eb0299a0e09ec87afe363215d1cf0bec88448af55e5437e150b268a8c04ac7dec287bc7bcdc966d8a5f5241163b71aafe4e73c8d8#npm:0.17.2 (via /home/amiditin/React/frontend/.yarn/__virtual__/rainbow-sprinkles-virtual-f52254f2fa/0/cache/rainbow-sprinkles-npm-0.17.2-66dba8755c-9ca84affe2.zip/node_modules/rainbow-sprinkles/dist/)
Ancestor breaking the chain: @app/home-page@workspace:pages-router/pages/home
Ancestor breaking the chain: @ui/autocomplete@workspace:ui/autocomplete
Ancestor breaking the chain: @ui/button@workspace:ui/button
Ancestor breaking the chain: @ui/image@workspace:ui/image
Ancestor breaking the chain: @ui/input@workspace:ui/input
Ancestor breaking the chain: @ui/layout@workspace:ui/layout
Ancestor breaking the chain: @ui/link@workspace:ui/link
Ancestor breaking the chain: @ui/progress@workspace:ui/progress
Ancestor breaking the chain: @ui/scrollbar@workspace:ui/scrollbar
Ancestor breaking the chain: @ui/select@workspace:ui/select
Ancestor breaking the chain: @ui/switch@workspace:ui/switch
Ancestor breaking the chain: @ui/text@workspace:ui/text
Ancestor breaking the chain: @ui/tooltip@workspace:ui/tooltip
...tracers
 @ ../../.yarn/__virtual__/@ui-layout-virtual-f4b5a3b82e/1/ui/layout/src/grid/grid.component.tsx 86:0-43 94:25-38
 @ ../../.yarn/__virtual__/@ui-layout-virtual-f4b5a3b82e/1/ui/layout/src/grid/index.ts 1:0-33 1:0-33
 @ ../../.yarn/__virtual__/@ui-layout-virtual-f4b5a3b82e/1/ui/layout/src/index.ts 5:0-23 5:0-23
 @ ../tooltip/src/tooltip.stories.tsx 105:0-36 106:0-36 107:0-33 108:0-33 125:42-48 128:38-44 148:42-45 148:86-92 158:42-48 162:38-41 164:38-44 169:105-111 174:106-112 177:106-109 179:38-44 184:108-114 189:109-115 192:107-110 194:38-44 199:108-111 199:152-158 210:42-45 213:38-44 219:101-107 225:101-107 236:42-45 239:38-44 250:42-45 253:38-44 257:48-51 264:42-45 267:38-44 273:108-114 286:42-45 289:38-44 298:106-112
 @ .././ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:(?:^%7C\/%7C(?:(?:(?%21(?:^%7C\/)\.).)*?)\/)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./tooltip/src/tooltip.stories.tsx ./tooltip/src/tooltip.stories
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

Nelfimov commented 3 months ago

@Amiditin это возникает если что-то вынесено за src? Похоже на типичную пробелму решаемую packageExtensions в yarnrc.yml

aliceinapple commented 3 months ago

Что сделано:

Добавлены компоненты divider и modal
Добавлен stories для modal
Что дальше:
Добавить stories для select, switch, input

Amiditin commented 3 months ago

Что сделано:

Добавлены stories в локальные папки для Autocomplete, Button, Input, Progress, Select
Что дальше:
Доработать stories для Button, Input
Добавить компоненты Avatar, Popover

Nelfimov commented 3 months ago

@Amiditin @aliceinapple оформите пожалуйста план задач для полного завершения таски.

Amiditin commented 3 months ago

оформите пожалуйста план задач для полного завершения таски.

Сейчас переносим основные компоненты из hyperion, прогресс примерно такой:

[x] autocomplete
[x] avatar
[ ] button (генератор)
[x] card
[x] carousel
[x] checkbox
[x] condition
[ ] datepicker
[x] design
[x] divider
[x] hidden-input
[x] image
[x] input
[x] layout
[x] link
[x] modal
[x] next-image
[ ] parallax
[x] placeholder
[x] popover
[x] progress
[x] scalable-content
[x] select
[x] sidebar
[x] swiper
[x] switch
[x] text
[x] theme
[x] tooltip
[x] conditional-render модуль без стилей
[x] dom модуль без стилей
[x] events-state модуль без стилей
[x] mapbox модуль без стилей
[x] portal модуль без стилей
[x] text-transform модуль без стилей
[x] upload модуль без стилей

@aliceinapple может что-то пропустил, поставь галочки где не хватает

@Nelfimov есть смысл переносить все, либо какие на твой взгляд можно пропустить?

Как мы будем этому обучать

через примеры использования. Разница между emotion и vanilla-extract небольшая.

Правильно понимаю, нужно будет ещё написать про переход с emotion на @vanilla/extract с примерами?

Nelfimov commented 3 months ago

@Nelfimov есть смысл переносить все, либо какие на твой взгляд можно пропустить?

Все

Правильно понимаю, нужно будет ещё написать про переход с emotion на @vanilla/extract с примерами?

Если сделаем хорошие сториз, то в этом не будет необходимости.

aliceinapple commented 3 months ago

Что сделано:

Добавила stories для switch
Что дальше:
Доработать switch и stories для него
Добавить stories для divider
Добавить компонент checkbox

Amiditin commented 3 months ago

Что сделано:

Добавлены Avatar и Popover компоненты
Исправлена верстка и добавлены типы для stories, @aliceinapple обрати внимание на tags: ['autodocs'] docs
Что дальше:
Добавить HiddenInput, DividedFields и Textarea для @ui/input
Добавить GhostButton и Content для @ui/button

Amiditin commented 3 months ago

Что сделано:

Добавлены HiddenInput и Textarea для @ui/input
Что дальше:
Доработать Textarea, деструктуризация на компоненты
Добавить DividedFields для @ui/input
Добавить GhostButton и Content для @ui/button

aliceinapple commented 3 months ago

Что сделано:

Добавила checkbox
Что дальше:
Доработать checkbox, switch и stories для них
Добавить stories для divider

Amiditin commented 3 months ago

Что сделано:

ДоработанTextarea
Добавлен GhostButton для @ui/button
Что дальше:
Добавить DividedFields для @ui/input
Добавить Content для @ui/button

Amiditin commented 3 months ago

Что сделано:

ДобавленDividedFields для @ui/input
Добавлен story для GhostButton
Добавлен Content для @ui/button
Что дальше:
Добавить NextImage, Placeholder, ScalableContent компоненты

Amiditin commented 3 months ago

Что сделано:

Добавлены NextImage, Placeholder, ScalableContent компоненты
Добавлены утилиты из @atls-ui-parts/dom в @ui/utils
Что дальше:
Добавить stories для Placeholder
Добавить Swiperкомпонент

Amiditin commented 3 months ago

Что сделано:

Добавлен Swiperкомпонент
Добавлены stories для Placeholder Text Currency Swiper
Что дальше:
Добавить Card Sidebar компоненты

atls / hyperion

`vanilla/extract`: изучить возможность использования у нас #546

Сводка

Мотивация

Дизайн в деталях

Недостатки

Альтернативы

Стратегия адаптации

Как мы будем этому обучать

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Как мы будем этому обучать

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше:

Что сделано:

Что дальше: