@uniai-fe/uds-primitives 0.0.1

package/src/components/dialog/markup/notice-dialog.tsx

@@ -0,0 +1,191 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type {
+  NoticeDialogSectionProps,
+  NoticeDialogTitleProps,
+  NoticeDialogDescriptionProps,
+  NoticeDialogContentProps,
+  NoticeDialogOverlayProps,
+} from "../types";
+
+/**
+ * NoticeDialogRoot; 공통 Dialog 상태 제어 루트
+ * @component
+ * @param {NoticeDialogRootProps} props
+ */
+const NoticeDialogRoot = DialogPrimitive.Root;
+const NoticeDialogTrigger = DialogPrimitive.Trigger;
+const NoticeDialogPortal = DialogPrimitive.Portal;
+const NoticeDialogClose = DialogPrimitive.Close;
+
+/**
+ * NoticeDialogOverlay; dim 영역
+ * @component
+ * @param {NoticeDialogOverlayProps} props
+ */
+const NoticeDialogOverlay = forwardRef<
+  HTMLDivElement,
+  NoticeDialogOverlayProps
+>(({ className, ...props }, forwardedRef) => (
+  <DialogPrimitive.Overlay
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-overlay notice-dialog-overlay", className)}
+    data-variant="notice"
+  />
+));
+
+NoticeDialogOverlay.displayName = "NoticeDialogOverlay";
+
+/**
+ * NoticeDialogContent; 콘텐츠 패널
+ * @component
+ * @param {NoticeDialogContentProps} props
+ */
+const NoticeDialogContent = forwardRef<
+  HTMLDivElement,
+  NoticeDialogContentProps
+>(({ className, children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Content
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-content notice-dialog-content", className)}
+    data-variant="notice"
+  >
+    {children}
+  </DialogPrimitive.Content>
+));
+
+NoticeDialogContent.displayName = "NoticeDialogContent";
+
+/**
+ * NoticeDialogTitle; Dialog 제목
+ * @component
+ * @param {NoticeDialogTitleProps} props
+ */
+const NoticeDialogTitle = forwardRef<
+  HTMLHeadingElement,
+  NoticeDialogTitleProps
+>(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
+  const titleNode = (
+    <DialogPrimitive.Title
+      {...props}
+      ref={forwardedRef}
+      className={clsx("dialog-title notice-dialog-title", className)}
+      data-variant="notice"
+    >
+      {children}
+    </DialogPrimitive.Title>
+  );
+
+  if (visuallyHidden) {
+    return <VisuallyHidden asChild>{titleNode}</VisuallyHidden>;
+  }
+
+  return titleNode;
+});
+
+NoticeDialogTitle.displayName = "NoticeDialogTitle";
+
+/**
+ * NoticeDialogDescription; Dialog 설명
+ * @component
+ * @param {NoticeDialogDescriptionProps} props
+ */
+const NoticeDialogDescription = forwardRef<
+  HTMLParagraphElement,
+  NoticeDialogDescriptionProps
+>(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
+  const descriptionNode = (
+    <DialogPrimitive.Description
+      {...props}
+      ref={forwardedRef}
+      className={clsx(
+        "dialog-description notice-dialog-description",
+        className,
+      )}
+      data-variant="notice"
+    >
+      {children}
+    </DialogPrimitive.Description>
+  );
+
+  if (visuallyHidden) {
+    return <VisuallyHidden asChild>{descriptionNode}</VisuallyHidden>;
+  }
+
+  return descriptionNode;
+});
+
+NoticeDialogDescription.displayName = "NoticeDialogDescription";
+
+/**
+ * NoticeDialogHeader; 헤더 레이아웃
+ * @component
+ * @param {NoticeDialogSectionProps} props
+ */
+const NoticeDialogHeader = forwardRef<HTMLDivElement, NoticeDialogSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={clsx("dialog-section notice-dialog-header", className)}
+      data-section="header"
+    />
+  ),
+);
+
+NoticeDialogHeader.displayName = "NoticeDialogHeader";
+
+/**
+ * NoticeDialogBody; 본문 영역
+ * @component
+ * @param {NoticeDialogSectionProps} props
+ */
+const NoticeDialogBody = forwardRef<HTMLDivElement, NoticeDialogSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={clsx("dialog-section notice-dialog-body", className)}
+      data-section="body"
+    />
+  ),
+);
+
+NoticeDialogBody.displayName = "NoticeDialogBody";
+
+/**
+ * NoticeDialogActions; 버튼 영역
+ * @component
+ * @param {NoticeDialogSectionProps} props
+ */
+const NoticeDialogActions = forwardRef<
+  HTMLDivElement,
+  NoticeDialogSectionProps
+>(({ className, ...props }, forwardedRef) => (
+  <div
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-section notice-dialog-actions", className)}
+    data-section="actions"
+  />
+));
+
+NoticeDialogActions.displayName = "NoticeDialogActions";
+
+export {
+  NoticeDialogRoot,
+  NoticeDialogTrigger,
+  NoticeDialogPortal,
+  NoticeDialogOverlay,
+  NoticeDialogContent,
+  NoticeDialogTitle,
+  NoticeDialogDescription,
+  NoticeDialogHeader,
+  NoticeDialogBody,
+  NoticeDialogActions,
+  NoticeDialogClose,
+};

