@kimdw-rtk/ui 0.0.0

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useDialog';
+export * from './usePointerSlider';
+export * from './useRipple';
+export * from './useToast';
+export * from './useToast/ToastProvider';

package/src/hooks/useDialog/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { type ReactNode, useCallback, useMemo, useRef } from 'react';
+
+import { useOverlay } from '@kimdw-rtk/utils';
+
+import { Alert, Confirm } from '#components';
+
+export const useDialog = () => {
+  const { push } = useOverlay();
+  const dialogRef = useRef<{ close: () => void }>(null);
+
+  const alert = useCallback(
+    (message: ReactNode) => {
+      return new Promise((resolve) => {
+        push(<Alert>{message}</Alert>, { onClose: () => resolve(true) });
+      });
+    },
+    [push],
+  );
+
+  const confirm = useCallback(
+    (message: ReactNode): Promise<boolean> => {
+      return new Promise((resolve) => {
+        const handleConfirm = () => {
+          resolve(true);
+          dialogRef.current?.close();
+        };
+
+        const handleCancle = () => {
+          resolve(false);
+          dialogRef.current?.close();
+        };
+
+        push(
+          <Confirm
+            ref={dialogRef}
+            onConfirm={handleConfirm}
+            onCancle={handleCancle}
+          >
+            {message}
+          </Confirm>,
+          { onClose: () => resolve(false) },
+        );
+      });
+    },
+    [push],
+  );
+
+  return useMemo(() => ({ alert, confirm }), [alert, confirm]);
+};

package/src/hooks/useDialog/useDialog.spec.tsx

@@ -0,0 +1,80 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+
+import { UIProvider } from '#contexts';
+import { useDialog } from '#hooks';
+
+describe('useDialog 테스트', () => {
+  const mockFn = jest.fn();
+
+  beforeEach(() => {
+    const TestComponent = () => {
+      const { alert, confirm } = useDialog();
+
+      const handleConfirmClick = async () => {
+        mockFn(await confirm('confirm'));
+      };
+
+      return (
+        <>
+          <button onClick={() => alert('alert')}>alert click</button>
+          <button onClick={handleConfirmClick}>confirm click</button>
+        </>
+      );
+    };
+
+    render(
+      <UIProvider overlayUnmountOn={'exit'}>
+        <TestComponent />
+      </UIProvider>,
+    );
+  });
+
+  it('확인 버튼을 누르면 alert을 닫을 수 있다.', async () => {
+    const alertButton = screen.getByRole('button', { name: 'alert click' });
+
+    expect(screen.queryByText('alert')).not.toBeInTheDocument();
+
+    act(() => {
+      alertButton.click();
+    });
+
+    expect(screen.getByText('alert')).toBeInTheDocument();
+
+    const okButton = screen.getByRole('button', { name: '확인' });
+    act(() => {
+      okButton.click();
+    });
+
+    expect(screen.queryByText('alert')).not.toBeInTheDocument();
+  });
+
+  it.skip('confirm의 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환한다.', async () => {
+    const confirmButton = screen.getByRole('button', { name: 'confirm click' });
+
+    act(() => {
+      confirmButton.click();
+    });
+
+    const okButton = screen.getByRole('button', { name: '확인' });
+    act(() => {
+      okButton.click();
+    });
+
+    await waitFor(() => {
+      expect(mockFn.mock.calls[0][0]).toBe(true);
+    });
+
+    act(() => {
+      confirmButton.click();
+    });
+
+    const cancelButton = screen.getByRole('button', { name: '취소' });
+    act(() => {
+      cancelButton.click();
+    });
+
+    await waitFor(() => {
+      expect(mockFn.mock.calls[1][0]).toBe(false);
+    });
+  });
+});

package/src/hooks/useMouseScroll/index.ts

