feat(ui/react): extractMarginProps, margin 관련 style 추가 (#285)

* feat(ui/react): extractMarginProps, margin 관련 style 추가 * feat(ui/react): 컴포넌트들에 margin 속성 추가
dnd-side-project · Aug 1, 2024 · 3d25d2d · 3d25d2d
1 parent e91efcd
commit 3d25d2d
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 13 deletions.
diff --git a/packages/ui/react/src/components/layout/box.tsx b/packages/ui/react/src/components/layout/box.tsx
@@ -2,12 +2,14 @@ import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system';
 import { cx, mergeStyles, px } from '@favolink-ui/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import * as styles from './box.css';
+import { type MarginVariants, extractMarginProps } from '../../margin';
 
 type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' };
 
 type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' };
 
-export type BoxProps = styles.BoxDynamicVariants &
+export type BoxProps = MarginVariants &
+  styles.BoxDynamicVariants &
   styles.BoxEnumVariants &
   (BoxDivProps | BoxSpanProps);
 
@@ -45,7 +47,7 @@ export const Box = forwardRef<BoxProps, 'div'>(
       flexShrink,
       flexGrow,
       ...restProps
-    } = props;
+    } = extractMarginProps(props);
 
     return (
       <Slot

diff --git a/packages/ui/react/src/components/layout/flex.tsx b/packages/ui/react/src/components/layout/flex.tsx
@@ -11,7 +11,6 @@ export type FlexProps = BoxProps &
 export const Flex = forwardRef<FlexProps, typeof Box>(
   function Flex(props, forwardedRef) {
     const {
-      children,
       className,
       style,
       display,
@@ -45,9 +44,7 @@ export const Flex = forwardRef<FlexProps, typeof Box>(
           }),
           style,
         )}
-      >
-        {children}
-      </Box>
+      />
     );
   },
 );
diff --git a/packages/ui/react/src/components/tag/tag.tsx b/packages/ui/react/src/components/tag/tag.tsx
@@ -5,21 +5,22 @@ import {
 } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
 import * as styles from './tag.css';
+import { type MarginVariants, extractMarginProps } from '../../margin';
 
-export type TagProps = HTMLFavolinkProps<'span'> & styles.TagVariants;
+export type TagProps = HTMLFavolinkProps<'span'> &
+  MarginVariants &
+  styles.TagVariants;
 
 export const Tag = forwardRef<TagProps, 'span'>(
   function Tag(props, forwardedRef) {
-    const { children, className, color, ...restProps } = props;
+    const { className, color, ...restProps } = extractMarginProps(props);
 
     return (
       <favolink.span
         {...restProps}
         ref={forwardedRef}
         className={cx('favolink-tag', styles.tagVariants({ color }), className)}
-      >
-        {children}
-      </favolink.span>
+      />
     );
   },
 );
diff --git a/packages/ui/react/src/components/typography/heading.tsx b/packages/ui/react/src/components/typography/heading.tsx
@@ -2,9 +2,11 @@ import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
 import * as styles from './heading.css';
 import * as commonStyles from './typography.css';
+import { type MarginVariants, extractMarginProps } from '../../margin';
 
 export type HeadingProps = commonStyles.TypographyVariants &
   HTMLFavolinkProps<'h1'> &
