@djangocfg/ui-core 2.1.120 → 2.1.121

package/src/components/progress.story.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { defineStory, useNumber } from '@djangocfg/playground';
+import { Progress } from './progress';
+
+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/radio-group.story.tsx

@@ -0,0 +1,113 @@
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Radio Group',
+  component: RadioGroup,
+  description: 'Radio button group for single selection.',
+});
+
+export const Interactive = () => {
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable radio group',
+  });
+
+  return (
+    <RadioGroup defaultValue="option-1" disabled={disabled}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="option-1" />
+        <Label htmlFor="option-1">Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="option-2" />
+        <Label htmlFor="option-2">Option 2</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="option-3" />
+        <Label htmlFor="option-3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  );
+};
+
+export const Default = () => (
+  <RadioGroup defaultValue="comfortable">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="default" id="r1" />
+      <Label htmlFor="r1">Default</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="comfortable" id="r2" />
+      <Label htmlFor="r2">Comfortable</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="compact" id="r3" />
+      <Label htmlFor="r3">Compact</Label>
+    </div>
+  </RadioGroup>
+);
+
+export const Horizontal = () => (
+  <RadioGroup defaultValue="card" className="flex gap-4">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="card" id="card" />
+      <Label htmlFor="card">Card</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="paypal" id="paypal" />
+      <Label htmlFor="paypal">PayPal</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="apple" id="apple" />
+      <Label htmlFor="apple">Apple Pay</Label>
+    </div>
+  </RadioGroup>
+);
+
+export const Disabled = () => (
+  <RadioGroup defaultValue="option-1" disabled>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="d1" />
+      <Label htmlFor="d1">Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="d2" />
+      <Label htmlFor="d2">Option 2</Label>
+    </div>
+  </RadioGroup>
+);
+
+export const WithDescriptions = () => (
+  <RadioGroup defaultValue="startup" className="space-y-4">
+    <div className="flex items-start space-x-3">
+      <RadioGroupItem value="startup" id="startup" className="mt-1" />
+      <div>
+        <Label htmlFor="startup" className="font-medium">Startup</Label>
+        <p className="text-sm text-muted-foreground">
+          Perfect for small teams and startups.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-start space-x-3">
+      <RadioGroupItem value="business" id="business" className="mt-1" />
+      <div>
+        <Label htmlFor="business" className="font-medium">Business</Label>
+        <p className="text-sm text-muted-foreground">
+          For growing businesses with advanced needs.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-start space-x-3">
+      <RadioGroupItem value="enterprise" id="enterprise" className="mt-1" />
+      <div>
+        <Label htmlFor="enterprise" className="font-medium">Enterprise</Label>
+        <p className="text-sm text-muted-foreground">
+          Custom solutions for large organizations.
+        </p>
+      </div>
+    </div>
+  </RadioGroup>
+);

package/src/components/resizable.story.tsx

