Feat/UI components pt#3

[kirill-ivanovvv]

в ветке 2 крайних коммита по компоненту switch. какой вариант корректнее?

1й вариант

скопировал с heperion: ui-proto/switch
был баг в анимации, сыпались ошибки. перебирать не стал - уточняю, стоит ли тратить на это время

2й вариант

подсмотрел как делает @bbulakh - добавил пакет в index.ts
в интерфейсе все красиво но не понимаю как вносить изменения в такой компонент

---

также switch находил в drum-in, не понимаю откуда там берется сам switch. active provider понятно что делает, но где сама верстка компонента, или подключенный пакет в файлах. как это рабтает?

[Nelfimov]

Оба варианта верные но в контексте.

1 подходит если тебе нужен кастомный свитч, стилизация которого не подойдет используя пропсы стандартного в Hyperion.

2 подойдёт если тебе достаточно кастомизации через пропсы.

В drumin switch написан с нуля потому что там он «уникальный» по стилям

[kirill-ivanovvv]

@Nelfimov
подскажи пожалуйста как закинуть пропс во вложенный компонент (children). на его месте будет находиться иконка и я хочу передать в неё пропс цвета. (black white написал для теста)

https://github.com/atls/team-management/blob/feat/ui-components_pt%233/ui/switch/src/icon/thumb/thumb.element.tsx

и как обозначить на самой иконке, какая её часть будет меняться?
если делать экспорт белой иконки с прозрачным фоном (для сохранения габаритов), а цвет менять только у тумблера (как это и сделанно сейчас) - так будет корректно?

в макете вот так:

[kirill-ivanovvv]

мне нужно чтобы иконка всегда была белой. нужно будет каждый раз добавлять пропс цвета на верстке или на уровне компонтетов это можно зафиксировать? не понимаю как в children закинуть пропс. так бы зафиксировал его в тумблере

[Nelfimov]

@effektivnayarabota1 вот этот файл меняет цвет иконки после генерации.

https://github.com/torin-asakura/drum-in/blob/master/ui/icons/replacements.ts

[kirill-ivanovvv]

выкидывает ошибку типов при yarn check, посмотри пожалуйста - не могу понять
вот такой поинт обнаружил:
@emotion/react is listed by your project with version 11.9.3, which doesn't satisfy what @ui/dropdown (p2b4b6) and other dependencies request (11.11.3).

мне нужно поставить одинаковую версию на всех компонентах?
или чтобы совпадала версия в dev и peer

[kirill-ivanovvv]

Была ошибка типов - не совпадала версия пакета @types/react
По всем компонентам прошелся, поставил единую версию, peerDeps - *, не помогло.
Нагуглил такое решение:
в корневом package.json

"resolutions": {
    "@types/react": "18.3.1"
}

[Nelfimov]

Была ошибка типов - не совпадала версия пакета @types/react По всем компонентам прошелся, поставил единую версию, peerDeps - *, не помогло. Нагуглил такое решение: в корневом package.json

"resolutions": {
    "@types/react": "18.3.1"
}

Сначала попробуй через yarn upgrade-interactive забампить версию по всему проекту.

Затем можешь попробовать yarn dedupe

Если не выйдет - тогда можешь пользоваться резолюшенами.

[kirill-ivanovvv]

Сначала попробуй через yarn upgrade-interactive забампить версию по всему проекту.

Готово! Жду ревью

[kirill-ivanovvv]

🙏🙏🙏🙏🙏🙏🙏 #11 (comment)

[Nelfimov]

форс пушить после ревью - запрещено.

[Nelfimov]

генератор иконок был старой версии. Обновил зависимости и поправил запуск. Перегенерировал иконки