feat(shared/components/flex): flex 컴포넌트에 grow, shrink, basis 속성 추가, i…

…nline vars 사용 (#140)

* feat(shared/components/flex/flex.styles.css.ts): createVars를 사용한 값으로 변경

* feat(shared/components/flex/flex.tsx): grow, shrink, basis 속성 추가, lnline vars를 사용한 것으로 변경

packages/shared/components/src/layout/flex.styles.css.ts

@@ -1,79 +1,26 @@
-import { style } from '@vanilla-extract/css';
-import { createCSSPropertyStyleVariants } from './create-css-property-style-variants';
+import { createVar, style } from '@vanilla-extract/css';
 
-export const flexBase = style({
-  display: 'flex',
-});
-
-export const flexJustify = createCSSPropertyStyleVariants('justifyContent', [
-  '-moz-initial',
-  'center',
-  'end',
-  'flex-end',
-  'flex-start',
-  'inherit',
-  'initial',
-  'left',
-  'normal',
-  'revert',
-  'revert-layer',
-  'right',
-  'space-around',
-  'space-between',
-  'space-evenly',
-  'start',
-  'stretch',
-  'unset',
-]);
+export const flexJustify = createVar();
 
-export type FlexJustify = keyof typeof flexJustify;
+export const flexAlign = createVar();
 
-export const flexAlign = createCSSPropertyStyleVariants('alignItems', [
-  '-moz-initial',
-  'baseline',
-  'center',
-  'end',
-  'flex-end',
-  'flex-start',
-  'inherit',
-  'initial',
-  'normal',
-  'revert',
-  'revert-layer',
-  'self-end',
-  'self-start',
-  'start',
-  'stretch',
-  'unset',
-]);
+export const flexWrap = createVar();
 
-export type FlexAlign = keyof typeof flexAlign;
+export const flexDirection = createVar();
 
-export const flexWrap = createCSSPropertyStyleVariants('flexWrap', [
-  '-moz-initial',
-  'inherit',
-  'initial',
-  'nowrap',
-  'revert',
-  'revert-layer',
-  'unset',
-  'wrap',
-  'wrap-reverse',
-]);
+export const flexBasis = createVar();
 
-export type FlexWrap = keyof typeof flexWrap;
+export const flexShrink = createVar();
 
-export const flexDirection = createCSSPropertyStyleVariants('flexDirection', [
-  '-moz-initial',
-  'column',
-  'column-reverse',
-  'inherit',
-  'initial',
-  'revert',
-  'revert-layer',
-  'row',
-  'row-reverse',
-  'unset',
-]);
+export const flexGrow = createVar();
 
-export type FlexDirection = keyof typeof flexDirection;
+export const flexBase = style({
+  display: 'flex',
+  justifyContent: flexJustify,
+  alignItems: flexAlign,
+  flexWrap,
+  flexDirection,
+  flexBasis,
+  flexShrink,
+  flexGrow,
+});

packages/shared/components/src/layout/flex.tsx

@@ -1,12 +1,17 @@
 import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
 import { classNames } from '@favolink/utils';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { type CSSProperties } from 'react';
 import * as styles from './flex.styles.css';
 
 type FlexOptions = {
-  justify?: styles.FlexJustify;
-  align?: styles.FlexAlign;
-  wrap?: styles.FlexWrap;
-  direction?: styles.FlexDirection;
+  justify?: CSSProperties['justifyContent'];
+  align?: CSSProperties['alignItems'];
+  wrap?: CSSProperties['flexWrap'];
+  direction?: CSSProperties['flexDirection'];
+  grow?: CSSProperties['flexGrow'];
+  shrink?: CSSProperties['flexShrink'];
+  basis?: CSSProperties['flexBasis'];
 };
 
 export type FlexProps = FlexOptions & HTMLFavolinkProps<'div'>;
@@ -15,25 +20,34 @@ export const Flex = forwardRef<FlexProps, 'div'>(function Flex(props, ref) {
   const {
     children,
     className,
-    justify = 'normal',
-    align = 'normal',
-    wrap = 'nowrap',
-    direction = 'row',
+    style,
+    justify,
+    align,
+    wrap,
+    direction,
+    grow,
+    shrink,
+    basis,
     ...restProps
   } = props;
 
   return (
     <favolink.div
       {...restProps}
       ref={ref}
-      className={classNames(
-        styles.flexBase,
-        styles.flexJustify[justify],
-        styles.flexAlign[align],
-        styles.flexWrap[wrap],
-        styles.flexDirection[direction],
-        className,
-      )}
+      className={classNames(styles.flexBase, className)}
+      style={{
+        ...assignInlineVars({
+          [styles.flexJustify]: justify,
+          [styles.flexAlign]: align,
+          [styles.flexWrap]: wrap,
+          [styles.flexDirection]: direction,
+          [styles.flexShrink]: String(shrink),
+          [styles.flexBasis]: String(basis),
+          [styles.flexGrow]: String(grow),
+        }),
+        ...style,
+      }}
     >
       {children}
     </favolink.div>