effektivnayarabota1 commented 3 months ago

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

Собираем компоненты во фрагменты

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

Собрать фрагменты

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

Все фрагменты готовы

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

https://www.figma.com/design/2vNHefkDcMKAFSnw69RbMM/Team-management-system

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

https://github.com/torin-asakura/drum-in/tree/master/landing/fragments

No response

effektivnayarabota1 commented 3 months ago

1. страница регистрации @ssagg

[x] сетка страницы регистрации -в pages
[x] логотип? (расширить компонент?) (добавить пропс extended, если нету)

2. homescreen
[x] Заголовок + кнопка @ssagg
[x] grid страницы @ssagg -в pages
[x] каточки - @ssagg
[x] grid - карточек @ssagg
[x] switch + notification @ssagg
[x] модалка со скроллом (в нотификациях) @ssagg
[x] элемент модалки со скролло (см пр) @ssagg
[x] модалка выбора оргинизации @ssagg
[x] фрагмент организации внутри модалки (пред.пункт) (она разворачивается (может быть переместить в компоненты)) @ssagg
[x] добавление участника команды (member-modal) - @effektivnayarabota1

3. организации
[x] сетка карточек @effektivnayarabota1
[x] карточка организации - @effektivnayarabota1
[x] модалка оранизации (organization-modal) - @effektivnayarabota1
[x] бейдж? карточка ? (может быть готов компонент) @effektivnayarabota1
[x] мини бейдж (кожет быть готов компонент) @effektivnayarabota1
[x] модалка сотрудников @ssagg
[x] элемент списка модалки (пред.пункт) @ssagg

effektivnayarabota1 commented 3 months ago

@bbulakh @effektivnayarabota1 @ssagg

что решили:

отпочковываемся от ветки feat/fragments (@bbulakh создал) - в конце верстки всех фрагментов, одним ПР замержимся в мастер
цепляем фрагмент из списка в этом ишью по одной штуке, подписывай юсернейм у фрагмента который взял
по завершении фрагмента, создаем мерж в feat/fragments, ставь галочку у фрагмента
если вносишь правки в компонент, сообщи всем, чтобы мы одновременно не правили один и тот же компонент.
правки по компонентам мерджим в feat/fragments

effektivnayarabota1 commented 3 months ago

@Nelfimov

во фрагментах тоже задействуем тему по максимому? паддинги не числами ввожу, а через тему? Через хук??? Или можно числами? <Box flexDirection='column' padding={'theme.spaces.micro'}>
не нашел у Box пропс gap, вот так будет норм? <Box flexDirection='column' style={{ gap: '24px' }}>

Nelfimov commented 3 months ago

Да
Надо расширять пропсы. Если напомнишь - скину пример на выходных

effektivnayarabota1 commented 3 months ago

2. Надо расширять пропсы. Если напомнишь - скину пример на выходных

@Nelfimov посмотри пожалуйста пример

Nelfimov commented 3 months ago

import { CSSProperties } from 'react'
import { Config }        from 'styled-system'
import { system }        from 'styled-system'

export interface LayoutWithGap {
  gap?: CSSProperties['gap']
}

const gapConfig: Config = {
  gap: {
    property: 'gap',
    transform: (value) => (typeof value === 'number' ? `${value}px` : value),
  },
}

export const gapStyles = system(gapConfig)

import styled                   from '@emotion/styled'
import { Layout as BaseLayout } from '@atls-ui-parts/layout'
import { Box as BaseBox }       from '@atls-ui-parts/layout'
import { Row as BaseRow }       from '@atls-ui-parts/layout'
import { Column as BaseColumn } from '@atls-ui-parts/layout'

import { TypographyProps }      from 'styled-system'
import { typography }           from 'styled-system'

import { LayoutWithGap }        from './styles'
import { lineClampStyles }      from './styles'
import { gapStyles }            from './styles'

type GeneralProps = LayoutWithGap

export const Layout = styled(BaseLayout)<GeneralProps>(gapStyles)

export const Box = styled(BaseBox)<GeneralProps & TypographyProps>(
  typography,
  gapStyles,
)

export const Row = styled(BaseRow)<GeneralProps>(gapStyles)

export const Column = styled(BaseColumn)<GeneralProps>(gapStyles)

effektivnayarabota1 commented 3 months ago

