@djangocfg/ui-core 2.1.119 → 2.1.121

package/src/components/menubar.story.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+} from './menubar';
+
+export default defineStory({
+  title: 'Core/Menubar',
+  component: Menubar,
+  description: 'Horizontal menu bar with dropdowns.',
+});
+
+export const Default = () => (
+  <Menubar>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          New Window <MenubarShortcut>⌘N</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem>Share</MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem>
+          Print <MenubarShortcut>⌘P</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Edit</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem>
+          Cut <MenubarShortcut>⌘X</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          Copy <MenubarShortcut>⌘C</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          Paste <MenubarShortcut>⌘V</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>Zoom In</MenubarItem>
+        <MenubarItem>Zoom Out</MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem>
+          Toggle Fullscreen <MenubarShortcut>F11</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  </Menubar>
+);
+
+export const WithSubMenus = () => (
+  <Menubar>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>New File</MenubarItem>
+        <MenubarSub>
+          <MenubarSubTrigger>New</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Project...</MenubarItem>
+            <MenubarItem>Folder...</MenubarItem>
+            <MenubarItem>File...</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>Open...</MenubarItem>
+        <MenubarSub>
+          <MenubarSubTrigger>Open Recent</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Project 1</MenubarItem>
+            <MenubarItem>Project 2</MenubarItem>
+            <MenubarItem>Project 3</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  </Menubar>
+);
+
+export const WithCheckboxes = () => {
+  const [showStatusBar, setShowStatusBar] = useState(true);
+  const [showActivityBar, setShowActivityBar] = useState(false);
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status Bar
+          </MenubarCheckboxItem>
+          <MenubarCheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+          >
+            Activity Bar
+          </MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+};
+
+export const WithRadioGroup = () => {
+  const [theme, setTheme] = useState('system');
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Preferences</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+            <MenubarRadioItem value="light">Light</MenubarRadioItem>
+            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+            <MenubarRadioItem value="system">System</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+};

package/src/components/multi-select.story.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { MultiSelect, type MultiSelectOption } from './multi-select';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/MultiSelect',
+  component: MultiSelect,
+  description: 'Multi-select dropdown with badges.',
+});
+
+const frameworks: MultiSelectOption[] = [
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'solid', label: 'Solid' },
+  { value: 'preact', label: 'Preact' },
+];
+
+const languages: MultiSelectOption[] = [
+  { value: 'typescript', label: 'TypeScript', description: 'Typed JavaScript' },
+  { value: 'javascript', label: 'JavaScript', description: 'Dynamic scripting' },
+  { value: 'python', label: 'Python', description: 'General purpose' },
+  { value: 'rust', label: 'Rust', description: 'Systems programming' },
+  { value: 'go', label: 'Go', description: 'Backend services' },
+  { value: 'java', label: 'Java', description: 'Enterprise apps' },
+];
+
+export const Default = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm">
+      <MultiSelect
+        options={frameworks}
+        value={value}
+        onChange={setValue}
+        placeholder="Select frameworks..."
+      />
+    </div>
+  );
+};
+
+export const WithLabel = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Frameworks</Label>
+      <MultiSelect
+        options={frameworks}
+        value={value}
+        onChange={setValue}
+        placeholder="Select frameworks..."
+        searchPlaceholder="Search frameworks..."
+        emptyText="No frameworks found."
+      />
+    </div>
+  );
+};
+
+export const WithDescriptions = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Languages</Label>
+      <MultiSelect
+        options={languages}
+        value={value}
+        onChange={setValue}
+        placeholder="Select languages..."
+      />
+    </div>
+  );
+};
+
+export const WithDefaultValue = () => {
+  const [value, setValue] = useState<string[]>(['react', 'vue']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Selected Frameworks</Label>
+      <MultiSelect
+        options={frameworks}
+        value={value}
+        onChange={setValue}
+        placeholder="Select frameworks..."
+      />
+    </div>
+  );
+};
+
+export const MaxDisplay = () => {
+  const [value, setValue] = useState<string[]>(['react', 'vue', 'angular', 'svelte']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Frameworks (max 2 displayed)</Label>
+      <MultiSelect
+        options={frameworks}
+        value={value}
+        onChange={setValue}
+        placeholder="Select frameworks..."
+        maxDisplay={2}
+      />
+    </div>
+  );
+};
+
+export const Disabled = () => (
+  <div className="max-w-sm">
+    <MultiSelect
+      options={frameworks}
+      value={['react']}
+      onChange={() => {}}
+      placeholder="Select frameworks..."
+      disabled
+    />
+  </div>
+);

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

