@djangocfg/ui-core 2.1.381 → 2.1.383

package/src/components/feedback/empty/empty.story.tsx

@@ -1,115 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-} from '.';
-import { Button } from '../../forms/button';
-import { Inbox, Search, FileQuestion, Plus, RefreshCw } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Empty',
-  component: Empty,
-  description: 'Empty state placeholder for no content.',
-});
-
-export const Default = () => (
-  <Empty className="max-w-md mx-auto py-10">
-    <EmptyMedia>
-      <Inbox className="h-12 w-12 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyHeader>
-      <EmptyTitle>No items</EmptyTitle>
-      <EmptyDescription>
-        You don't have any items yet. Create your first one to get started.
-      </EmptyDescription>
-    </EmptyHeader>
-    <EmptyContent>
-      <Button>
-        <Plus className="mr-2 h-4 w-4" />
-        Create Item
-      </Button>
-    </EmptyContent>
-  </Empty>
-);
-
-export const SearchNoResults = () => (
-  <Empty className="max-w-md mx-auto py-10">
-    <EmptyMedia>
-      <Search className="h-12 w-12 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyHeader>
-      <EmptyTitle>No results found</EmptyTitle>
-      <EmptyDescription>
-        We couldn't find anything matching your search. Try adjusting your filters.
-      </EmptyDescription>
-    </EmptyHeader>
-    <EmptyContent>
-      <Button variant="outline">Clear filters</Button>
-    </EmptyContent>
-  </Empty>
-);
-
-export const Error = () => (
-  <Empty className="max-w-md mx-auto py-10">
-    <EmptyMedia>
-      <FileQuestion className="h-12 w-12 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyHeader>
-      <EmptyTitle>Something went wrong</EmptyTitle>
-      <EmptyDescription>
-        We encountered an error while loading the data. Please try again.
-      </EmptyDescription>
-    </EmptyHeader>
-    <EmptyContent>
-      <Button variant="outline">
-        <RefreshCw className="mr-2 h-4 w-4" />
-        Retry
-      </Button>
-    </EmptyContent>
-  </Empty>
-);
-
-export const NoNotifications = () => (
-  <Empty className="max-w-sm mx-auto py-8">
-    <EmptyMedia>
-      <Inbox className="h-10 w-10 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyHeader>
-      <EmptyTitle>All caught up!</EmptyTitle>
-      <EmptyDescription>
-        You have no new notifications.
-      </EmptyDescription>
-    </EmptyHeader>
-  </Empty>
-);
-
-export const Simple = () => (
-  <Empty className="max-w-xs mx-auto py-6">
-    <EmptyHeader>
-      <EmptyTitle>No data</EmptyTitle>
-      <EmptyDescription>
-        Start by adding some data.
-      </EmptyDescription>
-    </EmptyHeader>
-  </Empty>
-);
-
-export const InCard = () => (
-  <div className="rounded-lg border p-6">
-    <Empty>
-      <EmptyMedia>
-        <Inbox className="h-8 w-8 text-muted-foreground" />
-      </EmptyMedia>
-      <EmptyHeader>
-        <EmptyTitle className="text-base">Empty inbox</EmptyTitle>
-        <EmptyDescription className="text-sm">
-          No messages to display
-        </EmptyDescription>
-      </EmptyHeader>
-    </Empty>
-  </div>
-);

package/src/components/feedback/preloader/preloader.story.tsx