@bbulakh @ssagg я Box поправлю, в нашу ветку внесу обновления.

я в пятницу в эту ветку закидывал еще коммиты.мы из radii удалили все f, а некоторые компоненты требуют. строчные правки по компонентам я на ходу забрасываю, надеюсь путаницы не будет. перед мержем обновляйте ветку

Nelfimov commented 3 months ago

отпочковываемся от ветки feat/fragments (@bbulakh создал) - в конце верстки всех фрагментов, одним ПР замержимся в мастер

Будьте внимательны - от какой ветки отпочковались, туда ПР и должен быть. Иначе у вас будут разные истории коммитов. В вашем случае последовательность мержей должна быть такая:

ваша ветка -> feat/fragments -> master

effektivnayarabota1 commented 3 months ago

@Nelfimov У реакта есть такой функционал, чтобы зафиксировать определенные пропсы на children? switch предпологает вложение иконок, и эти иконки нужно подгонять под размер и менять фон на прозрачный. Я делаю это на уровне fragments для каждой из четырех иконок, было бы удобнее зашить это в компонент

Nelfimov commented 3 months ago

Только если ты ограничишь их боксом или лэйаутом - в остальном children для компонента - любой набор компонентов со своими пропсами.

effektivnayarabota1 commented 3 months ago

@Nelfimov

валидацию на этом этапе делаем? какаято библиотека есть для этого?
как лучше активацию кнопки снизу сделать? мне приходит идея только вынести state и у каждого элемента в хендлере проветка => setState, но чтото мне подсказывает что можно сделать проще

Nelfimov commented 3 months ago

валидацию на этом этапе делаем? какаято библиотека есть для этого?

Такие вопросы можешь сразу задавать в дизайне - мы можем сделать как по инпуту, так и по нажатию на кнопку. Пока сделай по нажатию.

как лучше активацию кнопки снизу сделать? мне приходит идея только вынести state и у каждого элемента в хендлере проветка => setState, но чтото мне подсказывает что можно сделать проще

Организованнее это делать через контекст.

ssagg commented 3 months ago

@effektivnayarabota1 привет. ты в с organization card испоьзуешь styled обертки. хотя есть компонет Card. В который надо все помещать. Он универсальный.

ssagg commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР

effektivnayarabota1 commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР я вот такой вчера компонент в layout добавил, сейчас запушу: я по-другому немного делаю, размеры контейнера задаю через размеры колонок родительской grid, а ребенок на 100% по всем осям. как ты думаешь, все-таки как делать лучше и почему?)

effektivnayarabota1 commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР

а я вот не могу понять смысл универсальных компонентов. он же просто пропсы ловит и все. он бы зафиксировал общие для всех Card стили, чтобы мы не писали каждый раз одно и тоже. а так все-равно что с card, что через box, все прописывать придется.

effektivnayarabota1 commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР я вот такой вчера компонент в layout добавил, сейчас запушу: я по-другому немного делаю, размеры контейнера задаю через размеры колонок родительской grid, а ребенок на 100% по всем осям. как ты думаешь, все-таки как делать лучше и почему?)

https://github.com/atls/team-management/blob/refactor/fragments_modals/ui/layout/src/grid/grid.component.tsx

effektivnayarabota1 commented 3 months ago

@ssagg а вот такую штуку не делал случайно?

ssagg commented 3 months ago

@ssagg а вот такую штуку не делал случайно?

Почти полностю повторяет элемент из сайдбара. Сейчас запушу.

ssagg commented 3 months ago

@Nelfimov @effektivnayarabota1 я создал ПР в ветку fragments. Добавил бейдж. Или могу напрямую туда заливать?

ssagg commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР

а я вот не могу понять смысл универсальных компонентов. он же просто пропсы ловит и все. он бы зафиксировал общие для всех Card стили, чтобы мы не писали каждый раз одно и тоже. а так все-равно что с card, что через box, все прописывать придется.

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

ssagg commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР я вот такой вчера компонент в layout добавил, сейчас запушу: я по-другому немного делаю, размеры контейнера задаю через размеры колонок родительской grid, а ребенок на 100% по всем осям. как ты думаешь, все-таки как делать лучше и почему?)

