@djangocfg/ui-core 2.1.382 → 2.1.384

package/src/components/data/progress/progress.story.tsx

@@ -1,97 +0,0 @@
-import { useState, useEffect } from 'react';
-import { defineStory, useNumber } from '@djangocfg/playground';
-import { Progress } from '.';
-
-export default defineStory({
-  title: 'Core/Progress',
-  component: Progress,
-  description: 'Progress bar for showing completion status.',
-});
-
-export const Interactive = () => {
-  const [value] = useNumber('value', {
-    defaultValue: 60,
-    min: 0,
-    max: 100,
-    label: 'Progress',
-    description: 'Progress percentage',
-  });
-
-  return (
-    <div className="max-w-md">
-      <Progress value={value} />
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="max-w-md">
-    <Progress value={60} />
-  </div>
-);
-
-export const Values = () => (
-  <div className="max-w-md space-y-4">
-    <div className="space-y-1">
-      <span className="text-sm">0%</span>
-      <Progress value={0} />
-    </div>
-    <div className="space-y-1">
-      <span className="text-sm">25%</span>
-      <Progress value={25} />
-    </div>
-    <div className="space-y-1">
-      <span className="text-sm">50%</span>
-      <Progress value={50} />
-    </div>
-    <div className="space-y-1">
-      <span className="text-sm">75%</span>
-      <Progress value={75} />
-    </div>
-    <div className="space-y-1">
-      <span className="text-sm">100%</span>
-      <Progress value={100} />
-    </div>
-  </div>
-);
-
-export const Animated = () => {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) return 0;
-        return prev + 10;
-      });
-    }, 500);
-
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <div className="max-w-md space-y-2">
-      <div className="flex justify-between text-sm">
-        <span>Loading...</span>
-        <span>{progress}%</span>
-      </div>
-      <Progress value={progress} />
-    </div>
-  );
-};
-
-export const WithLabel = () => (
-  <div className="max-w-md space-y-2">
-    <div className="flex justify-between text-sm">
-      <span>Upload progress</span>
-      <span>75%</span>
-    </div>
-    <Progress value={75} />
-  </div>
-);
-
-export const Indeterminate = () => (
-  <div className="max-w-md">
-    <Progress className="[&>div]:animate-pulse" />
-  </div>
-);

package/src/components/data/table/table.story.tsx

