@djangocfg/ui-core 2.1.119 → 2.1.121

package/src/components/image-with-fallback.story.tsx

@@ -0,0 +1,105 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { ImageWithFallback } from './image-with-fallback';
+
+export default defineStory({
+  title: 'Core/ImageWithFallback',
+  component: ImageWithFallback,
+  description: 'Image component with loading states and fallbacks.',
+});
+
+export const Interactive = () => {
+  const [fallbackIcon] = useSelect('fallbackIcon', {
+    options: ['car', 'image', 'user', 'package', 'location'] as const,
+    defaultValue: 'image',
+    label: 'Fallback Icon',
+    description: 'Icon shown on error or missing src',
+  });
+
+  return (
+    <ImageWithFallback
+      src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400"
+      alt="Car"
+      fallbackIcon={fallbackIcon}
+      className="h-48 w-72 rounded-lg"
+    />
+  );
+};
+
+export const Default = () => (
+  <ImageWithFallback
+    src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400"
+    alt="Car"
+    className="h-48 w-72 rounded-lg"
+  />
+);
+
+export const WithFallbackCar = () => (
+  <ImageWithFallback
+    src=""
+    alt="Missing car image"
+    fallbackIcon="car"
+    className="h-48 w-72 rounded-lg"
+  />
+);
+
+export const WithFallbackUser = () => (
+  <ImageWithFallback
+    src=""
+    alt="Missing user avatar"
+    fallbackIcon="user"
+    className="h-24 w-24 rounded-full"
+  />
+);
+
+export const WithFallbackLocation = () => (
+  <ImageWithFallback
+    src=""
+    alt="Missing location"
+    fallbackIcon="location"
+    className="h-32 w-32 rounded-lg"
+  />
+);
+
+export const BrokenImage = () => (
+  <ImageWithFallback
+    src="https://invalid-url-that-does-not-exist.com/image.jpg"
+    alt="Broken image"
+    fallbackIcon="image"
+    className="h-48 w-72 rounded-lg"
+  />
+);
+
+export const CustomFallback = () => (
+  <ImageWithFallback
+    src=""
+    alt="Custom fallback"
+    fallbackContent={
+      <div className="flex flex-col items-center gap-2 text-muted-foreground">
+        <span className="text-4xl">🚗</span>
+        <span className="text-sm">No image available</span>
+      </div>
+    }
+    className="h-48 w-72 rounded-lg border bg-muted/20"
+  />
+);
+
+export const Gallery = () => (
+  <div className="grid grid-cols-3 gap-4">
+    <ImageWithFallback
+      src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=200"
+      alt="Car 1"
+      className="h-32 w-full rounded-lg"
+    />
+    <ImageWithFallback
+      src=""
+      alt="Missing"
+      fallbackIcon="car"
+      className="h-32 w-full rounded-lg"
+    />
+    <ImageWithFallback
+      src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=200"
+      alt="Car 2"
+      className="h-32 w-full rounded-lg"
+    />
+  </div>
+);

package/src/components/input-group.story.tsx

@@ -0,0 +1,119 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+} from './input-group';
+import { Search, Mail, Eye, EyeOff, Copy, AtSign } from 'lucide-react';
+import { useState } from 'react';
+import { Kbd } from './kbd';
+
+export default defineStory({
+  title: 'Core/InputGroup',
+  component: InputGroup,
+  description: 'Input with addons, buttons, and icons.',
+});
+
+export const WithIcon = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupAddon>
+      <Search className="h-4 w-4" />
+    </InputGroupAddon>
+    <InputGroupInput placeholder="Search..." />
+  </InputGroup>
+);
+
+export const WithText = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupAddon>
+      <InputGroupText>https://</InputGroupText>
+    </InputGroupAddon>
+    <InputGroupInput placeholder="example.com" />
+  </InputGroup>
+);
+
+export const WithButton = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupInput placeholder="Enter email" />
+    <InputGroupAddon align="inline-end">
+      <InputGroupButton>Subscribe</InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export const PasswordToggle = () => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <InputGroup className="max-w-sm">
+      <InputGroupInput
+        type={showPassword ? 'text' : 'password'}
+        placeholder="Enter password"
+      />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          size="icon-xs"
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+export const CopyInput = () => (
+  <InputGroup className="max-w-md">
+    <InputGroupInput value="npm install @djangocfg/ui-core" readOnly />
+    <InputGroupAddon align="inline-end">
+      <InputGroupButton size="icon-xs">
+        <Copy className="h-4 w-4" />
+      </InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export const WithKbd = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupAddon>
+      <Search className="h-4 w-4" />
+    </InputGroupAddon>
+    <InputGroupInput placeholder="Search..." />
+    <InputGroupAddon align="inline-end">
+      <Kbd size="xs">⌘K</Kbd>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export const Email = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupAddon>
+      <AtSign className="h-4 w-4" />
+    </InputGroupAddon>
+    <InputGroupInput type="email" placeholder="you@example.com" />
+  </InputGroup>
+);
+
+export const WithTextarea = () => (
+  <InputGroup className="max-w-md">
+    <InputGroupAddon align="block-start">
+      <InputGroupText>Description</InputGroupText>
+    </InputGroupAddon>
+    <InputGroupTextarea placeholder="Enter description..." rows={4} />
+  </InputGroup>
+);
+
+export const BothSides = () => (
+  <InputGroup className="max-w-sm">
+    <InputGroupAddon>
+      <Mail className="h-4 w-4" />
+    </InputGroupAddon>
+    <InputGroupInput placeholder="Enter email" />
+    <InputGroupAddon align="inline-end">
+      <InputGroupButton>Send</InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+);

