@djangocfg/ui-core 2.1.381 → 2.1.383

package/src/components/specialized/image-with-fallback/image-with-fallback.story.tsx

@@ -1,105 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { ImageWithFallback } from '.';
-
-export default defineStory({
-  title: 'Core/ImageWithFallback',
-  component: ImageWithFallback,
-  description: 'Image component with loading states and fallbacks.',
-});
-
-export const Interactive = () => {
-  const [fallbackIcon] = useSelect('fallbackIcon', {
-    options: ['car', 'image', 'user', 'package', 'location'] as const,
-    defaultValue: 'image',
-    label: 'Fallback Icon',
-    description: 'Icon shown on error or missing src',
-  });
-
-  return (
-    <ImageWithFallback
-      src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400"
-      alt="Car"
-      fallbackIcon={fallbackIcon}
-      className="h-48 w-72 rounded-lg"
-    />
-  );
-};
-
-export const Default = () => (
-  <ImageWithFallback
-    src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400"
-    alt="Car"
-    className="h-48 w-72 rounded-lg"
-  />
-);
-
-export const WithFallbackCar = () => (
-  <ImageWithFallback
-    src=""
-    alt="Missing car image"
-    fallbackIcon="car"
-    className="h-48 w-72 rounded-lg"
-  />
-);
-
-export const WithFallbackUser = () => (
-  <ImageWithFallback
-    src=""
-    alt="Missing user avatar"
-    fallbackIcon="user"
-    className="h-24 w-24 rounded-full"
-  />
-);
-
-export const WithFallbackLocation = () => (
-  <ImageWithFallback
-    src=""
-    alt="Missing location"
-    fallbackIcon="location"
-    className="h-32 w-32 rounded-lg"
-  />
-);
-
-export const BrokenImage = () => (
-  <ImageWithFallback
-    src="https://invalid-url-that-does-not-exist.com/image.jpg"
-    alt="Broken image"
-    fallbackIcon="image"
-    className="h-48 w-72 rounded-lg"
-  />
-);
-
-export const CustomFallback = () => (
-  <ImageWithFallback
-    src=""
-    alt="Custom fallback"
-    fallbackContent={
-      <div className="flex flex-col items-center gap-2 text-muted-foreground">
-        <span className="text-4xl">🚗</span>
-        <span className="text-sm">No image available</span>
-      </div>
-    }
-    className="h-48 w-72 rounded-lg border bg-muted/20"
-  />
-);
-
-export const Gallery = () => (
-  <div className="grid grid-cols-3 gap-4">
-    <ImageWithFallback
-      src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=200"
-      alt="Car 1"
-      className="h-32 w-full rounded-lg"
-    />
-    <ImageWithFallback
-      src=""
-      alt="Missing"
-      fallbackIcon="car"
-      className="h-32 w-full rounded-lg"
-    />
-    <ImageWithFallback
-      src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=200"
-      alt="Car 2"
-      className="h-32 w-full rounded-lg"
-    />
-  </div>
-);

package/src/components/specialized/kbd/kbd.story.tsx

