@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/Command/Command.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../../components/ui/command";
+import { useState } from "react";
+import { Search, FileText, Settings, Users } from "lucide-react";
+
+const meta = {
+  title: "UI/Command",
+  component: Command,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Command>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-lg border w-full max-w-sm">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Search className="mr-2 h-4 w-4" />
+            <span>Search</span>
+          </CommandItem>
+          <CommandItem>
+            <FileText className="mr-2 h-4 w-4" />
+            <span>Create New</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Preferences</span>
+          </CommandItem>
+          <CommandItem>
+            <Users className="mr-2 h-4 w-4" />
+            <span>Team</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const Dialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        >
+          Open Command Menu
+        </button>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Actions">
+              <CommandItem>
+                <Search className="mr-2 h-4 w-4" />
+                <span>Search</span>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Create Document</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </>
+    );
+  },
+};

package/client/ui/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuCheckboxItem,
+} from "../../components/ui/context-menu";
+import { useState } from "react";
+
+type Story = StoryObj;
+
+const meta = {
+  title: "UI/ContextMenu",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-40 w-40 items-center justify-center rounded-md border border-dashed text-sm text-gray-600">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Back</ContextMenuItem>
+        <ContextMenuItem>Forward</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Reload</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>View Page Source</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => {
+    const [items, setItems] = useState({
+      showImages: true,
+      enableJavaScript: true,
+    });
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger className="flex h-40 w-40 items-center justify-center rounded-md border border-dashed text-sm text-gray-600">
+          Right click here
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuCheckboxItem
+            checked={items.showImages}
+            onCheckedChange={(checked) =>
+              setItems({ ...items, showImages: checked })
+            }
+          >
+            Show Images
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem
+            checked={items.enableJavaScript}
+            onCheckedChange={(checked) =>
+              setItems({ ...items, enableJavaScript: checked })
+            }
+          >
+            Enable JavaScript
+          </ContextMenuCheckboxItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  },
+};

package/client/ui/Dialog.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@/components/ui/Button";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+const meta = {
+  title: "Review/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Dialog open={open}>
+          <DialogTrigger asChild>
+            <Button
+              size="large"
+              variant="general-primary"
+              onClick={() => setOpen(true)}
+            >
+              Open Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:min-w-[297px]" showCloseButton={false}>
+            <DialogHeader>
+              <DialogTitle className="text-gray-800 text-center mb-8 h-8 justify-center items-center flex">
+                Are you sure?
+              </DialogTitle>
+            </DialogHeader>
+            <div className="flex gap-4 justify-center items-center">
+              <Button
+                size="utility"
+                variant="general-secondary"
+                onClick={() => setOpen(false)}
+              >
+                Nevermind
+              </Button>
+              <Button
+                size="utility"
+                variant="general-primary"
+                onClick={() => setOpen(false)}
+              >
+                Yes
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};

package/client/ui/Drawer/Drawer.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "../../components/ui/drawer";
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button>Open Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerDescription>This is a drawer component.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm">Drawer content goes here.</p>
+          </div>
+          <DrawerFooter>
+            <Button onClick={() => setOpen(false)}>Close</Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    );
+  },
+};
+
+export const Bottom: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button>Open Bottom Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <DrawerHeader>
+              <DrawerTitle>Share</DrawerTitle>
+            </DrawerHeader>
+            <div className="p-4 space-y-2">
+              <button className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 rounded">
+                Copy Link
+              </button>
+              <button className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 rounded">
+                Share to Twitter
+              </button>
+              <button className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 rounded">
+                Share to Facebook
+              </button>
+            </div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  },
+};

package/client/ui/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "../../components/ui/dropdown-menu";
+import { Button } from "../../components/ui/button";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          Open Menu
+          <ChevronDown className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Sign Out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => {
+    const [items, setItems] = useState({
+      bold: false,
+      italic: false,
+      underline: false,
+    });
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Text Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuCheckboxItem
+            checked={items.bold}
+            onCheckedChange={(checked) => setItems({ ...items, bold: checked })}
+          >
+            Bold
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={items.italic}
+            onCheckedChange={(checked) =>
+              setItems({ ...items, italic: checked })
+            }
+          >
+            Italic
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={items.underline}
+            onCheckedChange={(checked) =>
+              setItems({ ...items, underline: checked })
+            }
+          >
+            Underline
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithRadio: Story = {
+  render: () => {
+    const [theme, setTheme] = useState("light");
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Theme</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+            <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const Complex: Story = {
+  render: () => {
+    const [showNotifications, setShowNotifications] = useState(true);
+    const [theme, setTheme] = useState("light");
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            checked={showNotifications}
+            onCheckedChange={setShowNotifications}
+          >
+            Show Notifications
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+            <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="text-red-600">Sign Out</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};

package/client/ui/Form/Form.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj;
+
+const meta = {
+  title: "UI/Form",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: Story = {
+  render: () => (
+    <form className="w-full max-w-md space-y-6">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Name</label>
+        <input
+          type="text"
+          placeholder="Enter your name"
+          className="w-full px-3 py-2 border rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Email</label>
+        <input
+          type="email"
+          placeholder="Enter your email"
+          className="w-full px-3 py-2 border rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Message</label>
+        <textarea
+          placeholder="Enter your message"
+          className="w-full px-3 py-2 border rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <button className="w-full bg-blue-600 text-white py-2 rounded-md text-sm font-medium hover:bg-blue-700">
+        Submit
+      </button>
+    </form>
+  ),
+};
+
+export const WithValidation: Story = {
+  render: () => (
+    <form className="w-full max-w-md space-y-6">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Username *</label>
+        <input
+          type="text"
+          placeholder="Choose a username"
+          className="w-full px-3 py-2 border border-red-500 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-red-500"
+        />
+        <p className="text-sm text-red-600">Username is required</p>
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Email *</label>
+        <input
+          type="email"
+          placeholder="Enter a valid email"
+          className="w-full px-3 py-2 border border-green-500 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-green-500"
+        />
+        <p className="text-sm text-green-600">✓ Email looks good</p>
+      </div>
+      <button className="w-full bg-blue-600 text-white py-2 rounded-md text-sm font-medium hover:bg-blue-700">
+        Create Account
+      </button>
+    </form>
+  ),
+};

package/client/ui/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from "../../components/ui/hover-card";
+
+const meta = {
+  title: "UI/HoverCard",
+  component: HoverCard,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger>Hover here</HoverCardTrigger>
+      <HoverCardContent>
+        <div className="space-y-2">
+          <h4 className="font-semibold">Hover Card</h4>
+          <p className="text-sm">This content appears when you hover.</p>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};
+
+export const Profile: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger className="cursor-pointer underline">
+        @username
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="space-y-4">
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 rounded-full bg-gray-200"></div>
+            <div>
+              <h4 className="font-semibold">John Doe</h4>
+              <p className="text-sm text-gray-600">@username</p>
+            </div>
+          </div>
+          <p className="text-sm text-gray-600">
+            A passionate developer building amazing things.
+          </p>
+          <div className="flex gap-4 text-sm">
+            <span>Following: 500</span>
+            <span>Followers: 1.2K</span>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <HoverCard>
+        <HoverCardTrigger className="cursor-pointer underline">
+          Feature 1
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <p className="text-sm">Details about feature 1</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger className="cursor-pointer underline">
+          Feature 2
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <p className="text-sm">Details about feature 2</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger className="cursor-pointer underline">
+          Feature 3
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <p className="text-sm">Details about feature 3</p>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+};