refactor(ui/react): styleVariants에서 recipe로 변경 (#190)

* refactor(ui/react/components/button): button recipe로 변경 * refactor(ui/react/components/input): inputElement, input recipt로 변경 * refactor(ui/react/components/link): link recipt로 변경 * refactor(ui/react/components/typography): heading, text recipe로 변경 * refactor(ui/react/components/tag): tagIcon, tagLabel, tag recipe로 변경 * refactor(ui/react/components/button): iconButton recipe로 변경 * refactor(ui/react/components/modal): modalOverlay, modalTitle, modalTopbar recipe로 변경
dnd-side-project · May 29, 2024 · 32433cf · 32433cf
1 parent 47ea7a6
commit 32433cf
Show file tree

Hide file tree

Showing 30 changed files with 404 additions and 333 deletions.
diff --git a/packages/ui/react/src/components/button/button.styles.css.ts b/packages/ui/react/src/components/button/button.styles.css.ts
@@ -1,41 +1,47 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { h5Bold, h6SemiBold } from '../../styles/text.css';
 import { vars } from '../../styles/vars.css';
 
-export const buttonBase = style({
-  borderRadius: 8,
-  cursor: 'pointer',
-});
-
-export const buttonSize = styleVariants({
-  small: [h6SemiBold, { minWidth: 100, minHeight: 30 }],
-  medium: [h6SemiBold, { minWidth: 202, minHeight: 40 }],
-  large: [h5Bold, { minWidth: 332, minHeight: 44 }],
-});
-
-export type ButtonSize = keyof typeof buttonSize;
-
-export const buttonColorScheme = styleVariants({
-  gray: {
-    backgroundColor: vars.color.gray[400],
-    border: `1px solid ${vars.color.gray[400]}`,
-    color: vars.color.gray[200],
-  },
-  black: {
-    backgroundColor: vars.color.gray[1000],
-    border: `1px solid ${vars.color.gray[1000]}`,
-    color: 'white',
+export const button = recipe({
+  base: {
+    borderRadius: 8,
+    cursor: 'pointer',
   },
-  white: {
-    backgroundColor: 'white',
-    border: `1px solid ${vars.color.gray[300]}`,
-    color: vars.color.gray[900],
+
+  variants: {
+    colorScheme: {
+      gray: {
+        backgroundColor: vars.color.gray[400],
+        border: `1px solid ${vars.color.gray[400]}`,
+        color: vars.color.gray[200],
+      },
+      black: {
+        backgroundColor: vars.color.gray[1000],
+        border: `1px solid ${vars.color.gray[1000]}`,
+        color: 'white',
+      },
+      white: {
+        backgroundColor: 'white',
+        border: `1px solid ${vars.color.gray[300]}`,
+        color: vars.color.gray[900],
+      },
+      red: {
+        backgroundColor: vars.color.system[300],
+        border: `1px solid ${vars.color.system[300]}`,
+        color: 'white',
+      },
+    },
+    size: {
+      small: [h6SemiBold, { minWidth: 100, minHeight: 30 }],
+      medium: [h6SemiBold, { minWidth: 202, minHeight: 40 }],
+      large: [h5Bold, { minWidth: 332, minHeight: 44 }],
+    },
   },
-  red: {
-    backgroundColor: vars.color.system[300],
-    border: `1px solid ${vars.color.system[300]}`,
-    color: 'white',
+
+  defaultVariants: {
+    colorScheme: 'white',
+    size: 'medium',
   },
 });
 
-export type ButtonColorScheme = keyof typeof buttonColorScheme;
+export type ButtonVariants = RecipeVariants<typeof button>;
diff --git a/packages/ui/react/src/components/button/button.tsx b/packages/ui/react/src/components/button/button.tsx
@@ -6,30 +6,19 @@ import {
 import { cx } from '@favolink-ui/utils';
 import * as styles from './button.styles.css';
 
-export type ButtonProps = HTMLFavolinkProps<'button'> & {
-  colorScheme?: styles.ButtonColorScheme;
-  size?: styles.ButtonSize;
-};
+export type ButtonProps = HTMLFavolinkProps<'button'> & styles.ButtonVariants;
 
 export const Button = forwardRef<ButtonProps, 'button'>(
   function Button(props, ref) {
-    const {
-      children,
-      className,
-      colorScheme = 'white',
-      size = 'medium',
-      ...restProps
-    } = props;
+    const { children, className, colorScheme, size, ...restProps } = props;
 
     return (
       <favolink.button
         {...restProps}
         ref={ref}
         className={cx(
           'favolink-button',
-          styles.buttonBase,
-          styles.buttonSize[size],
-          styles.buttonColorScheme[colorScheme],
+          styles.button({ size, colorScheme }),
           className,
         )}
       >

diff --git a/packages/ui/react/src/components/button/icon-button.styles.css.ts b/packages/ui/react/src/components/button/icon-button.styles.css.ts
@@ -1,23 +1,29 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { h4SemiBold, h5SemiBold, h6SemiBold } from '../../styles/text.css';
 import * as tagStyles from '../tag/tag.styles.css';
 
-export const iconButtonBase = style({
-  cursor: 'pointer',
-  borderRadius: 8,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const iconButtonSize = styleVariants({
-  small: [h6SemiBold, { padding: 8 }],
-  medium: [h5SemiBold, { padding: 10 }],
-  large: [h4SemiBold, { padding: 12 }],
-});
+export const iconButton = recipe({
+  base: {
+    cursor: 'pointer',
+    borderRadius: 8,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 
-export type IconButtonSize = keyof typeof iconButtonSize;
+  variants: {
+    size: {
+      small: [h6SemiBold, { padding: 8 }],
+      medium: [h5SemiBold, { padding: 10 }],
+      large: [h4SemiBold, { padding: 12 }],
+    },
+    colorScheme: tagStyles.colorScheme,
+  },
 
-export const iconButtoncolorScheme = tagStyles.tagColorScheme;
+  defaultVariants: {
+    colorScheme: 'white',
+    size: 'small',
+  },
+});
 
-export type IconButtonColorScheme = tagStyles.TagColorScheme;
+export type IconButtonVariants = RecipeVariants<typeof iconButton>;
diff --git a/packages/ui/react/src/components/button/icon-button.tsx b/packages/ui/react/src/components/button/icon-button.tsx
@@ -7,31 +7,22 @@ import { cx } from '@favolink-ui/utils';
 import { type ReactElement } from 'react';
 import * as styles from './icon-button.styles.css';
 
-export type IconButtonProps = HTMLFavolinkProps<'button'> & {
-  icon: ReactElement;
-  colorScheme?: styles.IconButtonColorScheme;
-  size?: styles.IconButtonSize;
-};
+export type IconButtonProps = HTMLFavolinkProps<'button'> &
+  styles.IconButtonVariants & {
+    icon: ReactElement;
+  };
 
 export const IconButton = forwardRef<IconButtonProps, 'button'>(
   function IconButton(props, ref) {
-    const {
-      className,
-      icon,
-      colorScheme = 'white',
-      size = 'small',
-      ...restProps
-    } = props;
+    const { className, icon, colorScheme, size, ...restProps } = props;
 
     return (
       <favolink.button
         {...restProps}
         ref={ref}
         className={cx(
           'favolink-button',
-          styles.iconButtonBase,
-          styles.iconButtonSize[size],
-          styles.iconButtoncolorScheme[colorScheme],
+          styles.iconButton({ colorScheme, size }),
           className,
         )}
       >

diff --git a/packages/ui/react/src/components/input/input-element.styles.css.ts b/packages/ui/react/src/components/input/input-element.styles.css.ts
@@ -1,15 +1,25 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 
-export const inputElementBase = style({
-  width: 42,
-  position: 'absolute',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
+export const inputElement = recipe({
+  base: {
+    width: 42,
+    position: 'absolute',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 
-export const inputElementDirection = styleVariants({
-  right: [inputElementBase, { top: 0, right: 0 }],
-  left: [inputElementBase, { top: 0, left: 0 }],
+  variants: {
+    direction: {
+      right: {
+        top: 0,
+        right: 0,
+      },
+      left: {
+        top: 0,
+        left: 0,
+      },
+    },
+  },
 });
diff --git a/packages/ui/react/src/components/input/input-element.tsx b/packages/ui/react/src/components/input/input-element.tsx
@@ -20,7 +20,7 @@ export const InputLeftElement = forwardRef<InputLeftElementProps, 'div'>(
         ref={ref}
         className={cx(
           '$favolink-input__left-element',
-          styles.inputElementDirection.left,
+          styles.inputElement({ direction: 'left' }),
           className,
         )}
       >
@@ -42,7 +42,7 @@ export const InputRightElement = forwardRef<InputRightElementProps, 'div'>(
         ref={ref}
         className={cx(
           'favolink-input__right-element',
-          styles.inputElementDirection.right,
+          styles.inputElement({ direction: 'right' }),
           className,
         )}
       >

diff --git a/packages/ui/react/src/components/input/input.styles.css.ts b/packages/ui/react/src/components/input/input.styles.css.ts
@@ -1,62 +1,71 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { inputElementDirection } from './input-element.styles.css';
+import { style } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { inputElement } from './input-element.styles.css';
 import { body3Medium } from '../../styles/text.css';
 import { vars } from '../../styles/vars.css';
 
-export const inputBase = style([
-  body3Medium,
-  {
-    boxSizing: 'border-box',
-    width: '100%',
-    color: vars.color.gray[1000],
-    transition: 'border 0.2s ease',
-    outline: 'none',
+export const inputWithElement = style({
+  selectors: {
+    [`${inputElement.classNames.variants.direction.left} ~ &`]: {
+      paddingLeft: 42,
+    },
+    [`&:has(~ ${inputElement.classNames.variants.direction.right})`]: {
+      paddingRight: 42,
+    },
   },
-]);
-
-export const inputVariant = styleVariants({
-  outline: {
-    border: `1px solid ${vars.color.gray[300]}`,
-    borderRadius: 8,
-    padding: '10px 12px',
+});
 
-    selectors: {
-      '&:disabled': {
-        backgroundColor: vars.color.gray[300],
-      },
-      '&:focus': {
-        border: `1px solid ${vars.color.gray[900]}`,
-      },
-      '&::placeholder': {
-        color: vars.color.gray[500],
-      },
+export const input = recipe({
+  base: [
+    body3Medium,
+    {
+      boxSizing: 'border-box',
+      width: '100%',
+      color: vars.color.gray[1000],
+      transition: 'border 0.2s ease',
+      outline: 'none',
     },
-  },
-  flushed: {
-    border: 'none',
-    borderBottom: `1px solid ${vars.color.gray[300]}`,
-    padding: '10px 0',
+  ],
 
-    selectors: {
-      '&:focus': {
-        borderBottom: `1px solid ${vars.color.gray[900]}`,
+  variants: {
+    variant: {
+      outline: {
+        border: `1px solid ${vars.color.gray[300]}`,
+        borderRadius: 8,
+        padding: '10px 12px',
+
+        selectors: {
+          '&:disabled': {
+            backgroundColor: vars.color.gray[300],
+          },
+          '&:focus': {
+            border: `1px solid ${vars.color.gray[900]}`,
+          },
+          '&::placeholder': {
+            color: vars.color.gray[500],
+          },
+        },
       },
-      '&::placeholder': {
-        color: vars.color.gray[500],
+      flushed: {
+        border: 'none',
+        borderBottom: `1px solid ${vars.color.gray[300]}`,
+        padding: '10px 0',
+
+        selectors: {
+          '&:focus': {
+            borderBottom: `1px solid ${vars.color.gray[900]}`,
+          },
+          '&::placeholder': {
+            color: vars.color.gray[500],
+          },
+        },
       },
     },
   },
-});
 
-export type InputVariant = keyof typeof inputVariant;
-
-export const inputWithElement = style({
-  selectors: {
-    [`${inputElementDirection.left} ~ &`]: {
-      paddingLeft: 42,
-    },
-    [`&:has(~ ${inputElementDirection.right})`]: {
-      paddingRight: 42,
-    },
+  defaultVariants: {
+    variant: 'outline',
   },
 });
+
+export type InputVariants = RecipeVariants<typeof input>;