@@ -0,0 +1,154 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from './navigation-menu';
+import { cn } from '../lib';
+
+export default defineStory({
+  title: 'Core/NavigationMenu',
+  component: NavigationMenu,
+  description: 'Navigation menu with dropdowns and links.',
+});
+
+const ListItem = ({
+  className,
+  title,
+  children,
+  href,
+}: {
+  className?: string;
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}) => (
+  <li>
+    <NavigationMenuLink asChild>
+      <a
+        className={cn(
+          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+          className
+        )}
+        href={href}
+      >
+        <div className="text-sm font-medium leading-none">{title}</div>
+        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          {children}
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+);
+
+export const Default = () => (
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid gap-3 p-4 w-[400px]">
+            <ListItem href="#" title="Introduction">
+              Re-usable components built with Radix UI and Tailwind CSS.
+            </ListItem>
+            <ListItem href="#" title="Installation">
+              How to install dependencies and structure your app.
+            </ListItem>
+            <ListItem href="#" title="Typography">
+              Styles for headings, paragraphs, lists, and more.
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
+            <ListItem href="#" title="Alert Dialog">
+              A modal dialog that interrupts the user.
+            </ListItem>
+            <ListItem href="#" title="Hover Card">
+              For sighted users to preview content.
+            </ListItem>
+            <ListItem href="#" title="Progress">
+              Displays an indicator showing completion progress.
+            </ListItem>
+            <ListItem href="#" title="Scroll Area">
+              Visually or semantically separates content.
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+          Documentation
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+);
+
+export const Simple = () => (
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+          Home
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+          About
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+          Contact
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+);
+
+export const WithFeatureCard = () => (
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid gap-3 p-6 w-[400px] md:w-[500px] lg:grid-cols-[.75fr_1fr]">
+            <li className="row-span-3">
+              <NavigationMenuLink asChild>
+                <a
+                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                  href="#"
+                >
+                  <div className="mb-2 mt-4 text-lg font-medium">
+                    Featured Product
+                  </div>
+                  <p className="text-sm leading-tight text-muted-foreground">
+                    Beautifully designed components built with Radix UI and
+                    Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <ListItem href="#" title="Product A">
+              A high-performance solution for modern needs.
+            </ListItem>
+            <ListItem href="#" title="Product B">
+              Enterprise-grade security and reliability.
+            </ListItem>
+            <ListItem href="#" title="Product C">
+              Scalable infrastructure for growing teams.
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+);

package/src/components/popover.story.tsx