@@ -1,86 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Preloader, PreloaderSkeleton } from '.';
-
-export default defineStory({
-  title: 'Core/Preloader',
-  component: Preloader,
-  description: 'Loading indicators with multiple variants.',
-});
-
-export const Interactive = () => {
-  const [size] = useSelect('size', {
-    options: ['sm', 'md', 'lg', 'xl'] as const,
-    defaultValue: 'md',
-    label: 'Size',
-    description: 'Spinner size',
-  });
-
-  const [showText] = useBoolean('showText', {
-    defaultValue: true,
-    label: 'Show Text',
-    description: 'Display loading text',
-  });
-
-  return (
-    <Preloader
-      size={size}
-      text={showText ? 'Loading...' : undefined}
-    />
-  );
-};
-
-export const Default = () => <Preloader />;
-
-export const WithText = () => <Preloader text="Loading data..." />;
-
-export const WithDescription = () => (
-  <Preloader
-    text="Processing"
-    description="Please wait while we process your request"
-  />
-);
-
-export const Sizes = () => (
-  <div className="flex items-center gap-8">
-    <div className="flex flex-col items-center gap-2">
-      <Preloader size="sm" />
-      <span className="text-xs text-muted-foreground">sm</span>
-    </div>
-    <div className="flex flex-col items-center gap-2">
-      <Preloader size="md" />
-      <span className="text-xs text-muted-foreground">md</span>
-    </div>
-    <div className="flex flex-col items-center gap-2">
-      <Preloader size="lg" />
-      <span className="text-xs text-muted-foreground">lg</span>
-    </div>
-    <div className="flex flex-col items-center gap-2">
-      <Preloader size="xl" />
-      <span className="text-xs text-muted-foreground">xl</span>
-    </div>
-  </div>
-);
-
-export const InCard = () => (
-  <div className="rounded-lg border p-8">
-    <Preloader text="Loading content..." size="lg" />
-  </div>
-);
-
-export const SkeletonDefault = () => <PreloaderSkeleton />;
-
-export const SkeletonWithAvatar = () => <PreloaderSkeleton showAvatar />;
-
-export const SkeletonLines = () => (
-  <div className="max-w-md space-y-6">
-    <PreloaderSkeleton lines={2} />
-    <PreloaderSkeleton lines={4} />
-    <PreloaderSkeleton lines={1} />
-  </div>
-);
-
-export const SkeletonCard = () => (
-  <div className="max-w-sm rounded-lg border p-4">
-    <PreloaderSkeleton showAvatar lines={2} />
-  </div>
-);

package/src/components/feedback/spinner/spinner.story.tsx

@@ -1,66 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Spinner } from '.';
-
-export default defineStory({
-  title: 'Core/Spinner',
-  component: Spinner,
-  description: 'Loading spinner indicator.',
-});
-
-export const Interactive = () => {
-  const [size] = useSelect('size', {
-    options: ['sm', 'md', 'lg'] as const,
-    defaultValue: 'md',
-    label: 'Size',
-    description: 'Spinner size',
-  });
-
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-10 w-10',
-  };
-
-  return <Spinner className={sizeClasses[size]} />;
-};
-
-export const Default = () => <Spinner />;
-
-export const Sizes = () => (
-  <div className="flex items-center gap-4">
-    <Spinner className="h-4 w-4" />
-    <Spinner className="h-6 w-6" />
-    <Spinner className="h-8 w-8" />
-    <Spinner className="h-10 w-10" />
-    <Spinner className="h-12 w-12" />
-  </div>
-);
-
-export const InButton = () => (
-  <button className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground">
-    <Spinner className="h-4 w-4" />
-    Loading...
-  </button>
-);
-
-export const Centered = () => (
-  <div className="flex items-center justify-center h-40 border rounded-lg">
-    <Spinner className="h-8 w-8" />
-  </div>
-);
-
-export const WithText = () => (
-  <div className="flex flex-col items-center gap-2">
-    <Spinner className="h-8 w-8" />
-    <span className="text-sm text-muted-foreground">Loading data...</span>
-  </div>
-);
-
-export const FullPage = () => (
-  <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
-    <div className="flex flex-col items-center gap-2">
-      <Spinner className="h-10 w-10" />
-      <span className="text-sm">Please wait...</span>
-    </div>
-  </div>
-);

package/src/components/forms/button/button.story.tsx

