[FRNT-485]: Generate map of component states #122
Conversation
tatinacher
force-pushed
the
feat/FRNT-485-generate-map-of-states
branch
2 times, most recently
from
b4cf180
to
741bf1e
Compare
package.json
Outdated
| @@ -49,6 +49,7 @@ | |||
| "@typescript-eslint/parser": "4.15.0", | |||
| "@wessberg/rollup-plugin-ts": "^1.3.8", | |||
| "babel-loader": "^8.2.2", | |||
| "babel-plugin-extract-react-types": "^0.1.14", | |||
There was a problem hiding this comment.
А для чего добавила этот плагин?
| interface ButtonIconProps { | ||
| disabled: boolean; | ||
| filled: boolean; | ||
| sizes: 'N' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'H'; |
There was a problem hiding this comment.
может экспортнуть тип из lib/map-generation?
| }; | ||
|
|
||
| export const GenerateButtonIconMap = () => ( | ||
| <GenerateMap component={ComponentButtonIcon} x={variants} y={sizes} otherProps={props} /> |
There was a problem hiding this comment.
немного путают пропсы, так как x ближе к группам вариаций, а otherProps больше походит на x ось внутри группы
src/lib/map-generation.tsx
Outdated
|
|
||
| const deepCopy = (obj: Array<Record<string, unknown>>) => JSON.parse(JSON.stringify(obj)); | ||
|
|
||
| export const showHead = (props: Record<string, unknown>) => |
There was a problem hiding this comment.
Название сбивает столку. Функция формирует заголовок группы из пропсов, может как-нибудь отразить это в названии?
src/lib/map-generation.tsx
Outdated
| {variants.map((variant, i) => ( | ||
| <VariantBlock key={i}> | ||
| <Header>{variant.name}</Header> | ||
| <GridTemplate columns={variant.columns + 1}> |
There was a problem hiding this comment.
лучше убрать вычисление значения columns внутрь generateMap
src/lib/map-generation.tsx
Outdated
| {variant.values[0].values.map(({ variants, sizes, ...prop }, headKey) => ( | ||
| <div key={`head-${headKey}`}>{showHead(prop)}</div> | ||
| ))} |
There was a problem hiding this comment.
раз эти комбианции повторяются, можно вынести, к примеру, отдельным свойством на уровне корня variant
src/ui/atoms/input/state-props.tsx
Outdated
| import * as React from 'react'; | ||
| import { IconSearch } from 'static/icons'; | ||
|
|
||
| import { GenerateMap, SizeBlock } from '../../../lib/map-generation'; |
There was a problem hiding this comment.
импорт из lib/map-generation
src/ui/atoms/chip/state-props.tsx
Outdated
| import { ButtonIcon, Chip } from 'ui'; | ||
| import { IconSearch } from 'static/icons'; | ||
|
|
||
| import { GenerateMap, SizeBlock } from '../../../lib/map-generation'; |
There was a problem hiding this comment.
импорт из lib/map-generation
src/ui/atoms/button/state-props.tsx
Outdated
| import { IconSearch } from 'static/icons'; | ||
|
|
||
| import { Button } from '.'; | ||
| import { GenerateMap, SizeBlock } from '../../../lib/map-generation'; |
There was a problem hiding this comment.
импорт из lib/map-generation
| import { ButtonIcon } from 'ui'; | ||
| import { IconSearch } from 'static/icons'; | ||
|
|
||
| import { GenerateMap, SizeBlock } from '../../../lib/map-generation'; |
There was a problem hiding this comment.
импорт из lib/map-generation
There was a problem hiding this comment.
@purplecandle
| import { GenerateMap, SizeBlock } from '../../../lib/map-generation'; | |
| import { GenerateMap, SizeBlock } from 'lib/map-generation'; |
Можно сразу подкинуть code suggestion, чтобы было проще
tatinacher
force-pushed
the
feat/FRNT-485-generate-map-of-states
branch
from
741bf1e
to
e216de8
Compare
tatinacher
force-pushed
the
feat/FRNT-485-generate-map-of-states
branch
from
e216de8
to
065120c
Compare
| GenerateMapProps & { component: React.ComponentType<unknown> } | ||
| > = ({ sizes, variants, otherProps, component }) => { | ||
| const Component = component; | ||
| const variantsMap = generateMap({ y: sizes, x: variants, otherProps }); |
There was a problem hiding this comment.
а что прилетает в otherProps?
There was a problem hiding this comment.
любые пропсы состояний компонента
| ) => { | ||
| let tree = [main]; | ||
|
|
||
| Object.keys(otherProps).forEach((key: string) => { |
There was a problem hiding this comment.
а через reduce тут разве нельзя?
Generate map of component states