@djangocfg/ui-core 2.1.382 → 2.1.383

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

@@ -1,208 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-} from '.';
-import { Button } from '../../forms/button';
-import { useState } from 'react';
-import {
-  User,
-  CreditCard,
-  Settings,
-  Keyboard,
-  Users,
-  UserPlus,
-  Mail,
-  MessageSquare,
-  PlusCircle,
-  Plus,
-  Github,
-  LifeBuoy,
-  Cloud,
-  LogOut,
-} from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Dropdown Menu',
-  component: DropdownMenu,
-  description: 'Context menu with items, submenus, and shortcuts.',
-});
-
-export const Default = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Open Menu</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent className="w-56">
-      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuGroup>
-        <DropdownMenuItem>
-          <User className="mr-2 h-4 w-4" />
-          <span>Profile</span>
-          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <CreditCard className="mr-2 h-4 w-4" />
-          <span>Billing</span>
-          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Settings className="mr-2 h-4 w-4" />
-          <span>Settings</span>
-          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Keyboard className="mr-2 h-4 w-4" />
-          <span>Keyboard shortcuts</span>
-          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuGroup>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>
-        <LogOut className="mr-2 h-4 w-4" />
-        <span>Log out</span>
-        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
-
-export const WithSubmenus = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Open Menu</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent className="w-56">
-      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuGroup>
-        <DropdownMenuItem>
-          <User className="mr-2 h-4 w-4" />
-          <span>Profile</span>
-        </DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <UserPlus className="mr-2 h-4 w-4" />
-            <span>Invite users</span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>
-              <Mail className="mr-2 h-4 w-4" />
-              <span>Email</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <MessageSquare className="mr-2 h-4 w-4" />
-              <span>Message</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <PlusCircle className="mr-2 h-4 w-4" />
-              <span>More...</span>
-            </DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-        <DropdownMenuItem>
-          <Plus className="mr-2 h-4 w-4" />
-          <span>New Team</span>
-        </DropdownMenuItem>
-      </DropdownMenuGroup>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>
-        <Github className="mr-2 h-4 w-4" />
-        <span>GitHub</span>
-      </DropdownMenuItem>
-      <DropdownMenuItem>
-        <LifeBuoy className="mr-2 h-4 w-4" />
-        <span>Support</span>
-      </DropdownMenuItem>
-      <DropdownMenuItem disabled>
-        <Cloud className="mr-2 h-4 w-4" />
-        <span>API</span>
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
-
-export const WithCheckboxes = () => {
-  const [showStatusBar, setShowStatusBar] = useState(true);
-  const [showActivityBar, setShowActivityBar] = useState(false);
-  const [showPanel, setShowPanel] = useState(false);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">View Options</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem
-          checked={showStatusBar}
-          onCheckedChange={setShowStatusBar}
-        >
-          Status Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showActivityBar}
-          onCheckedChange={setShowActivityBar}
-        >
-          Activity Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showPanel}
-          onCheckedChange={setShowPanel}
-        >
-          Panel
-        </DropdownMenuCheckboxItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-export const WithRadioGroup = () => {
-  const [position, setPosition] = useState('bottom');
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Panel Position</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-export const Simple = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Actions</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem>Edit</DropdownMenuItem>
-      <DropdownMenuItem>Duplicate</DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);

package/src/components/navigation/menubar/menubar.story.tsx

@@ -1,152 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-} from '.';
-
-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/navigation/navigation-menu/navigation-menu.story.tsx

@@ -1,154 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuLink,
-  navigationMenuTriggerStyle,
-} from '.';
-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/navigation/tabs/tabs.story.tsx

@@ -1,98 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../layout/card';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-import { Button } from '../../forms/button';
-
-export default defineStory({
-  title: 'Core/Tabs',
-  component: Tabs,
-  description: 'Tabbed interface for organizing content.',
-});
-
-export const Default = () => (
-  <Tabs defaultValue="account" className="w-full max-w-md">
-    <TabsList className="grid w-full grid-cols-2">
-      <TabsTrigger value="account">Account</TabsTrigger>
-      <TabsTrigger value="password">Password</TabsTrigger>
-    </TabsList>
-    <TabsContent value="account">
-      <Card>
-        <CardHeader>
-          <CardTitle>Account</CardTitle>
-          <CardDescription>
-            Make changes to your account here.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-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="username">Username</Label>
-            <Input id="username" defaultValue="@johndoe" />
-          </div>
-          <Button>Save changes</Button>
-        </CardContent>
-      </Card>
-    </TabsContent>
-    <TabsContent value="password">
-      <Card>
-        <CardHeader>
-          <CardTitle>Password</CardTitle>
-          <CardDescription>
-            Change your password here.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="current">Current password</Label>
-            <Input id="current" type="password" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="new">New password</Label>
-            <Input id="new" type="password" />
-          </div>
-          <Button>Save password</Button>
-        </CardContent>
-      </Card>
-    </TabsContent>
-  </Tabs>
-);
-
-export const SimpleTabs = () => (
-  <Tabs defaultValue="tab1" className="w-full max-w-lg">
-    <TabsList>
-      <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-      <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-      <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-    </TabsList>
-    <TabsContent value="tab1" className="p-4">
-      Content for Tab 1
-    </TabsContent>
-    <TabsContent value="tab2" className="p-4">
-      Content for Tab 2
-    </TabsContent>
-    <TabsContent value="tab3" className="p-4">
-      Content for Tab 3
-    </TabsContent>
-  </Tabs>
-);
-
-export const DisabledTab = () => (
-  <Tabs defaultValue="active" className="w-full max-w-lg">
-    <TabsList>
-      <TabsTrigger value="active">Active</TabsTrigger>
-      <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
-      <TabsTrigger value="another">Another</TabsTrigger>
-    </TabsList>
-    <TabsContent value="active" className="p-4">
-      This tab is active.
-    </TabsContent>
-    <TabsContent value="another" className="p-4">
-      Another active tab.
-    </TabsContent>
-  </Tabs>
-);