@musecat/uikit 0.1.1

package/packages/Frameworks/Dialog/hooks/useSheetGeometry.ts

@@ -0,0 +1,201 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { SheetConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
+
+function toPx(
+  value: number | string | undefined,
+  viewportHeight: number,
+  fallback: number,
+): number {
+  if (value === undefined) return fallback;
+  if (typeof value === "number") {
+    if (value > 0 && value <= 1) return viewportHeight * value;
+    return value;
+  }
+  const normalized = value.trim().toLowerCase();
+  const numeric = parseFloat(normalized);
+  if (Number.isNaN(numeric)) return fallback;
+
+  if (normalized.endsWith("rem")) {
+    if (typeof window !== "undefined") {
+      const rootFontSize =
+        parseFloat(
+          window.getComputedStyle(document.documentElement).fontSize,
+        ) || 16;
+      return numeric * rootFontSize;
+    }
+    return numeric * 16;
+  }
+  if (normalized.endsWith("px")) return numeric;
+  if (normalized.endsWith("vh")) return viewportHeight * (numeric / 100);
+  if (normalized.endsWith("%")) return viewportHeight * (numeric / 100);
+
+  if (numeric > 0 && numeric <= 1) return viewportHeight * numeric;
+  return numeric;
+}
+
+function normalizeSnapPoints(points?: number[]) {
+  const source = points?.length ? points : [0.5, 1];
+  return Array.from(
+    new Set(source.map((point) => Math.max(0.1, Math.min(1, point)))),
+  ).sort((a, b) => a - b);
+}
+
+function resolveInitialSnapIndex(points: number[], defaultSnap?: number) {
+  if (defaultSnap === undefined) return points.length - 1;
+  if (
+    Number.isInteger(defaultSnap) &&
+    defaultSnap >= 0 &&
+    defaultSnap < points.length
+  ) {
+    return defaultSnap;
+  }
+  const exactIndex = points.indexOf(defaultSnap);
+  if (exactIndex >= 0) return exactIndex;
+  return points.length - 1;
+}
+
+export { resolveInitialSnapIndex, toPx };
+
+export interface SheetGeometryInput {
+  config?: SheetConfig;
+  height?: string | number;
+  sheetHeightPx: number;
+  open: boolean;
+  rendered: boolean;
+}
+
+export interface SheetGeometryOutput {
+  viewportHeight: number;
+  getViewportHeight: () => number;
+  minPx: number;
+  maxPx: number;
+  maxSnap: number;
+  normalizedSnapPoints: number[];
+  resolvedFreeDragHeightPx: number;
+  getTargetYForSnap: (snap: number) => number;
+  getGapHiddenY: (
+    currentSnap: number,
+    isFreeDrag: boolean,
+    getTargetYForSnap: (snap: number) => number,
+  ) => number;
+  isFreeDrag: boolean;
+  isMinDefault: boolean;
+  snapHeightRatio: number;
+}
+
+const DEFAULT_MIN_REM = 7.2;
+const DEFAULT_MIN_PX_FALLBACK = 115.2;
+
+export function useSheetGeometry({
+  config,
+  height,
+  sheetHeightPx,
+  open,
+  rendered,
+}: SheetGeometryInput): SheetGeometryOutput {
+  const [viewportHeight, setViewportHeight] = useState(0);
+
+  const getViewportHeight = useCallback(
+    () => window.visualViewport?.height ?? window.innerHeight,
+    [],
+  );
+
+  useEffect(() => {
+    if (!open && !rendered) return;
+    const update = () => {
+      setViewportHeight(getViewportHeight());
+    };
+    update();
+    window.visualViewport?.addEventListener("resize", update);
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      window.visualViewport?.removeEventListener("resize", update);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, [open, rendered, getViewportHeight]);
+
+  const isFreeDrag = config?.freeDrag === true;
+  const isMinDefault = isFreeDrag && config?.min === undefined;
+
+  const minPx = useMemo(() => {
+    const vh = viewportHeight || 800;
+    return toPx(
+      config?.min,
+      vh,
+      toPx(`${DEFAULT_MIN_REM}rem`, vh, DEFAULT_MIN_PX_FALLBACK),
+    );
+  }, [config?.min, viewportHeight]);
+
+  const maxPx = useMemo(() => {
+    const vh = viewportHeight || 800;
+    const isMaxContent = height === undefined && !config?.snapPoints?.length;
+    const baseHeight = isMaxContent && sheetHeightPx > 0 ? sheetHeightPx : vh;
+    return toPx(config?.max, baseHeight, baseHeight);
+  }, [config?.max, viewportHeight, height, config?.snapPoints, sheetHeightPx]);
+
+  const resolvedFreeDragHeightPx = useMemo(
+    () => Math.max(maxPx, minPx),
+    [maxPx, minPx],
+  );
+
+  const _snapPointsStr = JSON.stringify(config?.snapPoints);
+  const normalizedSnapPoints = useMemo(
+    () =>
+      config?.snapPoints?.length ? normalizeSnapPoints(config.snapPoints) : [1],
+    [config?.snapPoints?.length, config.snapPoints],
+  );
+
+  const maxSnap = useMemo(
+    () =>
+      isFreeDrag
+        ? maxPx / (viewportHeight || 800)
+        : (normalizedSnapPoints.at(-1) ?? 1),
+    [isFreeDrag, normalizedSnapPoints, maxPx, viewportHeight],
+  );
+
+  const snapHeightRatio = useMemo(
+    () => maxSnap / (normalizedSnapPoints.at(-1) ?? 1),
+    [maxSnap, normalizedSnapPoints],
+  );
+
+  const getTargetYForSnap = useCallback(
+    (snap: number) => {
+      const vh = viewportHeight || getViewportHeight();
+      if (isFreeDrag) return 0;
+      return vh * (maxSnap - snap);
+    },
+    [viewportHeight, maxSnap, getViewportHeight, isFreeDrag],
+  );
+
+  const getGapHiddenY = useCallback(
+    (
+      currentSnap: number,
+      isFreeDrag: boolean,
+      getTargetYForSnap: (snap: number) => number,
+    ) => {
+      const h = viewportHeight || getViewportHeight() || 800;
+      const restY = isFreeDrag ? 0 : getTargetYForSnap(currentSnap);
+      return restY + h;
+    },
+    [viewportHeight, getViewportHeight],
+  );
+
+  return {
+    viewportHeight,
+    getViewportHeight,
+    minPx,
+    maxPx,
+    maxSnap,
+    normalizedSnapPoints,
+    resolvedFreeDragHeightPx,
+    getTargetYForSnap,
+    getGapHiddenY,
+    isFreeDrag,
+    isMinDefault,
+    snapHeightRatio,
+  };
+}

package/packages/Frameworks/Dialog/hooks/useSheetProgressive.ts

@@ -0,0 +1,98 @@
+"use client";
+
+import type { MotionValue } from "motion/react";
+import { useEffect, useMemo, useState } from "react";
+import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+
+const EDGE_INSET_MAX_PX = 8;
+const BOTTOM_GAP_PX = 8;
+const BOTTOM_RADIUS_MAX_PX = 24;
+const BOTTOM_RADIUS_THRESHOLD = 1;
+
+export interface UseSheetProgressiveInput {
+  y: MotionValue<number>;
+  normalizedSnapPoints: number[];
+  viewportHeight: number;
+  maxSnap: number;
+  isFreeDrag: boolean;
+  hasExplicitSnapPoints: boolean;
+}
+
+export interface UseSheetProgressiveOutput {
+  inset: number;
+  bottomGap: number;
+  radiusArr: RadiusValue;
+}
+
+function computeProgress(
+  latestY: number,
+  maxSnap: number,
+  firstSnap: number,
+  lastSnap: number,
+  vh: number,
+) {
+  if (!vh) return 0;
+  const snap = maxSnap - latestY / vh;
+  return Math.max(0, Math.min(1, (snap - firstSnap) / (lastSnap - firstSnap)));
+}
+
+export function useSheetProgressive({
+  y,
+  normalizedSnapPoints,
+  viewportHeight,
+  maxSnap,
+  isFreeDrag,
+  hasExplicitSnapPoints,
+}: UseSheetProgressiveInput): UseSheetProgressiveOutput {
+  const firstSnap = normalizedSnapPoints[0];
+  const lastSnap = normalizedSnapPoints.at(-1)!;
+  const hasProgression =
+    hasExplicitSnapPoints && normalizedSnapPoints.length > 1 && !isFreeDrag;
+
+  const [inset, setInset] = useState(0);
+  const [bottomGap, setBottomGap] = useState(0);
+  const [bottomRadius, setBottomRadius] = useState(BOTTOM_RADIUS_MAX_PX);
+
+  useEffect(() => {
+    if (!hasProgression) {
+      setInset(0);
+      setBottomGap(0);
+      setBottomRadius(BOTTOM_RADIUS_MAX_PX);
+      return;
+    }
+
+    const update = (latestY: number) => {
+      const vh = viewportHeight || 800;
+      const p = computeProgress(latestY, maxSnap, firstSnap, lastSnap, vh);
+      setInset(Math.round(EDGE_INSET_MAX_PX * (1 - p)));
+      setBottomGap(Math.round(BOTTOM_GAP_PX * (1 - p)));
+      setBottomRadius(Math.round(BOTTOM_RADIUS_MAX_PX * (1 - p)));
+    };
+
+    update(y.get());
+    return y.on("change", update);
+  }, [y, hasProgression, viewportHeight, maxSnap, firstSnap, lastSnap]);
+
+  const radiusArr: RadiusValue = useMemo(() => {
+    if (
+      !hasProgression ||
+      bottomRadius >= BOTTOM_RADIUS_MAX_PX - BOTTOM_RADIUS_THRESHOLD
+    ) {
+      return ["ExtraBold", "ExtraBold", "ExtraBold", "ExtraBold"] as const;
+    }
+    if (bottomRadius <= BOTTOM_RADIUS_THRESHOLD) {
+      return ["ExtraBold", "ExtraBold", "None", "None"] as const;
+    }
+    return bottomRadius <= 6
+      ? (["ExtraBold", "ExtraBold", "ExtraLight", "ExtraLight"] as const)
+      : bottomRadius <= 12
+        ? (["ExtraBold", "ExtraBold", "Light", "Light"] as const)
+        : bottomRadius <= 16
+          ? (["ExtraBold", "ExtraBold", "Regular", "Regular"] as const)
+          : bottomRadius <= 20
+            ? (["ExtraBold", "ExtraBold", "Bold", "Bold"] as const)
+            : (["ExtraBold", "ExtraBold", "ExtraBold", "ExtraBold"] as const);
+  }, [hasProgression, bottomRadius]);
+
+  return { inset, bottomGap, radiusArr };
+}

package/packages/Frameworks/Dialog/renderers/renderModal.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { AnimatePresence } from "motion/react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
+import { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
+import DialogFooter from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
+import DialogHeader from "@/packages/Frameworks/Dialog/contents/Dialog.header";
+import BackgroundWrapper from "@/packages/Frameworks/Dialog/Dialog.background";
+import type {
+  DialogOutsideOptions,
+  ModalConfig,
+} from "@/packages/Frameworks/Dialog/Dialog.types";
+import {
+  DialogPortal,
+  useEscapeClose,
+} from "@/packages/Frameworks/Dialog/Dialog.utils";
+import { motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
+import View from "@/packages/Frameworks/View/View";
+
+interface RenderModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config?: ModalConfig;
+  id?: string;
+  zIndex?: number;
+  width?: string | number;
+  height?: string | number;
+  children?: ReactNode;
+  role?: string;
+  "data-color-mode"?: string;
+}
+
+export default function RenderModal({
+  open,
+  onOpenChange,
+  config,
+  id,
+  zIndex,
+  width,
+  height,
+  children,
+  role = "dialog",
+  "data-color-mode": dataColorMode,
+}: RenderModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const resolvedZIndex = zIndex ?? LAYER_Z_INDEX.modal;
+
+  const isOutsideConfig = config?.outside !== false;
+  const outsideOptions: DialogOutsideOptions =
+    config?.outside && typeof config.outside === "object" ? config.outside : {};
+  const lockBodyScroll = outsideOptions.lockBodyScroll !== false;
+
+  useScrollLock(open && lockBodyScroll);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const modalEl = modalRef.current;
+    if (!modalEl) return;
+
+    const focusableElements = modalEl.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    );
+
+    const firstElement = focusableElements[0] as HTMLElement | undefined;
+    const lastElement = focusableElements[focusableElements.length - 1] as
+      | HTMLElement
+      | undefined;
+
+    firstElement?.focus();
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          lastElement?.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          firstElement?.focus();
+          e.preventDefault();
+        }
+      }
+    };
+
+    modalEl.addEventListener("keydown", handleTab);
+    return () => modalEl.removeEventListener("keydown", handleTab);
+  }, [open]);
+
+  const closeWithConfirm = useCallback(() => {
+    if (config?.exit?.confirm) {
+      const { title, caption } = config.exit.confirm;
+      const isConfirmed = window.confirm(
+        `${title ?? "확인"}\n\n${caption ?? "작업을 중단하시겠습니까?"}`,
+      );
+      if (!isConfirmed) return;
+    }
+    onOpenChange(false);
+  }, [config?.exit?.confirm, onOpenChange]);
+
+  useEscapeClose(open && config?.exit?.escape !== false, closeWithConfirm);
+
+  const modalNode = (
+    <AnimatePresence>
+      {open ? (
+        <View
+          data-open="true"
+          data-color-mode={dataColorMode}
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: resolvedZIndex,
+            pointerEvents: "none",
+          }}
+        >
+          <BackgroundWrapper
+            open={open}
+            showBackdrop={isOutsideConfig}
+            background={outsideOptions.background}
+            backgroundBlur={outsideOptions.backgroundBlur}
+            className={outsideOptions.className}
+            style={outsideOptions.style}
+            zIndex={resolvedZIndex - 1}
+            onClick={
+              config?.exit?.overlay !== false ? closeWithConfirm : undefined
+            }
+          />
+          <View
+            row
+            alignItems="center"
+            justifyContent="center"
+            style={{
+              position: "fixed",
+              inset: 0,
+              pointerEvents: "none",
+              zIndex: resolvedZIndex,
+            }}
+          >
+            <View
+              id={id}
+              ref={modalRef}
+              data-popover-owner={config?.popoverOwnerId}
+              className={config?.className}
+              role={role}
+              aria-modal="true"
+              tabIndex={-1}
+              motion={motionPresets.modal}
+              themePreset={
+                config?.immersive ? "UISecondary" : config?.themePreset
+              }
+              background={
+                config?.immersive
+                  ? undefined
+                  : (config?.background ??
+                    (config?.themePreset ? undefined : "Base1TP1"))
+              }
+              color={config?.color}
+              border={config?.immersive ? "None" : config?.border}
+              radius={
+                config?.immersive ? "None" : (config?.radius ?? "ExtraBold")
+              }
+              shadow={
+                config?.immersive ? "None" : (config?.shadow ?? "Regular")
+              }
+              backgroundBlur={
+                config?.immersive ? "None" : (config?.backgroundBlur ?? "Light")
+              }
+              width={
+                config?.immersive
+                  ? "100vw"
+                  : (width ?? "min(100% - 3.2rem, 48rem)")
+              }
+              height={config?.immersive ? "100vh" : height}
+              column
+              style={{
+                maxHeight: config?.immersive ? "100vh" : "calc(100% - 3.2rem)",
+                pointerEvents: "auto",
+                overflow: "hidden",
+                margin: config?.immersive ? 0 : undefined,
+                ...config?.style,
+              }}
+            >
+              {config?.custom ? (
+                config.custom
+              ) : (
+                <>
+                  <View padding={16}>
+                    <DialogHeader
+                      config={config?.header}
+                      exitIcon={config?.exit?.icon}
+                      onExit={closeWithConfirm}
+                    />
+                  </View>
+
+                  <View
+                    padding={16}
+                    column
+                    style={{
+                      flex: "1 1 auto",
+                      overflowY: "auto",
+                      minHeight: 0,
+                    }}
+                  >
+                    {children}
+                  </View>
+
+                  <View padding={16}>
+                    <DialogFooter
+                      config={config?.footer}
+                      exitButton={config?.exit?.footerButton}
+                      onExit={closeWithConfirm}
+                    />
+                  </View>
+                </>
+              )}
+            </View>
+          </View>
+        </View>
+      ) : null}
+    </AnimatePresence>
+  );
+
+  return <DialogPortal>{modalNode}</DialogPortal>;
+}