@@ -1,116 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Mail, Send, Loader2, ChevronRight, Plus, Trash2 } from 'lucide-react';
-import { Button, ButtonLink } from '.';
-
-export default defineStory({
-  title: 'Core/Button',
-  component: Button,
-  description: 'Versatile button component with multiple variants and sizes.',
-});
-
-export const Interactive = () => {
-  const [variant] = useSelect('variant', {
-    options: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'] as const,
-    defaultValue: 'default',
-    label: 'Variant',
-    description: 'Button style variant',
-  });
-
-  const [size] = useSelect('size', {
-    options: ['xs', 'sm', 'default', 'lg', 'huge', 'icon'] as const,
-    defaultValue: 'default',
-    label: 'Size',
-    description: 'Button size',
-  });
-
-  const [loading] = useBoolean('loading', {
-    defaultValue: false,
-    label: 'Loading',
-    description: 'Show loading spinner',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable button',
-  });
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Button variant={variant} size={size} loading={loading} disabled={disabled}>
-        {size === 'icon' ? <Plus /> : 'Button'}
-      </Button>
-      <Button variant={variant} size={size} loading={loading} disabled={disabled}>
-        <Mail />
-        {size !== 'icon' && 'With Icon'}
-      </Button>
-    </div>
-  );
-};
-
-export const Variants = () => (
-  <div className="flex flex-wrap gap-4">
-    <Button variant="default">Default</Button>
-    <Button variant="secondary">Secondary</Button>
-    <Button variant="destructive">Destructive</Button>
-    <Button variant="outline">Outline</Button>
-    <Button variant="ghost">Ghost</Button>
-    <Button variant="link">Link</Button>
-  </div>
-);
-
-export const Sizes = () => (
-  <div className="flex flex-wrap gap-4 items-center">
-    <Button size="xs">Extra Small</Button>
-    <Button size="sm">Small</Button>
-    <Button size="default">Default</Button>
-    <Button size="lg">Large</Button>
-    <Button size="huge">Huge</Button>
-    <Button size="icon"><Plus /></Button>
-  </div>
-);
-
-export const WithIcons = () => (
-  <div className="flex flex-wrap gap-4">
-    <Button>
-      <Mail />
-      Login with Email
-    </Button>
-    <Button variant="secondary">
-      Send
-      <Send />
-    </Button>
-    <Button variant="outline">
-      Next
-      <ChevronRight />
-    </Button>
-    <Button variant="destructive">
-      <Trash2 />
-      Delete
-    </Button>
-  </div>
-);
-
-export const Loading = () => (
-  <div className="flex flex-wrap gap-4">
-    <Button loading>Loading...</Button>
-    <Button loading variant="secondary">Processing</Button>
-    <Button loading variant="outline">Please wait</Button>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="flex flex-wrap gap-4">
-    <Button disabled>Default</Button>
-    <Button disabled variant="secondary">Secondary</Button>
-    <Button disabled variant="outline">Outline</Button>
-  </div>
-);
-
-export const AsLink = () => (
-  <div className="flex flex-wrap gap-4">
-    <ButtonLink href="https://example.com">External Link</ButtonLink>
-    <ButtonLink href="/dashboard" variant="secondary">Dashboard</ButtonLink>
-    <ButtonLink href="/settings" variant="outline">Settings</ButtonLink>
-  </div>
-);

package/src/components/forms/button-download/button-download.story.tsx

@@ -1,112 +0,0 @@
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { DownloadButton } from '.';
-
-export default defineStory({
-  title: 'Core/DownloadButton',
-  component: DownloadButton,
-  description: 'Button with download functionality and status indicators.',
-});
-
-export const Interactive = () => {
-  const [showStatus] = useBoolean('showStatus', {
-    defaultValue: true,
-    label: 'Show Status',
-    description: 'Show loading/success/error icons',
-  });
-
-  return (
-    <DownloadButton
-      url="https://example.com/file.pdf"
-      filename="document.pdf"
-      showStatus={showStatus}
-    >
-      Download PDF
-    </DownloadButton>
-  );
-};
-
-export const Default = () => (
-  <DownloadButton
-    url="https://example.com/file.pdf"
-    filename="document.pdf"
-  >
-    Download File
-  </DownloadButton>
-);
-
-export const IconOnly = () => (
-  <DownloadButton
-    url="https://example.com/file.pdf"
-    filename="document.pdf"
-    size="icon"
-  />
-);
-
-export const Variants = () => (
-  <div className="flex gap-4">
-    <DownloadButton
-      url="https://example.com/file.pdf"
-      variant="default"
-    >
-      Default
-    </DownloadButton>
-    <DownloadButton
-      url="https://example.com/file.pdf"
-      variant="outline"
-    >
-      Outline
-    </DownloadButton>
-    <DownloadButton
-      url="https://example.com/file.pdf"
-      variant="ghost"
-    >
-      Ghost
-    </DownloadButton>
-  </div>
-);
-
-export const Sizes = () => (
-  <div className="flex items-center gap-4">
-    <DownloadButton url="https://example.com/file.pdf" size="sm">
-      Small
-    </DownloadButton>
-    <DownloadButton url="https://example.com/file.pdf" size="default">
-      Default
-    </DownloadButton>
-    <DownloadButton url="https://example.com/file.pdf" size="lg">
-      Large
-    </DownloadButton>
-  </div>
-);
-
-export const WithCallbacks = () => (
-  <DownloadButton
-    url="https://example.com/file.pdf"
-    filename="report.pdf"
-    onDownloadStart={() => console.log('Download started')}
-    onDownloadComplete={(name) => console.log(`Downloaded: ${name}`)}
-    onDownloadError={(err) => console.error('Error:', err)}
-  >
-    Download with Callbacks
-  </DownloadButton>
-);
-
-export const PostRequest = () => (
-  <DownloadButton
-    url="https://api.example.com/export"
-    method="POST"
-    body={{ format: 'pdf', includeImages: true }}
-    filename="export.pdf"
-  >
-    Export as PDF
-  </DownloadButton>
-);
-
-export const DisabledStatus = () => (
-  <DownloadButton
-    url="https://example.com/file.pdf"
-    showStatus={false}
-  >
-    No Status Icons
-  </DownloadButton>
-);

