@djangocfg/ui-core 2.1.148 → 2.1.150

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

@@ -0,0 +1,263 @@
+import { useCallback } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { Button } from '../../components/button';
+import { DialogProvider } from './DialogProvider';
+import { useDialog } from './hooks';
+
+export default defineStory({
+  title: 'Lib/DialogService',
+  component: DialogProvider,
+  description: 'Global dialog service for alert, confirm, and prompt dialogs. Uses CustomEvents to work from anywhere in the app. Supports i18n and keyboard shortcuts.',
+});
+
+// Wrapper component to provide DialogProvider context
+function StoryWrapper({ children }: { children: React.ReactNode }) {
+  return <DialogProvider>{children}</DialogProvider>;
+}
+
+// Demo component using the hook
+function AlertDemo() {
+  const { alert } = useDialog();
+
+  const handleSimpleAlert = useCallback(async () => {
+    await alert('This is a simple alert message!');
+    console.log('Alert closed');
+  }, [alert]);
+
+  const handleAlertWithTitle = useCallback(async () => {
+    await alert({
+      title: 'Success!',
+      message: 'Your changes have been saved successfully.',
+    });
+    console.log('Alert with title closed');
+  }, [alert]);
+
+  return (
+    <div className="flex gap-2">
+      <Button onClick={handleSimpleAlert}>Simple Alert</Button>
+      <Button variant="outline" onClick={handleAlertWithTitle}>
+        Alert with Title
+      </Button>
+    </div>
+  );
+}
+
+export const Alert = () => (
+  <StoryWrapper>
+    <AlertDemo />
+  </StoryWrapper>
+);
+
+// Confirm demo
+function ConfirmDemo() {
+  const { confirm, alert } = useDialog();
+
+  const handleSimpleConfirm = useCallback(async () => {
+    const result = await confirm('Are you sure you want to proceed?');
+    await alert(`You clicked: ${result ? 'Confirm' : 'Cancel'}`);
+  }, [confirm, alert]);
+
+  const handleDestructiveConfirm = useCallback(async () => {
+    const result = await confirm({
+      title: 'Delete Item',
+      message: 'This action cannot be undone. Are you sure you want to delete this item?',
+      confirmText: 'Yes, Delete',
+      cancelText: 'Keep It',
+      variant: 'destructive',
+    });
+    await alert(`You clicked: ${result ? 'Delete' : 'Keep'}`);
+  }, [confirm, alert]);
+
+  return (
+    <div className="flex gap-2">
+      <Button onClick={handleSimpleConfirm}>Simple Confirm</Button>
+      <Button variant="destructive" onClick={handleDestructiveConfirm}>
+        Destructive Confirm
+      </Button>
+    </div>
+  );
+}
+
+export const Confirm = () => (
+  <StoryWrapper>
+    <ConfirmDemo />
+  </StoryWrapper>
+);
+
+// Prompt demo
+function PromptDemo() {
+  const { prompt, alert } = useDialog();
+
+  const handleSimplePrompt = useCallback(async () => {
+    const result = await prompt('What is your name?');
+    if (result) {
+      await alert(`Hello, ${result}!`);
+    } else {
+      await alert('You cancelled the prompt.');
+    }
+  }, [prompt, alert]);
+
+  const handlePromptWithDefault = useCallback(async () => {
+    const result = await prompt({
+      title: 'Edit Name',
+      message: 'Enter your display name:',
+      defaultValue: 'John Doe',
+      placeholder: 'Enter name...',
+      confirmText: 'Save',
+      cancelText: 'Cancel',
+    });
+    if (result) {
+      await alert(`Name updated to: ${result}`);
+    }
+  }, [prompt, alert]);
+
+  const handleEmailPrompt = useCallback(async () => {
+    const result = await prompt({
+      title: 'Subscribe',
+      message: 'Enter your email to subscribe to our newsletter:',
+      placeholder: 'email@example.com',
+      inputType: 'email',
+      confirmText: 'Subscribe',
+    });
+    if (result) {
+      await alert(`Subscribed with: ${result}`);
+    }
+  }, [prompt, alert]);
+
+  return (
+    <div className="flex gap-2 flex-wrap">
+      <Button onClick={handleSimplePrompt}>Simple Prompt</Button>
+      <Button variant="outline" onClick={handlePromptWithDefault}>
+        Prompt with Default
+      </Button>
+      <Button variant="secondary" onClick={handleEmailPrompt}>
+        Email Prompt
+      </Button>
+    </div>
+  );
+}
+
+export const Prompt = () => (
+  <StoryWrapper>
+    <PromptDemo />
+  </StoryWrapper>
+);
+
+// Queue demo - multiple dialogs in sequence
+function QueueDemo() {
+  const { alert, confirm, prompt } = useDialog();
+
+  const handleQueue = useCallback(async () => {
+    await alert('This is step 1 of 3');
+    const proceed = await confirm('Do you want to continue to step 2?');
+    if (!proceed) {
+      await alert('You cancelled the sequence.');
+      return;
+    }
+    const name = await prompt({
+      title: 'Step 3',
+      message: 'Enter your name to complete:',
+    });
+    if (name) {
+      await alert(`Sequence complete! Hello, ${name}!`);
+    } else {
+      await alert('Sequence cancelled at step 3.');
+    }
+  }, [alert, confirm, prompt]);
+
+  return (
+    <Button onClick={handleQueue}>
+      Start Dialog Sequence
+    </Button>
+  );
+}
+
+export const Queue = () => (
+  <StoryWrapper>
+    <QueueDemo />
+  </StoryWrapper>
+);
+
+// Window.dialog API demo (vanilla JS style)
+function WindowDialogDemo() {
+  const handleWindowAlert = useCallback(() => {
+    window.dialog.alert('Called via window.dialog.alert()');
+  }, []);
+
+  const handleWindowConfirm = useCallback(async () => {
+    const result = await window.dialog.confirm('Called via window.dialog.confirm()');
+    window.dialog.alert(`Result: ${result}`);
+  }, []);
+
+  const handleWindowPrompt = useCallback(async () => {
+    const result = await window.dialog.prompt({
+      title: 'window.dialog.prompt()',
+      message: 'This works from vanilla JS too!',
+      defaultValue: 'Hello',
+    });
+    if (result) {
+      window.dialog.alert(`You entered: ${result}`);
+    }
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        These buttons use <code>window.dialog.*</code> directly - works from any JS code!
+      </p>
+      <div className="flex gap-2">
+        <Button variant="outline" onClick={handleWindowAlert}>
+          window.dialog.alert()
+        </Button>
+        <Button variant="outline" onClick={handleWindowConfirm}>
+          window.dialog.confirm()
+        </Button>
+        <Button variant="outline" onClick={handleWindowPrompt}>
+          window.dialog.prompt()
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export const WindowDialogAPI = () => (
+  <StoryWrapper>
+    <WindowDialogDemo />
+  </StoryWrapper>
+);
+
+// Keyboard shortcuts demo
+function HotkeysDemo() {
+  const { alert, confirm } = useDialog();
+
+  const handleHotkeysDemo = useCallback(async () => {
+    await alert({
+      title: 'Keyboard Shortcuts',
+      message: 'Press Enter to close this alert, or wait and click OK.',
+    });
+
+    const result = await confirm({
+      title: 'Confirm with Keyboard',
+      message: 'Press Enter to confirm, Escape to cancel.',
+    });
+
+    await alert(`You pressed: ${result ? 'Enter (Confirm)' : 'Escape (Cancel)'}`);
+  }, [alert, confirm]);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Dialogs support keyboard shortcuts: <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Enter</kbd> to confirm, <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Escape</kbd> to cancel.
+      </p>
+      <Button onClick={handleHotkeysDemo}>
+        Test Keyboard Shortcuts
+      </Button>
+    </div>
+  );
+}
+
+export const KeyboardShortcuts = () => (
+  <StoryWrapper>
+    <HotkeysDemo />
+  </StoryWrapper>
+);

package/src/lib/dialog-service/dialogs/AlertDialogUI.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useT } from '@djangocfg/i18n';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../../components/alert-dialog';
+import { useHotkey } from '../../../hooks/useHotkey';
+import { I18N_KEYS } from '../constants';
+import type { DialogOptions } from '../types';
+
+interface AlertDialogUIProps {
+  open: boolean;
+  options: DialogOptions;
+  onClose: () => void;
+}
+
+export function AlertDialogUI({ open, options, onClose }: AlertDialogUIProps) {
+  const t = useT();
+
+  // Prepare data before render
+  const dialogData = useMemo(() => ({
+    title: options.title || t(I18N_KEYS.alertTitle),
+    message: options.message,
+    confirmText: options.confirmText || t(I18N_KEYS.ok),
+    preventClose: options.preventClose ?? false,
+  }), [options, t]);
+
+  // Hotkey: Enter to confirm
+  useHotkey('enter', onClose, { enabled: open, preventDefault: true });
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen && !dialogData.preventClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{dialogData.title}</AlertDialogTitle>
+          <AlertDialogDescription>{dialogData.message}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>
+            {dialogData.confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/lib/dialog-service/dialogs/ConfirmDialogUI.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useT } from '@djangocfg/i18n';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../../components/alert-dialog';
+import { buttonVariants } from '../../../components/button';
+import { useHotkey } from '../../../hooks/useHotkey';
+import { cn } from '../../utils';
+import { I18N_KEYS } from '../constants';
+import type { DialogOptions } from '../types';
+
+interface ConfirmDialogUIProps {
+  open: boolean;
+  options: DialogOptions;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialogUI({
+  open,
+  options,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogUIProps) {
+  const t = useT();
+
+  // Prepare data before render
+  const dialogData = useMemo(() => {
+    const isDestructive = options.variant === 'destructive';
+    return {
+      title: options.title || t(I18N_KEYS.confirmTitle),
+      message: options.message,
+      confirmText: options.confirmText || t(I18N_KEYS.confirm),
+      cancelText: options.cancelText || t(I18N_KEYS.cancel),
+      preventClose: options.preventClose ?? false,
+      isDestructive,
+      confirmClassName: cn(isDestructive && buttonVariants({ variant: 'destructive' })),
+    };
+  }, [options, t]);
+
+  // Hotkey: Enter to confirm, Escape to cancel
+  useHotkey('enter', onConfirm, { enabled: open, preventDefault: true });
+  useHotkey('escape', onCancel, { enabled: open });
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen && !dialogData.preventClose) {
+      onCancel();
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{dialogData.title}</AlertDialogTitle>
+          <AlertDialogDescription>{dialogData.message}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>
+            {dialogData.cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className={dialogData.confirmClassName}
+          >
+            {dialogData.confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/lib/dialog-service/dialogs/PromptDialogUI.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useT } from '@djangocfg/i18n';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../components/dialog';
+import { Button } from '../../../components/button';
+import { Input } from '../../../components/input';
+import { useHotkey } from '../../../hooks/useHotkey';
+import { I18N_KEYS } from '../constants';
+import type { DialogOptions } from '../types';
+
+interface PromptDialogUIProps {
+  open: boolean;
+  options: DialogOptions;
+  onConfirm: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function PromptDialogUI({
+  open,
+  options,
+  onConfirm,
+  onCancel,
+}: PromptDialogUIProps) {
+  const t = useT();
+  const [value, setValue] = useState(options.defaultValue || '');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Prepare data before render
+  const dialogData = useMemo(() => ({
+    title: options.title || t(I18N_KEYS.promptTitle),
+    message: options.message,
+    confirmText: options.confirmText || t(I18N_KEYS.ok),
+    cancelText: options.cancelText || t(I18N_KEYS.cancel),
+    placeholder: options.placeholder || t(I18N_KEYS.promptPlaceholder),
+    inputType: options.inputType || 'text',
+    preventClose: options.preventClose ?? false,
+  }), [options, t]);
+
+  // Reset value when dialog opens with new options
+  useEffect(() => {
+    if (open) {
+      setValue(options.defaultValue || '');
+      // Focus input after a short delay to ensure dialog is fully rendered
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open, options.defaultValue]);
+
+  const handleSubmit = useCallback((e?: React.FormEvent) => {
+    e?.preventDefault();
+    onConfirm(value);
+  }, [onConfirm, value]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }, []);
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    if (!isOpen && !dialogData.preventClose) {
+      onCancel();
+    }
+  }, [dialogData.preventClose, onCancel]);
+
+  // Hotkey: Escape to cancel (Enter is handled by form submit)
+  useHotkey('escape', onCancel, { enabled: open });
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{dialogData.title}</DialogTitle>
+            <DialogDescription>{dialogData.message}</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <Input
+              ref={inputRef}
+              type={dialogData.inputType}
+              value={value}
+              onChange={handleChange}
+              placeholder={dialogData.placeholder}
+            />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onCancel}>
+              {dialogData.cancelText}
+            </Button>
+            <Button type="submit">
+              {dialogData.confirmText}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { AlertDialogUI } from './AlertDialogUI';
+export { ConfirmDialogUI } from './ConfirmDialogUI';
+export { PromptDialogUI } from './PromptDialogUI';

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

@@ -0,0 +1,73 @@
+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 },
+    })
+  );
+}

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