@@ -0,0 +1,119 @@
+import { defineStory } from '@djangocfg/playground';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+
+export default defineStory({
+  title: 'Core/Resizable',
+  component: ResizablePanelGroup,
+  description: 'Resizable panels with drag handles.',
+});
+
+export const Horizontal = () => (
+  <ResizablePanelGroup
+    direction="horizontal"
+    className="max-w-md rounded-lg border"
+  >
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">One</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Two</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);
+
+export const Vertical = () => (
+  <ResizablePanelGroup
+    direction="vertical"
+    className="max-w-md rounded-lg border"
+  >
+    <ResizablePanel defaultSize={25}>
+      <div className="flex h-full items-center justify-center p-6">
+        <span className="font-semibold">Header</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={75}>
+      <div className="flex h-full items-center justify-center p-6">
+        <span className="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);
+
+export const ThreePanels = () => (
+  <ResizablePanelGroup
+    direction="horizontal"
+    className="max-w-lg rounded-lg border"
+  >
+    <ResizablePanel defaultSize={25} minSize={15}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Sidebar</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={25} minSize={15}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Details</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);
+
+export const Nested = () => (
+  <ResizablePanelGroup
+    direction="horizontal"
+    className="max-w-lg rounded-lg border"
+  >
+    <ResizablePanel defaultSize={25}>
+      <div className="flex h-[300px] items-center justify-center p-6">
+        <span className="font-semibold">Sidebar</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={75}>
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Top</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Bottom</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);
+
+export const WithHandle = () => (
+  <ResizablePanelGroup
+    direction="horizontal"
+    className="max-w-md rounded-lg border"
+  >
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Left</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle withHandle />
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold">Right</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);

package/src/components/responsive-sheet.story.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import {
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+  ResponsiveSheetDescription,
+  ResponsiveSheetFooter,
+} from './responsive-sheet';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/ResponsiveSheet',
+  component: ResponsiveSheet,
+  description: 'Dialog on desktop, Drawer on mobile.',
+});
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Sheet</Button>
+      <ResponsiveSheet open={open} onOpenChange={setOpen}>
+        <ResponsiveSheetContent>
+          <ResponsiveSheetHeader>
+            <ResponsiveSheetTitle>Responsive Sheet</ResponsiveSheetTitle>
+            <ResponsiveSheetDescription>
+              This component shows as a Dialog on desktop and a Drawer on mobile.
+            </ResponsiveSheetDescription>
+          </ResponsiveSheetHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              Resize your browser window to see the responsive behavior.
+            </p>
+          </div>
+          <ResponsiveSheetFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setOpen(false)}>Continue</Button>
+          </ResponsiveSheetFooter>
+        </ResponsiveSheetContent>
+      </ResponsiveSheet>
+    </>
+  );
+};
+
+export const WithForm = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Edit Profile</Button>
+      <ResponsiveSheet open={open} onOpenChange={setOpen}>
+        <ResponsiveSheetContent className="sm:max-w-md">
+          <ResponsiveSheetHeader>
+            <ResponsiveSheetTitle>Edit Profile</ResponsiveSheetTitle>
+            <ResponsiveSheetDescription>
+              Make changes to your profile here. Click save when you're done.
+            </ResponsiveSheetDescription>
+          </ResponsiveSheetHeader>
+          <div className="space-y-4 p-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" type="email" defaultValue="john@example.com" />
+            </div>
+          </div>
+          <ResponsiveSheetFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setOpen(false)}>Save changes</Button>
+          </ResponsiveSheetFooter>
+        </ResponsiveSheetContent>
+      </ResponsiveSheet>
+    </>
+  );
+};
+
+export const Confirmation = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>
+        Delete Account
+      </Button>
+      <ResponsiveSheet open={open} onOpenChange={setOpen}>
+        <ResponsiveSheetContent>
+          <ResponsiveSheetHeader>
+            <ResponsiveSheetTitle>Are you sure?</ResponsiveSheetTitle>
+            <ResponsiveSheetDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </ResponsiveSheetDescription>
+          </ResponsiveSheetHeader>
+          <ResponsiveSheetFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => setOpen(false)}>
+              Delete Account
+            </Button>
+          </ResponsiveSheetFooter>
+        </ResponsiveSheetContent>
+      </ResponsiveSheet>
+    </>
+  );
+};

package/src/components/scroll-area.story.tsx

