refactor(ui/components/layout): layout style 분리, extractFlexProps, extractLayoutProps 추가

packages/ui/src/components/layout/box.css.ts

@@ -1,130 +1,18 @@
-import { createThemeContract, style } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import {
-  flexGrow,
-  flexShrink,
-  overflow,
-  overflowX,
-  overflowY,
-  position,
-} from '../../styles';
+import { display } from '../../styles';
 
-export const dynamicVars = createThemeContract({
-  padding: null,
-  paddingX: null,
-  paddingY: null,
-  paddingTop: null,
-  paddingRight: null,
-  paddingBottom: null,
-  paddingLeft: null,
-  width: null,
-  minWidth: null,
-  maxWidth: null,
-  height: null,
-  minHeight: null,
-  maxHeight: null,
-  inset: null,
-  top: null,
-  right: null,
-  bottom: null,
-  left: null,
-  flexBasis: null,
-});
-
-export const padding = style({
-  padding: dynamicVars.padding,
-});
-
-export const paddingX = style({
-  paddingRight: dynamicVars.paddingX,
-  paddingLeft: dynamicVars.paddingX,
-});
-
-export const paddingY = style({
-  paddingRight: dynamicVars.paddingY,
-  paddingLeft: dynamicVars.paddingY,
-});
-
-export const paddingTop = style({
-  paddingTop: dynamicVars.paddingTop,
-});
-
-export const paddingRight = style({
-  paddingRight: dynamicVars.paddingRight,
-});
-
-export const paddingBottom = style({
-  paddingBottom: dynamicVars.paddingBottom,
-});
-
-export const paddingLeft = style({
-  paddingLeft: dynamicVars.paddingLeft,
-});
-
-export const width = style({
-  width: dynamicVars.width,
-});
-
-export const minWidth = style({
-  minHeight: dynamicVars.minWidth,
-});
-
-export const maxWidth = style({
-  maxHeight: dynamicVars.maxWidth,
-});
-
-export const height = style({
-  height: dynamicVars.height,
-});
-
-export const minHeight = style({
-  minHeight: dynamicVars.minHeight,
-});
-
-export const maxHeight = style({
-  maxHeight: dynamicVars.maxHeight,
-});
-
-export const inset = style({
-  inset: dynamicVars.inset,
-});
-
-export const top = style({
-  top: dynamicVars.top,
-});
-
-export const right = style({
-  right: dynamicVars.right,
-});
-
-export const bottom = style({
-  bottom: dynamicVars.bottom,
-});
-
-export const left = style({
-  left: dynamicVars.left,
-});
-
-export const flexBasis = style({
-  flexBasis: dynamicVars.flexBasis,
-});
-
-export type BoxDynamicVariants = {
-  [K in keyof typeof dynamicVars]?: number | string;
-};
-
-export const boxEnumVariants = recipe({
+export const boxVariants = recipe({
   variants: {
-    position,
-    overflow,
-    overflowX,
-    overflowY,
-    flexShrink,
-    flexGrow,
+    display: {
+      none: display.none,
+      inline: display.inline,
+      'inline-block': display['inline-block'],
+      block: display.block,
+    },
   },
 });
 
-export type BoxEnumVariants = Exclude<
-  RecipeVariants<typeof boxEnumVariants>,
+export type BoxVariants = Exclude<
+  RecipeVariants<typeof boxVariants>,
   undefined
 >;

packages/ui/src/components/layout/box.tsx

@@ -1,115 +1,49 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import * as styles from './box.css';
-import { type HTMLFavolinkProps, Slot, forwardRef } from '../../system';
-import { cx, mergeStyles, px } from '../../utils';
+import * as Styles from './box.css';
+import { extractLayoutProps } from './extract-layout-props';
+import type * as CommonStyles from './layout.css';
+import {
+  type HTMLFavolinkPropsWithout,
+  type RemovedProps,
+  Slot,
+  forwardRef,
+} from '../../system';
+import { cx } from '../../utils';
 import { type MarginVariants, extractMarginProps } from '../margin';
 
-type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' };
+type BoxDivProps = HTMLFavolinkPropsWithout<'div', RemovedProps> & {
+  as?: 'div';
+};
 
-type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' };
+type BoxSpanProps = HTMLFavolinkPropsWithout<'span', RemovedProps> & {
+  as: 'span';
+};
 
-export type BoxProps = MarginVariants &
-  styles.BoxDynamicVariants &
-  styles.BoxEnumVariants &
+export type BoxProps = CommonStyles.LayoutVariants &
+  MarginVariants &
+  Styles.BoxVariants &
   (BoxDivProps | BoxSpanProps);
 
 export const Box = forwardRef<BoxProps, 'div'>(
   function Box(props, forwardedRef) {
     const {
       as: Tag = 'div',
       asChild,
-      children,
       className,
-      style,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      width,
-      minWidth,
-      maxWidth,
-      height,
-      minHeight,
-      maxHeight,
-      position,
-      inset,
-      top,
-      right,
-      bottom,
-      left,
-      overflow,
-      overflowX,
-      overflowY,
-      flexBasis,
-      flexShrink,
-      flexGrow,
+      display,
       ...restProps
-    } = extractMarginProps(props);
+    } = extractMarginProps(extractLayoutProps(props));
 
     return (
       <Slot
         {...restProps}
         ref={forwardedRef}
         className={cx(
           'favolink-box',
-          padding && styles.padding,
-          paddingX && styles.paddingX,
-          paddingY && styles.paddingY,
-          paddingTop && styles.paddingTop,
-          paddingRight && styles.paddingRight,
-          paddingBottom && styles.paddingBottom,
-          paddingLeft && styles.paddingLeft,
-          width && styles.width,
-          minWidth && styles.minWidth,
-          maxWidth && styles.maxWidth,
-          height && styles.width,
-          minHeight && styles.minHeight,
-          maxHeight && styles.maxHeight,
-          inset && styles.inset,
-          top && styles.top,
-          right && styles.right,
-          bottom && styles.bottom,
-          left && styles.left,
-          flexBasis && styles.flexBasis,
-          styles.boxEnumVariants({
-            position,
-            overflow,
-            overflowX,
-            overflowY,
-            flexShrink,
-            flexGrow,
-          }),
+          Styles.boxVariants({ display }),
           className,
         )}
-        style={mergeStyles(
-          assignInlineVars({
-            [styles.dynamicVars.padding]: px(padding),
-            [styles.dynamicVars.paddingX]: px(paddingX),
-            [styles.dynamicVars.paddingY]: px(paddingY),
-            [styles.dynamicVars.paddingTop]: px(paddingTop),
-            [styles.dynamicVars.paddingRight]: px(paddingRight),
-            [styles.dynamicVars.paddingBottom]: px(paddingBottom),
-            [styles.dynamicVars.paddingLeft]: px(paddingLeft),
-            [styles.dynamicVars.width]: px(width),
-            [styles.dynamicVars.minWidth]: px(minWidth),
-            [styles.dynamicVars.maxWidth]: px(maxWidth),
-            [styles.dynamicVars.height]: px(height),
-            [styles.dynamicVars.minHeight]: px(minHeight),
-            [styles.dynamicVars.maxHeight]: px(maxHeight),
-            [styles.dynamicVars.inset]: px(inset),
-            [styles.dynamicVars.top]: px(top),
-            [styles.dynamicVars.right]: px(right),
-            [styles.dynamicVars.bottom]: px(bottom),
-            [styles.dynamicVars.left]: px(left),
-            [styles.dynamicVars.flexBasis]: px(flexBasis),
-          }),
-          style,
-        )}
       >
-        {asChild ? children : <Tag>{children}</Tag>}
+        {asChild ? props.children : <Tag>{props.children}</Tag>}
       </Slot>
     );
   },

packages/ui/src/components/layout/extract-flex-props.ts

@@ -0,0 +1,49 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { type CSSProperties } from 'react';
+import * as Styles from './flex.css';
+import { cx, mergeStyles, px } from '../../utils';
+
+export function extractFlexProps<
+  P extends Styles.FlexVariants & {
+    [key: string]: any;
+    className?: string;
+    style?: CSSProperties;
+  },
+>(props: P) {
+  const {
+    display,
+    direction,
+    align,
+    justify,
+    wrap,
+    gap,
+    gapX,
+    gapY,
+    ...restProps
+  } = props;
+
+  const newClassName = cx(
+    gap && Styles.gap,
+    gapX && Styles.gapX,
+    gapY && Styles.gapY,
+    Styles.flexEnumVariants({ display, direction, align, justify, wrap }),
+    props.className,
+  );
+
+  const newStyle = mergeStyles(
+    assignInlineVars({
+      [Styles.dynamicVars.gap]: px(gap),
+      [Styles.dynamicVars.gapX]: px(gapX),
+      [Styles.dynamicVars.gapY]: px(gapY),
+    }),
+    props.style,
+  );
+
+  const resultProps = {
+    ...restProps,
+    className: newClassName,
+    style: newStyle,
+  } as Omit<P, keyof Styles.FlexVariants>;
+
+  return resultProps;
+}