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

Nelfimov commented 4 months ago

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

Необходимо подготовить UI компоненты, используемые в проекте.

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

[ ] проанализировать дизайн на наличие повторяемых компонентов
[ ] собрать компоненты в ui слое
[ ] использовать тему для стилизации

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

ui слой собран, минимальный набор компонентов есть.

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

https://github.com/torin-asakura/dream-team/tree/master/ui

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

https://github.com/atls/hyperion

Nelfimov commented 4 months ago

@effektivnayarabota1 @bbulakh подключаю вас в эту задачу - имея готовые:

энтрипоинт (скоро будет в мастере)
тема

Надо собирать ui слой.

Порядок действий:

[ ] оценить дизайн
[ ] найти повторяющиеся компоненты - лэйауты, баттоны, инпуты, свитчеры
[ ] найти в гиперионе аналог в ui-parts
[ ] посмотреть как используется по другим проектам (drum-in, dream-team)

Предлагаю:

Собрать здесь общий список компонентов
Поделить между собой
Приступить к разработке в отдельных ветках и задачах

bbulakh commented 4 months ago

@Nelfimov @ssagg @effektivnayarabota1

Ребята, вы уже коннектились как-то по этой задаче? Давайте соберемся обсудить и разделим всё. Я видел, что @ssagg уже начинал что-то делать

effektivnayarabota1 commented 4 months ago

@Nelfimov @bbulakh начал докером заниматься. переключаться на эту задачу?

Nelfimov commented 4 months ago

@effektivnayarabota1 докер, как договорились.

@bbulakh @ssagg состыкуйтесь вместе, поделите компоненты.

bbulakh commented 4 months ago

@Nelfimov

Про иконки. Попробовал поставить тем же способом как в Dream Team. Получил такую ошибку. Я так понял, он ругается на то, что генератор не подтянул за собой Glob. Я поставил его вручную, но никак :

/usr/local/bin/node /Users/b_bulakh/Documents/ATLS/team-management/.yarn/releases/yarn-remote.cjs run build
/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21345
      Error.captureStackTrace(firstError);
            ^

Error: glob-promise tried to access glob (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: glob
Required by: glob-promise@virtual:712d65b27bf35f9bab19e90dc1c9c73c9643838ff323e2bb0dd660af27322931e4e93d81af84818472eba1efa35bbd466ffc79fae3e3a45b0838b504a8a788c8#npm:5.0.1 (via /Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-31850d08b9/node_modules/glob-promise/lib/)

Ancestor breaking the chain: @atls-ui-generators/icons@npm:0.0.2

Require stack:
- /Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-31850d08b9/node_modules/glob-promise/lib/index.js
- /Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/svgr.js
- /Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/generator.js
    at require$$0.Module._resolveFilename (/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21345:13)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at require$$0.Module._load (/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21236:31)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-31850d08b9/node_modules/glob-promise/lib/index.js:1:14)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at require$$0.Module._extensions..js (/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21388:33)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at require$$0.Module._load (/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21236:31)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/svgr.js:35:40)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

Node.js v20.13.0

Process finished with exit code 1

Nelfimov commented 4 months ago

Посмотри packageExtensions в .yarnrc

effektivnayarabota1 commented 4 months ago

@bbulakh @ssagg дайте саппорт по компонентам

[ ] - Badge - что это?
[ ] - Dropdown - не могу найти в макете. компонент вижу на странице components, не вижу как в макете используется, посмотреть как выглядит развернутый.

@Nelfimov

[ ] - Modal - модальное окно это же фрагмент странцы, не компонент? им позже будем заниматься?

bbulakh commented 4 months ago

@Nelfimov всё равно не получается с генератором

Вот последний коммит с драфтом: https://github.com/atls/team-management/commit/cb4cfd4f15a6a947de0a40c87c610564b7af8cc5

Я пробовал разные команды, указывал пути к папкам в package.json. Всё равно ошибка:

/usr/local/bin/node /Users/b_bulakh/Documents/ATLS/team-management/.yarn/releases/yarn-remote.cjs run build
/Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-78d57a6e49/node_modules/glob-promise/lib/index.js:5
    glob(pattern, options, (err, files) => err === null ? resolve(files) : reject(err))
    ^

