Skip to content

refactor(flex): apply vanilla-extract #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 1, 2025
Merged

refactor(flex): apply vanilla-extract #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1cd4255
refactor(flex): migrate to Vanilla Extract
jiji-hoon96 May 21, 2025
67b0d70
refactor(flex): migrate to Vanilla Extract
jiji-hoon96 May 21, 2025
9649d25
refactor(flex): migrate to Vanilla Extract
jiji-hoon96 May 21, 2025
022f19e
Update packages/flex/src/Flex.tsx
jiji-hoon96 May 23, 2025
2300765
fix(flex): migrate to Vanilla Extract
jiji-hoon96 May 23, 2025
12bea31
fix(flex): migrate to Vanilla Extract
jiji-hoon96 May 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/flex/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@
},
"type": "module",
"exports": "./src/index.ts",
"files": [
"dist"
],
"files": ["dist"],
"scripts": {
"build": "tsup",
"build:storybook": "storybook build",
Expand All @@ -38,6 +36,7 @@
"@testing-library/jest-dom": "catalog:",
"@testing-library/react": "catalog:",
"@types/react": "^18.3.12",
"@vanilla-extract/css": "catalog:",
"happy-dom": "catalog:",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
47 changes: 47 additions & 0 deletions packages/flex/src/Flex.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { style, styleVariants } from '@vanilla-extract/css';
import type { FlexDirection, FlexAlign, FlexJustify, FlexWrap } from './constants';

export const base = style({
display: 'flex',
});

const directionStyles: Record<FlexDirection, { flexDirection: FlexDirection }> = {
Copy link
Contributor

@froggy1014 froggy1014 May 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 상수로 뺄거면 sprinkle 활용해서 properties를 css.ts 에서 다 관리해보는건 어떨까요 ? 이건.. 저도 뭐가 옳은가 찾아보다가 확신이 안들어서.. 의견을 묻습니다 ㅠㅠ

@jiji-hoon96 @noahluftyang

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']>;

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유사한 스타일 패턴이 다른 컴포넌트들(Grid, Stack, Box 등)에서도 반복될 것으로 예상되므로, design system 전체 관점에서 vanilla-extract 확장 기능 도입을 논의해보면 좋을 것 같아.
특히 recipe와 sprinkles는 design system의 일관성과 개발 효율성 측면에서 활용도가 높아보여. 단 라이브러리 의존성에 대한 고민도 좀 해봐야할듯해

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jiji-hoon96

컴포넌트별로 따로 버전관리하고 있으니까.. 아무래도 의존성 같은 부분은 더 생각해봐야겠네

자주 참고하는 디자인시스템인데, 이런식으로 자주쓰이는건 공통 유틸로도 빼서 사용하구 있는거 같더라구, 일단 이건 더 나중에 이야기해보아욤

row: { flexDirection: 'row' },
column: { flexDirection: 'column' },
'row-reverse': { flexDirection: 'row-reverse' },
'column-reverse': { flexDirection: 'column-reverse' },
};
export const direction = styleVariants(directionStyles);

const alignStyles: Record<FlexAlign, { alignItems: FlexAlign }> = {
'flex-start': { alignItems: 'flex-start' },
'flex-end': { alignItems: 'flex-end' },
center: { alignItems: 'center' },
stretch: { alignItems: 'stretch' },
baseline: { alignItems: 'baseline' },
normal: { alignItems: 'normal' },
};
export const align = styleVariants(alignStyles);

const justifyStyles: Record<FlexJustify, { justifyContent: FlexJustify }> = {
'flex-start': { justifyContent: 'flex-start' },
'flex-end': { justifyContent: 'flex-end' },
center: { justifyContent: 'center' },
'space-between': { justifyContent: 'space-between' },
'space-around': { justifyContent: 'space-around' },
'space-evenly': { justifyContent: 'space-evenly' },
normal: { justifyContent: 'normal' },
};
export const justify = styleVariants(justifyStyles);

const wrapStyles: Record<FlexWrap, { flexWrap: FlexWrap }> = {
nowrap: { flexWrap: 'nowrap' },
wrap: { flexWrap: 'wrap' },
'wrap-reverse': { flexWrap: 'wrap-reverse' },
};
export const wrap = styleVariants(wrapStyles);

export const display = styleVariants({
flex: { display: 'flex' },
'inline-flex': { display: 'inline-flex' },
});
11 changes: 0 additions & 11 deletions packages/flex/src/Flex.module.css
View file
Open in desktop

This file was deleted.

41 changes: 38 additions & 3 deletions packages/flex/src/Flex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ const meta = {
},
align: {
control: 'select',
options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'normal'],
description: 'Align items',
},
justify: {
control: 'select',
options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'normal'],
description: 'Justify content',
},
wrap: {
Expand All @@ -34,6 +34,18 @@ const meta = {
control: 'boolean',
description: 'Display as inline-flex',
},
grow: {
control: { type: 'number', min: 0, max: 5, step: 1 },
description: 'Flex grow factor',
},
shrink: {
control: { type: 'number', min: 0, max: 5, step: 1 },
description: 'Flex shrink factor',
},
basis: {
control: 'text',
description: 'Flex basis',
},
},
} satisfies Meta<typeof Flex>;

