@syscore/ui-library 1.1.10 → 1.1.11

package/client/ui/Navigation.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Navigation } from "@/components/ui/Navigation";
+
+const meta = {
+  title: "Review/Navigation",
+  component: Navigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Navigation>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const navItems = [
+  { label: "WELL", active: true },
+  { label: "Pursuits", active: false },
+  { label: "Network", active: false },
+  { label: "Knowledge", active: false },
+  { label: "IWBI", active: false },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+      <Navigation
+        navItems={navItems}
+        isStrategy={false}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">
+          Navigation component is fixed at the top.
+        </p>
+        <p className="text-gray-600">Hover over menu items to see dropdowns.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const StrategyMode: Story = {
+  render: () => (
+    <div className="h-screen bg-white">
+      <Navigation
+        navItems={navItems}
+        isStrategy={true}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">Strategy mode navigation.</p>
+      </div>
+    </div>
+  ),
+};

package/client/ui/NavigationMenu/NavigationMenu.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+} from "../../components/ui/navigation-menu";
+
+const meta = {
+  title: "UI/NavigationMenu",
+  component: NavigationMenu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof NavigationMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid gap-4 p-4 md:w-[400px] lg:w-[500px]">
+              <div className="space-y-1">
+                <NavigationMenuLink
+                  href="/docs"
+                  className="block text-sm font-medium"
+                >
+                  Introduction
+                </NavigationMenuLink>
+                <p className="text-sm text-gray-600">
+                  Get started with our guides and tutorials.
+                </p>
+              </div>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid gap-4 p-4 md:w-[400px] lg:w-[500px]">
+              <div className="space-y-1">
+                <NavigationMenuLink
+                  href="/docs/components"
+                  className="block text-sm font-medium"
+                >
+                  All Components
+                </NavigationMenuLink>
+                <p className="text-sm text-gray-600">
+                  Browse our component library.
+                </p>
+              </div>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="/docs/api" className="text-sm font-medium">
+            Documentation
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};
+
+export const Complex: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <li>
+                <NavigationMenuLink
+                  href="#"
+                  className="block p-3 rounded-lg hover:bg-gray-100"
+                >
+                  <div className="text-sm font-medium">Pro</div>
+                  <p className="text-xs text-gray-600">Advanced features</p>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink
+                  href="#"
+                  className="block p-3 rounded-lg hover:bg-gray-100"
+                >
+                  <div className="text-sm font-medium">Team</div>
+                  <p className="text-xs text-gray-600">For teams</p>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};

package/client/ui/Pagination/Pagination.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/ui/pagination";
+
+const meta = {
+  title: "UI/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};
+
+export const Extended: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        {[1, 2, 3, 4, 5, 6, 7, 8].map((page) => (
+          <PaginationItem key={page}>
+            <PaginationLink href="#" isActive={page === 3}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">10</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            11
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">12</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">20</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};

package/client/ui/Popover/Popover.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Popover",
+  component: Popover,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="space-y-2">
+            <h4 className="font-semibold text-sm">Popover Title</h4>
+            <p className="text-sm text-gray-600">
+              This is the popover content. Click outside to close.
+            </p>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+};
+
+export const WithMenu: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Menu</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-48">
+          <div className="space-y-2">
+            <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded">
+              Option 1
+            </button>
+            <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded">
+              Option 2
+            </button>
+            <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded">
+              Option 3
+            </button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+};
+
+export const Profile: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="ghost">Profile</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-64">
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-gray-200"></div>
+              <div>
+                <p className="text-sm font-semibold">John Doe</p>
+                <p className="text-xs text-gray-600">john@example.com</p>
+              </div>
+            </div>
+            <hr className="my-2" />
+            <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded">
+              Settings
+            </button>
+            <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded">
+              Sign Out
+            </button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+};