package/src/components/dialog/styles/base.scss

@@ -0,0 +1,153 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :root) {
+  /* dialog essentials */
+  --dialog-overlay-bg: rgba(5, 6, 12, 0.55);
+  --dialog-panel-width: 360px;
+  --dialog-panel-max-width: calc(100vw - var(--spacing-padding-10) * 2);
+  --dialog-panel-bg: var(--color-bg-surface-static-white);
+  --dialog-panel-radius: var(--theme-radius-large-1);
+  --dialog-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
+  --dialog-border-color: var(--color-border-standard-cool-gray);
+  --dialog-title-color: var(--color-label-strong);
+  --dialog-title-font-size: var(--font-heading-xsmall-size);
+  --dialog-title-line-height: var(--font-heading-xsmall-line-height);
+  --dialog-title-weight: var(--font-heading-xsmall-weight);
+  --dialog-body-color: var(--color-label-standard);
+  --dialog-body-font-size: var(--font-body-small-size);
+  --dialog-body-line-height: var(--font-body-small-line-height);
+  --dialog-description-color: var(--color-label-standard);
+  --dialog-description-font-size: var(--font-body-small-size);
+  --dialog-description-line-height: var(--font-body-small-line-height);
+
+  /* alert(notice) defaults */
+  --notice-dialog-section-padding-x: var(--spacing-padding-8);
+  --notice-dialog-section-padding-y: var(--spacing-padding-10);
+  --notice-dialog-action-height: 52px;
+
+  /* confirm defaults */
+  --confirm-dialog-header-padding-x: var(--spacing-padding-6);
+  --confirm-dialog-header-padding-y: var(--spacing-padding-7);
+  --confirm-dialog-body-padding-x: var(--spacing-padding-6);
+  --confirm-dialog-body-padding-y: var(--spacing-padding-7);
+  --confirm-dialog-footer-padding-x: var(--spacing-padding-6);
+  --confirm-dialog-footer-padding-y: var(--spacing-padding-7);
+  --confirm-dialog-actions-gap: var(--spacing-gap-5);
+}
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--dialog-overlay-bg);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  will-change: opacity;
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+
+  &[data-state="closed"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog-overlay {
+    transition: none;
+  }
+}
+
+.dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(var(--dialog-panel-width), var(--dialog-panel-max-width));
+  max-width: var(--dialog-panel-max-width);
+  max-height: calc(100vh - var(--spacing-padding-10) * 2);
+  background-color: var(--dialog-panel-bg);
+  border-radius: var(--dialog-panel-radius);
+  box-shadow: var(--dialog-panel-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  outline: none;
+  border: none;
+  gap: 0;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  &[data-state="open"] {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  &[data-state="closed"] {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 12px));
+    pointer-events: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog-content {
+    transition: none;
+  }
+}
+
+.dialog-section {
+  padding: 0;
+
+  &[data-section="actions"] {
+    flex-shrink: 0;
+  }
+}
+
+.dialog-title {
+  margin: 0;
+  color: var(--dialog-title-color);
+  font-size: var(--dialog-title-font-size);
+  line-height: var(--dialog-title-line-height);
+  font-weight: var(--dialog-title-weight);
+}
+
+.dialog-description {
+  margin: 0;
+  color: var(--dialog-description-color);
+  font-size: var(--dialog-description-font-size);
+  line-height: var(--dialog-description-line-height);
+}
+
+@mixin dialog-action-button-reset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-body-medium-size);
+  line-height: var(--font-body-medium-line-height);
+  font-weight: var(--font-body-medium-weight);
+  cursor: pointer;
+  background: transparent;
+  color: var(--color-label-strong);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.dialog-button {
+  @include dialog-action-button-reset;
+}
+
+.dialog-button[data-native-element="true"] {
+  appearance: none;
+}

