@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/Modal.tsx

@@ -0,0 +1,149 @@
+import {
+  useEffect,
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import { AlertTriangle, HelpCircle } from "lucide-react";
+
+export { Modal, ModalContent, ModalActions, ConfirmModal } from "./ui/Modal";
+
+// ============================================================================
+// 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;
+}
+
+const initialState: ModalState = {
+  variant: "alert",
+  open: false,
+  title: "",
+  message: "",
+  onConfirm: () => {},
+  onCancel: () => {},
+};
+
+interface ModalContextType {
+  showAlert: (title: string, message?: string) => void;
+  showConfirm: (title: string, message: string, onConfirm: () => void) => 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) => {
+      setState({
+        variant: "confirm",
+        open: true,
+        title,
+        message,
+        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}
+    </ModalContext.Provider>
+  );
+}