+  MarginVariants &
   styles.HeadingVariants;
 
 export const Heading = forwardRef<HeadingProps, 'h1'>(
@@ -20,7 +22,7 @@ export const Heading = forwardRef<HeadingProps, 'h1'>(
       wrap,
       weight,
       ...restProps
-    } = props;
+    } = extractMarginProps(props);
 
     return (
       <Slot

diff --git a/packages/ui/react/src/components/typography/text.tsx b/packages/ui/react/src/components/typography/text.tsx
@@ -2,6 +2,7 @@ import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
 import * as styles from './text.css';
 import * as commonStyles from './typography.css';
+import { type MarginVariants, extractMarginProps } from '../../margin';
 
 type TextDivProps = HTMLFavolinkProps<'div'> & { as: 'div' };
 
@@ -12,6 +13,7 @@ type TextPProps = HTMLFavolinkProps<'p'> & { as: 'p' };
 type TextSpanProps = HTMLFavolinkProps<'span'> & { as?: 'span' };
 
 export type TextProps = commonStyles.TypographyVariants &
+  MarginVariants &
   styles.TextVariants &
   (TextDivProps | TextLabelProps | TextPProps | TextSpanProps);
 
@@ -29,7 +31,7 @@ export const Text = forwardRef<TextProps, 'span'>(
       size,
       weight,
       ...restProps
-    } = props;
+    } = extractMarginProps(props);
 
     return (
       <Slot

diff --git a/packages/ui/react/src/margin/extract-margin-props.ts b/packages/ui/react/src/margin/extract-margin-props.ts
@@ -0,0 +1,57 @@
+import { cx, mergeStyles, px } from '@favolink-ui/utils';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { type CSSProperties } from 'react';
+import * as styles from './margin.css';
+
+export function extractMarginProps<
+  P extends styles.MarginVariants & {
+    [key: string]: any;
+    className?: string;
+    style?: CSSProperties;
+  },
+>(props: P) {
+  const {
+    className,
+    style,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    ...restProps
+  } = props;
+
+  const newClassName = cx(
+    margin && styles.margin,
+    marginX && styles.marginX,
+    marginY && styles.marginY,
+    marginTop && styles.marginTop,
+    marginRight && styles.marginRight,
+    marginBottom && styles.marginBottom,
+    marginLeft && styles.marginLeft,
+    className,
+  );
+
+  const newStyle = mergeStyles(
+    assignInlineVars({
+      [styles.marginVars.margin]: px(margin),
+      [styles.marginVars.marginX]: px(marginX),
+      [styles.marginVars.marginY]: px(marginY),
+      [styles.marginVars.marginTop]: px(marginTop),
+      [styles.marginVars.marginRight]: px(marginRight),
+      [styles.marginVars.marginBottom]: px(marginBottom),
+      [styles.marginVars.marginLeft]: px(marginLeft),
+    }),
+    style,
+  );
+
+  const resultProps = {
+    ...restProps,
+    className: newClassName,
+    style: newStyle,
+  } as Omit<P, keyof styles.MarginVariants>;
+
+  return resultProps;
+}
diff --git a/packages/ui/react/src/margin/index.ts b/packages/ui/react/src/margin/index.ts
@@ -0,0 +1,3 @@
+/* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
+export { extractMarginProps } from './extract-margin-props';
+export { type MarginVariants } from './margin.css';
diff --git a/packages/ui/react/src/margin/margin.css.ts b/packages/ui/react/src/margin/margin.css.ts
@@ -0,0 +1,45 @@
+import { createThemeContract, style } from '@vanilla-extract/css';
+
+export const marginVars = createThemeContract({
+  margin: null,
+  marginX: null,
+  marginY: null,
+  marginTop: null,
+  marginRight: null,
+  marginBottom: null,
+  marginLeft: null,
+});
+
+export const margin = style({
+  margin: marginVars.margin,
+});
+
+export const marginX = style({
+  marginRight: marginVars.marginX,
+  marginLeft: marginVars.marginX,
+});
+
+export const marginY = style({
+  marginRight: marginVars.marginX,
+  marginLeft: marginVars.marginX,
+});
+
+export const marginTop = style({
+  marginTop: marginVars.marginTop,
+});
+
+export const marginRight = style({
+  marginRight: marginVars.marginRight,
+});
+
+export const marginBottom = style({
+  marginBottom: marginVars.marginBottom,
+});
+
+export const marginLeft = style({
+  marginLeft: marginVars.marginLeft,
+});
+
+export type MarginVariants = {
+  [K in keyof typeof marginVars]?: number | string;
+};