package/src/components/dialog/styles/confirm.scss

@@ -0,0 +1,58 @@
+@use "./base" as dialogBase;
+
+.confirm-dialog-header {
+  padding: var(--confirm-dialog-header-padding-y)
+    var(--confirm-dialog-header-padding-x);
+}
+
+.confirm-dialog-body {
+  padding: var(--confirm-dialog-body-padding-y)
+    var(--confirm-dialog-body-padding-x);
+}
+
+.confirm-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+  text-align: center;
+}
+
+.confirm-dialog-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  text-align: center;
+}
+
+.confirm-dialog-body p {
+  margin: 0;
+  color: var(--dialog-body-color);
+  font-size: var(--dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight);
+  word-break: keep-all;
+}
+
+.confirm-dialog-description {
+  margin: 0;
+  color: var(--dialog-body-color);
+  font-size: var(--dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight);
+  word-break: keep-all;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  padding: var(--confirm-dialog-footer-padding-y)
+    var(--confirm-dialog-footer-padding-x);
+  gap: var(--confirm-dialog-actions-gap);
+  justify-content: center;
+}
+
+.confirm-dialog-actions > * {
+  flex: 1;
+}

package/src/components/dialog/styles/index.scss

@@ -0,0 +1,3 @@
+@use "./base";
+@use "./notice";
+@use "./confirm";

package/src/components/dialog/styles/notice.scss

@@ -0,0 +1,65 @@
+@use "./base" as dialogBase;
+
+.notice-dialog-header,
+.notice-dialog-body {
+  padding: var(--notice-dialog-section-padding-y)
+    var(--notice-dialog-section-padding-x);
+}
+
+.notice-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+  text-align: center;
+}
+
+.notice-dialog-body {
+  text-align: center;
+}
+
+.notice-dialog-body p {
+  margin: 0 0 var(--spacing-gap-2);
+  color: var(--dialog-body-color);
+  font-size: var(--dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight);
+  word-break: keep-all;
+}
+
+.notice-dialog-body p:last-child {
+  margin-bottom: 0;
+}
+
+.notice-dialog-actions {
+  border-top: 1px solid var(--dialog-border-color);
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  padding: 0;
+  gap: 0;
+  justify-content: center;
+  overflow: hidden;
+  --button-min-height: var(--notice-dialog-action-height);
+  --button-padding-inline: 0;
+  --button-padding-block: 0;
+  --button-border-radius: 0;
+}
+
+.notice-dialog-actions > * {
+  flex: 1;
+}
+
+.notice-dialog-actions .button {
+  @include dialogBase.dialog-action-button-reset;
+  background-color: var(--color-common-100);
+  color: var(--color-primary-default);
+
+  &:hover {
+    background-color: var(--color-bg-surface-static-cool-gray);
+  }
+}
+
+.notice-dialog-actions .button:not(:first-child),
+.notice-dialog-actions [data-native-element="true"]:not(:first-child) {
+  border-left: 1px solid var(--dialog-border-color);
+}

package/src/components/dialog/types/index.ts

@@ -0,0 +1,70 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as DialogPrimitive from "@radix-ui/react-dialog";
+
+type NoticeDialogRootProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Root
+>;
+type NoticeDialogOverlayProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>;
+type NoticeDialogContentProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+>;
+type NoticeDialogSectionProps = ComponentPropsWithoutRef<"div">;
+type NoticeDialogTitleProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Title
+> & {
+  visuallyHidden?: boolean;
+};
+type NoticeDialogDescriptionProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+> & {
+  visuallyHidden?: boolean;
+};
+
+type ConfirmDialogRootProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Root
+>;
+type ConfirmDialogOverlayProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+> & {
+  disableOutsideClose?: boolean;
+};
+type ConfirmDialogContentProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+>;
+type ConfirmDialogSectionProps = ComponentPropsWithoutRef<"div">;
+type ConfirmDialogTitleProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+> & {
+  visuallyHidden?: boolean;
+};
+type ConfirmDialogDescriptionProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+> & {
+  visuallyHidden?: boolean;
+};
+type ConfirmDialogActionProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Action
+>;
+type ConfirmDialogCancelProps = ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Cancel
+>;
+
+export type {
+  NoticeDialogRootProps,
+  NoticeDialogOverlayProps,
+  NoticeDialogContentProps,
+  NoticeDialogSectionProps,
+  NoticeDialogTitleProps,
+  NoticeDialogDescriptionProps,
+  ConfirmDialogRootProps,
+  ConfirmDialogOverlayProps,
+  ConfirmDialogContentProps,
+  ConfirmDialogSectionProps,
+  ConfirmDialogTitleProps,
+  ConfirmDialogDescriptionProps,
+  ConfirmDialogActionProps,
+  ConfirmDialogCancelProps,
+};

