@djangocfg/ui-core 2.1.242 → 2.1.246

package/README.md

@@ -149,12 +149,12 @@ hslToRgba('217 91% 60%', 0.5); // 'rgba(59, 130, 246, 0.5)'
 
 ## Dialog Service
 
-Universal dialog service to replace native `window.alert`, `window.confirm`, `window.prompt` with beautiful shadcn dialogs.
+Zustand-powered dialog service replacing native `window.alert`, `window.confirm`, `window.prompt` with shadcn dialogs. Also provides `window.dialog.auth()` for triggering authentication dialogs.
 
 ```tsx
-import { DialogProvider, useDialog, dialog } from '@djangocfg/ui-core/lib/dialog-service';
+import { DialogProvider, useDialog } from '@djangocfg/ui-core/lib/dialog-service';
 
-// Wrap your app with DialogProvider
+// Wrap your app with DialogProvider (already included in BaseApp)
 function App() {
   return (
     <DialogProvider>
@@ -165,7 +165,7 @@ function App() {
 
 // Use via React hook
 function Component() {
-  const { alert, confirm, prompt } = useDialog();
+  const { alert, confirm, prompt, auth } = useDialog();
 
   const handleDelete = async () => {
     const confirmed = await confirm({
@@ -177,12 +177,20 @@ function Component() {
       // Delete...
     }
   };
+
+  const handleProtected = async () => {
+    const didAuth = await auth({ message: 'Please sign in to continue' });
+    if (didAuth) {
+      // User navigated to auth
+    }
+  };
 }
 
 // Or use globally from anywhere (vanilla JS, libraries, etc.)
-dialog.alert({ message: 'Hello!' });
-const ok = await dialog.confirm({ message: 'Are you sure?' });
-const name = await dialog.prompt({ message: 'Enter your name:' });
+window.dialog.alert({ message: 'Hello!' });
+const ok = await window.dialog.confirm({ message: 'Are you sure?' });
+const name = await window.dialog.prompt({ message: 'Enter your name:' });
+const didAuth = await window.dialog.auth({ message: 'Session expired' });
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.242",
+  "version": "2.1.246",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -81,7 +81,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.242",
+    "@djangocfg/i18n": "^2.1.246",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -143,9 +143,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.242",
+    "@djangocfg/i18n": "^2.1.246",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.242",
+    "@djangocfg/typescript-config": "^2.1.246",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/lib/dialog-service/DialogProvider.tsx

@@ -1,73 +1,34 @@
 'use client';
 
-import { useEffect, useState, useCallback, type ReactNode } from 'react';
+import { useEffect, useCallback, type ReactNode } from 'react';
 import { AlertDialogUI, ConfirmDialogUI, PromptDialogUI } from './dialogs';
-import { initDialogAPI, dispatchDialogResponse } from './events';
-import { DIALOG_REQUEST_EVENT } from './constants';
-import type { DialogRequest, DialogRequestPayload } from './types';
+import { initDialogAPI, useDialogStore } from './store';
 
 interface DialogProviderProps {
   children: ReactNode;
 }
 
 /**
- * DialogProvider - Listens for dialog CustomEvents and renders appropriate dialogs
+ * DialogProvider - Reads from zustand dialog store and renders appropriate dialogs
  *
  * Must be mounted once at the app root (e.g., in BaseApp).
  * Handles dialog queue to show one dialog at a time.
  */
 export function DialogProvider({ children }: DialogProviderProps) {
-  const [queue, setQueue] = useState<DialogRequest[]>([]);
-  const [current, setCurrent] = useState<DialogRequest | null>(null);
+  const current = useDialogStore((s) => s.current);
+  const resolve = useDialogStore((s) => s.resolve);
 
-  // Initialize global API on mount
+  // Initialize global window.dialog API on mount
   useEffect(() => {
     initDialogAPI();
   }, []);
 
-  // Listen for dialog requests
-  useEffect(() => {
-    const handleRequest = (event: Event) => {
-      const customEvent = event as CustomEvent<DialogRequestPayload>;
-      const { id, type, options } = customEvent.detail;
-
-      const request: DialogRequest = {
-        id,
-        type,
-        options,
-        resolve: (result) => {
-          dispatchDialogResponse(id, result);
-        },
-      };
-
-      setQueue((prev) => [...prev, request]);
-    };
-
-    window.addEventListener(DIALOG_REQUEST_EVENT, handleRequest);
-
-    return () => {
-      window.removeEventListener(DIALOG_REQUEST_EVENT, handleRequest);
-    };
-  }, []);
-
-  // Process queue - show one dialog at a time
-  useEffect(() => {
-    if (!current && queue.length > 0) {
-      const [next, ...rest] = queue;
-      setCurrent(next ?? null);
-      setQueue(rest);
-    }
-  }, [current, queue]);
-
   // Handle dialog close
   const handleClose = useCallback(
     (result: boolean | string | null) => {
-      if (current) {
-        current.resolve(result);
-        setCurrent(null);
-      }
+      resolve(result);
     },
-    [current]
+    [resolve],
   );
 
   // Render current dialog

package/src/lib/dialog-service/hooks/use-dialog.ts

@@ -1,17 +1,18 @@
 'use client';
 
 import { useCallback } from 'react';
-import type { DialogOptions } from '../types';
+import { showDialog, dialogStore } from '../store';
+import type { DialogOptions, AuthDialogOptions } from '../types';
 
 /**
  * React hook for using dialog service
  *
- * Provides type-safe access to window.dialog with fallback to native dialogs.
+ * Provides type-safe access to dialogs via zustand store with fallback to native dialogs.
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { confirm, alert, prompt } = useDialog();
+ *   const { confirm, alert, prompt, auth } = useDialog();
  *
  *   const handleDelete = async () => {
  *     const confirmed = await confirm({
@@ -24,6 +25,13 @@ import type { DialogOptions } from '../types';
  *     }
  *   };
  *
+ *   const handleProtected = async () => {
+ *     const authed = await auth({ message: 'Please sign in to continue' });
+ *     if (authed) {
+ *       // proceed
+ *     }
+ *   };
+ *
  *   return <button onClick={handleDelete}>Delete</button>;
  * }
  * ```
