@djangocfg/ui-core 2.1.120 → 2.1.121

package/src/components/checkbox.story.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { Checkbox } from './checkbox';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Checkbox',
+  component: Checkbox,
+  description: 'Checkbox input for boolean selections.',
+});
+
+export const Interactive = () => {
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable checkbox',
+  });
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" disabled={disabled} />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <div className="flex items-center space-x-2">
+    <Checkbox id="default" />
+    <Label htmlFor="default">Default checkbox</Label>
+  </div>
+);
+
+export const Checked = () => (
+  <div className="flex items-center space-x-2">
+    <Checkbox 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">
+      <Checkbox id="disabled-unchecked" disabled />
+      <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <Checkbox id="disabled-checked" disabled defaultChecked />
+      <Label htmlFor="disabled-checked">Disabled checked</Label>
+    </div>
+  </div>
+);
+
+export const WithForm = () => {
+  const [items, setItems] = useState({
+    notifications: true,
+    marketing: false,
+    updates: true,
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="notifications"
+          checked={items.notifications}
+          onCheckedChange={(checked) => setItems({ ...items, notifications: !!checked })}
+        />
+        <Label htmlFor="notifications">Receive notifications</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="marketing"
+          checked={items.marketing}
+          onCheckedChange={(checked) => setItems({ ...items, marketing: !!checked })}
+        />
+        <Label htmlFor="marketing">Receive marketing emails</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="updates"
+          checked={items.updates}
+          onCheckedChange={(checked) => setItems({ ...items, updates: !!checked })}
+        />
+        <Label htmlFor="updates">Receive product updates</Label>
+      </div>
+    </div>
+  );
+};

package/src/components/collapsible.story.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+import { Button } from './button';
+import { ChevronsUpDown } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Collapsible',
+  component: Collapsible,
+  description: 'Expandable/collapsible content section.',
+});
+
+export const Default = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm" className="w-9 p-0">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-3 font-mono text-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export const OpenByDefault = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">Notifications</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            {isOpen ? 'Hide' : 'Show'}
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 text-sm">
+          You have 3 new notifications
+        </div>
+        <div className="rounded-md border px-4 py-3 text-sm">
+          Your order has been shipped
+        </div>
+        <div className="rounded-md border px-4 py-3 text-sm">
+          New comment on your post
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export const Simple = () => (
+  <Collapsible className="w-[350px]">
+    <CollapsibleTrigger asChild>
+      <Button variant="outline" className="w-full justify-between">
+        Can I use this in my project?
+        <ChevronsUpDown className="h-4 w-4" />
+      </Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent className="pt-2">
+      <p className="text-sm text-muted-foreground px-1">
+        Yes! This component is free to use in your personal and commercial projects.
+        No attribution required.
+      </p>
+    </CollapsibleContent>
+  </Collapsible>
+);
+
+export const Multiple = () => (
+  <div className="w-[350px] space-y-2">
+    <Collapsible>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" className="w-full justify-between">
+          Section 1
+          <ChevronsUpDown className="h-4 w-4" />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-4 py-2">
+        Content for section 1
+      </CollapsibleContent>
+    </Collapsible>
+    <Collapsible>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" className="w-full justify-between">
+          Section 2
+          <ChevronsUpDown className="h-4 w-4" />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-4 py-2">
+        Content for section 2
+      </CollapsibleContent>
+    </Collapsible>
+    <Collapsible>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" className="w-full justify-between">
+          Section 3
+          <ChevronsUpDown className="h-4 w-4" />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-4 py-2">
+        Content for section 3
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+);

