@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/Tag.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "@/components/ui/Tag";
+
+const meta = {
+  title: "Review/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DualStateInactive: Story = {
+  args: {
+    active: false,
+    children: "Tag",
+  },
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">General purpose, inactive</p>
+        <Tag active={false}>Tag</Tag>
+      </div>
+    </div>
+  ),
+};
+
+export const DualStateActive: Story = {
+  args: {
+    active: true,
+    children: "Tag",
+  },
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">General purpose, active</p>
+        <Tag active={true}>Tag</Tag>
+      </div>
+    </div>
+  ),
+};
+
+export const StatusTagsLight: Story = {
+  args: {
+    status: "todo",
+    variant: "light",
+    children: "Todo",
+  },
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm font-semibold text-gray-600 mb-4">
+          Status, light
+        </p>
+        <div className="flex flex-col justify-center items-center gap-6">
+          <Tag status="todo" variant="light">
+            Todo
+          </Tag>
+          <Tag status="low" variant="light">
+            Low
+          </Tag>
+          <Tag status="medium" variant="light">
+            Medium
+          </Tag>
+          <Tag status="high" variant="light">
+            High
+          </Tag>
+          <Tag status="done" variant="light">
+            Done
+          </Tag>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const StatusTagsDark: Story = {
+  args: {
+    status: "todo",
+    variant: "dark",
+    children: "Todo",
+  },
+  render: () => (
+    <div className="space-y-6 bg-gray-900 p-8 rounded-lg">
+      <div>
+        <p className="text-sm font-semibold text-gray-300 mb-4">Status, dark</p>
+        <div className="flex flex-col justify-center items-center gap-6">
+          <Tag status="todo" variant="dark">
+            Todo
+          </Tag>
+          <Tag status="low" variant="dark">
+            Low
+          </Tag>
+          <Tag status="medium" variant="dark">
+            Medium
+          </Tag>
+          <Tag status="high" variant="dark">
+            High
+          </Tag>
+          <Tag status="done" variant="dark">
+            Done
+          </Tag>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  args: {
+    active: false,
+    variant: "light",
+    children: "Tag",
+  },
+  render: (args) => (
+    <div className="space-y-12">
+      <div className="space-y-6">
+        <h3 className="text-base font-semibold text-gray-700">
+          Dual-state tags
+        </h3>
+        <div className="flex flex-col justify-center items-center gap-6">
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              General purpose, inactive
+            </p>
+            <Tag {...args}>Tag</Tag>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              General purpose, active
+            </p>
+            <Tag {...args} active>
+              Tag
+            </Tag>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <h3 className="text-base font-semibold text-gray-700">Status tags</h3>
+        <div className="grid grid-cols-2 gap-12">
+          <div>
+            <p className="text-sm text-gray-600 mb-4">Status, light</p>
+            <div className="flex flex-col justify-center items-center gap-6">
+              <Tag {...args} variant="light" status="todo">
+                Todo
+              </Tag>
+              <Tag {...args} variant="light" status="low">
+                Low
+              </Tag>
+              <Tag {...args} variant="light" status="medium">
+                Medium
+              </Tag>
+              <Tag {...args} variant="light" status="high">
+                High
+              </Tag>
+              <Tag {...args} variant="light" status="done">
+                Done
+              </Tag>
+            </div>
+          </div>
+          <div className="bg-gray-900 p-6 rounded-lg">
+            <p className="text-sm text-gray-300 mb-4">Status, dark</p>
+            <div className="flex flex-col justify-center items-center gap-6">
+              <Tag {...args} variant="dark" status="todo">
+                Todo
+              </Tag>
+              <Tag {...args} variant="dark" status="low">
+                Low
+              </Tag>
+              <Tag {...args} variant="dark" status="medium">
+                Medium
+              </Tag>
+              <Tag {...args} variant="dark" status="high">
+                High
+              </Tag>
+              <Tag {...args} variant="dark" status="done">
+                Done
+              </Tag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Textarea/Textarea.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "../../components/ui/textarea";
+
+const meta = {
+  title: "UI/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter your message here...",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    placeholder: "Enter your message here...",
+    value: "This is some pre-filled text.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "This textarea is disabled",
+    disabled: true,
+  },
+};
+
+export const Rows: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <div>
+        <label className="text-sm font-medium mb-2 block">Small (3 rows)</label>
+        <Textarea placeholder="Type here..." rows={3} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">
+          Medium (5 rows)
+        </label>
+        <Textarea placeholder="Type here..." rows={5} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Large (8 rows)</label>
+        <Textarea placeholder="Type here..." rows={8} />
+      </div>
+    </div>
+  ),
+};

package/client/ui/Toast/Toast.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useToast } from "../../hooks/use-toast";
+import { Button } from "../../components/ui/button";
+import { Toast, ToastAction } from "../../components/ui/toast";
+
+const meta = {
+  title: "UI/Toast",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => {
+    const { toast } = useToast();
+
+    return (
+      <Button
+        onClick={() =>
+          toast({
+            title: "Success",
+            description: "Your action was successful.",
+          })
+        }
+      >
+        Show Toast
+      </Button>
+    );
+  },
+};
+
+export const WithAction: Story = {
+  render: () => {
+    const { toast } = useToast();
+
+    return (
+      <Button
+        onClick={() =>
+          toast({
+            title: "Undo Action",
+            description: "You can undo this action.",
+            action: <ToastAction altText="Undo">Undo</ToastAction>,
+          })
+        }
+      >
+        Show Toast with Action
+      </Button>
+    );
+  },
+};
+
+export const Destructive: Story = {
+  render: () => {
+    const { toast } = useToast();
+
+    return (
+      <Button
+        variant="destructive"
+        onClick={() =>
+          toast({
+            title: "Error",
+            description: "Something went wrong.",
+            variant: "destructive",
+          })
+        }
+      >
+        Show Error Toast
+      </Button>
+    );
+  },
+};

