refactor(ui/components): createContext 변경사항 반영

dnd-side-project · Aug 21, 2024 · f6d66b0 · f6d66b0
1 parent 5a43c1d
commit f6d66b0
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 43 deletions.
diff --git a/packages/ui/src/components/checkbox/checkbox.primitive.tsx b/packages/ui/src/components/checkbox/checkbox.primitive.tsx
@@ -15,17 +15,15 @@ import {
 } from '../../system';
 import { mergeFns, mergeStyles } from '../../utils';
 
+const CHECKBOX_NAME = 'Checkbox';
+
 type CheckboxContextValue = {
   state: boolean;
   disabled?: boolean;
 };
 
 const [CheckboxProvider, useCheckboxContext] =
-  createContext<CheckboxContextValue>({
-    name: 'CheckboxContext',
-    hookName: 'useCheckboxContext',
-    providerName: '<CheckboxProvider />',
-  });
+  createContext<CheckboxContextValue>(CHECKBOX_NAME);
 
 type CheckboxProps = HTMLFavolinkPropsWithout<
   'button',
@@ -68,9 +66,7 @@ const Checkbox = forwardRef<CheckboxProps, 'button'>(
     useEffect(() => {
       const form = button?.form;
 
-      if (!form) {
-        return;
-      }
+      if (!form) return;
 
       function reset() {
         setChecked(initialCheckedStateRef.current);
@@ -84,7 +80,7 @@ const Checkbox = forwardRef<CheckboxProps, 'button'>(
     }, [button, setChecked]);
 
     return (
-      <CheckboxProvider value={{ state: checked, disabled }}>
+      <CheckboxProvider state={checked} disabled={disabled}>
         <favolink.button
           type="button"
           role="checkbox"
@@ -97,9 +93,7 @@ const Checkbox = forwardRef<CheckboxProps, 'button'>(
           {...restProps}
           ref={composedRefs}
           onKeyDown={mergeFns(props.onKeyDown, (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-            }
+            if (event.key === 'Enter') event.preventDefault();
           })}
           onClick={mergeFns(props.onClick, (event) => {
             setChecked(!checked);
@@ -108,9 +102,8 @@ const Checkbox = forwardRef<CheckboxProps, 'button'>(
               hasConsumerStoppedPropagation.current =
                 event.isPropagationStopped();
 
-              if (!hasConsumerStoppedPropagation.current) {
+              if (!hasConsumerStoppedPropagation.current)
                 event.stopPropagation();
-              }
             }
           })}
         />
@@ -131,13 +124,15 @@ const Checkbox = forwardRef<CheckboxProps, 'button'>(
   },
 );
 
-Checkbox.displayName = 'Checkbox';
+Checkbox.displayName = CHECKBOX_NAME;
+
+const INDICATOR_NAME = 'CheckboxIndicator';
 
 type CheckboxIndicatorProps = HTMLFavolinkProps<'span'>;
 
 const CheckboxIndicator = forwardRef<CheckboxIndicatorProps, 'span'>(
   function CheckboxIndicator(props, forwardedRef) {
-    const context = useCheckboxContext();
+    const context = useCheckboxContext(INDICATOR_NAME);
 
     return (
       context.state && (
@@ -153,7 +148,7 @@ const CheckboxIndicator = forwardRef<CheckboxIndicatorProps, 'span'>(
   },
 );
 
-CheckboxIndicator.displayName = 'CheckboxIndicator';
+CheckboxIndicator.displayName = INDICATOR_NAME;
 
 type BubbleInputProps = HTMLProps<'input'> & {
   bubbles: boolean;
@@ -176,9 +171,7 @@ function BubbleInput(props: BubbleInputProps) {
     ) as PropertyDescriptor;
     const setChecked = checkedDescriptor.set?.bind(input);
 
-    if (prevChecked === checked || !setChecked) {
-      return;
-    }
+    if (prevChecked === checked || !setChecked) return;
 
     const event = new Event('click', { bubbles });
 

diff --git a/packages/ui/src/components/menu/menu-content.tsx b/packages/ui/src/components/menu/menu-content.tsx
@@ -4,6 +4,8 @@ import { type Placement, usePosition } from '../../hooks';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { composeRefs, cx } from '../../utils';
 
+const CONTENT_NAME = 'MenuContent';
+
 export type MenuContentProps = HTMLFavolinkProps<'div'> & {
   placement?: Placement;
   sideOffset?: number;
@@ -20,7 +22,7 @@ export const MenuContent = forwardRef<MenuContentProps, 'div'>(
       ...restProps
     } = props;
 
-    const context = useMenuContext();
+    const context = useMenuContext(CONTENT_NAME);
 
     const coordinate = usePosition(
       context.open,
@@ -48,3 +50,5 @@ export const MenuContent = forwardRef<MenuContentProps, 'div'>(
     );
   },
 );
+
+MenuContent.displayName = CONTENT_NAME;
diff --git a/packages/ui/src/components/menu/menu-trigger.tsx b/packages/ui/src/components/menu/menu-trigger.tsx
@@ -2,13 +2,15 @@ import { useMenuContext } from './menu.context';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { composeRefs, cx, mergeFns } from '../../utils';
 
+const TRIGGER_NAME = 'MenuTrigger';
+
 export type MenuTriggerProps = HTMLFavolinkProps<'button'>;
 
 export const MenuTrigger = forwardRef<MenuTriggerProps, 'button'>(
   function MenuTrigger(props, ref) {
     const { children, className, onClick, ...restProps } = props;
 
-    const context = useMenuContext();
+    const context = useMenuContext(TRIGGER_NAME);
 
     return (
       <favolink.button
@@ -24,3 +26,5 @@ export const MenuTrigger = forwardRef<MenuTriggerProps, 'button'>(
     );
   },
 );
+
+MenuTrigger.displayName = TRIGGER_NAME;
diff --git a/packages/ui/src/components/menu/menu.context.ts b/packages/ui/src/components/menu/menu.context.ts
@@ -8,8 +8,5 @@ type MenuContextValue = {
   containerRef: Ref<HTMLDivElement>;
 };
 
-export const [MenuProvider, useMenuContext] = createContext<MenuContextValue>({
-  name: 'MenuContentContext',
-  hookName: 'useMenuContentContext',
-  providerName: '<MenuContentProvider />',
-});
+export const [MenuProvider, useMenuContext] =
+  createContext<MenuContextValue>('Menu');
diff --git a/packages/ui/src/components/menu/menu.tsx b/packages/ui/src/components/menu/menu.tsx
@@ -22,7 +22,12 @@ export function Menu(props: MenuProps) {
   const onOpenChange = onExternalOnOpenChange ?? onInternalOnOpenChange;
 
   return (
-    <MenuProvider value={{ open, onOpenChange, triggerRef, containerRef }}>
+    <MenuProvider
+      open={open}
+      onOpenChange={onOpenChange}
+      triggerRef={triggerRef}
+      containerRef={containerRef}
+    >
       {children}
     </MenuProvider>
   );

diff --git a/packages/ui/src/components/modal/modal-close.tsx b/packages/ui/src/components/modal/modal-close.tsx
@@ -2,13 +2,15 @@ import { useModalContext } from './modal.context';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { cx, mergeFns } from '../../utils';
 
+const CLOSE_NAME = 'ModalClose';
+
 export type ModalCloseProps = HTMLFavolinkProps<'button'>;
 
 export const ModalClose = forwardRef<ModalCloseProps, 'button'>(
   function ModalClose(props, ref) {
     const { children, className, onClick, ...restProps } = props;
 
-    const { onOpenChange } = useModalContext();
+    const { onOpenChange } = useModalContext(CLOSE_NAME);
 
     return (
       <favolink.button
@@ -25,3 +27,5 @@ export const ModalClose = forwardRef<ModalCloseProps, 'button'>(
     );
   },
 );
+
+ModalClose.displayName = CLOSE_NAME;
diff --git a/packages/ui/src/components/modal/modal-overlay.tsx b/packages/ui/src/components/modal/modal-overlay.tsx
@@ -3,13 +3,15 @@ import { useModalContext } from './modal.context';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { cx, mergeFns } from '../../utils';
 
+const OVERLAY_NAME = 'ModalOverlay';
+
 export type ModalOverlayProps = HTMLFavolinkProps<'div'>;
 
 export const ModalOverlay = forwardRef<ModalOverlayProps, 'div'>(
   function ModalOverlay(props, ref) {
     const { className, onClick, ...restProps } = props;
 
-    const { onOpenChange, closeOnOverlayClick } = useModalContext();
+    const { onOpenChange, closeOnOverlayClick } = useModalContext(OVERLAY_NAME);
 
     return (
       <favolink.div
@@ -31,3 +33,5 @@ export const ModalOverlay = forwardRef<ModalOverlayProps, 'div'>(
     );
   },
 );
+
+ModalOverlay.displayName = OVERLAY_NAME;
diff --git a/packages/ui/src/components/modal/modal-portal.tsx b/packages/ui/src/components/modal/modal-portal.tsx
@@ -2,12 +2,14 @@ import { Children } from 'react';
 import { useModalContext } from './modal.context';
 import { Portal, type PortalProps } from '../portal/';
 
+const PORTAL_NAME = 'ModalPortal';
+
 export type ModalPortalProps = PortalProps;
 
 export function ModalPortal(props: ModalPortalProps) {
   const { children, ...restProps } = props;
 
-  const { onOpen } = useModalContext();
+  const { onOpen } = useModalContext(PORTAL_NAME);
 
   return (
     onOpen &&

diff --git a/packages/ui/src/components/modal/modal-topbar.tsx b/packages/ui/src/components/modal/modal-topbar.tsx
@@ -5,6 +5,8 @@ import { ChevronLeftIcon, CloseIcon } from '../../icons';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { cx, mergeFns } from '../../utils';
 
+const TOPBAR_NAME = 'ModalTopbar';
+
 export type ModalTopbarProps = HTMLFavolinkProps<'div'> &
   styles.ModalTopbarVariants & {
     onLeftIconClick?: (event: MouseEvent) => void;
@@ -21,7 +23,7 @@ export const ModalTopbar = forwardRef<ModalTopbarProps, 'div'>(
       ...restProps
     } = props;
 
-    const { onOpenChange } = useModalContext();
+    const { onOpenChange } = useModalContext(TOPBAR_NAME);
 
     const isCouple = layout !== 'single';
 
@@ -51,3 +53,5 @@ export const ModalTopbar = forwardRef<ModalTopbarProps, 'div'>(
     );
   },
 );
+
+ModalTopbar.displayName = TOPBAR_NAME;
diff --git a/packages/ui/src/components/modal/modal-trigger.tsx b/packages/ui/src/components/modal/modal-trigger.tsx
@@ -2,13 +2,15 @@ import { useModalContext } from './modal.context';
 import { type HTMLFavolinkProps, favolink, forwardRef } from '../../system';
 import { cx, mergeFns } from '../../utils';
 
+const TRIGGER_NAME = 'ModalTrigger';
+
 export type ModalTriggerProps = HTMLFavolinkProps<'button'>;
 
 export const ModalTrigger = forwardRef<ModalTriggerProps, 'button'>(
   function MenuTrigger(props, ref) {
     const { className, children, onClick, ...restProps } = props;
 
-    const { onOpenChange } = useModalContext();
+    const { onOpenChange } = useModalContext(TRIGGER_NAME);
 
     return (
       <favolink.button
@@ -25,3 +27,5 @@ export const ModalTrigger = forwardRef<ModalTriggerProps, 'button'>(
     );
   },
 );
+
+ModalTrigger.displayName = TRIGGER_NAME;
diff --git a/packages/ui/src/components/modal/modal.context.ts b/packages/ui/src/components/modal/modal.context.ts
@@ -7,8 +7,4 @@ export type ModalContextValue = {
 };
 
 export const [ModalProvider, useModalContext] =
-  createContext<ModalContextValue>({
-    name: 'ModalContext',
-    hookName: 'useModalContext',
-    providerName: '<ModalProvider />',
-  });
+  createContext<ModalContextValue>('Modal');
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
@@ -20,11 +20,9 @@ export function Modal(props: ModalProps) {
 
   return (
     <ModalProvider
-      value={{
-        onOpen,
-        onOpenChange,
-        closeOnOverlayClick,
-      }}
+      onOpen={onOpen}
+      onOpenChange={onOpenChange}
+      closeOnOverlayClick={closeOnOverlayClick}
     >
       {children}
     </ModalProvider>