@@ -1,148 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '.';
-import { Badge } from '../../data/badge';
-
-export default defineStory({
-  title: 'Core/Table',
-  component: Table,
-  description: 'Table for displaying tabular data.',
-});
-
-const invoices = [
-  { id: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-  { id: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-  { id: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-  { id: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
-  { id: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
-];
-
-const users = [
-  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
-  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' },
-  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Editor', status: 'Active' },
-];
-
-export const Default = () => (
-  <Table>
-    <TableCaption>A list of your recent invoices.</TableCaption>
-    <TableHeader>
-      <TableRow>
-        <TableHead className="w-[100px]">Invoice</TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead>Method</TableHead>
-        <TableHead className="text-right">Amount</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {invoices.map((invoice) => (
-        <TableRow key={invoice.id}>
-          <TableCell className="font-medium">{invoice.id}</TableCell>
-          <TableCell>{invoice.status}</TableCell>
-          <TableCell>{invoice.method}</TableCell>
-          <TableCell className="text-right">{invoice.amount}</TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-);
-
-export const WithBadges = () => (
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Name</TableHead>
-        <TableHead>Email</TableHead>
-        <TableHead>Role</TableHead>
-        <TableHead>Status</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {users.map((user) => (
-        <TableRow key={user.id}>
-          <TableCell className="font-medium">{user.name}</TableCell>
-          <TableCell>{user.email}</TableCell>
-          <TableCell>
-            <Badge variant="secondary">{user.role}</Badge>
-          </TableCell>
-          <TableCell>
-            <Badge variant={user.status === 'Active' ? 'default' : 'outline'}>
-              {user.status}
-            </Badge>
-          </TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-);
-
-export const Striped = () => (
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Invoice</TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead>Method</TableHead>
-        <TableHead className="text-right">Amount</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {invoices.map((invoice, i) => (
-        <TableRow key={invoice.id} className={i % 2 === 0 ? 'bg-muted/50' : ''}>
-          <TableCell className="font-medium">{invoice.id}</TableCell>
-          <TableCell>{invoice.status}</TableCell>
-          <TableCell>{invoice.method}</TableCell>
-          <TableCell className="text-right">{invoice.amount}</TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-);
-
-export const Compact = () => (
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead className="h-8">Invoice</TableHead>
-        <TableHead className="h-8">Status</TableHead>
-        <TableHead className="h-8">Amount</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {invoices.slice(0, 3).map((invoice) => (
-        <TableRow key={invoice.id}>
-          <TableCell className="py-2">{invoice.id}</TableCell>
-          <TableCell className="py-2">{invoice.status}</TableCell>
-          <TableCell className="py-2">{invoice.amount}</TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-);
-
-export const Empty = () => (
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Invoice</TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead>Amount</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell colSpan={3} className="h-24 text-center text-muted-foreground">
-          No results.
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);

package/src/components/data/toggle/toggle.story.tsx

@@ -1,104 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Toggle } from '.';
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Toggle',
-  component: Toggle,
-  description: 'Toggle button for binary states.',
-});
-
-export const Interactive = () => {
-  const [variant] = useSelect('variant', {
-    options: ['default', 'outline'] as const,
-    defaultValue: 'default',
-    label: 'Variant',
-    description: 'Toggle style',
-  });
-
-  const [size] = useSelect('size', {
-    options: ['default', 'sm', 'lg'] as const,
-    defaultValue: 'default',
-    label: 'Size',
-    description: 'Toggle size',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable toggle',
-  });
-
-  return (
-    <Toggle variant={variant} size={size} disabled={disabled}>
-      <Bold className="h-4 w-4" />
-    </Toggle>
-  );
-};
-
-export const Default = () => (
-  <Toggle aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </Toggle>
-);
-
-export const Outline = () => (
-  <Toggle variant="outline" aria-label="Toggle italic">
-    <Italic className="h-4 w-4" />
-  </Toggle>
-);
-
-export const WithText = () => (
-  <Toggle aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-    Bold
-  </Toggle>
-);
-
-export const Sizes = () => (
-  <div className="flex items-center gap-2">
-    <Toggle size="sm" aria-label="Toggle bold">
-      <Bold className="h-4 w-4" />
-    </Toggle>
-    <Toggle size="default" aria-label="Toggle bold">
-      <Bold className="h-4 w-4" />
-    </Toggle>
-    <Toggle size="lg" aria-label="Toggle bold">
-      <Bold className="h-4 w-4" />
-    </Toggle>
-  </div>
-);
-
-export const Disabled = () => (
-  <Toggle disabled aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </Toggle>
-);
-
-export const Formatting = () => (
-  <div className="flex gap-1">
-    <Toggle aria-label="Toggle bold">
-      <Bold className="h-4 w-4" />
-    </Toggle>
-    <Toggle aria-label="Toggle italic">
-      <Italic className="h-4 w-4" />
-    </Toggle>
-    <Toggle aria-label="Toggle underline">
-      <Underline className="h-4 w-4" />
-    </Toggle>
-  </div>
-);
-
-export const Alignment = () => (
-  <div className="flex gap-1">
-    <Toggle aria-label="Align left" defaultPressed>
-      <AlignLeft className="h-4 w-4" />
-    </Toggle>
-    <Toggle aria-label="Align center">
-      <AlignCenter className="h-4 w-4" />
-    </Toggle>
-    <Toggle aria-label="Align right">
-      <AlignRight className="h-4 w-4" />
-    </Toggle>
-  </div>
-);

package/src/components/data/toggle-group/toggle-group.story.tsx

@@ -1,118 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { ToggleGroup, ToggleGroupItem } from '.';
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Toggle Group',
-  component: ToggleGroup,
-  description: 'Group of toggle buttons for multiple or single selection.',
-});
-
-export const Interactive = () => {
-  const [type] = useSelect('type', {
-    options: ['single', 'multiple'] as const,
-    defaultValue: 'single',
-    label: 'Type',
-    description: 'Selection type',
-  });
-
-  const [variant] = useSelect('variant', {
-    options: ['default', 'outline'] as const,
-    defaultValue: 'default',
-    label: 'Variant',
-    description: 'Toggle style',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable group',
-  });
-
-  return (
-    <ToggleGroup type={type} variant={variant} disabled={disabled}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  );
-};
-
-export const Single = () => (
-  <ToggleGroup type="single" defaultValue="center">
-    <ToggleGroupItem value="left" aria-label="Align left">
-      <AlignLeft className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="center" aria-label="Align center">
-      <AlignCenter className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="right" aria-label="Align right">
-      <AlignRight className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="justify" aria-label="Justify">
-      <AlignJustify className="h-4 w-4" />
-    </ToggleGroupItem>
-  </ToggleGroup>
-);
-
-export const Multiple = () => (
-  <ToggleGroup type="multiple" defaultValue={['bold']}>
-    <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <Bold className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <Italic className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <Underline className="h-4 w-4" />
-    </ToggleGroupItem>
-  </ToggleGroup>
-);
-
-export const Outline = () => (
-  <ToggleGroup type="single" variant="outline" defaultValue="left">
-    <ToggleGroupItem value="left" aria-label="Align left">
-      <AlignLeft className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="center" aria-label="Align center">
-      <AlignCenter className="h-4 w-4" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="right" aria-label="Align right">
-      <AlignRight className="h-4 w-4" />
-    </ToggleGroupItem>
-  </ToggleGroup>
-);
-
-export const Sizes = () => (
-  <div className="flex flex-col gap-4">
-    <ToggleGroup type="single" size="sm">
-      <ToggleGroupItem value="left"><AlignLeft className="h-3 w-3" /></ToggleGroupItem>
-      <ToggleGroupItem value="center"><AlignCenter className="h-3 w-3" /></ToggleGroupItem>
-      <ToggleGroupItem value="right"><AlignRight className="h-3 w-3" /></ToggleGroupItem>
-    </ToggleGroup>
-    <ToggleGroup type="single" size="default">
-      <ToggleGroupItem value="left"><AlignLeft className="h-4 w-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="center"><AlignCenter className="h-4 w-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="right"><AlignRight className="h-4 w-4" /></ToggleGroupItem>
-    </ToggleGroup>
-    <ToggleGroup type="single" size="lg">
-      <ToggleGroupItem value="left"><AlignLeft className="h-5 w-5" /></ToggleGroupItem>
-      <ToggleGroupItem value="center"><AlignCenter className="h-5 w-5" /></ToggleGroupItem>
-      <ToggleGroupItem value="right"><AlignRight className="h-5 w-5" /></ToggleGroupItem>
-    </ToggleGroup>
-  </div>
-);
-
-export const Disabled = () => (
-  <ToggleGroup type="single" disabled>
-    <ToggleGroupItem value="left"><AlignLeft className="h-4 w-4" /></ToggleGroupItem>
-    <ToggleGroupItem value="center"><AlignCenter className="h-4 w-4" /></ToggleGroupItem>
-    <ToggleGroupItem value="right"><AlignRight className="h-4 w-4" /></ToggleGroupItem>
-  </ToggleGroup>
-);

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

@@ -1,77 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Alert, AlertTitle, AlertDescription } from '.';
-import { AlertCircle, CheckCircle2, Info, AlertTriangle } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Alert',
-  component: Alert,
-  description: 'Alert messages for important information.',
-});
-
-export const Interactive = () => {
-  const [variant] = useSelect('variant', {
-    options: ['default', 'destructive'] as const,
-    defaultValue: 'default',
-    label: 'Variant',
-    description: 'Alert style variant',
-  });
-
-  return (
-    <Alert variant={variant} className="max-w-lg">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the CLI.
-      </AlertDescription>
-    </Alert>
-  );
-};
-
-export const Default = () => (
-  <Alert className="max-w-lg">
-    <Info className="h-4 w-4" />
-    <AlertTitle>Information</AlertTitle>
-    <AlertDescription>
-      This is an informational alert message.
-    </AlertDescription>
-  </Alert>
-);
-
-export const Destructive = () => (
-  <Alert variant="destructive" className="max-w-lg">
-    <AlertCircle className="h-4 w-4" />
-    <AlertTitle>Error</AlertTitle>
-    <AlertDescription>
-      Your session has expired. Please log in again.
-    </AlertDescription>
-  </Alert>
-);
-
-export const Success = () => (
-  <Alert className="max-w-lg border-green-500/50 text-green-600 [&>svg]:text-green-600">
-    <CheckCircle2 className="h-4 w-4" />
-    <AlertTitle>Success</AlertTitle>
-    <AlertDescription>
-      Your changes have been saved successfully.
-    </AlertDescription>
-  </Alert>
-);
-
-export const Warning = () => (
-  <Alert className="max-w-lg border-yellow-500/50 text-yellow-600 [&>svg]:text-yellow-600">
-    <AlertTriangle className="h-4 w-4" />
-    <AlertTitle>Warning</AlertTitle>
-    <AlertDescription>
-      Your subscription will expire in 3 days.
-    </AlertDescription>
-  </Alert>
-);
-
-export const WithoutIcon = () => (
-  <Alert className="max-w-lg">
-    <AlertTitle>Note</AlertTitle>
-    <AlertDescription>
-      You can also use alerts without icons.
-    </AlertDescription>
-  </Alert>
-);

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