это к layout, box, row , column добвляется еще грид компонент получается. я просто добавил пропс грида в бокс. и бокс по дефолту флекс, а при необходимости - грид.

effektivnayarabota1 commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР

а я вот не могу понять смысл универсальных компонентов. он же просто пропсы ловит и все. он бы зафиксировал общие для всех Card стили, чтобы мы не писали каждый раз одно и тоже. а так все-равно что с card, что через box, все прописывать придется.

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

да, имеет смысл. может объеденим карточки по стилям? зафиксируем скругления и тень, например.

effektivnayarabota1 commented 3 months ago

@Nelfimov @effektivnayarabota1 я создал ПР в ветку fragments. Добавил бейдж. Или могу напрямую туда заливать?

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

effektivnayarabota1 commented 3 months ago

@effektivnayarabota1 добавил пропс грида в Layout в последнем ПР я вот такой вчера компонент в layout добавил, сейчас запушу: я по-другому немного делаю, размеры контейнера задаю через размеры колонок родительской grid, а ребенок на 100% по всем осям. как ты думаешь, все-таки как делать лучше и почему?)

это к layout, box, row , column добвляется еще грид компонент получается. я просто добавил пропс грида в бокс. и бокс по дефолту флекс, а при необходимости - грид.

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

effektivnayarabota1 commented 3 months ago

@Nelfimov @effektivnayarabota1 я создал ПР в ветку fragments. Добавил бейдж. Или могу напрямую туда заливать?

вообще, я когда компоненты и тему правил, на ходу эту ветку обновлял и пушил. фрагменты оставляю у себя до завершения, компоненты обновляю

effektivnayarabota1 commented 3 months ago

@Nelfimov не понимаю, как быть с типами у контекста