@@ -1,113 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Kbd, KbdGroup } from '.';
-
-export default defineStory({
-  title: 'Core/Kbd',
-  component: Kbd,
-  description: 'Keyboard key indicator for shortcuts.',
-});
-
-export const Interactive = () => {
-  const [size] = useSelect('size', {
-    options: ['xs', 'sm', 'default', 'lg'] as const,
-    defaultValue: 'default',
-    label: 'Size',
-    description: 'Kbd size',
-  });
-
-  return <Kbd size={size}>⌘</Kbd>;
-};
-
-export const Default = () => <Kbd>⌘</Kbd>;
-
-export const Sizes = () => (
-  <div className="flex items-center gap-4">
-    <Kbd size="xs">⌘</Kbd>
-    <Kbd size="sm">⌘</Kbd>
-    <Kbd size="default">⌘</Kbd>
-    <Kbd size="lg">⌘</Kbd>
-  </div>
-);
-
-export const Shortcuts = () => (
-  <div className="space-y-4">
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-32">Copy</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>C</Kbd>
-      </KbdGroup>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-32">Paste</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>V</Kbd>
-      </KbdGroup>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-32">Undo</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>Z</Kbd>
-      </KbdGroup>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-32">Save</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>S</Kbd>
-      </KbdGroup>
-    </div>
-  </div>
-);
-
-export const ComplexShortcuts = () => (
-  <div className="space-y-4">
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-40">Command Palette</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>⇧</Kbd>
-        <Kbd>P</Kbd>
-      </KbdGroup>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-40">Go to Definition</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>Click</Kbd>
-      </KbdGroup>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="text-sm w-40">Toggle Sidebar</span>
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>B</Kbd>
-      </KbdGroup>
-    </div>
-  </div>
-);
-
-export const Keys = () => (
-  <div className="flex flex-wrap gap-2">
-    <Kbd>⌘</Kbd>
-    <Kbd>⌥</Kbd>
-    <Kbd>⇧</Kbd>
-    <Kbd>⌃</Kbd>
-    <Kbd>⏎</Kbd>
-    <Kbd>⌫</Kbd>
-    <Kbd>⇥</Kbd>
-    <Kbd>⎋</Kbd>
-    <Kbd>↑</Kbd>
-    <Kbd>↓</Kbd>
-    <Kbd>←</Kbd>
-    <Kbd>→</Kbd>
-  </div>
-);
-
-export const InText = () => (
-  <p className="text-sm text-muted-foreground">
-    Press <Kbd size="sm">⌘</Kbd> + <Kbd size="sm">K</Kbd> to open the command palette.
-  </p>
-);

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

@@ -1,263 +0,0 @@
-import { useCallback } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { Button } from '../../components/forms/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/stories/index.ts

@@ -1,28 +0,0 @@
-/**
- * UI-Core story modules registry.
- *
- * Re-export stories through a package subpath instead of deep importing files from apps.
- */
- 
- import type { StoryModule } from '@djangocfg/playground';
- 
- import * as Button from '../components/forms/button/button.story';
- import * as Input from '../components/forms/input/input.story';
- import * as Select from '../components/select/select.story';
- import * as Slider from '../components/forms/slider/slider.story';
- import * as Dialog from '../components/overlay/dialog/dialog.story';
- import * as Tabs from '../components/navigation/tabs/tabs.story';
- import * as Popover from '../components/overlay/popover/popover.story';
- import * as Tooltip from '../components/overlay/tooltip/tooltip.story';
- 
- export const uiCoreStoryModules: Record<string, StoryModule> = {
-   'button.story.tsx': Button,
-   'input.story.tsx': Input,
-   'select.story.tsx': Select,
-   'slider.story.tsx': Slider,
-   'dialog.story.tsx': Dialog,
-   'tabs.story.tsx': Tabs,
-   'popover.story.tsx': Popover,
-   'tooltip.story.tsx': Tooltip,
- };
- 

package/src/styles/theme/theme-tokens.story.tsx

