Feat/UI components pt#3

[effektivnayarabota1]

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

1й вариант

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

2й вариант

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

---

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

[effektivnayarabota1]

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

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

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

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

[effektivnayarabota1]

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

[Nelfimov]

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

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

[effektivnayarabota1]

выкидывает ошибку типов при 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

[effektivnayarabota1]

из hyperion добавляю Box, выбрасывает предупреждение: Warning: Styled(div): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

его можно както отключить? весь лог перекрывает, там большая пачка в три экрана.

[Nelfimov]

из hyperion добавляю Box, выбрасывает предупреждение: Warning: Styled(div): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

его можно както отключить? весь лог перекрывает, там большая пачка в три экрана.

Это предупреждение на будущее, ошибкой не считается.

[Nelfimov]

выкидывает ошибку типов при 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

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

в peer проще ставить "*" если ты конечно не делаешь библиотеку, где важно указать версию.

[effektivnayarabota1]

несколько вопросов:

1. Как делать модалку с точки зрения семантики?

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

<div onClick={modalClickHandler} style={{width: 400, height: 300, backgroundColor: 'red'}}>
    <h1>click to show modal</h1>
</div>
<Modal open={modal} onClose={modalClickHandler}>
    <h1>content in modal</h1>
    <Input placeholder='placeholder' />
</Modal>

2. То, что onClick передается всем детям это корректное поведение? Или это моя ошибка?

3. Как делать handler на несколько модальных окон?

Чтобы при клике на триггерный контейнер не открывались все модалки. Мы же не создаем для каджого Modal свой handler? Подскажи пожалуйста как этот функционал называется, что мне почитать.

---

P.S. Мне осталось стилизовать dropdown, сегодня закончу.

[Nelfimov]

несколько вопросов:

1. Как делать модалку с точки зрения семантики?

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

<div onClick={modalClickHandler} style={{width: 400, height: 300, backgroundColor: 'red'}}>
    <h1>click to show modal</h1>
</div>
<Modal open={modal} onClose={modalClickHandler}>
    <h1>content in modal</h1>
    <Input placeholder='placeholder' />
</Modal>

Посмотри что такое stopPropogation, а так же bubbling в веб разработке.

2. То, что onClick передается всем детям это корректное поведение? Или это моя ошибка?

См выше.

3. Как делать handler на несколько модальных окон?

Чтобы при клике на триггерный контейнер не открывались все модалки. Мы же не создаем для каджого Modal свой handler? Подскажи пожалуйста как этот функционал называется, что мне почитать.

Только разделяя на фрагменты или с помощью контекстов - у каждого должен быть инициализирован свой хэндлер

[effektivnayarabota1]

Была ошибка типов - не совпадала версия пакета @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

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

[effektivnayarabota1]

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

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

[effektivnayarabota1]

🙏🙏🙏🙏🙏🙏🙏 https://github.com/atls/team-management/issues/11#issuecomment-2118351193