package/src/components/combobox.story.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import { defineStory, useBoolean } from '@djangocfg/playground';
+import { Combobox, type ComboboxOption } from './combobox';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Combobox',
+  component: Combobox,
+  description: 'Searchable select with autocomplete.',
+});
+
+const frameworks: ComboboxOption[] = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+];
+
+const countries: ComboboxOption[] = [
+  { value: 'us', label: 'United States' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'jp', label: 'Japan' },
+  { value: 'kr', label: 'South Korea' },
+  { value: 'cn', label: 'China' },
+  { value: 'au', label: 'Australia' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'br', label: 'Brazil' },
+];
+
+export const Interactive = () => {
+  const [value, setValue] = useState('');
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable combobox',
+  });
+
+  return (
+    <div className="max-w-xs space-y-2">
+      <Label>Framework</Label>
+      <Combobox
+        options={frameworks}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select framework..."
+        searchPlaceholder="Search framework..."
+        emptyText="No framework found."
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+export const Default = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div className="max-w-xs">
+      <Combobox
+        options={frameworks}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select framework..."
+        searchPlaceholder="Search framework..."
+        emptyText="No framework found."
+      />
+    </div>
+  );
+};
+
+export const WithDefaultValue = () => {
+  const [value, setValue] = useState('next.js');
+
+  return (
+    <div className="max-w-xs">
+      <Combobox
+        options={frameworks}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select framework..."
+      />
+    </div>
+  );
+};
+
+export const Countries = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div className="max-w-xs space-y-2">
+      <Label>Country</Label>
+      <Combobox
+        options={countries}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select country..."
+        searchPlaceholder="Search countries..."
+        emptyText="No country found."
+      />
+    </div>
+  );
+};
+
+export const Disabled = () => (
+  <div className="max-w-xs">
+    <Combobox
+      options={frameworks}
+      value=""
+      onValueChange={() => {}}
+      placeholder="Select framework..."
+      disabled
+    />
+  </div>
+);
+
+export const Form = () => {
+  const [framework, setFramework] = useState('');
+  const [country, setCountry] = useState('');
+
+  return (
+    <div className="max-w-xs space-y-4">
+      <div className="space-y-2">
+        <Label>Framework</Label>
+        <Combobox
+          options={frameworks}
+          value={framework}
+          onValueChange={setFramework}
+          placeholder="Select framework..."
+        />
+      </div>
+      <div className="space-y-2">
+        <Label>Country</Label>
+        <Combobox
+          options={countries}
+          value={country}
+          onValueChange={setCountry}
+          placeholder="Select country..."
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/command.story.tsx

@@ -0,0 +1,121 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from './command';
+import { useState } from 'react';
+import { Button } from './button';
+import { Calendar, Smile, Calculator, User, CreditCard, Settings } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Command',
+  component: Command,
+  description: 'Command palette for search and quick actions.',
+});
+
+export const Default = () => (
+  <Command className="rounded-lg border shadow-md max-w-md">
+    <CommandInput placeholder="Type a command or search..." />
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup heading="Suggestions">
+        <CommandItem>
+          <Calendar className="mr-2 h-4 w-4" />
+          <span>Calendar</span>
+        </CommandItem>
+        <CommandItem>
+          <Smile className="mr-2 h-4 w-4" />
+          <span>Search Emoji</span>
+        </CommandItem>
+        <CommandItem>
+          <Calculator className="mr-2 h-4 w-4" />
+          <span>Calculator</span>
+        </CommandItem>
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup heading="Settings">
+        <CommandItem>
+          <User className="mr-2 h-4 w-4" />
+          <span>Profile</span>
+          <CommandShortcut>⌘P</CommandShortcut>
+        </CommandItem>
+        <CommandItem>
+          <CreditCard className="mr-2 h-4 w-4" />
+          <span>Billing</span>
+          <CommandShortcut>⌘B</CommandShortcut>
+        </CommandItem>
+        <CommandItem>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Settings</span>
+          <CommandShortcut>⌘S</CommandShortcut>
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+);
+
+export const Dialog = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Open Command Palette
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem onSelect={() => setOpen(false)}>
+              <Calendar className="mr-2 h-4 w-4" />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem onSelect={() => setOpen(false)}>
+              <Smile className="mr-2 h-4 w-4" />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem onSelect={() => setOpen(false)}>
+              <Calculator className="mr-2 h-4 w-4" />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem onSelect={() => setOpen(false)}>
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={() => setOpen(false)}>
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+};
+
+export const Simple = () => (
+  <Command className="rounded-lg border max-w-sm">
+    <CommandInput placeholder="Search..." />
+    <CommandList>
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandGroup>
+        <CommandItem>Item 1</CommandItem>
+        <CommandItem>Item 2</CommandItem>
+        <CommandItem>Item 3</CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+);

