@simplysm/solid 13.0.0-beta.6

package/src/components/disclosure/Dialog.tsx

@@ -0,0 +1,520 @@
+import { type JSX, type ParentComponent, createEffect, onCleanup, Show, splitProps, For, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconX } from "@tabler/icons-solidjs";
+import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { createMountTransition } from "../../hooks/createMountTransition";
+import { mergeStyles } from "../../helpers/mergeStyles";
+import { Icon } from "../display/Icon";
+import { borderSubtle } from "../../styles/tokens.styles";
+import { DialogDefaultsContext } from "./DialogContext";
+import { registerDialog, unregisterDialog, bringToFront } from "./dialogZIndex";
+
+export interface DialogProps {
+  /** 모달 열림 상태 */
+  open?: boolean;
+  /** 열림 상태 변경 시 콜백 */
+  onOpenChange?: (open: boolean) => void;
+  /** 모달 제목 */
+  title: string;
+  /** 헤더 숨김 */
+  hideHeader?: boolean;
+  /** 닫기 버튼 표시 (기본: true) */
+  closable?: boolean;
+  /** 백드롭 클릭으로 닫기 */
+  closeOnBackdrop?: boolean;
+  /** Escape 키로 닫기 (기본값: true) */
+  closeOnEscape?: boolean;
+  /** 리사이즈 가능 여부 (기본: false) */
+  resizable?: boolean;
+  /** 드래그 이동 가능 여부 (기본: true) */
+  movable?: boolean;
+  /** 플로팅 모드 (백드롭 없음) */
+  float?: boolean;
+  /** 전체 화면 모드 */
+  fill?: boolean;
+  /** 너비 (px) */
+  widthPx?: number;
+  /** 높이 (px) */
+  heightPx?: number;
+  /** 최소 너비 (px) */
+  minWidthPx?: number;
+  /** 최소 높이 (px) */
+  minHeightPx?: number;
+  /** 고정 위치 */
+  position?: "bottom-right" | "top-right";
+  /** 헤더 스타일 */
+  headerStyle?: JSX.CSSProperties | string;
+  /** 헤더 액션 영역 */
+  headerAction?: JSX.Element;
+  /** 닫기 전 확인 함수 */
+  canDeactivate?: () => boolean;
+  /** 닫기 애니메이션 완료 후 콜백 */
+  onCloseComplete?: () => void;
+  /** 추가 CSS 클래스 */
+  class?: string;
+  /** 자식 요소 */
+  children: JSX.Element;
+}
+
+type ResizeDirection = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+const RESIZE_DIRECTIONS: ResizeDirection[] = [
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+];
+
+const resizeCursorMap: Record<ResizeDirection, string> = {
+  "left": "cursor-ew-resize",
+  "right": "cursor-ew-resize",
+  "top": "cursor-ns-resize",
+  "bottom": "cursor-ns-resize",
+  "top-left": "cursor-nwse-resize",
+  "top-right": "cursor-nesw-resize",
+  "bottom-left": "cursor-nesw-resize",
+  "bottom-right": "cursor-nwse-resize",
+};
+
+const dialogContentClass = clsx("flex-1", "overflow-auto");
+
+const resizePositionMap: Record<ResizeDirection, string> = {
+  "left": clsx("left-0 top-0", "h-full w-1.5"),
+  "right": clsx("right-0 top-0", "h-full w-1.5"),
+  "top": clsx("left-0 top-0", "h-1.5 w-full"),
+  "bottom": clsx("bottom-0 left-0", "h-1.5 w-full"),
+  "top-left": clsx("left-0 top-0", "z-[1] size-1.5"),
+  "top-right": clsx("right-0 top-0", "z-[1] size-1.5"),
+  "bottom-left": clsx("bottom-0 left-0", "z-[1] size-1.5"),
+  "bottom-right": clsx("bottom-0 right-0", "z-[1] size-1.5"),
+};
+
+/**
+ * 다이얼로그 컴포넌트
+ *
+ * 선언적 다이얼로그 UI를 제공합니다. 드래그 이동, 8방향 리사이즈,
+ * float/fill 모드, z-index 자동 관리 등을 지원합니다.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false);
+ *
+ * <Button onClick={() => setOpen(true)}>다이얼로그 열기</Button>
+ * <Dialog open={open()} onOpenChange={setOpen} title="내 다이얼로그">
+ *   <div class="p-4">다이얼로그 내용</div>
+ * </Dialog>
+ * ```
+ */
+export const Dialog: ParentComponent<DialogProps> = (props) => {
+  const dialogDefaults = useContext(DialogDefaultsContext);
+
+  const [local] = splitProps(props, [
+    "open",
+    "onOpenChange",
+    "title",
+    "hideHeader",
+    "closable",
+    "closeOnBackdrop",
+    "closeOnEscape",
+    "resizable",
+    "movable",
+    "float",
+    "fill",
+    "widthPx",
+    "heightPx",
+    "minWidthPx",
+    "minHeightPx",
+    "position",
+    "headerStyle",
+    "headerAction",
+    "canDeactivate",
+    "onCloseComplete",
+    "class",
+    "children",
+  ]);
+
+  const [open, setOpen] = createControllableSignal({
+    value: () => local.open ?? false,
+    onChange: () => local.onOpenChange,
+  });
+
+  // 애니메이션 상태 (mount transition)
+  const { mounted, animating, unmount } = createMountTransition(open);
+
+  // onCloseComplete 중복 호출 방지
+  let closeCompleteEmitted = false;
+
+  const emitCloseComplete = () => {
+    if (closeCompleteEmitted) return;
+    closeCompleteEmitted = true;
+    unmount();
+    local.onCloseComplete?.();
+  };
+
+  // open 변경 시 closeCompleteEmitted 초기화
+  createEffect(() => {
+    if (open()) {
+      closeCompleteEmitted = false;
+    }
+  });
+
+  // dialog ref
+  let dialogRef: HTMLDivElement | undefined;
+
+  // wrapper ref
+  let wrapperRef: HTMLDivElement | undefined;
+
+  const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
+  const closeOnBackdrop = () => local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
+
+  // Escape 키 감지
+  createEffect(() => {
+    if (!open()) return;
+    if (!closeOnEscape()) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        tryClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
+  });
+
+  // 열릴 때 등록, 닫힐 때 해제
+  createEffect(() => {
+    if (!open()) return;
+    if (!wrapperRef) return;
+    registerDialog(wrapperRef);
+    onCleanup(() => {
+      if (wrapperRef) unregisterDialog(wrapperRef);
+    });
+  });
+
+  // 닫기 시도 (canDeactivate 체크)
+  const tryClose = () => {
+    if (local.canDeactivate && !local.canDeactivate()) return;
+    setOpen(false);
+  };
+
+  // 백드롭 클릭 핸들러
+  const handleBackdropClick = () => {
+    if (!closeOnBackdrop()) return;
+    tryClose();
+  };
+
+  // 닫기 버튼 클릭 핸들러
+  const handleCloseClick = () => {
+    tryClose();
+  };
+
+  // transitionend 이벤트 처리
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    if (e.propertyName !== "opacity") return;
+    if (!open()) {
+      emitCloseComplete();
+    }
+  };
+
+  // z-index 자동 관리
+  const handleDialogFocus = () => {
+    if (!wrapperRef) return;
+    bringToFront(wrapperRef);
+  };
+
+  // 드래그 이동
+  const handleHeaderPointerDown = (event: PointerEvent) => {
+    // movable 기본값은 true
+    if (local.movable === false) return;
+    if (!dialogRef || !wrapperRef) return;
+    // 닫기 버튼 등 인터랙티브 요소에서 시작된 이벤트는 드래그로 처리하지 않음
+    if ((event.target as HTMLElement).closest("button")) return;
+
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture(event.pointerId);
+
+    const dialogEl = dialogRef;
+    const wrapperEl = wrapperRef;
+
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startTop = dialogEl.offsetTop;
+    const startLeft = dialogEl.offsetLeft;
+
+    const doDrag = (e: PointerEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      dialogEl.style.position = "absolute";
+      dialogEl.style.left = `${startLeft + e.clientX - startX}px`;
+      dialogEl.style.top = `${startTop + e.clientY - startY}px`;
+      dialogEl.style.right = "auto";
+      dialogEl.style.bottom = "auto";
+      dialogEl.style.margin = "0";
+
+      // 화면 밖 방지
+      if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
+        dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
+      }
+      if (dialogEl.offsetTop > wrapperEl.offsetHeight - 100) {
+        dialogEl.style.top = wrapperEl.offsetHeight - 100 + "px";
+      }
+      if (dialogEl.offsetTop < 0) {
+        dialogEl.style.top = "0";
+      }
+      if (dialogEl.offsetLeft < -dialogEl.offsetWidth + 100) {
+        dialogEl.style.left = -dialogEl.offsetWidth + 100 + "px";
+      }
+    };
+
+    const stopDrag = (e: PointerEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      target.removeEventListener("pointermove", doDrag);
+      target.removeEventListener("pointerup", stopDrag);
+    };
+
+    target.addEventListener("pointermove", doDrag);
+    target.addEventListener("pointerup", stopDrag);
+  };
+
+  // 리사이즈
+  const handleResizeBarPointerDown = (event: PointerEvent, direction: ResizeDirection) => {
+    if (!local.resizable) return;
+    if (!dialogRef) return;
+
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture(event.pointerId);
+
+    const dialogEl = dialogRef;
+
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startHeight = dialogEl.clientHeight;
+    const startWidth = dialogEl.clientWidth;
+    const startTop = dialogEl.offsetTop;
+    const startLeft = dialogEl.offsetLeft;
+
+    const doDrag = (e: PointerEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (direction === "top" || direction === "top-right" || direction === "top-left") {
+        if (dialogEl.style.position === "absolute") {
+          dialogEl.style.top = startTop + (e.clientY - startY) + "px";
+          dialogEl.style.bottom = "auto";
+        }
+        dialogEl.style.height = `${Math.max(startHeight - (e.clientY - startY), local.minHeightPx ?? 0)}px`;
+      }
+      if (direction === "bottom" || direction === "bottom-right" || direction === "bottom-left") {
+        dialogEl.style.height = `${Math.max(startHeight + e.clientY - startY, local.minHeightPx ?? 0)}px`;
+      }
+      if (direction === "right" || direction === "bottom-right" || direction === "top-right") {
+        dialogEl.style.width = `${Math.max(
+          startWidth + (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+          local.minWidthPx ?? 0,
+        )}px`;
+      }
+      if (direction === "left" || direction === "bottom-left" || direction === "top-left") {
+        if (dialogEl.style.position === "absolute") {
+          dialogEl.style.left = startLeft + (e.clientX - startX) + "px";
+        }
+        dialogEl.style.width = `${Math.max(
+          startWidth - (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+          local.minWidthPx ?? 0,
+        )}px`;
+      }
+    };
+
+    const stopDrag = (e: PointerEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      target.removeEventListener("pointermove", doDrag);
+      target.removeEventListener("pointerup", stopDrag);
+    };
+
+    target.addEventListener("pointermove", doDrag);
+    target.addEventListener("pointerup", stopDrag);
+  };
+
+  // dialog 인라인 스타일 계산
+  const dialogStyle = (): JSX.CSSProperties => {
+    const style: JSX.CSSProperties = {};
+
+    if (local.fill) {
+      style.width = "100%";
+      style.height = "100%";
+    } else {
+      if (local.widthPx !== undefined) {
+        style.width = `${local.widthPx}px`;
+      }
+      if (local.heightPx !== undefined) {
+        style.height = `${local.heightPx}px`;
+      }
+    }
+
+    if (local.minWidthPx !== undefined) {
+      style["min-width"] = `${local.minWidthPx}px`;
+    }
+    if (local.minHeightPx !== undefined) {
+      style["min-height"] = `${local.minHeightPx}px`;
+    }
+
+    // position 모드
+    if (local.position === "bottom-right") {
+      style.position = "absolute";
+      style.right = "3rem";
+      style.bottom = "2rem";
+    } else if (local.position === "top-right") {
+      style.position = "absolute";
+      style.right = "2rem";
+      style.top = "2rem";
+    }
+
+    return style;
+  };
+
+  // 애니메이션 클래스
+  const animationClass = () => {
+    const base = clsx("transition-[opacity,transform]", "duration-200", "ease-out");
+    if (animating()) {
+      return clsx(base, "translate-y-0 opacity-100");
+    } else {
+      return clsx(base, "-translate-y-4 opacity-0");
+    }
+  };
+
+  // wrapper 클래스
+  const wrapperClass = () =>
+    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0은 Chrome 84 미지원
+    clsx(
+      "fixed bottom-0 left-0 right-0 top-0",
+      "flex flex-col items-center",
+      !local.fill && "pt-[calc(3rem+0.5rem)]",
+      local.float && "pointer-events-none",
+    );
+
+  // 백드롭 클래스
+  const backdropClass = () =>
+    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0은 Chrome 84 미지원
+    clsx(
+      "absolute bottom-0 left-0 right-0 top-0",
+      "bg-black/30",
+      "dark:bg-black/50",
+      "transition-opacity",
+      "duration-200",
+      "ease-out",
+      animating() ? "opacity-100" : "opacity-0",
+    );
+
+  // dialog 클래스
+  const dialogBaseClass = () =>
+    clsx(
+      "relative",
+      "mx-auto",
+      "w-fit min-w-[200px]",
+      "bg-white dark:bg-base-800",
+      local.float ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle) : "shadow-2xl dark:shadow-black/40",
+      local.fill ? "rounded-none border-none" : "rounded-lg",
+      "overflow-hidden",
+      "flex flex-col",
+      "focus:outline-none",
+      local.float && "pointer-events-auto",
+      animationClass(),
+    );
+
+  // 헤더 클래스
+  const headerClass = () => clsx("flex items-center", "select-none", "border-b", borderSubtle);
+
+  return (
+    <Show when={mounted()}>
+      <Portal>
+        <div
+          ref={(el) => {
+            wrapperRef = el;
+          }}
+          data-modal
+          class={wrapperClass()}
+        >
+          {/* 백드롭 */}
+          <Show when={!local.float}>
+            <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
+          </Show>
+
+          {/* 다이얼로그 */}
+          <div
+            ref={(el) => {
+              dialogRef = el;
+            }}
+            data-modal-dialog
+            role="dialog"
+            aria-modal={local.float ? undefined : true}
+            aria-label={local.title}
+            tabIndex={0}
+            class={twMerge(dialogBaseClass(), local.class)}
+            style={dialogStyle()}
+            onFocus={handleDialogFocus}
+            onTransitionEnd={handleTransitionEnd}
+          >
+            {/* 헤더 */}
+            <Show when={!local.hideHeader}>
+              <div
+                data-modal-header
+                class={clsx(headerClass(), "touch-none")}
+                style={typeof local.headerStyle === "string" ? mergeStyles(local.headerStyle) : local.headerStyle}
+                onPointerDown={handleHeaderPointerDown}
+              >
+                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-semibold")}>{local.title}</h5>
+                {local.headerAction}
+                <Show when={local.closable ?? true}>
+                  <button
+                    data-modal-close
+                    type="button"
+                    class={clsx(
+                      "inline-flex items-center justify-center",
+                      "px-3 py-2",
+                      "text-base-400 dark:text-base-500",
+                      "hover:text-base-600 dark:hover:text-base-300",
+                      "cursor-pointer",
+                      "transition-colors",
+                    )}
+                    onClick={handleCloseClick}
+                  >
+                    <Icon icon={IconX} size="1.25em" />
+                  </button>
+                </Show>
+              </div>
+            </Show>
+
+            {/* 콘텐츠 */}
+            <div data-modal-content class={dialogContentClass}>
+              {local.children}
+            </div>
+
+            {/* 리사이즈 바 */}
+            <Show when={local.resizable}>
+              <For each={RESIZE_DIRECTIONS}>
+                {(direction) => (
+                  <div
+                    data-resize-bar={direction}
+                    class={clsx("absolute", "touch-none", resizePositionMap[direction], resizeCursorMap[direction])}
+                    onPointerDown={(e) => handleResizeBarPointerDown(e, direction)}
+                  />
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
+      </Portal>
+    </Show>
+  );
+};

package/src/components/disclosure/DialogContext.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext, type Accessor, type JSX } from "solid-js";
+
+export interface DialogDefaults {
+  closeOnEscape?: boolean;
+  closeOnBackdrop?: boolean;
+}
+
+export const DialogDefaultsContext = createContext<Accessor<DialogDefaults>>();
+
+export interface DialogShowOptions {
+  title: string;
+  hideHeader?: boolean;
+  closable?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  resizable?: boolean;
+  movable?: boolean;
+  float?: boolean;
+  fill?: boolean;
+  widthPx?: number;
+  heightPx?: number;
+  minWidthPx?: number;
+  minHeightPx?: number;
+  position?: "bottom-right" | "top-right";
+  headerStyle?: JSX.CSSProperties | string;
+  canDeactivate?: () => boolean;
+}
+
+export interface DialogContextValue {
+  show<T = undefined>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined>;
+}
+
+export const DialogContext = createContext<DialogContextValue>();
+
+export function useDialog(): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error("useDialog는 DialogProvider 내부에서만 사용할 수 있습니다");
+  return ctx;
+}

