search

atls / team-management

Team management app
BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

Сборка UI-компонентов #14

Closed bbulakh closed 6 months ago

bbulakh commented 6 months ago

С чем связан запрос на фичу?

Собрать базовый UI-слой для старта работы над проектом

Расскажите как вы это себе видите

Добавить компоненты:

Definition of done (критерий готовности)

Компоненты отображаются на странице, проект запускается без ошибок

Приложите пример реализаций

No response

Приложите материалы задачи

https://www.figma.com/file/2vNHefkDcMKAFSnw69RbMM/Team-management-system?type=design&node-id=0%3A1&mode=design&t=4ggv4h1MW40qD6J6-1

bbulakh commented 6 months ago

@Nelfimov

Еще у меня есть компонент Checkbox, который я установил из Hyperion. Вот я пытаюсь вставить его в app/page, так же как с layout и пр. но он его не видит. Проблема в конфигах? Или надо делать вариант из ui-proto?

image

Касательно checkbox. Я его уже пушил, актуальная версия того, как я его подключаю есть: https://github.com/atls/team-management/commits/feat/ui-components/

В экспортах есть Box и Check - оба не работают

image
Nelfimov commented 6 months ago

Посмотри внимательно что экспортируется там. Пример применения тех экспортов можешь увидеть в том же драмине: https://github.com/torin-asakura/drum-in/blob/master/ui/checkbox/package.json

В историях в том же пакете можешь увидеть как создается чекбокс который ты видишь тут

https://github.com/atls/hyperion/blob/master/ui-parts/checkbox/src/checkbox.stories.tsx https://ui.atls.design/?path=/story/parts_components-checkbox--checkbox

Резюмируя - пакет @atls-ui-parts/checkbox экспортирует не готовые компоненты, а стили для подготовки чекбокса.

Ну и на будущее - ты можешь проверять что экспортирует пакет через автокомплит:

image

bbulakh commented 6 months ago

@Nelfimov

Касательно чекбокса - в итоге я делаю его из hyperion/ui-proto. Последний коммит: https://github.com/atls/team-management/commit/bfbf3b7c5f6932ec99b35d5a422424005ee58559 Я уже много чего почитал, посмотрел, поубирал лишних вещей (вроде). И сейчас он отображается на странице, но не работает. Выводит ошибку:

image

Можешь подсказать что я делаю не так?

Nelfimov commented 6 months ago

В энтрипоинте у тебя не передана функция чекбоксу в пропсах. Поэтому он не знает что делать.

bbulakh commented 6 months ago

@Nelfimov

Я пробовал передавать туда функцию, но не вышло. Я посмотрел как этот чекбокс используется в drum-in, затестил с утилитами useHover и doNothing (я так понял, что это и есть как раз заглушка для функций). Как итог - компонент отображается, но так же не работает. Ошибок в браузер не выкидывает.

image - появляется срау чекнутый, даже если в пропсах false

В самом документе у компонента висят ошибки тут:

image

Я не понимаю чего не хватает и в чём проблема - я накосячил с пропсами и они конфликтуют или стили не все поставил?...

Закоммитил последние попытки: https://github.com/atls/team-management/commit/e4283972deaf50c71481e4ec0b36eee826822209

Nelfimov commented 6 months ago

@bbulakh залил тебе фикс. Пожалуйста посмотри что в нем добавлено или изменено - это фундаментал реакта.

На будущее - можешь ссылку на коммиты не давать. Мне важно только знать твою ветку.