@djangocfg/ui-core 2.1.382 → 2.1.384

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>
-  );
-};

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

@@ -1,77 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Input } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Input',
-  component: Input,
-  description: 'Text input component for forms.',
-});
-
-export const Interactive = () => {
-  const [type] = useSelect('type', {
-    options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'] as const,
-    defaultValue: 'text',
-    label: 'Type',
-    description: 'Input type',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable input',
-  });
-
-  return (
-    <div className="max-w-sm space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="demo">Label</Label>
-        <Input
-          id="demo"
-          type={type}
-          placeholder={`Enter ${type}...`}
-          disabled={disabled}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const Types = () => (
-  <div className="max-w-sm space-y-4">
-    <Input type="text" placeholder="Text input" />
-    <Input type="email" placeholder="Email input" />
-    <Input type="password" placeholder="Password input" />
-    <Input type="number" placeholder="Number input" />
-    <Input type="search" placeholder="Search input" />
-  </div>
-);
-
-export const WithLabels = () => (
-  <div className="max-w-sm space-y-4">
-    <div className="space-y-2">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" placeholder="Enter your email" />
-    </div>
-    <div className="space-y-2">
-      <Label htmlFor="password">Password</Label>
-      <Input id="password" type="password" placeholder="Enter password" />
-    </div>
-  </div>
-);
-
-export const States = () => (
-  <div className="max-w-sm space-y-4">
-    <Input placeholder="Default" />
-    <Input placeholder="Disabled" disabled />
-    <Input placeholder="With value" defaultValue="Hello World" />
-    <Input placeholder="Read only" readOnly defaultValue="Read only value" />
-  </div>
-);
-
-export const File = () => (
-  <div className="max-w-sm space-y-2">
-    <Label htmlFor="file">Upload file</Label>
-    <Input id="file" type="file" />
-  </div>
-);