@@ -35,13 +43,12 @@ export function useDialog() {
         return Promise.resolve();
       }
       if (!window.dialog) {
-        // Fallback to native
         window.alert(typeof message === 'string' ? message : message.message);
         return Promise.resolve();
       }
-      return window.dialog.alert(message);
+      return showDialog('alert', message).then(() => undefined);
     },
-    []
+    [],
   );
 
   const confirm = useCallback(
@@ -50,14 +57,13 @@ export function useDialog() {
         return Promise.resolve(false);
       }
       if (!window.dialog) {
-        // Fallback to native
         return Promise.resolve(
-          window.confirm(typeof message === 'string' ? message : message.message)
+          window.confirm(typeof message === 'string' ? message : message.message),
         );
       }
-      return window.dialog.confirm(message);
+      return showDialog('confirm', message) as Promise<boolean>;
     },
-    []
+    [],
   );
 
   const prompt = useCallback(
@@ -66,14 +72,20 @@ export function useDialog() {
         return Promise.resolve(null);
       }
       if (!window.dialog) {
-        // Fallback to native
         const opts = typeof message === 'string' ? { message } : message;
         return Promise.resolve(window.prompt(opts.message, opts.defaultValue));
       }
-      return window.dialog.prompt(message);
+      return showDialog('prompt', message) as Promise<string | null>;
+    },
+    [],
+  );
+
+  const auth = useCallback(
+    (options?: AuthDialogOptions): Promise<boolean> => {
+      return dialogStore.getState().openAuth(options);
     },
-    []
+    [],
   );
 
-  return { alert, confirm, prompt };
+  return { alert, confirm, prompt, auth };
 }

package/src/lib/dialog-service/index.ts

@@ -3,14 +3,15 @@ export type {
   DialogType,
   DialogVariant,
   DialogOptions,
+  AuthDialogOptions,
   DialogAPI,
 } from './types';
 