@@ -1,157 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-
-export default defineStory({
-  title: 'Theme/Tokens',
-  description: 'Visual reference for all semantic CSS color tokens. Use these classes — never raw Tailwind color-scale classes (amber-500 etc).',
-});
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-function TokenRow({ label, bg, text, border }: { label: string; bg: string; text: string; border: string }) {
-  return (
-    <div className={`flex items-center justify-between rounded-md border px-4 py-3 ${bg} ${border}`}>
-      <span className={`text-sm font-medium ${text}`}>{label}</span>
-      <div className="flex gap-2 font-mono text-xs opacity-70">
-        <code className={text}>{bg}</code>
-        <code className={text}>{text}</code>
-        <code className={text}>{border}</code>
-      </div>
-    </div>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="space-y-2">
-      <h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">{title}</h3>
-      <div className="space-y-2">{children}</div>
-    </div>
-  );
-}
-
-function SwatchRow({ name, bgClass }: { name: string; bgClass: string }) {
-  return (
-    <div className="flex items-center gap-3">
-      <div className={`h-8 w-16 rounded border border-border ${bgClass}`} />
-      <code className="text-xs text-foreground">{name}</code>
-    </div>
-  );
-}
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-export const StatusSurfaces = () => (
-  <div className="space-y-6 max-w-2xl">
-    <p className="text-sm text-muted-foreground">
-      Status banners — use <code className="text-xs bg-code text-code-foreground rounded px-1">bg-*-background</code>,{' '}
-      <code className="text-xs bg-code text-code-foreground rounded px-1">text-*-foreground</code>,{' '}
-      <code className="text-xs bg-code text-code-foreground rounded px-1">border-*-border</code>
-    </p>
-
-    <Section title="Warning">
-      <TokenRow
-        label="⚠ You're seeing a preview. Subscribe for full access."
-        bg="bg-warning-background"
-        text="text-warning-foreground"
-        border="border border-warning-border/50"
-      />
-    </Section>
-
-    <Section title="Success">
-      <TokenRow
-        label="✓ Operation completed successfully."
-        bg="bg-success-background"
-        text="text-success-foreground"
-        border="border border-success-border/50"
-      />
-    </Section>
-
-    <Section title="Destructive">
-      <TokenRow
-        label="✕ Something went wrong. Please try again."
-        bg="bg-destructive-background"
-        text="text-destructive"
-        border="border border-destructive-border/50"
-      />
-    </Section>
-
-    <Section title="Info">
-      <TokenRow
-        label="ℹ New features are available in your plan."
-        bg="bg-info-background"
-        text="text-info-foreground"
-        border="border border-info-border/50"
-      />
-    </Section>
-  </div>
-);
-
-export const BaseColors = () => (
-  <div className="space-y-6 max-w-xl">
-    <Section title="Base">
-      <div className="grid grid-cols-2 gap-3">
-        <SwatchRow name="bg-background" bgClass="bg-background" />
-        <SwatchRow name="bg-foreground" bgClass="bg-foreground" />
-        <SwatchRow name="bg-card" bgClass="bg-card" />
-        <SwatchRow name="bg-muted" bgClass="bg-muted" />
-        <SwatchRow name="bg-accent" bgClass="bg-accent" />
-        <SwatchRow name="bg-border" bgClass="bg-border" />
-      </div>
-    </Section>
-
-    <Section title="Brand">
-      <div className="grid grid-cols-2 gap-3">
-        <SwatchRow name="bg-primary" bgClass="bg-primary" />
-        <SwatchRow name="bg-secondary" bgClass="bg-secondary" />
-      </div>
-    </Section>
-
-    <Section title="Status accents (icon color)">
-      <div className="grid grid-cols-2 gap-3">
-        <SwatchRow name="bg-warning" bgClass="bg-warning" />
-        <SwatchRow name="bg-success" bgClass="bg-success" />
-        <SwatchRow name="bg-destructive" bgClass="bg-destructive" />
-        <SwatchRow name="bg-info" bgClass="bg-info" />
-      </div>
-    </Section>
-  </div>
-);
-
-export const CodeSurface = () => (
-  <div className="space-y-4 max-w-xl">
-    <Section title="Code tokens">
-      <div className="rounded-md border border-code-border bg-code text-code-foreground p-4 font-mono text-sm">
-        <div>bg-code / text-code-foreground / border-code-border</div>
-        <div className="mt-2 text-xs opacity-60">Used by PrettyCode, MarkdownMessage code fences</div>
-      </div>
-      <div className="text-sm">
-        Inline:{' '}
-        <code className="rounded bg-code-inline px-1.5 py-0.5 text-code-inline-foreground text-xs">
-          const x = 42
-        </code>
-      </div>
-    </Section>
-
-    <Section title="Sidebar tokens">
-      <div className="rounded-md border border-sidebar-border bg-sidebar p-4 space-y-1 text-sidebar-foreground text-sm">
-        <div className="font-semibold">bg-sidebar / text-sidebar-foreground</div>
-        <div className="text-xs opacity-60">Used by the app sidebar chrome</div>
-        <div className="mt-2 rounded bg-sidebar-accent px-2 py-1 text-sidebar-accent-foreground text-xs">
-          bg-sidebar-accent — hover state
-        </div>
-      </div>
-    </Section>
-  </div>
-);
-
-export const TypographyTokens = () => (
-  <div className="space-y-3 max-w-md">
-    <p className="text-foreground text-sm font-medium">text-foreground — primary body</p>
-    <p className="text-muted-foreground text-sm">text-muted-foreground — secondary / hints</p>
-    <p className="text-primary text-sm">text-primary — brand links / accents</p>
-    <p className="text-destructive text-sm">text-destructive — error messages</p>
-    <p className="text-warning text-sm">text-warning — warning labels</p>
-    <p className="text-success text-sm">text-success — success labels</p>
-    <p className="text-info text-sm">text-info — info labels</p>
-  </div>
-);