@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/Modal.tsx

@@ -0,0 +1,206 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import {
+  Modal as UIModal,
+  ModalContent,
+  ModalActions,
+  ConfirmModal,
+} from "./ui/Modal";
+import { PromptModal } from "./ui/PromptModal";
+
+export { UIModal as Modal, UIModal, ModalContent, ModalActions, ConfirmModal };
+
+// ============================================================================
+// Global Modal Context for programmatic access
+// ============================================================================
+
+type ModalVariant = "alert" | "confirm" | "prompt";
+
+interface ModalState {
+  variant: ModalVariant;
+  open: boolean;
+  title: string;
+  message?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  onConfirm?: (value?: string) => void;
+  onCancel?: () => void;
+  danger?: boolean;
+}
+
+const initialState: ModalState = {
+  variant: "alert",
+  open: false,
+  title: "",
+  message: "",
+  onConfirm: () => {},
+  onCancel: () => {},
+  danger: false,
+};
+
+interface ModalContextType {
+  showAlert: (title: string, message?: string) => void;
+  showConfirm: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    options?: { danger?: boolean },
+  ) => void;
+  showPrompt: (
+    title: string,
+    message: string,
+    onConfirm: (value: string) => void,
+    options?: { placeholder?: string; defaultValue?: string },
+  ) => void;
+  closeModal: () => void;
+}
+
+const ModalContext = createContext<ModalContextType | null>(null);
+
+export function useModal() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within ModalProvider");
+  }
+  return context;
+}
+
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+export function ModalProvider({ children }: ModalProviderProps) {
+  const [state, setState] = useState<ModalState>(initialState);
+  const [inputValue, setInputValue] = useState(state.defaultValue || "");
+
+  const showAlert = useCallback((title: string, message?: string) => {
+    setState({
+      variant: "alert",
+      open: true,
+      title,
+      message,
+      onConfirm: () => setState((s) => ({ ...s, open: false })),
+      onCancel: () => setState((s) => ({ ...s, open: false })),
+    });
+  }, []);
+
+  const showConfirm = useCallback(
+    (
+      title: string,
+      message: string,
+      onConfirm: () => void,
+      options?: { danger?: boolean },
+    ) => {
+      setState({
+        variant: "confirm",
+        open: true,
+        title,
+        message,
+        danger: options?.danger,
+        onConfirm: () => {
+          onConfirm();
+          setState((s) => ({ ...s, open: false }));
+        },
+        onCancel: () => setState((s) => ({ ...s, open: false })),
+      });
+    },
+    [],
+  );
+
+  const showPrompt = useCallback(
+    (
+      title: string,
+      message: string,
+      onConfirm: (value: string) => void,
+      options?: { placeholder?: string; defaultValue?: string },
+    ) => {
+      setState({
+        variant: "prompt",
+        open: true,
+        title,
+        message,
+        placeholder: options?.placeholder,
+        defaultValue: options?.defaultValue,
+        onConfirm: (value) => {
+          onConfirm(value || "");
+          setState((s) => ({ ...s, open: false }));
+        },
+        onCancel: () => setState((s) => ({ ...s, open: false })),
+      });
+    },
+    [],
+  );
+
+  const closeModal = useCallback(() => {
+    setState((s) => ({ ...s, open: false }));
+  }, []);
+
+  // Re-order so imports come first, then showAlert
+  const handleShowAlert = (title: string, message?: string) => {
+    setState({
+      variant: "alert",
+      open: true,
+      title,
+      message,
+      onConfirm: () => setState((s) => ({ ...s, open: false })),
+      onCancel: () => setState((s) => ({ ...s, open: false })),
+    });
+  };
+
+  return (
+    <ModalContext.Provider
+      value={{
+        showAlert: handleShowAlert,
+        showConfirm,
+        showPrompt,
+        closeModal,
+      }}
+    >
+      {children}
+      {state.variant === "confirm" && (
+        <ConfirmModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          onConfirm={() => state.onConfirm?.()}
+          title={state.title}
+          message={state.message || ""}
+          variant={state.danger ? "danger" : "default"}
+        />
+      )}
+      {state.variant === "alert" && (
+        <UIModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          title={state.title}
+          size="sm"
+          footer={
+            <button
+              type="button"
+              onClick={() => state.onConfirm?.()}
+              className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+            >
+              OK
+            </button>
+          }
+        >
+          <p className="text-[var(--kyro-text-secondary)]">{state.message}</p>
+        </UIModal>
+      )}
+      {state.variant === "prompt" && (
+        <PromptModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          onSubmit={(value) => state.onConfirm?.(value)}
+          title={state.title}
+          placeholder={state.placeholder}
+          defaultValue={state.defaultValue}
+        />
+      )}
+    </ModalContext.Provider>
+  );
+}