package/src/components/forms/button-group/button-group.story.tsx

@@ -1,79 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '.';
-import { Button } from '../../forms/button';
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, ChevronDown } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/ButtonGroup',
-  component: ButtonGroup,
-  description: 'Group of buttons with connected styling.',
-});
-
-export const Default = () => (
-  <ButtonGroup>
-    <Button variant="outline">First</Button>
-    <Button variant="outline">Second</Button>
-    <Button variant="outline">Third</Button>
-  </ButtonGroup>
-);
-
-export const TextFormatting = () => (
-  <ButtonGroup>
-    <Button variant="outline" size="icon">
-      <Bold className="h-4 w-4" />
-    </Button>
-    <Button variant="outline" size="icon">
-      <Italic className="h-4 w-4" />
-    </Button>
-    <Button variant="outline" size="icon">
-      <Underline className="h-4 w-4" />
-    </Button>
-  </ButtonGroup>
-);
-
-export const Alignment = () => (
-  <ButtonGroup>
-    <Button variant="outline" size="icon">
-      <AlignLeft className="h-4 w-4" />
-    </Button>
-    <Button variant="outline" size="icon">
-      <AlignCenter className="h-4 w-4" />
-    </Button>
-    <Button variant="outline" size="icon">
-      <AlignRight className="h-4 w-4" />
-    </Button>
-  </ButtonGroup>
-);
-
-export const WithSeparator = () => (
-  <ButtonGroup>
-    <Button variant="outline">Edit</Button>
-    <ButtonGroupSeparator />
-    <Button variant="outline" size="icon">
-      <ChevronDown className="h-4 w-4" />
-    </Button>
-  </ButtonGroup>
-);
-
-export const WithText = () => (
-  <ButtonGroup>
-    <ButtonGroupText>Label</ButtonGroupText>
-    <Button variant="outline">Action</Button>
-  </ButtonGroup>
-);
-
-export const Vertical = () => (
-  <ButtonGroup orientation="vertical">
-    <Button variant="outline">Top</Button>
-    <Button variant="outline">Middle</Button>
-    <Button variant="outline">Bottom</Button>
-  </ButtonGroup>
-);
-
-export const Mixed = () => (
-  <ButtonGroup>
-    <Button variant="default">Primary</Button>
-    <Button variant="outline">Secondary</Button>
-    <Button variant="ghost">Tertiary</Button>
-  </ButtonGroup>
-);

package/src/components/forms/checkbox/checkbox.story.tsx

@@ -1,89 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Checkbox } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Checkbox',
-  component: Checkbox,
-  description: 'Checkbox input for boolean selections.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable checkbox',
-  });
-
-  return (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms" disabled={disabled} />
-      <Label htmlFor="terms">Accept terms and conditions</Label>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="flex items-center space-x-2">
-    <Checkbox id="default" />
-    <Label htmlFor="default">Default checkbox</Label>
-  </div>
-);
-
-export const Checked = () => (
-  <div className="flex items-center space-x-2">
-    <Checkbox id="checked" defaultChecked />
-    <Label htmlFor="checked">Checked by default</Label>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="space-y-4">
-    <div className="flex items-center space-x-2">
-      <Checkbox id="disabled-unchecked" disabled />
-      <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <Checkbox id="disabled-checked" disabled defaultChecked />
-      <Label htmlFor="disabled-checked">Disabled checked</Label>
-    </div>
-  </div>
-);
-
-export const WithForm = () => {
-  const [items, setItems] = useState({
-    notifications: true,
-    marketing: false,
-    updates: true,
-  });
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="notifications"
-          checked={items.notifications}
-          onCheckedChange={(checked) => setItems({ ...items, notifications: !!checked })}
-        />
-        <Label htmlFor="notifications">Receive notifications</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="marketing"
-          checked={items.marketing}
-          onCheckedChange={(checked) => setItems({ ...items, marketing: !!checked })}
-        />
-        <Label htmlFor="marketing">Receive marketing emails</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="updates"
-          checked={items.updates}
-          onCheckedChange={(checked) => setItems({ ...items, updates: !!checked })}
-        />
-        <Label htmlFor="updates">Receive product updates</Label>
-      </div>
-    </div>
-  );
-};