+// Store
+export { dialogStore, useDialogStore, initDialogAPI, showDialog } from './store';
+
 // Provider
 export { DialogProvider } from './DialogProvider';
 
 // Hooks
 export { useDialog } from './hooks';
-
-// Events (for advanced usage)
-export { initDialogAPI } from './events';

package/src/lib/dialog-service/store.ts

@@ -0,0 +1,133 @@
+'use client';
+
+import { createStore, useStore } from 'zustand';
+import type { DialogRequest, DialogType, DialogOptions, AuthDialogOptions } from './types';
+
+// ---------- store shape ----------
+
+interface DialogState {
+  /** Queue of pending dialogs */
+  queue: DialogRequest[];
+  /** Currently displayed dialog */
+  current: DialogRequest | null;
+
+  /** Auth dialog state (separate — rendered by layouts, not dialog-service) */
+  authOpen: boolean;
+  authOptions: AuthDialogOptions | null;
+  authResolve: ((value: boolean) => void) | null;
+}
+
+interface DialogActions {
+  /** Push a standard dialog (alert/confirm/prompt) into the queue */
+  enqueue: (request: DialogRequest) => void;
+  /** Resolve & close the current standard dialog */
+  resolve: (result: boolean | string | null) => void;
+
+  /** Open auth dialog, returns promise resolved on close */
+  openAuth: (options?: AuthDialogOptions) => Promise<boolean>;
+  /** Resolve auth dialog (called by AuthDialog component) */
+  resolveAuth: (result: boolean) => void;
+}
+
+type DialogStore = DialogState & DialogActions;
+
+// ---------- singleton store ----------
+
+let idCounter = 0;
+function generateId(): string {
+  return `dialog-${Date.now()}-${++idCounter}`;
+}
+
+export const dialogStore = createStore<DialogStore>((set, get) => ({
+  // state
+  queue: [],
+  current: null,
+  authOpen: false,
+  authOptions: null,
+  authResolve: null,
+
+  // actions
+  enqueue: (request) => {
+    set((s) => {
+      if (!s.current) {
+        return { current: request };
+      }
+      return { queue: [...s.queue, request] };
+    });
+  },
+
+  resolve: (result) => {
+    const { current, queue } = get();
+    if (!current) return;
+    current.resolve(result);
+    const [next, ...rest] = queue;
+    set({ current: next ?? null, queue: rest });
+  },
+
+  openAuth: (options) => {
+    return new Promise<boolean>((resolve) => {
+      set({ authOpen: true, authOptions: options ?? null, authResolve: resolve });
+    });
+  },
+
+  resolveAuth: (result) => {
+    const { authResolve } = get();
+    authResolve?.(result);
+    set({ authOpen: false, authOptions: null, authResolve: null });
+  },
+}));
+
+// ---------- helpers ----------
+
+/**
+ * Show a standard dialog (alert/confirm/prompt) via the store.
+ * Returns a promise that resolves when the user responds.
+ */
+export function showDialog(
+  type: DialogType,
+  messageOrOptions: string | DialogOptions,
+): Promise<boolean | string | null> {
+  if (type === 'auth') {
+    return dialogStore.getState().openAuth(
+      typeof messageOrOptions === 'string'
+        ? { message: messageOrOptions }
+        : { message: messageOrOptions.message },
+    );
+  }
+
+  return new Promise((resolve) => {
+    const options: DialogOptions =
+      typeof messageOrOptions === 'string'
+        ? { message: messageOrOptions }
+        : messageOrOptions;
+
+    const request: DialogRequest = {
+      id: generateId(),
+      type,
+      options,
+      resolve,
+    };
+
+    dialogStore.getState().enqueue(request);
+  });
+}
+
+// ---------- window.dialog init ----------
+
+export function initDialogAPI(): void {
+  if (typeof window === 'undefined') return;
+  if (window.dialog) return;
+
+  window.dialog = {
+    alert: (message) => showDialog('alert', message).then(() => undefined),
+    confirm: (message) => showDialog('confirm', message) as Promise<boolean>,
+    prompt: (message) => showDialog('prompt', message) as Promise<string | null>,
+    auth: (options) => dialogStore.getState().openAuth(options),
+  };
+}
+
+// ---------- react hooks ----------
+
+export function useDialogStore<T>(selector: (state: DialogStore) => T): T {
+  return useStore(dialogStore, selector);
+}