Expand Down Expand Up @@ -70,7 +82,7 @@ export const Basic: Story = {

export const Direction: Story = {
args: {
direction: 'column',
direction: 'row',
gap: '1rem',
style: { width: '100%' },
children: [<Box key="1" />, <Box key="2" />, <Box key="3" />],
Expand Down Expand Up @@ -139,3 +151,26 @@ export const Wrap: Story = {
],
},
};

export const FlexGrowShrink: Story = {
render: () => (
<Flex gap="1rem" style={{ width: '100%', border: '1px dashed gray', padding: '1rem' }}>
<Box style={{ width: '100px' }}>Fixed width</Box>
<Box style={{ flexGrow: 1 }}>Grow 1</Box>
<Box style={{ flexGrow: 2 }}>Grow 2</Box>
</Flex>
),
};

export const InlineFlex: Story = {
render: () => (
<div>
<p>Text before</p>
<Flex inline gap="1rem" style={{ border: '1px dashed gray', padding: '0.5rem' }}>
<Box style={{ width: '80px', height: '40px' }}>Item 1</Box>
<Box style={{ width: '80px', height: '40px' }}>Item 2</Box>
</Flex>
<p>Text after</p>
</div>
),
};
50 changes: 28 additions & 22 deletions packages/flex/src/Flex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Slot } from '@radix-ui/react-slot';
import { clsx as cx } from 'clsx';
import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react';
import styles from './Flex.module.css';
import * as styles from './Flex.css';
import type { FlexDirection, FlexAlign, FlexJustify, FlexWrap } from './constants';

export interface FlexProps extends ComponentProps<'div'> {
align?: CSSProperties['alignItems'];
justify?: CSSProperties['justifyContent'];
wrap?: CSSProperties['flexWrap'];
direction?: CSSProperties['flexDirection'];
direction?: FlexDirection;
align?: FlexAlign;
justify?: FlexJustify;
wrap?: FlexWrap;
basis?: CSSProperties['flexBasis'];
grow?: CSSProperties['flexGrow'];
shrink?: CSSProperties['flexShrink'];
Expand All @@ -18,14 +19,14 @@ export interface FlexProps extends ComponentProps<'div'> {

export const Flex = forwardRef(function Flex(
{
align,
justify,
wrap,
direction,
direction = 'row',
align = 'normal',
justify = 'normal',
wrap = 'nowrap',
basis,
grow,
shrink,
inline,
inline = false,
gap,
className,
style,
Expand All @@ -37,21 +38,26 @@ export const Flex = forwardRef(function Flex(
) {
const Component = asChild ? Slot : 'div';

const flexStyle = {
'--flex-display': inline ? 'inline-flex' : 'flex',
'--flex-direction': direction ?? 'row',
'--flex-align': align ?? 'normal',
'--flex-justify': justify ?? 'normal',
'--flex-wrap': wrap ?? 'nowrap',
'--flex-gap': gap,
'--flex-basis': basis,
'--flex-grow': grow,
'--flex-shrink': shrink,
const classNames = cx(
styles.base,
styles.direction[direction],
styles.align[align],
styles.justify[justify],
styles.wrap[wrap],
inline ? styles.display['inline-flex'] : styles.display.flex,
className,
);

const inlineStyles = {
flexBasis: basis,
flexGrow: grow,
flexShrink: shrink,
gap,
...style,
} as React.CSSProperties;
};

return (
<Component ref={ref} className={cx(styles.flex, className)} style={flexStyle} {...rest}>
<Component ref={ref} className={classNames} style={inlineStyles} {...rest}>
{children}
</Component>
);
Expand Down
19 changes: 19 additions & 0 deletions packages/flex/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export const FLEX_DIRECTIONS = ['row', 'column', 'row-reverse', 'column-reverse'] as const;
export type FlexDirection = (typeof FLEX_DIRECTIONS)[number];

export const FLEX_ALIGNS = ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'normal'] as const;

Check warning on line 4 in packages/flex/src/constants/index.ts

View check run for this annotation

Codecov / codecov/patch

packages/flex/src/constants/index.ts#L4 

Added line #L4 was not covered by tests
export type FlexAlign = (typeof FLEX_ALIGNS)[number];

export const FLEX_JUSTIFY_CONTENTS = [
'flex-start',
'flex-end',
'center',
'space-between',
'space-around',
'space-evenly',
'normal',
] as const;

Check warning on line 15 in packages/flex/src/constants/index.ts

View check run for this annotation

Codecov / codecov/patch

packages/flex/src/constants/index.ts#L7-L15 

Added lines #L7 - L15 were not covered by tests
export type FlexJustify = (typeof FLEX_JUSTIFY_CONTENTS)[number];

export const FLEX_WRAPS = ['nowrap', 'wrap', 'wrap-reverse'] as const;

Check warning on line 18 in packages/flex/src/constants/index.ts

View check run for this annotation

Codecov / codecov/patch

packages/flex/src/constants/index.ts#L18 

Added line #L18 was not covered by tests
export type FlexWrap = (typeof FLEX_WRAPS)[number];
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.