@syscore/ui-library 1.1.9 → 1.1.11

package/client/ui/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea } from "../../components/ui/scroll-area";
+
+const meta = {
+  title: "UI/ScrollArea",
+  component: ScrollArea,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ScrollArea className="h-48 w-48 rounded-md border p-4">
+      <div className="space-y-2">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="text-sm">
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <ScrollArea className="h-64 w-full max-w-md rounded-md border p-4">
+      <div className="space-y-4">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="pb-4 last:pb-0">
+            <h4 className="font-semibold text-sm">Item {i + 1}</h4>
+            <p className="text-sm text-gray-600 line-clamp-2">
+              This is a sample content item with some text that might wrap to
+              multiple lines.
+            </p>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-full h-32 rounded-md border">
+      <div className="flex gap-4 p-4">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div
+            key={i}
+            className="shrink-0 w-20 h-20 bg-gray-200 rounded flex items-center justify-center text-sm font-medium"
+          >
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

package/client/ui/SearchField.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchField } from "@/components/ui/SearchField";
+
+const meta = {
+  title: "Review/SearchField",
+  component: SearchField,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof SearchField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const mockOptions = [
+  { value: "1", label: "Air Quality" },
+  { value: "2", label: "Water Quality" },
+  { value: "3", label: "Light Quality" },
+  { value: "4", label: "Thermal Comfort" },
+  { value: "5", label: "Sound Quality" },
+  { value: "6", label: "Movement" },
+  { value: "7", label: "Nourishment" },
+  { value: "8", label: "Mind" },
+  { value: "9", label: "Community" },
+  { value: "10", label: "Materials" },
+];
+
+export const Default: Story = {
+  args: {
+    options: mockOptions,
+    emptyMessage: "No results found",
+    placeholder: "Search...",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    options: mockOptions,
+    emptyMessage: "No results found",
+    placeholder: "Search...",
+    value: { value: "1", label: "Air Quality" },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    options: mockOptions,
+    emptyMessage: "No results found",
+    placeholder: "Search...",
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options: mockOptions,
+    emptyMessage: "No results found",
+    placeholder: "Search...",
+    disabled: true,
+  },
+};

package/client/ui/Select/Select.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/ui/select";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Select",
+  component: Select,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger className="w-48">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+  },
+};
+
+export const Countries: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger className="w-56">
+          <SelectValue placeholder="Select a country" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="us">United States</SelectItem>
+          <SelectItem value="ca">Canada</SelectItem>
+          <SelectItem value="uk">United Kingdom</SelectItem>
+          <SelectItem value="au">Australia</SelectItem>
+          <SelectItem value="de">Germany</SelectItem>
+          <SelectItem value="fr">France</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-48">
+        <SelectValue placeholder="Disabled select" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="space-y-2 w-full max-w-md">
+        <label className="text-sm font-medium">Choose a plan</label>
+        <Select value={value} onValueChange={setValue}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a plan" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="free">
+              <div>
+                <p className="font-medium">Free</p>
+                <p className="text-sm text-gray-500">Basic features</p>
+              </div>
+            </SelectItem>
+            <SelectItem value="pro">
+              <div>
+                <p className="font-medium">Pro</p>
+                <p className="text-sm text-gray-500">Advanced features</p>
+              </div>
+            </SelectItem>
+            <SelectItem value="enterprise">
+              <div>
+                <p className="font-medium">Enterprise</p>
+                <p className="text-sm text-gray-500">Custom solutions</p>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  },
+};