package/src/lib/dialog-service/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type DialogType = 'alert' | 'confirm' | 'prompt';
+export type DialogType = 'alert' | 'confirm' | 'prompt' | 'auth';
 
 export type DialogVariant = 'default' | 'destructive' | 'warning' | 'success';
 
@@ -27,22 +27,18 @@ export interface DialogOptions {
   preventClose?: boolean;
 }
 
-export interface DialogRequest {
-  id: string;
-  type: DialogType;
-  options: DialogOptions;
-  resolve: (value: boolean | string | null) => void;
+export interface AuthDialogOptions {
+  /** Custom message to display */
+  message?: string;
+  /** URL to redirect after auth */
+  redirectUrl?: string;
 }
 
-export interface DialogRequestPayload {
+export interface DialogRequest {
   id: string;
   type: DialogType;
   options: DialogOptions;
-}
-
-export interface DialogResponsePayload {
-  id: string;
-  result: boolean | string | null;
+  resolve: (value: boolean | string | null) => void;
 }
 
 /** Global window.dialog API */
@@ -50,6 +46,7 @@ export interface DialogAPI {
   alert: (message: string | DialogOptions) => Promise<void>;
   confirm: (message: string | DialogOptions) => Promise<boolean>;
   prompt: (message: string | DialogOptions) => Promise<string | null>;
+  auth: (options?: AuthDialogOptions) => Promise<boolean>;
 }
 
 declare global {

package/src/lib/dialog-service/events.ts

@@ -1,73 +0,0 @@
-import { DIALOG_REQUEST_EVENT, DIALOG_RESPONSE_EVENT } from './constants';
-import type {
-  DialogType,
-  DialogOptions,
-  DialogRequestPayload,
-  DialogResponsePayload,
-} from './types';
-
-let dialogIdCounter = 0;
-
-function generateId(): string {
-  return `dialog-${Date.now()}-${++dialogIdCounter}`;
-}
-
-/**
- * Dispatch dialog request and wait for response via CustomEvent
- */
-function showDialog(
-  type: DialogType,
-  messageOrOptions: string | DialogOptions
-): Promise<boolean | string | null> {
-  return new Promise((resolve) => {
-    const id = generateId();
-    const options: DialogOptions =
-      typeof messageOrOptions === 'string'
-        ? { message: messageOrOptions }
-        : messageOrOptions;
-
-    // Listen for response
-    const handleResponse = (event: Event) => {
-      const customEvent = event as CustomEvent<DialogResponsePayload>;
-      if (customEvent.detail.id === id) {
-        window.removeEventListener(DIALOG_RESPONSE_EVENT, handleResponse);
-        resolve(customEvent.detail.result);
-      }
-    };
-
-    window.addEventListener(DIALOG_RESPONSE_EVENT, handleResponse);
-
-    // Dispatch request
-    window.dispatchEvent(
-      new CustomEvent<DialogRequestPayload>(DIALOG_REQUEST_EVENT, {
-        detail: { id, type, options },
-      })
-    );
-  });
-}
-
-/**
- * Initialize global window.dialog API
- * Uses singleton pattern - only initializes once
- */
-export function initDialogAPI(): void {
-  if (typeof window === 'undefined') return;
-  if (window.dialog) return; // Already initialized
-
-  window.dialog = {
-    alert: (message) => showDialog('alert', message).then(() => undefined),
-    confirm: (message) => showDialog('confirm', message) as Promise<boolean>,
-    prompt: (message) => showDialog('prompt', message) as Promise<string | null>,
-  };
-}
-
-/**
- * Dispatch response event (used by DialogProvider)
- */
-export function dispatchDialogResponse(id: string, result: boolean | string | null): void {
-  window.dispatchEvent(
-    new CustomEvent<DialogResponsePayload>(DIALOG_RESPONSE_EVENT, {
-      detail: { id, result },
-    })
-  );
-}