@@ -0,0 +1,112 @@
+import { defineStory } from '@djangocfg/playground';
+import { ScrollArea, ScrollBar } from './scroll-area';
+import { Separator } from './separator';
+
+export default defineStory({
+  title: 'Core/Scroll Area',
+  component: ScrollArea,
+  description: 'Custom scrollable area with styled scrollbars.',
+});
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+const works = [
+  { artist: 'Ornella Binni', art: 'Sunset Dreams' },
+  { artist: 'Tom Byrom', art: 'Mountain Peak' },
+  { artist: 'Vladimir Malyavko', art: 'City Lights' },
+  { artist: 'Fabio Fistarol', art: 'Ocean Blue' },
+  { artist: 'Anthony Intraversato', art: 'Forest Path' },
+  { artist: 'Ash Edmonds', art: 'Desert Storm' },
+];
+
+export const Vertical = () => (
+  <ScrollArea className="h-72 w-48 rounded-md border">
+    <div className="p-4">
+      <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+      {tags.map((tag) => (
+        <div key={tag}>
+          <div className="text-sm">{tag}</div>
+          <Separator className="my-2" />
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const Horizontal = () => (
+  <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+    <div className="flex w-max space-x-4 p-4">
+      {works.map((work) => (
+        <figure key={work.artist} className="shrink-0">
+          <div className="overflow-hidden rounded-md">
+            <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center">
+              <span className="text-muted-foreground text-sm">{work.art}</span>
+            </div>
+          </div>
+          <figcaption className="pt-2 text-xs text-muted-foreground">
+            Photo by{' '}
+            <span className="font-semibold text-foreground">{work.artist}</span>
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+);
+
+export const Both = () => (
+  <ScrollArea className="h-72 w-72 rounded-md border">
+    <div className="p-4">
+      {Array.from({ length: 20 }).map((_, i) => (
+        <div key={i} className="whitespace-nowrap py-2">
+          This is a very long line of text that will require horizontal scrolling. Item {i + 1}
+        </div>
+      ))}
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+);
+
+export const InCard = () => (
+  <div className="rounded-lg border p-4 max-w-sm">
+    <h4 className="font-medium mb-2">Notifications</h4>
+    <ScrollArea className="h-48">
+      <div className="space-y-2">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="rounded-md border p-3">
+            <p className="text-sm font-medium">Notification {i + 1}</p>
+            <p className="text-xs text-muted-foreground">Just now</p>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  </div>
+);
+
+export const Chat = () => (
+  <div className="rounded-lg border max-w-md">
+    <div className="p-4 border-b">
+      <h4 className="font-medium">Chat</h4>
+    </div>
+    <ScrollArea className="h-64 p-4">
+      <div className="space-y-4">
+        {Array.from({ length: 15 }).map((_, i) => (
+          <div
+            key={i}
+            className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}
+          >
+            <div
+              className={`rounded-lg px-3 py-2 max-w-[80%] ${
+                i % 2 === 0 ? 'bg-muted' : 'bg-primary text-primary-foreground'
+              }`}
+            >
+              <p className="text-sm">Message {i + 1}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  </div>
+);

package/src/components/select.story.tsx

@@ -0,0 +1,112 @@
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Select',
+  component: Select,
+  description: 'Dropdown select component for choosing from options.',
+});
+
+export const Interactive = () => {
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable select',
+  });
+
+  return (
+    <div className="max-w-xs space-y-2">
+      <Label>Framework</Label>
+      <Select disabled={disabled}>
+        <SelectTrigger>
+          <SelectValue placeholder="Select a framework" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="react">React</SelectItem>
+          <SelectItem value="vue">Vue</SelectItem>
+          <SelectItem value="angular">Angular</SelectItem>
+          <SelectItem value="svelte">Svelte</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <div className="max-w-xs">
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+export const WithDefaultValue = () => (
+  <div className="max-w-xs">
+    <Select defaultValue="vue">
+      <SelectTrigger>
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="react">React</SelectItem>
+        <SelectItem value="vue">Vue</SelectItem>
+        <SelectItem value="angular">Angular</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+export const Disabled = () => (
+  <div className="max-w-xs">
+    <Select disabled>
+      <SelectTrigger>
+        <SelectValue placeholder="Disabled select" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+export const Countries = () => (
+  <div className="max-w-xs space-y-2">
+    <Label>Country</Label>
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select country" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us">United States</SelectItem>
+        <SelectItem value="uk">United Kingdom</SelectItem>
+        <SelectItem value="de">Germany</SelectItem>
+        <SelectItem value="fr">France</SelectItem>
+        <SelectItem value="jp">Japan</SelectItem>
+        <SelectItem value="kr">South Korea</SelectItem>
+        <SelectItem value="cn">China</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+export const WithDisabledItems = () => (
+  <div className="max-w-xs">
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select plan" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">Free</SelectItem>
+        <SelectItem value="pro">Pro - $9/mo</SelectItem>
+        <SelectItem value="enterprise" disabled>Enterprise (Coming Soon)</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+);