@djangocfg/ui-core 2.1.120 → 2.1.123

package/src/components/separator.story.tsx

@@ -0,0 +1,69 @@
+import { defineStory } from '@djangocfg/playground';
+import { Separator } from './separator';
+
+export default defineStory({
+  title: 'Core/Separator',
+  component: Separator,
+  description: 'Visual divider between content sections.',
+});
+
+export const Default = () => (
+  <div>
+    <div className="space-y-1">
+      <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+      <p className="text-sm text-muted-foreground">
+        An open-source UI component library.
+      </p>
+    </div>
+    <Separator className="my-4" />
+    <div className="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  </div>
+);
+
+export const Horizontal = () => (
+  <div className="max-w-md">
+    <p className="text-sm text-muted-foreground">First section</p>
+    <Separator className="my-4" />
+    <p className="text-sm text-muted-foreground">Second section</p>
+    <Separator className="my-4" />
+    <p className="text-sm text-muted-foreground">Third section</p>
+  </div>
+);
+
+export const Vertical = () => (
+  <div className="flex h-5 items-center space-x-4 text-sm">
+    <div>Home</div>
+    <Separator orientation="vertical" />
+    <div>About</div>
+    <Separator orientation="vertical" />
+    <div>Products</div>
+    <Separator orientation="vertical" />
+    <div>Contact</div>
+  </div>
+);
+
+export const InCard = () => (
+  <div className="rounded-lg border p-4 max-w-sm">
+    <h4 className="font-medium">Card Title</h4>
+    <Separator className="my-3" />
+    <p className="text-sm text-muted-foreground">
+      This is some card content below the separator.
+    </p>
+  </div>
+);
+
+export const WithLabels = () => (
+  <div className="max-w-md">
+    <div className="flex items-center gap-4">
+      <Separator className="flex-1" />
+      <span className="text-sm text-muted-foreground">OR</span>
+      <Separator className="flex-1" />
+    </div>
+  </div>
+);

package/src/components/sheet.story.tsx

@@ -0,0 +1,148 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+} from './sheet';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Sheet',
+  component: Sheet,
+  description: 'Slide-out panel from the edge of the screen.',
+});
+
+export const Interactive = () => {
+  const [side] = useSelect('side', {
+    options: ['top', 'right', 'bottom', 'left'] as const,
+    defaultValue: 'right',
+    label: 'Side',
+    description: 'Sheet position',
+  });
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side={side}>
+        <SheetHeader>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>
+            This is a sheet that slides in from the {side}.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="py-4">
+          <p>Sheet content goes here.</p>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </SheetClose>
+          <Button>Save</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export const Right = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Right</Button>
+    </SheetTrigger>
+    <SheetContent side="right">
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+        <SheetDescription>
+          Make changes to your profile here.
+        </SheetDescription>
+      </SheetHeader>
+      <div className="space-y-4 py-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="John Doe" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" defaultValue="john@example.com" />
+        </div>
+      </div>
+      <SheetFooter>
+        <SheetClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </SheetClose>
+        <Button>Save changes</Button>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+);
+
+export const Left = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Left</Button>
+    </SheetTrigger>
+    <SheetContent side="left">
+      <SheetHeader>
+        <SheetTitle>Navigation</SheetTitle>
+      </SheetHeader>
+      <nav className="flex flex-col gap-2 py-4">
+        <Button variant="ghost" className="justify-start">Dashboard</Button>
+        <Button variant="ghost" className="justify-start">Projects</Button>
+        <Button variant="ghost" className="justify-start">Settings</Button>
+        <Button variant="ghost" className="justify-start">Help</Button>
+      </nav>
+    </SheetContent>
+  </Sheet>
+);
+
+export const Bottom = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Bottom</Button>
+    </SheetTrigger>
+    <SheetContent side="bottom">
+      <SheetHeader>
+        <SheetTitle>Quick Actions</SheetTitle>
+        <SheetDescription>
+          Choose an action to perform.
+        </SheetDescription>
+      </SheetHeader>
+      <div className="flex gap-2 py-4">
+        <Button className="flex-1">Share</Button>
+        <Button className="flex-1" variant="outline">Copy Link</Button>
+        <Button className="flex-1" variant="destructive">Delete</Button>
+      </div>
+    </SheetContent>
+  </Sheet>
+);
+
+export const Top = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Top</Button>
+    </SheetTrigger>
+    <SheetContent side="top">
+      <SheetHeader>
+        <SheetTitle>Notification</SheetTitle>
+        <SheetDescription>
+          You have new updates available.
+        </SheetDescription>
+      </SheetHeader>
+      <div className="flex gap-2 py-4">
+        <Button>Update Now</Button>
+        <SheetClose asChild>
+          <Button variant="outline">Later</Button>
+        </SheetClose>
+      </div>
+    </SheetContent>
+  </Sheet>
+);