➤ YN0000: │ .yarn/__virtual__/@ui-input-virtual-f459a9694d/1/ui/input/src/select-input/selected-item/selected-item.component.tsx:29:32
➤ YN0000: │ 
➤ YN0000: │   Error: Conversion of type 'null' to type 'Dispatch<any>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the 
➤ YN0000: │        expression to 'unknown' first.
➤ YN0000: │ 
➤ YN0000: │   27 |
➤ YN0000: │   28 |   const theme: any = useTheme()
➤ YN0000: │ > 29 |   const selectedItemsDispatch = useContext(SelectedItemsDispatchContext) as Dispatch<any>
➤ YN0000: │      |                                ^
➤ YN0000: │   30 |
➤ YN0000: │   31 |   function handleDeleteSelectedItem(e, itemData) {
➤ YN0000: │   32 |     selectedItemsDispatch({

➤ YN0000: │ .yarn/__virtual__/@ui-input-virtual-f459a9694d/1/ui/input/src/select-input/select-input.component.tsx:103:50
➤ YN0000: │ 
➤ YN0000: │   Error: Type 'Dispatch<null>' is not assignable to type 'null'.
➤ YN0000: │ 
➤ YN0000: │   101 |           <SelectedItemsDispatchContext.Provider value={selectedItemsDispatch}>
➤ YN0000: │   102 |             <InputValueContext.Provider value={inputValue}>
➤ YN0000: │ > 103 |               <InputValueDispatchContext.Provider value={inputValueDispatch as Dispatch<null>}>
➤ YN0000: │       |                                                  ^
➤ YN0000: │   104 |                 <InputBox
➤ YN0000: │   105 |                   {...props}
➤ YN0000: │   106 |                   {...triggerProps}

Nelfimov commented 3 months ago

а зачем ты его через Dispatch переопределяешь?

effektivnayarabota1 commented 3 months ago

@Nelfimov

1. подскажи пожалуйста, как `TS` определяет типы для ипортируемого `JSON`?

локали поместил в JSON, на импорте ошибка типов.

`JSON` приходит в таком виде:

app-1   | [Object: null prototype] [Module] {
app-1   |   'add-member-modal.header': [Getter],
app-1   |   'add-member-modal.invite': [Getter],
app-1   |   'add-member-modal_input.invalid-email': [Getter],
app-1   |   'add-member-to-organization-modal.header': [Getter],
app-1   |   'add-member-to-organization-modal_input.placeholder': [Getter],
app-1   |   'organization-card_member.one': [Getter],
app-1   |   'organization-card_member.many': [Getter],
app-1   |   default: [Getter]
app-1   | }

Ошибка выгляди вот так:

➤ YN0000: │   Error: No overload matches this call.
➤ YN0000: │          Overload 1 of 2, '(props: PropsWithChildren<IntlConfig>): IntlProvider', gave the following error.
➤ YN0000: │            Type '{ default: { "add-member-modal.header": string; "add-member-modal.invite": string; "add-member-modal_input.invalid-email": string; 
➤ YN0000: │        "add-member-to-organization-modal.header": string; "add-member-to-organization-modal_input.placeholder": string; "organization-card_member.one": string; 
➤ YN0000: │        "organization-card_member.many": ...' is not assignable to type 'Record<string, string> | Record<string, MessageFormatElement[]> | undefined'.
➤ YN0000: │              Type '{ default: { "add-member-modal.header": string; "add-member-modal.invite": string; "add-member-modal_input.invalid-email": string; 
➤ YN0000: │        "add-member-to-organization-modal.header": string; "add-member-to-organization-modal_input.placeholder": string; "organization-card_member.one": string; 
➤ YN0000: │        "organization-card_member.many": ...' is not assignable to type 'Record<string, MessageFormatElement[]>'.
➤ YN0000: │                Index signature for type 'string' is missing in type '{ default: { "add-member-modal.header": string; "add-member-modal.invite": string; 
➤ YN0000: │        "add-member-modal_input.invalid-email": string; "add-member-to-organization-modal.header": string; "add-member-to-organization-modal_input.placeholder": string; 
➤ YN0000: │        "organization-card_member.one": string; "organization-card_member.many": ...'.
➤ YN0000: │          Overload 2 of 2, '(props: PropsWithChildren<IntlConfig>, context: any): IntlProvider', gave the following error.
➤ YN0000: │            Type '{ default: { "add-member-modal.header": string; "add-member-modal.invite": string; "add-member-modal_input.invalid-email": string; 
➤ YN0000: │        "add-member-to-organization-modal.header": string; "add-member-to-organization-modal_input.placeholder": string; "organization-card_member.one": string; 
➤ YN0000: │        "organization-card_member.many": ...' is not assignable to type 'Record<string, string> | Record<string, MessageFormatElement[]> | undefined'.

2. Ошибка типов пакета `react intl`

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

➤ YN0000: │   Error: Interface 'DateTimeFormat' incorrectly extends interface 'Omit<DateTimeFormat, "resolvedOptions">'.
➤ YN0000: │          The types returned by 'formatRangeToParts(...)' are incompatible between these types.
➤ YN0000: │            Type 'IntlDateTimeFormatPart[]' is not assignable to type 'DateTimeRangeFormatPart[]'.
➤ YN0000: │              Type 'IntlDateTimeFormatPart' is not assignable to type 'DateTimeRangeFormatPart'.
➤ YN0000: │                Types of property 'source' are incompatible.
➤ YN0000: │                  Type 'RangePatternType | undefined' is not assignable to type '"shared" | "startRange" | "endRange"'.
➤ YN0000: │                    Type 'undefined' is not assignable to type '"shared" | "startRange" | "endRange"'.

Nelfimov commented 3 months ago

подскажи пожалуйста, как TS определяет типы для ипортируемого JSON?

Как импортируешь? Если import * as messages from '...' то такая ошибка ожидаемая. Импортируй просто import messages from '...'

Ошибка типов пакета react intl

Бери последнюю возможную версию.

atls / team-management

Cборка фрагментов #18

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

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

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

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

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

1. страница регистрации @ssagg

2. homescreen

3. организации

что решили:

1. подскажи пожалуйста, как `TS` определяет типы для ипортируемого `JSON`?

`JSON` приходит в таком виде:

Ошибка выгляди вот так:

2. Ошибка типов пакета `react intl`

atls / team-management

Cборка фрагментов #18

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

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

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

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

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

1. страница регистрации @ssagg

2. homescreen

3. организации

что решили:

1. подскажи пожалуйста, как TS определяет типы для ипортируемого JSON?

JSON приходит в таком виде:

Ошибка выгляди вот так:

2. Ошибка типов пакета react intl

1. подскажи пожалуйста, как `TS` определяет типы для ипортируемого `JSON`?

`JSON` приходит в таком виде:

2. Ошибка типов пакета `react intl`