@@ -0,0 +1,127 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Popover',
+  component: Popover,
+  description: 'Floating content panel triggered by a button.',
+});
+
+export const Interactive = () => {
+  const [side] = useSelect('side', {
+    options: ['top', 'right', 'bottom', 'left'] as const,
+    defaultValue: 'bottom',
+    label: 'Side',
+    description: 'Popover position',
+  });
+
+  const [align] = useSelect('align', {
+    options: ['start', 'center', 'end'] as const,
+    defaultValue: 'center',
+    label: 'Align',
+    description: 'Popover alignment',
+  });
+
+  return (
+    <div className="flex justify-center p-20">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent side={side} align={align} className="w-80">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium leading-none">Dimensions</h4>
+              <p className="text-sm text-muted-foreground">
+                Set the dimensions for the layer.
+              </p>
+            </div>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="width">Width</Label>
+                <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="height">Height</Label>
+                <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button variant="outline">Open popover</Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-80">
+      <div className="grid gap-4">
+        <div className="space-y-2">
+          <h4 className="font-medium leading-none">Dimensions</h4>
+          <p className="text-sm text-muted-foreground">
+            Set the dimensions for the layer.
+          </p>
+        </div>
+        <div className="grid gap-2">
+          <div className="grid grid-cols-3 items-center gap-4">
+            <Label htmlFor="width">Width</Label>
+            <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+          </div>
+          <div className="grid grid-cols-3 items-center gap-4">
+            <Label htmlFor="maxWidth">Max. width</Label>
+            <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+);
+
+export const WithForm = () => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button>Update settings</Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-80">
+      <div className="grid gap-4">
+        <div className="space-y-2">
+          <h4 className="font-medium leading-none">Settings</h4>
+          <p className="text-sm text-muted-foreground">
+            Configure your preferences.
+          </p>
+        </div>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Display Name</Label>
+            <Input id="name" placeholder="Enter name" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" placeholder="Enter email" />
+          </div>
+          <Button className="w-full">Save</Button>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+);
+
+export const Simple = () => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button variant="outline" size="sm">Info</Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-64">
+      <p className="text-sm">
+        This is a simple popover with just some text content.
+      </p>
+    </PopoverContent>
+  </Popover>
+);

package/src/components/preloader.story.tsx

@@ -0,0 +1,86 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { Preloader, PreloaderSkeleton } from './preloader';
+
+export default defineStory({
+  title: 'Core/Preloader',
+  component: Preloader,
+  description: 'Loading indicators with multiple variants.',
+});
+
+export const Interactive = () => {
+  const [size] = useSelect('size', {
+    options: ['sm', 'md', 'lg', 'xl'] as const,
+    defaultValue: 'md',
+    label: 'Size',
+    description: 'Spinner size',
+  });
+
+  const [showText] = useBoolean('showText', {
+    defaultValue: true,
+    label: 'Show Text',
+    description: 'Display loading text',
+  });
+
+  return (
+    <Preloader
+      size={size}
+      text={showText ? 'Loading...' : undefined}
+    />
+  );
+};
+
+export const Default = () => <Preloader />;
+
+export const WithText = () => <Preloader text="Loading data..." />;
+
+export const WithDescription = () => (
+  <Preloader
+    text="Processing"
+    description="Please wait while we process your request"
+  />
+);
+
+export const Sizes = () => (
+  <div className="flex items-center gap-8">
+    <div className="flex flex-col items-center gap-2">
+      <Preloader size="sm" />
+      <span className="text-xs text-muted-foreground">sm</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Preloader size="md" />
+      <span className="text-xs text-muted-foreground">md</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Preloader size="lg" />
+      <span className="text-xs text-muted-foreground">lg</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Preloader size="xl" />
+      <span className="text-xs text-muted-foreground">xl</span>
+    </div>
+  </div>
+);
+
+export const InCard = () => (
+  <div className="rounded-lg border p-8">
+    <Preloader text="Loading content..." size="lg" />
+  </div>
+);
+
+export const SkeletonDefault = () => <PreloaderSkeleton />;
+
+export const SkeletonWithAvatar = () => <PreloaderSkeleton showAvatar />;
+
+export const SkeletonLines = () => (
+  <div className="max-w-md space-y-6">
+    <PreloaderSkeleton lines={2} />
+    <PreloaderSkeleton lines={4} />
+    <PreloaderSkeleton lines={1} />
+  </div>
+);
+
+export const SkeletonCard = () => (
+  <div className="max-w-sm rounded-lg border p-4">
+    <PreloaderSkeleton showAvatar lines={2} />
+  </div>
+);