package/src/components/skeleton.story.tsx

@@ -0,0 +1,101 @@
+import { defineStory } from '@djangocfg/playground';
+import { Skeleton } from './skeleton';
+
+export default defineStory({
+  title: 'Core/Skeleton',
+  component: Skeleton,
+  description: 'Loading placeholder for content.',
+});
+
+export const Default = () => (
+  <div className="flex items-center space-x-4">
+    <Skeleton className="h-12 w-12 rounded-full" />
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-[250px]" />
+      <Skeleton className="h-4 w-[200px]" />
+    </div>
+  </div>
+);
+
+export const Card = () => (
+  <div className="flex flex-col space-y-3">
+    <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-[250px]" />
+      <Skeleton className="h-4 w-[200px]" />
+    </div>
+  </div>
+);
+
+export const Table = () => (
+  <div className="space-y-2">
+    <div className="flex gap-4">
+      <Skeleton className="h-8 w-[100px]" />
+      <Skeleton className="h-8 w-[150px]" />
+      <Skeleton className="h-8 w-[100px]" />
+      <Skeleton className="h-8 w-[80px]" />
+    </div>
+    {[...Array(5)].map((_, i) => (
+      <div key={i} className="flex gap-4">
+        <Skeleton className="h-6 w-[100px]" />
+        <Skeleton className="h-6 w-[150px]" />
+        <Skeleton className="h-6 w-[100px]" />
+        <Skeleton className="h-6 w-[80px]" />
+      </div>
+    ))}
+  </div>
+);
+
+export const Profile = () => (
+  <div className="flex items-start space-x-4">
+    <Skeleton className="h-16 w-16 rounded-full" />
+    <div className="space-y-2">
+      <Skeleton className="h-5 w-[180px]" />
+      <Skeleton className="h-4 w-[120px]" />
+      <Skeleton className="h-4 w-[220px]" />
+    </div>
+  </div>
+);
+
+export const Article = () => (
+  <div className="space-y-4 max-w-lg">
+    <Skeleton className="h-8 w-3/4" />
+    <Skeleton className="h-4 w-1/4" />
+    <Skeleton className="h-[200px] w-full rounded-lg" />
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  </div>
+);
+
+export const Grid = () => (
+  <div className="grid grid-cols-3 gap-4">
+    {[...Array(6)].map((_, i) => (
+      <div key={i} className="space-y-2">
+        <Skeleton className="h-[120px] w-full rounded-lg" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+    ))}
+  </div>
+);
+
+export const Form = () => (
+  <div className="space-y-4 max-w-sm">
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-20" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-20" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-20" />
+      <Skeleton className="h-24 w-full" />
+    </div>
+    <Skeleton className="h-10 w-24" />
+  </div>
+);