package/src/components/context-menu.story.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+} from './context-menu';
+
+export default defineStory({
+  title: 'Core/ContextMenu',
+  component: ContextMenu,
+  description: 'Right-click context menu.',
+});
+
+export const Default = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
+      Right click here
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-64">
+      <ContextMenuItem>
+        Back
+        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem disabled>
+        Forward
+        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        Reload
+        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem>
+        Save Page As...
+        <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>Print...</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export const WithSubMenu = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
+      Right click here
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-64">
+      <ContextMenuItem>New Tab</ContextMenuItem>
+      <ContextMenuItem>New Window</ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuSub>
+        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+        <ContextMenuSubContent className="w-48">
+          <ContextMenuItem>Save Page As...</ContextMenuItem>
+          <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+          <ContextMenuItem>Name Window...</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem>Developer Tools</ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSub>
+      <ContextMenuSeparator />
+      <ContextMenuItem>Settings</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export const WithCheckboxes = () => {
+  const [showBookmarks, setShowBookmarks] = useState(true);
+  const [showFullUrls, setShowFullUrls] = useState(false);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuCheckboxItem
+          checked={showBookmarks}
+          onCheckedChange={setShowBookmarks}
+        >
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem
+          checked={showFullUrls}
+          onCheckedChange={setShowFullUrls}
+        >
+          Show Full URLs
+        </ContextMenuCheckboxItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export const WithRadioGroup = () => {
+  const [person, setPerson] = useState('pedro');
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuLabel>People</ContextMenuLabel>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+          <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="jamie">Jamie Kyle</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};

package/src/components/copy.story.tsx

@@ -0,0 +1,77 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { CopyButton, CopyField } from './copy';
+
+export default defineStory({
+  title: 'Core/Copy',
+  component: CopyButton,
+  description: 'Copy to clipboard components.',
+});
+
+export const Button = () => (
+  <CopyButton value="Hello, World!" />
+);
+
+export const ButtonWithText = () => (
+  <CopyButton value="npm install @djangocfg/ui-core">
+    Copy command
+  </CopyButton>
+);
+
+export const ButtonVariants = () => (
+  <div className="flex gap-2">
+    <CopyButton value="Text" variant="default" />
+    <CopyButton value="Text" variant="outline" />
+    <CopyButton value="Text" variant="ghost" />
+  </div>
+);
+
+export const ButtonSizes = () => (
+  <div className="flex items-center gap-2">
+    <CopyButton value="Text" size="sm" />
+    <CopyButton value="Text" size="default" />
+    <CopyButton value="Text" size="icon" />
+  </div>
+);
+
+export const Field = () => (
+  <div className="max-w-md">
+    <CopyField value="npm install @djangocfg/ui-core" />
+  </div>
+);
+
+export const FieldWithLabel = () => (
+  <div className="max-w-md space-y-2">
+    <label className="text-sm font-medium">Installation command</label>
+    <CopyField value="npm install @djangocfg/ui-core" />
+  </div>
+);
+
+export const ApiKey = () => (
+  <div className="max-w-md space-y-2">
+    <label className="text-sm font-medium">API Key</label>
+    <CopyField value="sk-1234567890abcdefghijklmnopqrstuvwxyz" />
+  </div>
+);
+
+export const URLs = () => (
+  <div className="max-w-lg space-y-4">
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Share Link</label>
+      <CopyField value="https://example.com/share/abc123" />
+    </div>
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Embed Code</label>
+      <CopyField value='<iframe src="https://example.com/embed/abc123"></iframe>' />
+    </div>
+  </div>
+);
+
+export const InCard = () => (
+  <div className="rounded-lg border p-4 max-w-md">
+    <h4 className="font-medium mb-2">Invite Link</h4>
+    <p className="text-sm text-muted-foreground mb-4">
+      Share this link with your team members.
+    </p>
+    <CopyField value="https://app.example.com/invite/team-abc123" />
+  </div>
+);