package/src/components/disclosure/DialogInstanceContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "solid-js";
+
+export interface DialogInstance<T> {
+  close: (result?: T) => void;
+}
+
+export const DialogInstanceContext = createContext<DialogInstance<unknown>>();
+
+export function useDialogInstance<T = undefined>(): DialogInstance<T> | undefined {
+  return useContext(DialogInstanceContext) as DialogInstance<T> | undefined;
+}

package/src/components/disclosure/DialogProvider.tsx

@@ -0,0 +1,133 @@
+import { type Accessor, type ParentComponent, createSignal, For, splitProps, type JSX } from "solid-js";
+import {
+  DialogContext,
+  DialogDefaultsContext,
+  type DialogContextValue,
+  type DialogDefaults,
+  type DialogShowOptions,
+} from "./DialogContext";
+import { DialogInstanceContext, type DialogInstance } from "./DialogInstanceContext";
+import { Dialog } from "./Dialog";
+
+interface DialogEntry {
+  id: string;
+  factory: () => JSX.Element;
+  options: DialogShowOptions;
+  resolve: (result: unknown) => void;
+  open: Accessor<boolean>;
+  setOpen: (value: boolean) => void;
+  pendingResult?: unknown;
+}
+
+let nextId = 0;
+
+/**
+ * 프로그래매틱 다이얼로그 Provider
+ *
+ * `useDialog().show(content, options)` 로 다이얼로그를 열고,
+ * `close(result)` 로 닫으면 Promise가 resolve됩니다.
+ *
+ * @example
+ * ```tsx
+ * <DialogProvider>
+ *   <App />
+ * </DialogProvider>
+ * ```
+ */
+export interface DialogProviderProps extends DialogDefaults {}
+
+export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
+  const [local, _rest] = splitProps(props, ["closeOnEscape", "closeOnBackdrop", "children"]);
+
+  const defaults = () => ({
+    closeOnEscape: local.closeOnEscape,
+    closeOnBackdrop: local.closeOnBackdrop,
+  });
+
+  const [entries, setEntries] = createSignal<DialogEntry[]>([]);
+
+  const show = <T,>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined> => {
+    return new Promise<T | undefined>((resolve) => {
+      const id = String(nextId++);
+      const [open, setOpen] = createSignal(true);
+      const entry: DialogEntry = {
+        id,
+        factory,
+        options,
+        resolve: resolve as (result: unknown) => void,
+        open,
+        setOpen,
+      };
+      setEntries((prev) => [...prev, entry]);
+    });
+  };
+
+  // 닫기 애니메이션 시작 (open을 false로 변경)
+  const requestClose = (id: string, result?: unknown) => {
+    const entry = entries().find((e) => e.id === id);
+    if (entry) {
+      entry.pendingResult = result;
+      entry.setOpen(false);
+    }
+  };
+
+  // 애니메이션 완료 후 실제 제거
+  const removeEntry = (id: string) => {
+    setEntries((prev) => {
+      const entry = prev.find((e) => e.id === id);
+      if (entry) {
+        entry.resolve(entry.pendingResult);
+      }
+      return prev.filter((e) => e.id !== id);
+    });
+  };
+
+  const contextValue: DialogContextValue = {
+    show,
+  };
+
+  return (
+    <DialogDefaultsContext.Provider value={defaults}>
+      <DialogContext.Provider value={contextValue}>
+        {local.children}
+        <For each={entries()}>
+          {(entry) => {
+            const instance: DialogInstance<unknown> = {
+              close: (result?: unknown) => requestClose(entry.id, result),
+            };
+
+            return (
+              <Dialog
+                open={entry.open()}
+                onOpenChange={(open) => {
+                  if (!open && entry.pendingResult === undefined) {
+                    requestClose(entry.id);
+                  }
+                }}
+                onCloseComplete={() => removeEntry(entry.id)}
+                title={entry.options.title}
+                hideHeader={entry.options.hideHeader}
+                closable={entry.options.closable}
+                closeOnBackdrop={entry.options.closeOnBackdrop}
+                closeOnEscape={entry.options.closeOnEscape}
+                resizable={entry.options.resizable}
+                movable={entry.options.movable}
+                float={entry.options.float}
+                fill={entry.options.fill}
+                widthPx={entry.options.widthPx}
+                heightPx={entry.options.heightPx}
+                minWidthPx={entry.options.minWidthPx}
+                minHeightPx={entry.options.minHeightPx}
+                position={entry.options.position}
+                headerStyle={entry.options.headerStyle}
+                canDeactivate={entry.options.canDeactivate}
+              >
+                <DialogInstanceContext.Provider value={instance}>{entry.factory()}</DialogInstanceContext.Provider>
+              </Dialog>
+            );
+          }}
+        </For>
+      </DialogContext.Provider>
+    </DialogDefaultsContext.Provider>
+  );
+};