package/client/ui/Progress/Progress.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Progress } from "../../components/ui/progress";
+
+const meta = {
+  title: "UI/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 65,
+  },
+};
+
+export const Values: Story = {
+  render: () => (
+    <div className="space-y-6 w-full max-w-md">
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span>0%</span>
+          <span>0%</span>
+        </div>
+        <Progress value={0} />
+      </div>
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span>Loading...</span>
+          <span>25%</span>
+        </div>
+        <Progress value={25} />
+      </div>
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span>Processing...</span>
+          <span>50%</span>
+        </div>
+        <Progress value={50} />
+      </div>
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span>Almost done...</span>
+          <span>75%</span>
+        </div>
+        <Progress value={75} />
+      </div>
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span>Complete</span>
+          <span>100%</span>
+        </div>
+        <Progress value={100} />
+      </div>
+    </div>
+  ),
+};

package/client/ui/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
+import { Label } from "../../components/ui/Label";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <RadioGroup value={value} onValueChange={setValue}>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option-1" id="option-1" />
+          <Label htmlFor="option-1">Option 1</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option-2" id="option-2" />
+          <Label htmlFor="option-2">Option 2</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option-3" id="option-3" />
+          <Label htmlFor="option-3">Option 3</Label>
+        </div>
+      </RadioGroup>
+    );
+  },
+};
+
+export const Vertical: Story = {
+  render: () => {
+    const [value, setValue] = useState("comfort");
+    return (
+      <RadioGroup value={value} onValueChange={setValue}>
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="comfortable" />
+            <Label htmlFor="comfortable">Comfortable</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="compact" />
+            <Label htmlFor="compact">Compact</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="spacious" id="spacious" />
+            <Label htmlFor="spacious">Spacious</Label>
+          </div>
+        </div>
+      </RadioGroup>
+    );
+  },
+};
+
+export const WithDescription: Story = {
+  render: () => {
+    const [value, setValue] = useState("free");
+    return (
+      <RadioGroup
+        value={value}
+        onValueChange={setValue}
+        className="w-full max-w-md"
+      >
+        <div className="space-y-4">
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="free" id="free" className="mt-1" />
+            <div>
+              <Label htmlFor="free">Free</Label>
+              <p className="text-sm text-gray-600 mt-1">
+                All basic features included
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="pro" id="pro" className="mt-1" />
+            <div>
+              <Label htmlFor="pro">Pro</Label>
+              <p className="text-sm text-gray-600 mt-1">
+                Advanced features and priority support
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem
+              value="enterprise"
+              id="enterprise"
+              className="mt-1"
+            />
+            <div>
+              <Label htmlFor="enterprise">Enterprise</Label>
+              <p className="text-sm text-gray-600 mt-1">
+                Custom solutions and dedicated support
+              </p>
+            </div>
+          </div>
+        </div>
+      </RadioGroup>
+    );
+  },
+};

package/client/ui/Resizable/Resizable.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "../../components/ui/resizable";
+
+const meta = {
+  title: "UI/Resizable",
+  component: ResizablePanelGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="w-full h-64 rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <div className="flex items-center justify-center h-full bg-gray-50">
+          <span className="text-gray-600">Panel 1</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <div className="flex items-center justify-center h-full bg-gray-100">
+          <span className="text-gray-600">Panel 2</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="w-full h-96 rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <div className="flex items-center justify-center h-full bg-blue-50">
+          <span className="text-gray-600">Top Panel</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <div className="flex items-center justify-center h-full bg-blue-100">
+          <span className="text-gray-600">Bottom Panel</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="w-full h-64 rounded-lg border"
+    >
+      <ResizablePanel defaultSize={33} minSize={15}>
+        <div className="flex items-center justify-center h-full bg-gray-50">
+          <span className="text-gray-600">Left</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={34} minSize={15}>
+        <div className="flex items-center justify-center h-full bg-gray-100">
+          <span className="text-gray-600">Center</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={33} minSize={15}>
+        <div className="flex items-center justify-center h-full bg-gray-200">
+          <span className="text-gray-600">Right</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};