@djangocfg/ui-core 2.1.120 → 2.1.121

package/src/components/dialog.story.tsx

@@ -0,0 +1,137 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './dialog';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Dialog',
+  component: Dialog,
+  description: 'Modal dialog for focused interactions.',
+});
+
+export const Default = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button variant="outline">Open Dialog</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a dialog description. It explains what this dialog is about.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="py-4">
+        <p>Dialog content goes here.</p>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button>Confirm</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+export const EditProfile = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button>Edit Profile</Button>
+    </DialogTrigger>
+    <DialogContent className="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Edit Profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="space-y-4 py-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="email">Email</Label>
+          <Input id="email" type="email" defaultValue="john@example.com" />
+        </div>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button>Save Changes</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Confirmation = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button variant="destructive">Delete Account</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Are you sure?</DialogTitle>
+        <DialogDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove all your data from our servers.
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button variant="destructive">Delete Account</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+export const LongContent = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button variant="outline">Terms of Service</Button>
+    </DialogTrigger>
+    <DialogContent className="max-h-[80vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Terms of Service</DialogTitle>
+      </DialogHeader>
+      <div className="space-y-4 py-4 text-sm text-muted-foreground">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        <p>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+          ut aliquip ex ea commodo consequat.
+        </p>
+        <p>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur.
+        </p>
+        <p>
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+          deserunt mollit anim id est laborum.
+        </p>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Decline</Button>
+        </DialogClose>
+        <Button>Accept</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);

package/src/components/drawer.story.tsx

@@ -0,0 +1,131 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+} from './drawer';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/Drawer',
+  component: Drawer,
+  description: 'Mobile-friendly drawer that slides up from the bottom.',
+});
+
+export const Default = () => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open Drawer</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Drawer Title</DrawerTitle>
+        <DrawerDescription>
+          This is a description of the drawer content.
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4">
+        <p>Drawer content goes here.</p>
+      </div>
+      <DrawerFooter>
+        <Button>Submit</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export const WithForm = () => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button>Edit Profile</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Edit Profile</DrawerTitle>
+        <DrawerDescription>
+          Make changes to your profile information.
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4 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="email">Email</Label>
+          <Input id="email" type="email" defaultValue="john@example.com" />
+        </div>
+      </div>
+      <DrawerFooter>
+        <Button>Save Changes</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export const Confirmation = () => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button variant="destructive">Delete Account</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Are you sure?</DrawerTitle>
+        <DrawerDescription>
+          This action cannot be undone. Your account and all associated data will be permanently deleted.
+        </DrawerDescription>
+      </DrawerHeader>
+      <DrawerFooter>
+        <Button variant="destructive">Yes, Delete My Account</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export const ActionSheet = () => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button variant="outline">Share</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Share this item</DrawerTitle>
+      </DrawerHeader>
+      <div className="p-4 space-y-2">
+        <Button variant="ghost" className="w-full justify-start">
+          Copy Link
+        </Button>
+        <Button variant="ghost" className="w-full justify-start">
+          Share to Twitter
+        </Button>
+        <Button variant="ghost" className="w-full justify-start">
+          Share to Facebook
+        </Button>
+        <Button variant="ghost" className="w-full justify-start">
+          Send via Email
+        </Button>
+      </div>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="outline" className="w-full">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);

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

@@ -0,0 +1,208 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu';
+import { Button } from './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/empty.story.tsx