package/src/components/dialog/utils/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(dialog): 토큰 매핑과 클래스명 유틸을 구현한다.
+ */
+export {};

package/src/components/drawer/hooks/index.ts

@@ -0,0 +1,113 @@
+import { useCallback, useRef, useState } from "react";
+import type { PointerEvent } from "react";
+
+interface UseDrawerDragParams {
+  onClose: () => void;
+}
+
+interface UseDrawerDragResult {
+  dragOffset: number;
+  isDragging: boolean;
+  handleProps: {
+    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLButtonElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLButtonElement>) => void;
+  };
+}
+
+const DRAG_CLOSE_THRESHOLD = 120;
+
+/**
+ * Drawer handle drag 전용 훅
+ * @hook
+ * @param {UseDrawerDragParams} params
+ * @desc
+ * - handle pointer 이벤트를 bottom drawer에서만 처리
+ * - threshold 이상 움직이면 드래그 닫기
+ */
+const useDrawerDrag = ({
+  onClose,
+}: UseDrawerDragParams): UseDrawerDragResult => {
+  const startPositionRef = useRef<number | null>(null);
+  const dragOffsetRef = useRef(0);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const setOffset = useCallback((value: number) => {
+    dragOffsetRef.current = value;
+    setDragOffset(value);
+  }, []);
+
+  const resetDrag = useCallback(() => {
+    startPositionRef.current = null;
+    setOffset(0);
+  }, [setOffset]);
+
+  const handlePointerDown = useCallback(
+    (event: PointerEvent<HTMLButtonElement>) => {
+      startPositionRef.current = event.clientY;
+      setIsDragging(true);
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent<HTMLButtonElement>) => {
+      if (startPositionRef.current === null) {
+        return;
+      }
+      const offset = Math.max(0, event.clientY - startPositionRef.current);
+      setOffset(offset);
+    },
+    [setOffset],
+  );
+
+  const commitDrag = useCallback(() => {
+    const offset = dragOffsetRef.current;
+    resetDrag();
+    if (offset >= DRAG_CLOSE_THRESHOLD) {
+      onClose();
+    }
+  }, [onClose, resetDrag]);
+
+  const finalizeDrag = useCallback(() => {
+    startPositionRef.current = null;
+    setIsDragging(false);
+  }, []);
+
+  const handlePointerUp = useCallback(
+    (event: PointerEvent<HTMLButtonElement>) => {
+      if (startPositionRef.current === null) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      commitDrag();
+      finalizeDrag();
+    },
+    [commitDrag, finalizeDrag],
+  );
+
+  const handlePointerCancel = useCallback(
+    (event: PointerEvent<HTMLButtonElement>) => {
+      if (startPositionRef.current !== null) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      resetDrag();
+      finalizeDrag();
+    },
+    [resetDrag, finalizeDrag],
+  );
+
+  const handleProps: UseDrawerDragResult["handleProps"] = {
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+  };
+
+  return { dragOffset, isDragging, handleProps };
+};
+
+export { useDrawerDrag };

package/src/components/drawer/img/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.7574 6.34313C7.36688 5.9526 6.73371 5.9526 6.34319 6.34313C5.95266 6.73365 5.95266 7.36681 6.34319 7.75734L10.5858 12L6.34319 16.2426C5.95266 16.6331 5.95266 17.2663 6.34319 17.6568C6.73371 18.0474 7.36688 18.0474 7.7574 17.6568L12 13.4142L16.2427 17.6568C16.6332 18.0474 17.2664 18.0474 17.6569 17.6568C18.0474 17.2663 18.0474 16.6331 17.6569 16.2426L13.4143 12L17.6569 7.75734C18.0474 7.36681 18.0474 6.73365 17.6569 6.34313C17.2664 5.9526 16.6332 5.9526 16.2427 6.34313L12 10.5858L7.7574 6.34313Z" fill="currentColor"/>
+</svg>

package/src/components/drawer/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/drawer/index.tsx

@@ -0,0 +1,3 @@
+import "./index.scss";
+
+export * from "./markup";