package/src/components/slider.story.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { defineStory, useBoolean, useNumber } from '@djangocfg/playground';
+import { Slider } from './slider';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Slider',
+  component: Slider,
+  description: 'Slider input for selecting numeric values.',
+});
+
+export const Interactive = () => {
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable slider',
+  });
+
+  const [max] = useNumber('max', {
+    defaultValue: 100,
+    min: 10,
+    max: 1000,
+    label: 'Max Value',
+    description: 'Maximum slider value',
+  });
+
+  const [step] = useNumber('step', {
+    defaultValue: 1,
+    min: 1,
+    max: 10,
+    label: 'Step',
+    description: 'Step increment',
+  });
+
+  const [value, setValue] = useState([50]);
+
+  return (
+    <div className="max-w-sm space-y-4">
+      <div className="space-y-2">
+        <div className="flex justify-between">
+          <Label>Value</Label>
+          <span className="text-sm text-muted-foreground">{value[0]}</span>
+        </div>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={max}
+          step={step}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <div className="max-w-sm">
+    <Slider defaultValue={[50]} max={100} step={1} />
+  </div>
+);
+
+export const WithLabel = () => {
+  const [value, setValue] = useState([25]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <div className="flex justify-between">
+        <Label>Volume</Label>
+        <span className="text-sm text-muted-foreground">{value[0]}%</span>
+      </div>
+      <Slider value={value} onValueChange={setValue} max={100} step={1} />
+    </div>
+  );
+};
+
+export const Range = () => {
+  const [value, setValue] = useState([25, 75]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <div className="flex justify-between">
+        <Label>Price Range</Label>
+        <span className="text-sm text-muted-foreground">
+          ${value[0]} - ${value[1]}
+        </span>
+      </div>
+      <Slider value={value} onValueChange={setValue} max={100} step={1} />
+    </div>
+  );
+};
+
+export const Steps = () => (
+  <div className="max-w-sm space-y-6">
+    <div className="space-y-2">
+      <Label>Step: 1</Label>
+      <Slider defaultValue={[50]} max={100} step={1} />
+    </div>
+    <div className="space-y-2">
+      <Label>Step: 10</Label>
+      <Slider defaultValue={[50]} max={100} step={10} />
+    </div>
+    <div className="space-y-2">
+      <Label>Step: 25</Label>
+      <Slider defaultValue={[50]} max={100} step={25} />
+    </div>
+  </div>
+);
+
+export const Disabled = () => (
+  <div className="max-w-sm">
+    <Slider defaultValue={[50]} max={100} disabled />
+  </div>
+);

package/src/components/spinner.story.tsx

@@ -0,0 +1,66 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Spinner } from './spinner';
+
+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/switch.story.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { Switch } from './switch';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Switch',
+  component: Switch,
+  description: 'Toggle switch for on/off states.',
+});
+
+export const Interactive = () => {
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable switch',
+  });
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" disabled={disabled} />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <div className="flex items-center space-x-2">
+    <Switch id="default" />
+    <Label htmlFor="default">Default switch</Label>
+  </div>
+);
+
+export const Checked = () => (
+  <div className="flex items-center space-x-2">
+    <Switch 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">
+      <Switch id="disabled-off" disabled />
+      <Label htmlFor="disabled-off">Disabled off</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <Switch id="disabled-on" disabled defaultChecked />
+      <Label htmlFor="disabled-on">Disabled on</Label>
+    </div>
+  </div>
+);
+
+export const Settings = () => {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    darkMode: false,
+    autoSave: true,
+  });
+
+  return (
+    <div className="space-y-6 max-w-sm">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="notifications" className="block">Notifications</Label>
+          <span className="text-sm text-muted-foreground">Receive push notifications</span>
+        </div>
+        <Switch
+          id="notifications"
+          checked={settings.notifications}
+          onCheckedChange={(checked) => setSettings({ ...settings, notifications: checked })}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="darkMode" className="block">Dark Mode</Label>
+          <span className="text-sm text-muted-foreground">Use dark theme</span>
+        </div>
+        <Switch
+          id="darkMode"
+          checked={settings.darkMode}
+          onCheckedChange={(checked) => setSettings({ ...settings, darkMode: checked })}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="autoSave" className="block">Auto Save</Label>
+          <span className="text-sm text-muted-foreground">Save changes automatically</span>
+        </div>
+        <Switch
+          id="autoSave"
+          checked={settings.autoSave}
+          onCheckedChange={(checked) => setSettings({ ...settings, autoSave: checked })}
+        />
+      </div>
+    </div>
+  );
+};