@musecat/uikit 0.1.1

package/packages/Frameworks/Dialog/Dialog.store.ts

@@ -0,0 +1,199 @@
+"use client";
+
+import type { DialogProps } from "@/packages/Frameworks/Dialog/Dialog.types";
+
+export interface DialogInstance extends Promise<any> {
+  id: string;
+  instanceId: string;
+  props: DialogProps;
+  close: (value?: any) => void;
+}
+
+type Listener = (stack: DialogInstance[]) => void;
+
+let nextId = 0;
+let nextAnchorId = 0;
+let stack: DialogInstance[] = [];
+let listeners: Listener[] = [];
+const anchorIds = new WeakMap<HTMLElement, string>();
+
+function closeOpenInstances(mode: DialogProps["mode"], exceptId?: string) {
+  for (const item of stack) {
+    if (item.props.open === false) continue;
+    if (item.props.mode !== mode) continue;
+    if (exceptId && item.id === exceptId) continue;
+    item.close();
+  }
+}
+
+function resolveModeId(
+  mode: DialogProps["mode"],
+  props: Omit<DialogProps, "mode">,
+) {
+  if (props.id) return props.id;
+
+  if (props.funnel?.id) {
+    return `${mode}-funnel:${props.funnel.id}`;
+  }
+
+  if (mode === "modal") {
+    const title =
+      props.modal && "header" in props.modal
+        ? props.modal.header?.title
+        : undefined;
+    if (typeof title === "string" && title.trim()) {
+      return `dialog-modal:${title.trim()}`;
+    }
+  }
+
+  if (mode === "sheet") {
+    const title =
+      props.sheet && "header" in props.sheet
+        ? props.sheet.header?.title
+        : undefined;
+    if (typeof title === "string" && title.trim()) {
+      return `dialog-sheet:${title.trim()}`;
+    }
+  }
+
+  return `dialog-${mode}`;
+}
+
+function notify() {
+  for (const listener of listeners) {
+    listener([...stack]);
+  }
+}
+
+export function dialog(props: DialogProps): DialogInstance {
+  const id = props.id ?? `dialog-${++nextId}`;
+  const instanceId = `dialog-inst-${++nextId}`;
+
+  const existing = stack.find((item) => item.id === id);
+  if (existing && existing.props.open !== false) return existing;
+
+  let resolvePromise: (value: any) => void;
+
+  const promise = new Promise<any>((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  const close = (value?: any) => {
+    instance.props = {
+      ...instance.props,
+      open: false,
+    };
+    notify();
+    resolvePromise(value);
+
+    setTimeout(() => {
+      stack = stack.filter(
+        (item) => item !== instance || item.props.open !== false,
+      );
+      notify();
+    }, 350);
+  };
+
+  const instance = Object.assign(promise, {
+    id,
+    instanceId,
+    props: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open) close();
+      },
+    },
+    close,
+  }) as DialogInstance;
+
+  stack.push(instance);
+  notify();
+
+  return instance;
+}
+
+dialog.popover = (
+  anchor: HTMLElement,
+  popoverProps: Omit<DialogProps, "mode">,
+) => {
+  if (!anchorIds.has(anchor)) {
+    anchorIds.set(anchor, `dialog-popover-${++nextAnchorId}`);
+  }
+  const id = popoverProps.id || anchorIds.get(anchor)!;
+
+  const existing = stack.find(
+    (item) => item.id === id && item.props.open !== false,
+  );
+  if (existing) {
+    const closeOnClickTrigger =
+      (popoverProps.popover as any)?.closeOnClickTrigger !== false;
+    if (closeOnClickTrigger) existing.close();
+    return existing;
+  }
+
+  return dialog({
+    ...popoverProps,
+    id,
+    mode: "popover",
+    popover: {
+      anchorRef: { current: anchor },
+      ...(popoverProps.popover as any),
+    },
+  } as DialogProps);
+};
+
+dialog.modal = (modalProps: Omit<DialogProps, "mode">) => {
+  const id = resolveModeId("modal", modalProps);
+  const existing = stack.find(
+    (item) => item.id === id && item.props.open !== false,
+  );
+  if (existing) {
+    existing.close();
+    return existing;
+  }
+
+  closeOpenInstances("modal", id);
+
+  return dialog({
+    ...modalProps,
+    id,
+    mode: "modal",
+  } as DialogProps);
+};
+
+dialog.sheet = (sheetProps: Omit<DialogProps, "mode">) => {
+  const id = resolveModeId("sheet", sheetProps);
+  const existing = stack.find(
+    (item) => item.id === id && item.props.open !== false,
+  );
+  if (existing) {
+    existing.close();
+    return existing;
+  }
+
+  closeOpenInstances("sheet", id);
+
+  return dialog({
+    ...sheetProps,
+    id,
+    mode: "sheet",
+  } as DialogProps);
+};
+
+export const DialogStore = {
+  getStack() {
+    return [...stack];
+  },
+  subscribe(listener: Listener) {
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  },
+  clear() {
+    stack = [];
+    notify();
+  },
+};