package/src/components/input-otp.story.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from './input-otp';
+
+export default defineStory({
+  title: 'Core/InputOTP',
+  component: InputOTP,
+  description: 'One-time password input with individual digit slots.',
+});
+
+export const Default = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <InputOTP maxLength={6} value={value} onChange={setValue}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  );
+};
+
+export const WithSeparator = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <InputOTP maxLength={6} value={value} onChange={setValue}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  );
+};
+
+export const FourDigits = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <InputOTP maxLength={4} value={value} onChange={setValue}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+    </InputOTP>
+  );
+};
+
+export const Disabled = () => (
+  <InputOTP maxLength={6} disabled>
+    <InputOTPGroup>
+      <InputOTPSlot index={0} />
+      <InputOTPSlot index={1} />
+      <InputOTPSlot index={2} />
+      <InputOTPSlot index={3} />
+      <InputOTPSlot index={4} />
+      <InputOTPSlot index={5} />
+    </InputOTPGroup>
+  </InputOTP>
+);
+
+export const WithLabel = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Verification Code</label>
+      <InputOTP maxLength={6} value={value} onChange={setValue}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+      <p className="text-sm text-muted-foreground">
+        Enter the 6-digit code sent to your email.
+      </p>
+    </div>
+  );
+};

package/src/components/input.story.tsx

@@ -0,0 +1,77 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { Input } from './input';
+import { Label } from './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>
+);

package/src/components/kbd.story.tsx

@@ -0,0 +1,113 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Kbd, KbdGroup } from './kbd';
+
+export default defineStory({
+  title: 'Core/Kbd',
+  component: Kbd,
+  description: 'Keyboard key indicator for shortcuts.',
+});
+
+export const Interactive = () => {
+  const [size] = useSelect('size', {
+    options: ['xs', 'sm', 'default', 'lg'] as const,
+    defaultValue: 'default',
+    label: 'Size',
+    description: 'Kbd size',
+  });
+
+  return <Kbd size={size}>⌘</Kbd>;
+};
+
+export const Default = () => <Kbd>⌘</Kbd>;
+
+export const Sizes = () => (
+  <div className="flex items-center gap-4">
+    <Kbd size="xs">⌘</Kbd>
+    <Kbd size="sm">⌘</Kbd>
+    <Kbd size="default">⌘</Kbd>
+    <Kbd size="lg">⌘</Kbd>
+  </div>
+);
+
+export const Shortcuts = () => (
+  <div className="space-y-4">
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-32">Copy</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>C</Kbd>
+      </KbdGroup>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-32">Paste</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>V</Kbd>
+      </KbdGroup>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-32">Undo</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>Z</Kbd>
+      </KbdGroup>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-32">Save</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>S</Kbd>
+      </KbdGroup>
+    </div>
+  </div>
+);
+
+export const ComplexShortcuts = () => (
+  <div className="space-y-4">
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-40">Command Palette</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>⇧</Kbd>
+        <Kbd>P</Kbd>
+      </KbdGroup>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-40">Go to Definition</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>Click</Kbd>
+      </KbdGroup>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="text-sm w-40">Toggle Sidebar</span>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>B</Kbd>
+      </KbdGroup>
+    </div>
+  </div>
+);
+
+export const Keys = () => (
+  <div className="flex flex-wrap gap-2">
+    <Kbd>⌘</Kbd>
+    <Kbd>⌥</Kbd>
+    <Kbd>⇧</Kbd>
+    <Kbd>⌃</Kbd>
+    <Kbd>⏎</Kbd>
+    <Kbd>⌫</Kbd>
+    <Kbd>⇥</Kbd>
+    <Kbd>⎋</Kbd>
+    <Kbd>↑</Kbd>
+    <Kbd>↓</Kbd>
+    <Kbd>←</Kbd>
+    <Kbd>→</Kbd>
+  </div>
+);
+
+export const InText = () => (
+  <p className="text-sm text-muted-foreground">
+    Press <Kbd size="sm">⌘</Kbd> + <Kbd size="sm">K</Kbd> to open the command palette.
+  </p>
+);

package/src/components/label.story.tsx

@@ -0,0 +1,52 @@
+import { defineStory } from '@djangocfg/playground';
+import { Label } from './label';
+import { Input } from './input';
+import { Checkbox } from './checkbox';
+
+export default defineStory({
+  title: 'Core/Label',
+  component: Label,
+  description: 'Accessible label for form controls.',
+});
+
+export const Default = () => <Label>Email address</Label>;
+
+export const WithInput = () => (
+  <div className="max-w-sm space-y-2">
+    <Label htmlFor="email">Email</Label>
+    <Input id="email" type="email" placeholder="you@example.com" />
+  </div>
+);
+
+export const WithCheckbox = () => (
+  <div className="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <Label htmlFor="terms">Accept terms and conditions</Label>
+  </div>
+);
+
+export const Required = () => (
+  <div className="max-w-sm space-y-2">
+    <Label htmlFor="name">
+      Name <span className="text-destructive">*</span>
+    </Label>
+    <Input id="name" placeholder="Enter your name" />
+  </div>
+);
+
+export const WithDescription = () => (
+  <div className="max-w-sm space-y-1">
+    <Label htmlFor="bio">Bio</Label>
+    <p className="text-sm text-muted-foreground">
+      Tell us a little about yourself.
+    </p>
+    <Input id="bio" placeholder="I am..." />
+  </div>
+);
+
+export const Disabled = () => (
+  <div className="max-w-sm space-y-2">
+    <Label htmlFor="disabled" className="opacity-50">Disabled field</Label>
+    <Input id="disabled" disabled placeholder="Cannot edit" />
+  </div>
+);