@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/Chart/Chart.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "UI/Chart",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl p-4 border rounded-lg">
+      <h3 className="font-semibold mb-4">Chart Component</h3>
+      <p className="text-sm text-gray-600 mb-4">
+        Chart component for data visualization. This can be configured with
+        various chart types and data sets.
+      </p>
+      <div className="bg-gray-50 p-8 rounded text-center text-gray-500">
+        Chart visualization would be rendered here
+      </div>
+    </div>
+  ),
+};
+
+export const Placeholder: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-2xl">
+      <div className="p-4 border rounded-lg">
+        <h4 className="font-medium mb-2">Bar Chart</h4>
+        <div className="bg-gray-100 h-40 rounded flex items-end gap-2 p-4">
+          {[60, 85, 45, 90, 70].map((height, i) => (
+            <div
+              key={i}
+              className="flex-1 bg-blue-500 rounded-t"
+              style={{ height: `${height * 1.5}px` }}
+            ></div>
+          ))}
+        </div>
+      </div>
+      <div className="p-4 border rounded-lg">
+        <h4 className="font-medium mb-2">Line Chart</h4>
+        <svg className="w-full h-40" viewBox="0 0 400 100">
+          <polyline
+            fill="none"
+            stroke="#3b82f6"
+            strokeWidth="2"
+            points="0,80 50,60 100,70 150,40 200,50 250,30 300,45 350,20 400,35"
+          />
+        </svg>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "../../components/ui/checkbox";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return <Checkbox checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <Checkbox disabled />,
+};
+
+export const DisabledAndChecked: Story = {
+  render: () => <Checkbox disabled checked />,
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
+        <label
+          htmlFor="terms"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+      </div>
+    );
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [checked, setChecked] = useState({
+      terms: false,
+      newsletter: false,
+      privacy: false,
+    });
+
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="terms"
+            checked={checked.terms}
+            onCheckedChange={(value) =>
+              setChecked({ ...checked, terms: Boolean(value) })
+            }
+          />
+          <label htmlFor="terms" className="text-sm font-medium cursor-pointer">
+            I agree to the terms
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="newsletter"
+            checked={checked.newsletter}
+            onCheckedChange={(value) =>
+              setChecked({ ...checked, newsletter: Boolean(value) })
+            }
+          />
+          <label
+            htmlFor="newsletter"
+            className="text-sm font-medium cursor-pointer"
+          >
+            Subscribe to newsletter
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="privacy"
+            checked={checked.privacy}
+            onCheckedChange={(value) =>
+              setChecked({ ...checked, privacy: Boolean(value) })
+            }
+          />
+          <label
+            htmlFor="privacy"
+            className="text-sm font-medium cursor-pointer"
+          >
+            Accept privacy policy
+          </label>
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../../components/ui/collapsible";
+import { Button } from "../../components/ui/button";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="w-full max-w-sm space-y-2"
+      >
+        <div className="flex items-center justify-between space-x-4 px-4">
+          <h4 className="text-sm font-semibold">Show Details</h4>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm" className="w-9 p-0">
+              <ChevronDown className="h-4 w-4" />
+              <span className="sr-only">Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className="space-y-2">
+          <div className="rounded-md border px-4 py-3 text-sm">
+            This is the hidden content that appears when expanded.
+          </div>
+          <div className="rounded-md border px-4 py-3 text-sm">
+            You can put multiple elements inside the collapsible content.
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [openItems, setOpenItems] = useState({ item1: false, item2: false });
+
+    const toggleItem = (key: string) => {
+      setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    return (
+      <div className="space-y-4 w-full max-w-sm">
+        <Collapsible
+          open={openItems.item1}
+          onOpenChange={() => toggleItem("item1")}
+        >
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" className="w-full justify-start">
+              <ChevronDown
+                className={`h-4 w-4 mr-2 transition-transform ${openItems.item1 ? "rotate-180" : ""}`}
+              />
+              Section 1
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pl-6 space-y-2">
+            <p className="text-sm">Content for section 1</p>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <Collapsible
+          open={openItems.item2}
+          onOpenChange={() => toggleItem("item2")}
+        >
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" className="w-full justify-start">
+              <ChevronDown
+                className={`h-4 w-4 mr-2 transition-transform ${openItems.item2 ? "rotate-180" : ""}`}
+              />
+              Section 2
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pl-6 space-y-2">
+            <p className="text-sm">Content for section 2</p>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    );
+  },
+};