TypeError: glob is not a function
    at /Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-78d57a6e49/node_modules/glob-promise/lib/index.js:5:5
    at new Promise (<anonymous>)
    at promise (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/unplugged/glob-promise-virtual-78d57a6e49/node_modules/glob-promise/lib/index.js:4:10)
    at build (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/__virtual__/@atls-ui-generators-icons-virtual-fee978e295/0/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/svgr.js:83:52)
    at Command.<anonymous> (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/__virtual__/@atls-ui-generators-icons-virtual-fee978e295/0/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/generator.js:35:28)
    at Command.listener [as _actionHandler] (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/commander-npm-9.5.0-993b3f2434-41c49b3d0f.zip/node_modules/commander/lib/command.js:482:17)
    at /Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/commander-npm-9.5.0-993b3f2434-41c49b3d0f.zip/node_modules/commander/lib/command.js:1283:65
    at Command._chainOrCall (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/commander-npm-9.5.0-993b3f2434-41c49b3d0f.zip/node_modules/commander/lib/command.js:1177:12)
    at Command._parseCommand (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/commander-npm-9.5.0-993b3f2434-41c49b3d0f.zip/node_modules/commander/lib/command.js:1283:27)
    at Command.parse (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/cache/commander-npm-9.5.0-993b3f2434-41c49b3d0f.zip/node_modules/commander/lib/command.js:909:10)
    at Object.<anonymous> (/Users/b_bulakh/Documents/ATLS/team-management/.yarn/__virtual__/@atls-ui-generators-icons-virtual-fee978e295/0/cache/@atls-ui-generators-icons-npm-0.0.2-712d65b27b-92da649cc2.zip/node_modules/@atls-ui-generators/icons/dist/generator.js:38:9)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at require$$0.Module._extensions..js (/Users/b_bulakh/Documents/ATLS/team-management/.pnp.cjs:21712:33)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)

Node.js v20.13.0

Process finished with exit code 1

bbulakh commented 4 months ago

@bbulakh @ssagg дайте саппорт по компонентам

[ ] - Badge - что это?

Под бейджами имели в виду эти штуки

bbulakh commented 4 months ago

@Nelfimov

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

ssagg commented 4 months ago

@bbulakh @ssagg дайте саппорт по компонентам

[ ] - Badge - что это?

Под бейджами имели в виду эти штуки

@effektivnayarabota1 @bbulakh Привет. Я бейджи сделал. это организации и таймер. Отметил как Tag.

Nelfimov commented 4 months ago

[ ] - Modal - модальное окно это же фрагмент странцы, не компонент? им позже будем заниматься?

Это компонент, в ui

Nelfimov commented 4 months ago

@Nelfimov

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

Ты пишешь в чужом пре без ссылки на свою ветку и логов, поэтому оцениваю только так
Проверь есть ли у тебя экспорт Box из Checkbox

ssagg commented 4 months ago

@Nelfimov @effektivnayarabota1 @bbulakh У меня вот так сейчас все выглядит. Screenshot from 2024-05-13 10-27-36

effektivnayarabota1 commented 4 months ago

@ssagg пока два компонента. сейчас буду свич с иконками делать ты писал бейдж есть? на скрине нет его

Nelfimov commented 4 months ago

@bbulakh @effektivnayarabota1 сделайте себе отдельные задачи и пишите там.

@bbulakh в моем коммите 505477c693b298a38cd350902f10ae017db1b9c7 фикс генератора. посмотри внимательно на yarnrc.yml

ssagg commented 4 months ago

@ssagg пока два компонента. сейчас буду свич с иконками делать ты писал бейдж есть? на скрине нет его

@effektivnayarabota1 Они уже прям на карточке. Где цифра 6 и timer. это компоненты в карточке. дальше в нее надо вставить компонент прогрессбара и свитч и иконок еще( иконки и для бейджей\тагов нужны и для свитча)

Nelfimov commented 3 months ago

@ssagg @bbulakh @effektivnayarabota1 задача не была привязана к ПРу, поэтому не закрылась автоматом с закрытием ПР

atls / team-management