refactor(ui): styles의 makeData의 key를 케밥 케이스 사용으로 변경, FavolinkStore class를 확장한 toast로 개편

packages/ui/src/components/button/button.styles.css.ts

@@ -4,7 +4,7 @@ import { alignItems, display } from '../../styles';
 import { archivePalette, globalVars, inherencePalette } from '../../theme.css';
 
 const base = style([
-  display.inlineFlex,
+  display['inline-flex'],
   alignItems.center,
   {
     cursor: 'pointer',
@@ -18,25 +18,22 @@ const base = style([
   },
 ]);
 
-const colorSchemeVar = createVar();
+const colorVar = createVar();
 
-const colorSchemePalette = {
+const colorPalette = {
   ...archivePalette,
   ...inherencePalette,
 };
 
-const colorScheme = styleVariants(
-  colorSchemePalette,
-  (_, colorSchemePaletteKey) => ({
-    vars: { [colorSchemeVar]: globalVars.palette[colorSchemePaletteKey] },
-  }),
-);
+const color = styleVariants(colorPalette, (_, colorPaletteKey) => ({
+  vars: { [colorVar]: globalVars.palette[colorPaletteKey] },
+}));
 
 export const buttonVariants = recipe({
   base,
 
   variants: {
-    colorScheme,
+    color,
     justify: {
       center: {
         justifyContent: 'center',
@@ -47,13 +44,13 @@ export const buttonVariants = recipe({
     },
     variant: {
       solid: {
-        backgroundColor: colorSchemeVar,
-        border: `1px solid ${colorSchemeVar}`,
+        backgroundColor: colorVar,
+        border: `1px solid ${colorVar}`,
         color: globalVars.palette.white,
       },
       outline: {
         backgroundColor: 'inherit',
-        border: `1px solid ${colorSchemeVar}`,
+        border: `1px solid ${colorVar}`,
         color: globalVars.palette.gray1000,
       },
     },
@@ -83,7 +80,7 @@ export const buttonVariants = recipe({
   },
 
   defaultVariants: {
-    colorScheme: 'white',
+    color: 'white',
     justify: 'center',
     variant: 'solid',
     weight: 'regular',
@@ -94,7 +91,7 @@ export const buttonVariants = recipe({
   compoundVariants: [
     {
       variants: {
-        colorScheme: 'black',
+        color: 'black',
         variant: 'solid',
       },
       style: {

packages/ui/src/components/button/button.tsx

@@ -1,14 +1,16 @@
-import { type ReactElement } from 'react';
+import { type ReactElement, useMemo } from 'react';
 import * as styles from './button.styles.css';
 import {
-  type HTMLFavolinkProps,
+  type HTMLFavolinkPropsWithout,
+  type RemovedProps,
   Slottable,
   favolink,
   forwardRef,
 } from '../../system';
 import { cx } from '../../utils';
+import { extractMarginProps } from '../margin';
 
-export type ButtonProps = HTMLFavolinkProps<'button'> &
+export type ButtonProps = HTMLFavolinkPropsWithout<'button', RemovedProps> &
   styles.ButtonVariants & {
     rightElement?: ReactElement;
     leftElement?: ReactElement;
@@ -17,20 +19,22 @@ export type ButtonProps = HTMLFavolinkProps<'button'> &
 export const Button = forwardRef<ButtonProps, 'button'>(
   function Button(props, ref) {
     const {
-      children,
       className,
       rightElement,
       leftElement,
-      colorScheme,
+      color,
       justify,
       variant,
       weight,
       radius,
       width,
       ...restProps
-    } = props;
+    } = extractMarginProps(props);
 
-    const hasElement = Boolean(rightElement || leftElement);
+    const hasElement = useMemo(
+      () => Boolean(rightElement || leftElement),
+      [rightElement, leftElement],
+    );
 
     return (
       <favolink.button
@@ -40,7 +44,7 @@ export const Button = forwardRef<ButtonProps, 'button'>(
         className={cx(
           'favolink-button',
           styles.buttonVariants({
-            colorScheme,
+            color,
             justify,
             variant,
             weight,
@@ -52,8 +56,8 @@ export const Button = forwardRef<ButtonProps, 'button'>(
         )}
       >
         {leftElement}
-        <Slottable>{children}</Slottable>
-        <span className={cx(styles.justifyStartButtonHasRightElement)}>
+        <Slottable>{props.children}</Slottable>
+        <span className={styles.justifyStartButtonHasRightElement}>
           {rightElement}
         </span>
       </favolink.button>

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

@@ -35,7 +35,7 @@ export const flexEnumVariants = recipe({
     display: {
       none: display.none,
       flex: display.flex,
-      inlineFlex: display.inlineFlex,
+      'inline-flex': display['inline-flex'],
     },
     direction: flexDirection,
     align: alignItems,

packages/ui/src/components/tag/tag.css.ts

@@ -83,7 +83,7 @@ export const color = styleVariants(
 
 const base = style([
   colorClass,
-  display.inlineFlex,
+  display['inline-flex'],
   alignItems.center,
   flexShrink.none,
   textWrap.nowrap,

packages/ui/src/components/toast/index.ts

@@ -1,4 +1,3 @@
 /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
-export { Toast, type ToastProps } from './toast';
-export { ToastProvider } from './toast.provider';
+export { ToastProvider } from './toast';
 export { useToast } from './use-toast';

packages/ui/src/components/toast/toast.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+import { globalVars } from '../../theme.css';
+
+export const toastItem = style({
+  backgroundColor: globalVars.palette.gray800,
+  borderRadius: 20,
+});
+
+export const toastItemText = style({
+  color: 'white',
+});

packages/ui/src/components/toast/toast.store.ts

@@ -1,54 +1,56 @@
+import { FavolinkStore, type FavolinkStoreObserver } from '../../store';
+
 export type Toast = {
   id: number;
   message: string;
   duration?: number;
   link?: string;
 };
 
-type ToastState = Toast[];
-
-type ToastMethods = {
-  showToast: (toastOptions: Omit<Toast, 'id'>) => void;
-  deleteToast: (id: number) => void;
+export type ToastNotifyOptions = {
+  id?: number;
+  message: string;
+  duration?: number;
+  link?: string;
 };
 
-type ToastStore = ToastMethods & {
-  getState: () => ToastState;
-  subscribe: (onStoreChange: () => void) => () => void;
-};
+interface ToastStoreObserver extends FavolinkStoreObserver<Toast[]> {
+  notify: (options: ToastNotifyOptions) => void;
+  close: (id: number) => void;
+  closeAll: () => void;
+}
 
-let state: ToastState = [];
-const listeners = new Set<() => void>();
+class ToastStore extends FavolinkStore<Toast[]> implements ToastStoreObserver {
+  private counter = 0;
 
-function setState(setStateFn: (state: ToastState) => ToastState) {
-  state = setStateFn(state);
+  constructor(initialState: Toast[] = []) {
+    super(initialState);
+  }
 
-  listeners.forEach((listener) => {
-    listener();
-  });
-}
+  notify = (options: ToastNotifyOptions) => {
+    this.counter += 1;
 
-export const toastStore: ToastStore = {
-  getState: () => state,
-  subscribe: (listener) => {
-    listeners.add(listener);
+    const { message, duration = 3000, link = '' } = options;
 
-    return () => {
-      setState(() => []);
-      listeners.delete(listener);
-    };
-  },
-  showToast: ({ message, duration = 2000, link = '' }) => {
     const newToast: Toast = {
-      id: Date.now(),
       message,
+      id: options.id ?? this.counter,
       duration,
       link,
     };
 
-    setState((prevState) => [...prevState, newToast]);
-  },
-  deleteToast: (id) => {
-    setState((prevState) => prevState.filter((toast) => toast.id !== id));
-  },
-};
+    this.setState((prevToasts) => [...prevToasts, newToast]);
+  };
+
+  close = (id: number) => {
+    this.setState((prevToasts) =>
+      prevToasts.filter((toast) => toast.id !== id),
+    );
+  };
+
+  closeAll = () => {
+    this.setState([]);
+  };
+}
+
+export const toastStore = new ToastStore();