refactor(flex): apply vanilla-extract #163
Conversation
- CSS 클래스로 변환 - 스토리북에 grow, shrink, basis 추가 - 일부 동적요소 대응하도록 수정
jiji-hoon96
requested review from
noahluftyang,
froggy1014,
synuns,
dev-hobin,
leejiwonn and
haedawn
as code owners
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
- build 버그 수정
Codecov ReportAttention: Patch coverage is
🚀 New features to boost your workflow:
|
packages/flex/src/Flex.tsx
Outdated
| align && styles.align[align], | ||
| justify && styles.justify[justify], | ||
| wrap && styles.wrap[wrap], | ||
| inline && styles.display['inline-flex'], |
There was a problem hiding this comment.
styles.base에 display:flex가 default 값이고, inline flag가 세워지면 inline-flex로 오버라이딩이 되는 방식인 것 같은데, 그 의도를 파악하기 어려웠달까요.
inline ? styles.display['inline-flex'] : styles.display['flex']
or
inline ? styles.display['inline-flex'] : styles.base
이런식으로 하는건 어떤가효...? styles.base가 아직 display: flex만 잡고있기에 가능하긴 합니다만.
There was a problem hiding this comment.
흠.. 그럴 수 있겠네
그럼 base 를 조건부 거는게 아니라 inline 조건부 걸어서 CSS 오버라이드에 의존하지 않도록 해야겠다!
Co-authored-by: Evan <[email protected]>
- 명시적 조건부 렌더링 추가
packages/flex/src/Flex.tsx
Outdated
| direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; | ||
| align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'normal'; | ||
| justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'normal'; | ||
| wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; |
There was a problem hiding this comment.
Flex.css.ts에서 정의된 variant를 여기서 다시 한번 하드코딩으로 집어 넣게되면, 나중에 변경되었을때 유지보수가 힘들 것 같은데, Flex variant를 같이 공유해서 타입을 잡을 수는 없을까요 ?
There was a problem hiding this comment.
오케!
상수 파일에서 통합관리 하도록 분리했어! 땡큐
- 코드 리뷰 반영 - constants 로 상수값 관리 - lint 버그 수정
| display: 'flex', | ||
| }); | ||
|
|
||
| const directionStyles: Record<FlexDirection, { flexDirection: FlexDirection }> = { |
There was a problem hiding this comment.
이렇게 상수로 뺄거면 sprinkle 활용해서 properties를 css.ts 에서 다 관리해보는건 어떨까요 ? 이건.. 저도 뭐가 옳은가 찾아보다가 확신이 안들어서.. 의견을 묻습니다 ㅠㅠ
import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
const flexProperties = defineProperties({
properties: {
display: ['flex', 'inline-flex'],
flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'normal'],
justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'normal'],
flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
},
});
export const flexSprinkles = createSprinkles(flexProperties);
export type FlexSprinkles = Parameters<typeof flexSprinkles>[0];
export type FlexDirection = NonNullable<FlexSprinkles['flexDirection']>;
export type FlexAlign = NonNullable<FlexSprinkles['alignItems']>;
export type FlexJustify = NonNullable<FlexSprinkles['justifyContent']>;
export type FlexWrap = NonNullable<FlexSprinkles['flexWrap']>;There was a problem hiding this comment.
유사한 스타일 패턴이 다른 컴포넌트들(Grid, Stack, Box 등)에서도 반복될 것으로 예상되므로, design system 전체 관점에서 vanilla-extract 확장 기능 도입을 논의해보면 좋을 것 같아.
특히 recipe와 sprinkles는 design system의 일관성과 개발 효율성 측면에서 활용도가 높아보여. 단 라이브러리 의존성에 대한 고민도 좀 해봐야할듯해
There was a problem hiding this comment.
컴포넌트별로 따로 버전관리하고 있으니까.. 아무래도 의존성 같은 부분은 더 생각해봐야겠네
자주 참고하는 디자인시스템인데, 이런식으로 자주쓰이는건 공통 유틸로도 빼서 사용하구 있는거 같더라구, 일단 이건 더 나중에 이야기해보아욤
Changes
Visuals
Checklist
Additional Discussion Points