@djangocfg/ui-core 2.1.120 → 2.1.121

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

@@ -0,0 +1,112 @@
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { DownloadButton } from './button-download';
+
+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/button-group.story.tsx

@@ -0,0 +1,79 @@
+import { defineStory } from '@djangocfg/playground';
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group';
+import { Button } from './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/button.story.tsx

@@ -0,0 +1,116 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { Mail, Send, Loader2, ChevronRight, Plus, Trash2 } from 'lucide-react';
+import { Button, ButtonLink } from './button';
+
+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/calendar.story.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { Calendar, DatePicker, DateRangePicker, type DateRange } from './calendar';
+
+export default defineStory({
+  title: 'Core/Calendar',
+  component: Calendar,
+  description: 'Calendar and date picker components.',
+});
+
+export const Default = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border"
+    />
+  );
+};
+
+export const Range = () => {
+  const [range, setRange] = useState<DateRange | undefined>({
+    from: new Date(),
+    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+  });
+
+  return (
+    <Calendar
+      mode="range"
+      selected={range}
+      onSelect={setRange}
+      className="rounded-md border"
+      numberOfMonths={2}
+    />
+  );
+};
+
+export const Multiple = () => {
+  const [dates, setDates] = useState<Date[] | undefined>([]);
+
+  return (
+    <Calendar
+      mode="multiple"
+      selected={dates}
+      onSelect={setDates}
+      className="rounded-md border"
+    />
+  );
+};
+
+export const Picker = () => {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <div className="max-w-xs">
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Pick a date"
+      />
+    </div>
+  );
+};
+
+export const PickerWithLabel = () => {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <div className="max-w-xs space-y-2">
+      <label className="text-sm font-medium">Date of birth</label>
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Select your birth date"
+      />
+    </div>
+  );
+};
+
+export const RangePicker = () => {
+  const [range, setRange] = useState<DateRange>();
+
+  return (
+    <div className="max-w-sm">
+      <DateRangePicker
+        value={range}
+        onChange={setRange}
+        placeholder="Select date range"
+      />
+    </div>
+  );
+};
+
+export const RangePickerWithPresets = () => {
+  const [range, setRange] = useState<DateRange>();
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <label className="text-sm font-medium">Booking dates</label>
+      <DateRangePicker
+        value={range}
+        onChange={setRange}
+        placeholder="Check-in — Check-out"
+        numberOfMonths={2}
+      />
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <div className="max-w-xs">
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Pick a date"
+        disabled
+      />
+    </div>
+  );
+};

package/src/components/card.story.tsx

@@ -0,0 +1,105 @@
+import { defineStory } from '@djangocfg/playground';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Card',
+  component: Card,
+  description: 'Card container for grouping related content.',
+});
+
+export const Default = () => (
+  <Card className="max-w-sm">
+    <CardHeader>
+      <CardTitle>Card Title</CardTitle>
+      <CardDescription>Card description goes here.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p>This is the card content. You can put any content here.</p>
+    </CardContent>
+    <CardFooter>
+      <Button>Action</Button>
+    </CardFooter>
+  </Card>
+);
+
+export const LoginCard = () => (
+  <Card className="max-w-sm">
+    <CardHeader>
+      <CardTitle>Login</CardTitle>
+      <CardDescription>Enter your credentials to access your account.</CardDescription>
+    </CardHeader>
+    <CardContent className="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>
+    </CardContent>
+    <CardFooter className="flex justify-between">
+      <Button variant="outline">Cancel</Button>
+      <Button>Login</Button>
+    </CardFooter>
+  </Card>
+);
+
+export const ProductCard = () => (
+  <Card className="max-w-xs overflow-hidden">
+    <div className="aspect-video bg-muted" />
+    <CardHeader>
+      <CardTitle>Product Name</CardTitle>
+      <CardDescription>$99.99</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        This is a brief description of the product with key features.
+      </p>
+    </CardContent>
+    <CardFooter>
+      <Button className="w-full">Add to Cart</Button>
+    </CardFooter>
+  </Card>
+);
+
+export const StatsCards = () => (
+  <div className="grid grid-cols-3 gap-4">
+    <Card>
+      <CardHeader className="pb-2">
+        <CardDescription>Total Revenue</CardDescription>
+        <CardTitle className="text-2xl">$45,231.89</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader className="pb-2">
+        <CardDescription>Subscriptions</CardDescription>
+        <CardTitle className="text-2xl">+2,350</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader className="pb-2">
+        <CardDescription>Active Now</CardDescription>
+        <CardTitle className="text-2xl">+573</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-muted-foreground">+201 since last hour</p>
+      </CardContent>
+    </Card>
+  </div>
+);
+
+export const SimpleCard = () => (
+  <Card className="max-w-md p-6">
+    <p>A simple card with just content and padding.</p>
+  </Card>
+);

package/src/components/carousel.story.tsx

@@ -0,0 +1,122 @@
+import { defineStory, type StoryMeta } from '@djangocfg/playground';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './carousel';
+import { Card, CardContent } from './card';
+
+const meta: StoryMeta = defineStory({
+  title: 'Core/Carousel',
+  component: Carousel,
+  description: 'Carousel/slider component for cycling through content.',
+});
+
+export default meta;
+
+export const Default = () => (
+  <Carousel className="w-full max-w-xs">
+    <CarouselContent>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <CarouselItem key={index}>
+          <div className="p-1">
+            <Card>
+              <CardContent className="flex aspect-square items-center justify-center p-6">
+                <span className="text-4xl font-semibold">{index + 1}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+);
+
+export const Multiple = () => (
+  <Carousel
+    opts={{ align: 'start' }}
+    className="w-full max-w-sm"
+  >
+    <CarouselContent>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <CarouselItem key={index} className="basis-1/3">
+          <div className="p-1">
+            <Card>
+              <CardContent className="flex aspect-square items-center justify-center p-6">
+                <span className="text-3xl font-semibold">{index + 1}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+);
+
+export const Wide = () => (
+  <Carousel className="w-full max-w-lg">
+    <CarouselContent>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <CarouselItem key={index}>
+          <div className="p-1">
+            <Card>
+              <CardContent className="flex aspect-video items-center justify-center p-6 bg-muted">
+                <span className="text-4xl font-semibold">Slide {index + 1}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+);
+
+export const WithImages = () => (
+  <Carousel className="w-full max-w-md">
+    <CarouselContent>
+      {[
+        'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400',
+        'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=400',
+        'https://images.unsplash.com/photo-1542362567-b07e54358753?w=400',
+      ].map((src, index) => (
+        <CarouselItem key={index}>
+          <div className="p-1">
+            <div className="aspect-video rounded-lg overflow-hidden">
+              <img src={src} alt={`Slide ${index + 1}`} className="w-full h-full object-cover" />
+            </div>
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+);
+
+export const Loop = () => (
+  <Carousel opts={{ loop: true }} className="w-full max-w-xs">
+    <CarouselContent>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <CarouselItem key={index}>
+          <div className="p-1">
+            <Card>
+              <CardContent className="flex aspect-square items-center justify-center p-6">
+                <span className="text-4xl font-semibold">{index + 1}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+);