@@ -0,0 +1 @@
+export { useDialog } from './use-dialog';

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

@@ -0,0 +1,79 @@
+'use client';
+
+import { useCallback } from 'react';
+import type { DialogOptions } from '../types';
+
+/**
+ * React hook for using dialog service
+ *
+ * Provides type-safe access to window.dialog with fallback to native dialogs.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { confirm, alert, prompt } = useDialog();
+ *
+ *   const handleDelete = async () => {
+ *     const confirmed = await confirm({
+ *       title: 'Delete Item',
+ *       message: 'Are you sure?',
+ *       variant: 'destructive',
+ *     });
+ *     if (confirmed) {
+ *       // delete logic
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleDelete}>Delete</button>;
+ * }
+ * ```
+ */
+export function useDialog() {
+  const alert = useCallback(
+    (message: string | DialogOptions): Promise<void> => {
+      if (typeof window === 'undefined') {
+        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);
+    },
+    []
+  );
+
+  const confirm = useCallback(
+    (message: string | DialogOptions): Promise<boolean> => {
+      if (typeof window === 'undefined') {
+        return Promise.resolve(false);
+      }
+      if (!window.dialog) {
+        // Fallback to native
+        return Promise.resolve(
+          window.confirm(typeof message === 'string' ? message : message.message)
+        );
+      }
+      return window.dialog.confirm(message);
+    },
+    []
+  );
+
+  const prompt = useCallback(
+    (message: string | DialogOptions): Promise<string | null> => {
+      if (typeof window === 'undefined') {
+        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 { alert, confirm, prompt };
+}

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

@@ -0,0 +1,16 @@
+// Types
+export type {
+  DialogType,
+  DialogVariant,
+  DialogOptions,
+  DialogAPI,
+} from './types';
+
+// Provider
+export { DialogProvider } from './DialogProvider';
+
+// Hooks
+export { useDialog } from './hooks';
+
+// Events (for advanced usage)
+export { initDialogAPI } from './events';