package/client/ui/Toaster/Toaster.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "../../components/ui/toaster";
+import { useToast } from "../../hooks/use-toast";
+import { Button } from "../../components/ui/button";
+
+const meta = {
+  title: "UI/Toaster",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => {
+    const { toast } = useToast();
+
+    return (
+      <div className="space-y-4">
+        <Toaster />
+        <div className="space-y-2">
+          <Button
+            onClick={() =>
+              toast({
+                title: "Success",
+                description: "Your changes have been saved.",
+              })
+            }
+          >
+            Show Success Toast
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() =>
+              toast({
+                title: "Error",
+                description: "Something went wrong.",
+                variant: "destructive",
+              })
+            }
+          >
+            Show Error Toast
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/Toggle.stories.tsx

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SegmentedControl } from "../components/ui/Toggle";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { UtilityAccordion } from "@/components/icons/UtilityAccordion";
+import { UtilityText } from "@/components/icons/UtilityText";
+
+const meta = {
+  title: "Review/Toggle",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Complete Design System Overview
+export const AllToggleVariants: Story = {
+  args: {
+    options: [{ label: "Placeholder", value: "placeholder" }],
+  },
+  render: () => {
+    const [segmentedValue, setSegmentedValue] = useState("active");
+    const [viewValue, setViewValue] = useState<"grid" | "list">("grid");
+
+    return (
+      <div className="bg-[#FAFAFA] p-16 space-y-20">
+        {/* Utility Toggles Section */}
+        <div className="space-y-12">
+          <div>
+            <h3 className="text-lg font-semibold text-[#4E4F57] mb-8">
+              Utility toggles
+            </h3>
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <p className="text-[#4E4F57]">Modal pagination</p>
+                <div className="inline-flex items-center overflow-hidden border border-gray-100 bg-white rounded-full transition-all h-8 gap-0">
+                  <button
+                    className={cn(
+                      "inline-flex items-center justify-center w-12 h-8 rounded-full text-gray-500 hover:bg-gray-50 disabled:opacity-50 transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring bg-gray-100",
+                    )}
+                    onClick={() => console.log("Previous")}
+                    type="button"
+                    aria-label="Previous page"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="10"
+                      height="2"
+                      viewBox="0 0 10 2"
+                      fill="none"
+                    >
+                      <path
+                        d="M0.75 0.75L8.75 0.75"
+                        stroke="#71747D"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    className={cn(
+                      "inline-flex items-center justify-center w-12 h-8 rounded-full text-gray-500 hover:bg-gray-50 disabled:opacity-50 transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring bg-white",
+                    )}
+                    onClick={() => console.log("Next")}
+                    type="button"
+                    aria-label="Next page"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="10"
+                      viewBox="0 0 16 10"
+                      fill="none"
+                    >
+                      <path
+                        d="M10.75 0.75L14.75 4.75L10.75 8.75"
+                        stroke="#71747D"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M14.75 4.75H0.75"
+                        stroke="#71747D"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* State Controls Section */}
+        <div className="space-y-12">
+          <div>
+            <h3 className="text-lg font-semibold text-[#4E4F57] mb-8">
+              State controls
+            </h3>
+            <div className="space-y-8">
+              <div className="space-y-4">
+                <p className="text-[#4E4F57]">Segmented control</p>
+                <SegmentedControl
+                  className="inline-flex items-center overflow-hidden border border-gray-100 bg-white rounded-full transition-all h-8 p-0 [&>button]:flex-1"
+                  options={[
+                    { label: "Active", value: "active" },
+                    { label: "Inactive", value: "inactive" },
+                  ]}
+                  value={segmentedValue}
+                  onValueChange={setSegmentedValue}
+                />
+              </div>
+              <div className="space-y-4">
+                <p className="text-[#4E4F57]">View control</p>
+                <SegmentedControl<"grid" | "list">
+                  className="inline-flex items-center overflow-hidden border border-gray-100 bg-white rounded-full transition-all h-8 p-0 [&>button]:w-12 [&>button]:px-0 [&>button]:text-gray-500 [&>button[data-active='true']]:bg-cyan-700 [&>button[data-active='true']]:text-white"
+                  options={[
+                    {
+                      label: <UtilityAccordion />,
+                      value: "grid",
+                    },
+                    {
+                      label: <UtilityText />,
+                      value: "list",
+                    },
+                  ]}
+                  value={viewValue}
+                  defaultValue="grid"
+                  onValueChange={setViewValue}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Segmented Control Stories
+export const SegmentedControlExample: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("active");
+    return (
+      <SegmentedControl
+        {...args}
+        className="inline-flex items-center overflow-hidden border border-gray-100 bg-white rounded-full transition-all h-8 p-0 [&>button]:flex-1"
+        value={value}
+        onValueChange={setValue}
+      />
+    );
+  },
+  args: {
+    options: [
+      { label: "Active", value: "active" },
+      { label: "Inactive", value: "inactive" },
+    ],
+  },
+};
+
+// Pagination Control Stories
+export const PaginationControlExample: Story = {
+  args: {
+    options: [{ label: "Placeholder", value: "placeholder" }],
+  },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 5;
+
+    return (
+      <div className="flex items-center gap-4">
+        <div className="inline-flex items-center overflow-hidden border border-gray-100 bg-white rounded-full transition-all h-8 gap-0">
+          <button
+            className={cn(
+              "inline-flex items-center justify-center w-12 h-8 rounded-full text-gray-500 hover:bg-gray-50 disabled:opacity-50 transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring bg-gray-100",
+            )}
+            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+            disabled={currentPage === 1}
+            type="button"
+            aria-label="Previous page"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="2"
+              viewBox="0 0 10 2"
+              fill="none"
+            >
+              <path
+                d="M0.75 0.75L8.75 0.75"
+                stroke="#71747D"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+          <button
+            className={cn(
+              "inline-flex items-center justify-center w-12 h-8 rounded-full text-gray-500 hover:bg-gray-50 disabled:opacity-50 transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring bg-white",
+            )}
+            onClick={() =>
+              setCurrentPage(Math.min(totalPages, currentPage + 1))
+            }
+            disabled={currentPage === totalPages}
+            type="button"
+            aria-label="Next page"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="10"
+              viewBox="0 0 16 10"
+              fill="none"
+            >
+              <path
+                d="M10.75 0.75L14.75 4.75L10.75 8.75"
+                stroke="#71747D"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M14.75 4.75H0.75"
+                stroke="#71747D"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <span className="text-sm text-gray-600">
+          Page {currentPage} of {totalPages}
+        </span>
+      </div>
+    );
+  },
+};