refactor(ui/react/components/layout): Flex 컴포넌트 개편, createCssProperty…

…StyleVariants 함수 삭제 (#256)

* feat(ui/react/components/layout): flex.styles.css.ts 삭제, dynamic, enum 속성이 포함된 Flex 컴포넌트 스타일 추가

* refactor(ui/react/components/layout): dynamic, enum 속성이 포함된 Flex 컴포넌트로 개편

* feat(ui/react/components/layout): 사용하지 않는 createCssPropertyStyleVariants 삭제

packages/ui/react/src/components/layout/flex.css.ts

@@ -0,0 +1,53 @@
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { dynamicStyles, dynamicVars, enumStyles } from '../../styles/utils';
+
+const {
+  display: { none, flex, inlineFlex },
+  alignItems: align,
+  justifyContent: justify,
+  flexWrap: wrap,
+  flexDirection: direction,
+} = enumStyles;
+
+export const flexEnumVariants = recipe({
+  variants: {
+    display: {
+      none,
+      flex,
+      inlineFlex,
+    },
+    align,
+    direction,
+    justify,
+    wrap,
+  },
+
+  defaultVariants: {
+    display: 'flex',
+  },
+});
+
+export type FlexEnumVariants = Exclude<
+  RecipeVariants<typeof flexEnumVariants>,
+  undefined
+>;
+
+const { gapVar, gapXVar, gapYVar } = dynamicVars;
+
+export const flexDynamicVariantVars = {
+  gapVar,
+  gapXVar,
+  gapYVar,
+};
+
+const { gap, gapX, gapY } = dynamicStyles;
+
+export const flexDynamicVariants = {
+  gap,
+  gapX,
+  gapY,
+};
+
+export type FlexDynamicVariants = Partial<
+  Record<keyof typeof flexDynamicVariants, number | string>
+>;

packages/ui/react/src/components/layout/flex.tsx

@@ -1,33 +1,42 @@
-import {
-  type HTMLFavolinkProps,
-  favolink,
-  forwardRef,
-} from '@favolink-ui/system';
+import { forwardRef } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
-import * as styles from './flex.styles.css';
-import { extractProps } from '../../extract-props';
-import {
-  type FlexStyleProps,
-  flexStyleProps,
-  flexStyleVars,
-} from '../../styles';
+import { Box, type BoxProps } from './box';
+import * as styles from './flex.css';
+import { extractDynamicProps } from '../../styles';
 
-export type FlexProps = FlexStyleProps & HTMLFavolinkProps<'div'>;
+export type FlexProps = BoxProps &
+  styles.FlexDynamicVariants &
+  styles.FlexEnumVariants;
 
-export const Flex = forwardRef<FlexProps, 'div'>(function Flex(props, ref) {
-  const { children, className, ...restProps } = extractProps(
-    props,
-    flexStyleVars,
-    flexStyleProps,
-  );
+export const Flex = forwardRef<FlexProps, typeof Box>(
+  function Flex(props, forwardedRef) {
+    const {
+      children,
+      className,
+      display,
+      align,
+      direction,
+      justify,
+      wrap,
+      ...restProps
+    } = extractDynamicProps(
+      props,
+      styles.flexDynamicVariantVars,
+      styles.flexDynamicVariants,
+    );
 
-  return (
-    <favolink.div
-      {...restProps}
-      ref={ref}
-      className={cx(styles.flexBase, className)}
-    >
-      {children}
-    </favolink.div>
-  );
-});
+    return (
+      <Box
+        {...restProps}
+        ref={forwardedRef}
+        className={cx(
+          'favolink-flex',
+          styles.flexEnumVariants({ display, align, direction, justify, wrap }),
+          className,
+        )}
+      >
+        {children}
+      </Box>
+    );
+  },
+);

packages/ui/react/src/components/layout/index.ts

@@ -1,8 +1,3 @@
 /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
-export {
-  createCSSPropertyStyleVariants,
-  type CSSPropertyValue,
-} from './create-css-property-style-variants';
-
 export { Box, type BoxProps } from './box';
 export { Flex, type FlexProps } from './flex';