package/packages/Frameworks/Dialog/Dialog.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { buildContext, useViewportMatch } from "@musecat/functionkit";
+import { useMemo } from "react";
+import DialogFunnel from "@/packages/Frameworks/Dialog/contents/Dialog.funnel";
+import type {
+  DialogContextValue,
+  DialogMode,
+  DialogProps,
+} from "@/packages/Frameworks/Dialog/Dialog.types";
+import RenderModal from "@/packages/Frameworks/Dialog/renderers/renderModal";
+import RenderPopover from "@/packages/Frameworks/Dialog/renderers/renderPopover";
+import RenderSheet from "@/packages/Frameworks/Dialog/renderers/renderSheet";
+
+const [DialogProvider, useRawDialogContext] =
+  buildContext<DialogContextValue | null>(null);
+
+export function useDialog() {
+  return useRawDialogContext();
+}
+
+export default function Dialog(props: DialogProps) {
+  const {
+    open = false,
+    onOpenChange = () => {},
+    zIndex,
+    id,
+    width,
+    height,
+    mode,
+    mobileMode,
+    role,
+    popover,
+    modal,
+    sheet,
+    funnel,
+    exit,
+    children,
+    content,
+    "data-color-mode": dataColorMode,
+  } = props;
+
+  const resolvedChildren = children ?? content;
+
+  const isMobile = useViewportMatch("(max-width: 549.98px)");
+
+  const resolvedMode = useMemo<DialogMode>(() => {
+    if (mode === "sheet") return "sheet";
+    if (isMobile && mobileMode) {
+      return mobileMode;
+    }
+    return mode;
+  }, [mode, isMobile, mobileMode]);
+
+  const resolvedHeader = useMemo(() => {
+    if (funnel) return undefined;
+    if (resolvedMode === "popover") return popover?.header;
+    if (resolvedMode === "modal") return modal?.header ?? popover?.header;
+    return sheet?.header ?? popover?.header;
+  }, [resolvedMode, popover, modal, sheet, funnel]);
+
+  const resolvedFooter = useMemo(() => {
+    if (funnel) return undefined;
+    if (resolvedMode === "popover") return popover?.footer;
+    if (resolvedMode === "modal") return modal?.footer ?? popover?.footer;
+    return sheet?.footer ?? popover?.footer;
+  }, [resolvedMode, popover, modal, sheet, funnel]);
+
+  const resolvedExit = useMemo(() => {
+    if (funnel) return undefined;
+    if (resolvedMode === "popover") return popover?.exit ?? exit;
+    if (resolvedMode === "modal") return modal?.exit ?? popover?.exit ?? exit;
+    return sheet?.exit ?? popover?.exit ?? exit;
+  }, [resolvedMode, popover, modal, sheet, funnel, exit]);
+
+  const close = () => {
+    onOpenChange(false);
+  };
+
+  const contextValue = useMemo<DialogContextValue>(
+    () => ({
+      id: id || "",
+      mode: resolvedMode,
+      open,
+      closeDialog: close,
+    }),
+    [id, resolvedMode, open, close],
+  );
+
+  const renderFunnelContent = () => {
+    if (!funnel) return null;
+    return <DialogFunnel config={funnel} onClose={close} isMobile={isMobile} />;
+  };
+
+  const renderContent = () => {
+    if (resolvedMode === "popover" && popover) {
+      const popoverConfig = {
+        ...popover,
+        header: resolvedHeader,
+        footer: resolvedFooter,
+        exit: resolvedExit,
+      };
+
+      return (
+        <RenderPopover
+          open={open}
+          onOpenChange={onOpenChange}
+          config={popoverConfig}
+          id={id}
+          zIndex={zIndex}
+          width={width}
+          height={height}
+          role={role}
+          data-color-mode={dataColorMode}
+        >
+          {resolvedChildren}
+        </RenderPopover>
+      );
+    }
+
+    if (resolvedMode === "modal") {
+      const modalConfig = funnel
+        ? {
+            ...modal,
+            custom: renderFunnelContent(),
+            popoverOwnerId: popover?.popoverOwnerId,
+          }
+        : {
+            ...modal,
+            header: resolvedHeader,
+            footer: resolvedFooter,
+            exit: resolvedExit,
+            popoverOwnerId: popover?.popoverOwnerId,
+          };
+
+      return (
+        <RenderModal
+          open={open}
+          onOpenChange={onOpenChange}
+          config={modalConfig}
+          id={id}
+          zIndex={zIndex}
+          width={width}
+          height={height}
+          role={role}
+          data-color-mode={dataColorMode}
+        >
+          {resolvedChildren}
+        </RenderModal>
+      );
+    }
+
+    if (resolvedMode === "sheet") {
+      const sheetConfig = {
+        ...sheet,
+        header: resolvedHeader,
+        footer: resolvedFooter,
+        exit: resolvedExit,
+        popoverOwnerId: popover?.popoverOwnerId,
+      };
+
+      return (
+        <RenderSheet
+          open={open}
+          onOpenChange={onOpenChange}
+          config={sheetConfig}
+          id={id}
+          zIndex={zIndex}
+          width={width}
+          height={height}
+          role={role}
+          data-color-mode={dataColorMode}
+        >
+          {funnel ? renderFunnelContent() : resolvedChildren}
+        </RenderSheet>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <DialogProvider value={contextValue}>{renderContent()}</DialogProvider>
+  );
+}

package/packages/Frameworks/Dialog/Dialog.types.ts

@@ -0,0 +1,264 @@
+import type { ReactNode, RefObject } from "react";
+import type { ButtonProps } from "@/packages/Components/Button/Button.types";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BackgroundBlurValue,
+  BorderProps,
+  ThemeBackgroundPaint,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export type DialogMode = "popover" | "modal" | "sheet";
+export type DialogMobileMode = "modal" | "sheet";
+
+export interface ExitConfirmOptions {
+  title?: string;
+  caption?: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export interface ExitConfig {
+  overlay?: boolean;
+  escape?: boolean;
+  confirm?: ExitConfirmOptions;
+  icon?: boolean | ReactNode;
+  footerButton?: boolean | ReactNode;
+}
+
+export interface OffsetConfig {
+  x?: number | string;
+  y?: number | string;
+  width?: number | string;
+}
+
+export interface DialogHeaderConfig {
+  icon?: IconProps;
+  title?: ReactNode;
+  caption?: ReactNode;
+  content?: ReactNode;
+}
+
+export interface DialogFooterConfig {
+  columnLayout?: boolean;
+  content?: ReactNode;
+  buttons?: (ButtonProps & { key?: string })[];
+  buttonCondensed?: boolean | "pc";
+}
+
+export type PopoverHeaderConfig = DialogHeaderConfig;
+export type PopoverFooterConfig = DialogFooterConfig;
+
+export interface ModalHeaderConfig extends DialogHeaderConfig {
+  centered?: boolean;
+}
+export type ModalFooterConfig = DialogFooterConfig;
+
+export interface SheetHeaderConfig extends DialogHeaderConfig {
+  iconReversed?: boolean;
+}
+export type SheetFooterConfig = DialogFooterConfig;
+
+type DialogBaseConfig = ThemeSystemProps & BorderProps & RadiusProps;
+
+export interface PopoverConfig extends DialogBaseConfig {
+  anchorRef: RefObject<HTMLElement | null>;
+  placement?:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "right";
+  strategy?: "anchored" | "center-selected";
+  selectedItemSelector?: string;
+  matchAnchorWidth?: boolean;
+  coverAnchor?: boolean;
+  gap?: number;
+  margin?: number;
+  stopInteractionPropagation?: boolean;
+  recalcKey?: string | number;
+  popoverOwnerId?: string;
+  header?: PopoverHeaderConfig;
+  footer?: PopoverFooterConfig;
+  exit?: ExitConfig;
+
+  closeOnClickTrigger?: boolean;
+  outside?: DialogOutsideConfig;
+  offset?: OffsetConfig;
+  maxHeight?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface ModalConfig extends DialogBaseConfig {
+  header?: ModalHeaderConfig;
+  footer?: ModalFooterConfig;
+  exit?: ExitConfig;
+  custom?: ReactNode;
+  defaultEnterAction?: () => void;
+  maintainWhenRouting?: boolean;
+  immersive?: boolean;
+  outside?: DialogOutsideConfig;
+  portalClassName?: string;
+  portalStyle?: React.CSSProperties;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+  popoverOwnerId?: string;
+}
+
+export interface SheetConfig extends DialogBaseConfig {
+  header?: SheetHeaderConfig;
+  footer?: SheetFooterConfig;
+  exit?: ExitConfig;
+  snapPoints?: number[];
+  defaultSnap?: number;
+  min?: number | string;
+  max?: number | string;
+  freeDrag?: boolean;
+  disableDrag?: boolean;
+  outside?: DialogOutsideConfig;
+  className?: string;
+  style?: React.CSSProperties;
+  popoverOwnerId?: string;
+}
+
+export interface FunnelStepConfig {
+  name: string;
+  title?: ReactNode;
+  caption?: ReactNode;
+  icon?: IconProps;
+  content: ReactNode;
+  nextDisabled?: boolean;
+  onNext?: () => boolean | Promise<boolean> | string;
+}
+
+export interface FunnelHistory {
+  push: (step: string, context?: any) => void;
+  replace: (step: string, context?: any) => void;
+  back: () => void;
+  go?: (index: number) => void;
+}
+
+export interface FunnelNavigationConfig {
+  back?: boolean | ReactNode;
+  backLocation?:
+    | "header"
+    | "footer"
+    | { pc?: "header" | "footer"; mobile?: "header" | "footer" };
+  next?: boolean | ReactNode;
+  nextLocation?:
+    | "header"
+    | "footer"
+    | { pc?: "header" | "footer"; mobile?: "header" | "footer" };
+  exit?: boolean | ReactNode;
+  exitLocation?:
+    | "header"
+    | "footer"
+    | { pc?: "header" | "footer"; mobile?: "header" | "footer" };
+}
+
+export interface FunnelConfig {
+  id: string;
+  steps: FunnelStepConfig[];
+  onFinish?: () => void;
+  onMount?: (history: FunnelHistory) => void;
+  loading?: boolean;
+  isSubmitted?: boolean;
+  onRestart?: () => void;
+  navigation?: FunnelNavigationConfig;
+  preset?: "classic" | "oobe";
+  footer?: {
+    content?: ReactNode;
+    columnLayout?: boolean;
+    buttonCondensed?: boolean | "pc";
+  };
+}
+
+export interface DialogContextValue {
+  id: string;
+  mode: DialogMode;
+  open: boolean;
+  closeDialog: () => void;
+  loading?: boolean;
+  funnel?: {
+    currentStep: string;
+    currentIndex: number;
+    totalSteps: number;
+    history: FunnelHistory;
+  };
+}
+
+export interface DialogOutsideOptions {
+  lockBodyScroll?: boolean;
+  background?: ThemeBackgroundPaint;
+  backgroundBlur?: BackgroundBlurValue;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export type DialogOutsideConfig = boolean | DialogOutsideOptions;
+
+export interface CommonDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  zIndex?: number;
+  id?: string;
+  width?: number | string;
+  height?: number | string;
+  content?: ReactNode;
+  role?: string;
+  exit?: ExitConfig;
+  "data-color-mode"?: string;
+}
+
+export type DialogProps =
+  | (CommonDialogProps & {
+      mode: "popover" | "modal";
+      children?: ReactNode;
+      content?: ReactNode;
+      offset?: OffsetConfig;
+      mobileMode?: DialogMobileMode;
+      popover?: PopoverConfig;
+      modal?: ModalConfig;
+      sheet?: SheetConfig;
+      funnel?: never;
+    })
+  | (CommonDialogProps & {
+      mode: "sheet";
+      children?: ReactNode;
+      content?: ReactNode;
+      offset?: never;
+      mobileMode?: never;
+      popover?: never;
+      modal?: never;
+      sheet?: SheetConfig;
+      funnel?: never;
+    })
+  | (CommonDialogProps & {
+      mode: "popover" | "modal";
+      children?: never;
+      content?: never;
+      offset?: OffsetConfig;
+      mobileMode?: DialogMobileMode;
+      popover?: Omit<PopoverConfig, "header" | "footer" | "exit">;
+      modal?: Omit<ModalConfig, "header" | "footer" | "custom" | "exit">;
+      sheet?: Omit<SheetConfig, "header" | "footer" | "exit">;
+      funnel: FunnelConfig;
+    })
+  | (CommonDialogProps & {
+      mode: "sheet";
+      children?: never;
+      content?: never;
+      offset?: never;
+      mobileMode?: never;
+      popover?: never;
+      modal?: never;
+      sheet?: Omit<SheetConfig, "header" | "footer" | "exit">;
+      funnel: FunnelConfig;
+    });

package/packages/Frameworks/Dialog/Dialog.utils.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import { type ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+export function useEscapeClose(active: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!active) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, onClose]);
+}
+
+export function DialogPortal({ children }: { children: ReactNode }) {
+  if (typeof document === "undefined") return null;
+  return createPortal(children, document.body);
+}