@@ -0,0 +1,115 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+} from './empty';
+import { Button } from './button';
+import { Inbox, Search, FileQuestion, Plus, RefreshCw } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Empty',
+  component: Empty,
+  description: 'Empty state placeholder for no content.',
+});
+
+export const Default = () => (
+  <Empty className="max-w-md mx-auto py-10">
+    <EmptyMedia>
+      <Inbox className="h-12 w-12 text-muted-foreground" />
+    </EmptyMedia>
+    <EmptyHeader>
+      <EmptyTitle>No items</EmptyTitle>
+      <EmptyDescription>
+        You don't have any items yet. Create your first one to get started.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button>
+        <Plus className="mr-2 h-4 w-4" />
+        Create Item
+      </Button>
+    </EmptyContent>
+  </Empty>
+);
+
+export const SearchNoResults = () => (
+  <Empty className="max-w-md mx-auto py-10">
+    <EmptyMedia>
+      <Search className="h-12 w-12 text-muted-foreground" />
+    </EmptyMedia>
+    <EmptyHeader>
+      <EmptyTitle>No results found</EmptyTitle>
+      <EmptyDescription>
+        We couldn't find anything matching your search. Try adjusting your filters.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button variant="outline">Clear filters</Button>
+    </EmptyContent>
+  </Empty>
+);
+
+export const Error = () => (
+  <Empty className="max-w-md mx-auto py-10">
+    <EmptyMedia>
+      <FileQuestion className="h-12 w-12 text-muted-foreground" />
+    </EmptyMedia>
+    <EmptyHeader>
+      <EmptyTitle>Something went wrong</EmptyTitle>
+      <EmptyDescription>
+        We encountered an error while loading the data. Please try again.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button variant="outline">
+        <RefreshCw className="mr-2 h-4 w-4" />
+        Retry
+      </Button>
+    </EmptyContent>
+  </Empty>
+);
+
+export const NoNotifications = () => (
+  <Empty className="max-w-sm mx-auto py-8">
+    <EmptyMedia>
+      <Inbox className="h-10 w-10 text-muted-foreground" />
+    </EmptyMedia>
+    <EmptyHeader>
+      <EmptyTitle>All caught up!</EmptyTitle>
+      <EmptyDescription>
+        You have no new notifications.
+      </EmptyDescription>
+    </EmptyHeader>
+  </Empty>
+);
+
+export const Simple = () => (
+  <Empty className="max-w-xs mx-auto py-6">
+    <EmptyHeader>
+      <EmptyTitle>No data</EmptyTitle>
+      <EmptyDescription>
+        Start by adding some data.
+      </EmptyDescription>
+    </EmptyHeader>
+  </Empty>
+);
+
+export const InCard = () => (
+  <div className="rounded-lg border p-6">
+    <Empty>
+      <EmptyMedia>
+        <Inbox className="h-8 w-8 text-muted-foreground" />
+      </EmptyMedia>
+      <EmptyHeader>
+        <EmptyTitle className="text-base">Empty inbox</EmptyTitle>
+        <EmptyDescription className="text-sm">
+          No messages to display
+        </EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  </div>
+);

package/src/components/hover-card.story.tsx

@@ -0,0 +1,102 @@
+import { defineStory } from '@djangocfg/playground';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+import { Button } from './button';
+import { CalendarDays } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Hover Card',
+  component: HoverCard,
+  description: 'Card that appears on hover, showing additional information.',
+});
+
+export const Default = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="link">@nextjs</Button>
+    </HoverCardTrigger>
+    <HoverCardContent className="w-80">
+      <div className="flex justify-between space-x-4">
+        <Avatar>
+          <AvatarImage src="https://github.com/vercel.png" />
+          <AvatarFallback>VC</AvatarFallback>
+        </Avatar>
+        <div className="space-y-1">
+          <h4 className="text-sm font-semibold">@nextjs</h4>
+          <p className="text-sm">
+            The React Framework – created and maintained by @vercel.
+          </p>
+          <div className="flex items-center pt-2">
+            <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
+            <span className="text-xs text-muted-foreground">
+              Joined December 2021
+            </span>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const UserProfile = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="link" className="p-0">John Doe</Button>
+    </HoverCardTrigger>
+    <HoverCardContent className="w-80">
+      <div className="flex space-x-4">
+        <Avatar className="h-12 w-12">
+          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+        <div className="space-y-1">
+          <h4 className="text-sm font-semibold">John Doe</h4>
+          <p className="text-sm text-muted-foreground">
+            Software Engineer at Acme Inc.
+          </p>
+          <div className="flex gap-4 pt-2 text-xs text-muted-foreground">
+            <span><strong>128</strong> Following</span>
+            <span><strong>512</strong> Followers</span>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const Simple = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <span className="text-sm underline cursor-pointer">What is this?</span>
+    </HoverCardTrigger>
+    <HoverCardContent>
+      <p className="text-sm">
+        This is a hover card that appears when you hover over the trigger.
+      </p>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const WithStats = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="outline" size="sm">View Project</Button>
+    </HoverCardTrigger>
+    <HoverCardContent className="w-64">
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">My Awesome Project</h4>
+        <p className="text-sm text-muted-foreground">
+          A React component library.
+        </p>
+        <div className="flex gap-4 pt-2 text-xs">
+          <span className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-yellow-500" />
+            TypeScript
+          </span>
+          <span>⭐ 1.2k</span>
+          <span>🍴 234</span>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);