package/client/ui/Separator/Separator.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "../../components/ui/separator";
+
+const meta = {
+  title: "UI/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <div>
+        <h4 className="font-semibold">Section One</h4>
+        <p className="text-sm text-gray-600">Some content here</p>
+      </div>
+      <Separator />
+      <div>
+        <h4 className="font-semibold">Section Two</h4>
+        <p className="text-sm text-gray-600">More content here</p>
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 h-12 max-w-md">
+      <div>
+        <span className="text-sm font-semibold">Item 1</span>
+      </div>
+      <Separator orientation="vertical" />
+      <div>
+        <span className="text-sm font-semibold">Item 2</span>
+      </div>
+      <Separator orientation="vertical" />
+      <div>
+        <span className="text-sm font-semibold">Item 3</span>
+      </div>
+    </div>
+  ),
+};
+
+export const WithMargin: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <div className="space-y-2 mb-4">
+        <h3 className="font-semibold">Content Section</h3>
+        <p className="text-sm text-gray-600">This is the main content area.</p>
+      </div>
+      <Separator className="my-4" />
+      <div className="space-y-2">
+        <h3 className="font-semibold">Another Section</h3>
+        <p className="text-sm text-gray-600">
+          This section is separated from the previous one.
+        </p>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Sheet/Sheet.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from "../../components/ui/sheet";
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button>Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>Sheet description goes here.</SheetDescription>
+          </SheetHeader>
+          <div className="py-4">
+            <p className="text-sm">Sheet content</p>
+          </div>
+          <SheetFooter>
+            <Button onClick={() => setOpen(false)}>Done</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+};
+
+export const Left: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button>Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <SheetHeader>
+            <SheetTitle>Navigation</SheetTitle>
+          </SheetHeader>
+          <div className="space-y-2 py-4">
+            <button className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded">
+              Home
+            </button>
+            <button className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded">
+              About
+            </button>
+            <button className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded">
+              Contact
+            </button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+};
+
+export const Top: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button>Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="top">
+          <SheetHeader>
+            <SheetTitle>Top Sheet</SheetTitle>
+          </SheetHeader>
+          <div className="py-4">
+            <p className="text-sm">Top sheet content</p>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+};
+
+export const WithForm: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button>Add Item</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Add New Item</SheetTitle>
+            <SheetDescription>Fill in the details below</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Name</label>
+              <input
+                className="w-full border rounded px-3 py-2 text-sm"
+                placeholder="Item name"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Description</label>
+              <textarea
+                className="w-full border rounded px-3 py-2 text-sm"
+                placeholder="Item description"
+              />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button onClick={() => setOpen(false)}>Add Item</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+};

package/client/ui/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarFooter,
+} from "../../components/ui/sidebar";
+import { Home, Settings, Users, CreditCard, LogOut } from "lucide-react";
+
+const meta = {
+  title: "UI/Sidebar",
+  component: Sidebar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex gap-4 border rounded-lg overflow-hidden h-96">
+      <Sidebar>
+        <SidebarHeader>
+          <h2 className="font-semibold">App</h2>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Main</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <Home className="h-4 w-4 mr-2" />
+                    Home
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <Users className="h-4 w-4 mr-2" />
+                    Users
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+          <SidebarGroup>
+            <SidebarGroupLabel>Settings</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <Settings className="h-4 w-4 mr-2" />
+                    Settings
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <CreditCard className="h-4 w-4 mr-2" />
+                    Billing
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton>
+                <LogOut className="h-4 w-4 mr-2" />
+                Logout
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <div className="flex-1 p-4 bg-gray-50">
+        <p className="text-sm text-gray-600">Main content area</p>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "../../components/ui/skeleton";
+
+const meta = {
+  title: "UI/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="w-12 h-12 rounded-full" />,
+};
+
+export const Card: Story = {
+  render: () => (
+    <div className="space-y-3 w-full max-w-sm p-4 bg-white rounded-lg border">
+      <Skeleton className="h-12 rounded-full w-12" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+      <div className="pt-2 space-y-2">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-5/6" />
+      </div>
+    </div>
+  ),
+};
+
+export const Avatar: Story = {
+  render: () => <Skeleton className="h-12 w-12 rounded-full" />,
+};
+
+export const CardGrid: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="space-y-3 p-4 bg-white rounded-lg border">
+          <Skeleton className="h-48 w-full rounded" />
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-1/2" />
+          <div className="pt-2 space-y-2">
+            <Skeleton className="h-3 w-full" />
+            <Skeleton className="h-3 w-5/6" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Text: Story = {
+  render: () => (
+    <div className="space-y-2 w-full max-w-md">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-4/6" />
+    </div>
+  ),
+};