@@ -0,0 +1,63 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
+ */
+export const useMouseScroll = <T extends React.RefObject<HTMLElement | null>>(
+  ref: T,
+): void => {
+  useEffect(() => {
+    const element = ref.current;
+    let isDown = false,
+      startX = 0,
+      startLeft = 0;
+
+    if (element === null) {
+      return;
+    }
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (!element.contains(e.target as Node)) {
+        return;
+      }
+
+      isDown = true;
+
+      startLeft = element.scrollLeft;
+      startX = e.x;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDown) {
+        return;
+      }
+
+      element.scrollLeft = startLeft + startX - e.x;
+    };
+
+    const handleMouseUp = () => {
+      isDown = false;
+    };
+
+    const handleWheel = (e: WheelEvent) => {
+      element.scrollTo({
+        left: element.scrollLeft + e.deltaY,
+        behavior: 'smooth',
+      });
+    };
+
+    window.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    element.addEventListener('wheel', handleWheel);
+
+    return () => {
+      window.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      element.removeEventListener('wheel', handleWheel);
+    };
+  }, [ref]);
+};

package/src/hooks/usePointerSlider/index.ts

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export const usePointerSlider = <T extends React.RefObject<HTMLElement | null>>(
+  ref: T,
+  {
+    min,
+    max,
+    defaultValue,
+  }: {
+    min: number;
+    max: number;
+    defaultValue: number;
+  },
+): number => {
+  const [value, setValue] = useState<number>(defaultValue);
+
+  useEffect(() => {
+    const element = ref.current;
+    let isDown = false,
+      parentWidth = 0,
+      parentX = 0;
+
+    if (element === null) {
+      return;
+    }
+
+    element.style.left = `${((value - min) / (max - min)) * 100}%`;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      element.setPointerCapture(e.pointerId);
+      isDown = true;
+      const boundingRect = element.parentElement?.getBoundingClientRect();
+
+      if (boundingRect === undefined) {
+        return;
+      }
+
+      parentWidth = boundingRect.width;
+      parentX = boundingRect.x;
+    };
+
+    const handlePointerMove = (e: PointerEvent) => {
+      if (!isDown) {
+        return;
+      }
+
+      const currentValue = Math.min(
+        max,
+        Math.max(
+          min,
+          Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min,
+        ),
+      );
+
+      element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+
+      setValue(currentValue);
+    };
+
+    const handlePointerUp = (e: PointerEvent) => {
+      element.releasePointerCapture(e.pointerId);
+      isDown = false;
+    };
+
+    element.addEventListener('pointerdown', handlePointerDown);
+    element.addEventListener('pointermove', handlePointerMove);
+    element.addEventListener('pointerup', handlePointerUp);
+
+    return () => {
+      element.removeEventListener('pointerdown', handlePointerDown);
+      element.removeEventListener('pointermove', handlePointerMove);
+      element.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [ref, max, min]);
+
+  return value;
+};

package/src/hooks/useRipple/index.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+
+import * as s from './ripple.css';
+
+export const useRipple = <T extends HTMLElement>(ref?: React.Ref<T>) => {
+  const rippleRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let element: T | null = null;
+
+    if (!ref) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(element);
+    } else {
+      element = ref.current;
+    }
+
+    const ripple = rippleRef.current;
+
+    let timer: ReturnType<typeof setTimeout>;
+    let isAnimationPending = false;
+
+    let isFadeIn = false,
+      isMouseDown = false,
+      isTransitionEnd = true;
+
+    if (!ripple || !element) {
+      return;
+    }
+
+    const clearTimer = () => {
+      clearTimeout(timer);
+      isAnimationPending = false;
+    };
+
+    const runAnimation = (x: number, y: number) => {
+      const width =
+          element.clientWidth / 2 + Math.abs(element.clientWidth / 2 - x),
+        height =
+          element.clientHeight / 2 + Math.abs(element.clientHeight / 2 - y);
+      const size = Math.round(Math.sqrt(width ** 2 + height ** 2) * 2);
+
+      ripple.style.width = `${size}px`;
+      ripple.style.height = `${size}px`;
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+
+      ripple.style.boxShadow = `${s.colorVar} 0 0 ${size / 10}px ${size / 10}px`;
+      ripple.className = s.ripple({ animation: false });
+      //eslint-disable-next-line
+      ripple.offsetTop;
+      ripple.className = s.ripple({ animation: true });
+      ripple.style.opacity = '1';
+
+      isAnimationPending = false;
+      isFadeIn = true;
+      isTransitionEnd = false;
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      if (!isAnimationPending) {
+        return;
+      }
+
+      if (element instanceof HTMLButtonElement && element.disabled) {
+        return;
+      }
+
+      clearTimer();
+      runAnimation(e.offsetX, e.offsetY);
+    };
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (e.button !== 0 || !ripple || !isTransitionEnd) {
+        return;
+      }
+
+      if (element instanceof HTMLButtonElement && element.disabled) {
+        return;
+      }
+
+      isMouseDown = true;
+
+      if (e.pointerType === 'mouse') {
+        runAnimation(e.offsetX, e.offsetY);
+        return;
+      }
+
+      clearTimer();
+      isAnimationPending = true;
+      timer = setTimeout(() => runAnimation(e.offsetX, e.offsetY), 100);
+    };
+
+    const handlePointerUp = () => {
+      if (!isMouseDown) {
+        return;
+      }
+
+      clearTimer();
+
+      if (!isFadeIn) {
+        ripple.style.opacity = '0';
+        isFadeIn = false;
+      }
+
+      isMouseDown = false;
+    };
+
+    const handleTransitionEnd = (e: TransitionEvent) => {
+      if (e.propertyName === 'opacity' && isFadeIn) {
+        if (!isMouseDown) {
+          ripple.style.opacity = '0';
+        }
+
+        isFadeIn = false;
+        return;
+      }
+
+      if (e.propertyName === 'transform' && !isFadeIn) {
+        isTransitionEnd = true;
+      }
+    };
+
+    element.addEventListener('click', handleClick);
+    element.addEventListener('pointerdown', handlePointerDown);
+    element.addEventListener('pointerup', handlePointerUp);
+    element.addEventListener('pointerleave', handlePointerUp);
+    ripple.addEventListener('transitionend', handleTransitionEnd);
+
+    return () => {
+      element.removeEventListener('click', handleClick);
+      element.removeEventListener('pointerdown', handlePointerDown);
+      element.removeEventListener('pointerup', handlePointerUp);
+      element.removeEventListener('pointerleave', handlePointerUp);
+      ripple.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [ref, rippleRef]);
+
+  return useMemo(
+    () => ({
+      ripple: (
+        <div ref={rippleRef} className={s.ripple({ animation: false })} />
+      ),
+    }),
+    [rippleRef],
+  );
+};

package/src/hooks/useRipple/ripple.css.ts

@@ -0,0 +1,40 @@
+import { createVar } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { theme } from '#themes';
+
+export const colorVar = createVar();
+
+export const ripple = recipe({
+  base: {
+    position: 'absolute',
+    left: '0',
+    top: '0',
+
+    borderRadius: '50%',
+
+    backgroundColor: colorVar,
+
+    opacity: '0',
+    transformOrigin: 'center center',
+
+    pointerEvents: 'none',
+
+    vars: {
+      [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`,
+    },
+  },
+  variants: {
+    animation: {
+      true: {
+        transition:
+          'opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+        transform: 'translate(-50%, -50%) scale(1, 1)',
+      },
+
+      false: {
+        transform: 'translate(-50%, -50%) scale(0.1, 0.1)',
+      },
+    },
+  },
+});

package/src/hooks/useToast/ToastContainer.css.ts

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  alignItems: 'flex-end',
+  flexDirection: 'column-reverse',
+
+  position: 'fixed',
+  right: '1rem',
+  bottom: '1rem',
+  left: '1rem',
+});

package/src/hooks/useToast/ToastContainer.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+import * as s from './ToastContainer.css';
+
+interface ToastContainerProps {
+  children: ReactNode;
+}
+
+export const ToastContainer = ({ children }: ToastContainerProps) => {
+  return <div className={s.container}>{children}</div>;
+};

package/src/hooks/useToast/ToastProvider.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+
+import { CSSTransition, TransitionGroup } from '@kimdw-rtk/utils';
+
+import { Toast } from '#components';
+
+import { ToastContainer } from './ToastContainer';
+
+export interface ToastData {
+  id: number;
+  color?: ComponentProps<typeof Toast>['color'];
+  message: string;
+  autoClose?: boolean;
+  duration?: number;
+  onClick?: (id: number) => void;
+}
+
+interface ToastContextType {
+  push: (data: Omit<ToastData, 'id'>) => number;
+  remove: (id: number) => void;
+}
+
+export const ToastContext = createContext<ToastContextType | undefined>(
+  undefined,
+);
+
+interface ToastProviderProps {
+  children: ReactNode;
+  defaultDuration?: number;
+}
+
+const DEFAULT_TOAST_DURATION = 5000;
+
+export const ToastProvider = ({
+  children,
+  defaultDuration = DEFAULT_TOAST_DURATION,
+}: ToastProviderProps) => {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+  const idRef = useRef<number>(0);
+
+  const remove = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const push = useCallback<ToastContextType['push']>(
+    ({
+      color,
+      message,
+      autoClose = true,
+      duration = defaultDuration,
+      onClick,
+    }) => {
+      const id = ++idRef.current;
+      setToasts((prev) => [
+        ...prev,
+        { id, color, message, autoClose, duration, onClick },
+      ]);
+
+      if (!autoClose) {
+        return id;
+      }
+
+      // autoClose가 true면, 일정 시간이 지난 후 toast 제거
+      setTimeout(() => {
+        remove(id);
+      }, duration);
+
+      return id;
+    },
+    [defaultDuration, remove],
+  );
+
+  const handleToastClick = (toast: ToastData) => {
+    // onClick 이벤트가 정의되어 있지 않으면 기본적으로 toast를 닫도록 한다.
+    if (toast.onClick === undefined) {
+      remove(toast.id);
+      return;
+    }
+
+    toast.onClick(toast.id);
+  };
+
+  return (
+    <ToastContext.Provider
+      value={useMemo(() => ({ push, remove }), [push, remove])}
+    >
+      {children}
+      <ToastContainer>
+        <TransitionGroup>
+          {toasts.map((toast) => (
+            <CSSTransition
+              as="div"
+              key={toast.id}
+              initial={{
+                opacity: 0,
+                transform: 'translateY(1rem)',
+                height: '0',
+              }}
+              animate={{
+                opacity: 1,
+                transform: 'translateY(0)',
+                height: '3.5rem',
+              }}
+              exit={{ opacity: 0, height: '0' }}
+              duration={500}
+              style={{ display: 'flex', flexDirection: 'column-reverse' }}
+            >
+              <Toast
+                color={toast.color}
+                duration={toast.autoClose ? toast.duration : 0}
+                onClick={() => handleToastClick(toast)}
+              >
+                {toast.message}
+              </Toast>
+            </CSSTransition>
+          ))}
+        </TransitionGroup>
+      </ToastContainer>
+    </ToastContext.Provider>
+  );
+};

package/src/hooks/useToast/index.ts

@@ -0,0 +1,15 @@
+import { useContext, useMemo } from 'react';
+
+import { ToastContext } from './ToastProvider';
+
+export const useToast = () => {
+  const toastContext = useContext(ToastContext);
+
+  if (!toastContext) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+
+  const { push, remove } = toastContext;
+
+  return useMemo(() => ({ push, remove }), [push, remove]);
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';
+export * from './styles';
+export * from './styles/globalStyle.css';
+export * from './themes';
+export * from './types';
+export * from './utils';

package/src/styles/globalStyle.css.ts

@@ -0,0 +1,36 @@
+import { assignVars, globalStyle } from '@vanilla-extract/css';
+
+import { darkThemeVars, lightThemeVars, theme } from '#themes';
+
+globalStyle('*', {
+  boxSizing: 'border-box',
+
+  overscrollBehavior: 'none',
+  WebkitTapHighlightColor: 'transparent',
+});
+
+globalStyle('.light', {
+  vars: assignVars(theme, lightThemeVars),
+});
+
+globalStyle('.dark', {
+  vars: assignVars(theme, darkThemeVars),
+});
+
+globalStyle('body', {
+  margin: '0',
+
+  backgroundColor: `rgb(${theme.color.background})`,
+
+  lineHeight: '1',
+  color: `rgb(${theme.color.foreground})`,
+});
+
+globalStyle('a', {
+  textDecoration: 'none',
+  color: 'inherit',
+});
+
+globalStyle('svg', {
+  lineHeight: '0',
+});

package/src/styles/index.ts

@@ -0,0 +1,4 @@
+export * from './layers.css';
+export * from './sprinkles.css';
+export * from './globalStyle.css';
+export * from './sx';

package/src/styles/layers.css.ts

@@ -0,0 +1,4 @@
+import { globalLayer } from '@vanilla-extract/css';
+
+export const componentsLayer = globalLayer('components');
+export const sprinklesLayer = globalLayer('utilities');