@syscore/ui-library 1.1.10 → 1.1.11

package/client/ui/Slider/Slider.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "../../components/ui/slider";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div className="w-full max-w-md space-y-4">
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={100}
+          step={1}
+        />
+        <p className="text-sm text-gray-600">Value: {value[0]}</p>
+      </div>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState([20, 80]);
+    return (
+      <div className="w-full max-w-md space-y-4">
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={100}
+          step={1}
+        />
+        <p className="text-sm text-gray-600">
+          Range: {value[0]} - {value[1]}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const WithSteps: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    const steps = [0, 25, 50, 75, 100];
+    return (
+      <div className="w-full max-w-md space-y-4">
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={100}
+          step={25}
+        />
+        <div className="flex justify-between text-xs text-gray-600">
+          {steps.map((step) => (
+            <span key={step}>{step}</span>
+          ))}
+        </div>
+        <p className="text-sm text-gray-600">Value: {value[0]}</p>
+      </div>
+    );
+  },
+};
+
+export const Price: Story = {
+  render: () => {
+    const [value, setValue] = useState([250, 750]);
+    return (
+      <div className="w-full max-w-md space-y-4">
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={1000}
+          step={10}
+        />
+        <div className="flex justify-between items-center">
+          <p className="text-sm font-medium">Price Range</p>
+          <p className="text-sm font-medium">
+            ${value[0]} - ${value[1]}
+          </p>
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/Sonner/Sonner.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "UI/Sonner",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 border rounded-lg max-w-md">
+      <h3 className="font-semibold mb-2">Sonner Toast Component</h3>
+      <p className="text-sm text-gray-600 mb-4">
+        Sonner is a toast notification library for React. This component can be
+        configured to show various types of notifications.
+      </p>
+      <div className="space-y-2">
+        <button className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
+          Show Success
+        </button>
+        <button className="w-full px-4 py-2 text-sm bg-red-600 text-white rounded hover:bg-red-700">
+          Show Error
+        </button>
+        <button className="w-full px-4 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700">
+          Show Warning
+        </button>
+      </div>
+    </div>
+  ),
+};
+
+export const Info: Story = {
+  render: () => (
+    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg max-w-md">
+      <h4 className="font-medium text-blue-900 mb-1">Info</h4>
+      <p className="text-sm text-blue-800">
+        Sonner provides a simple way to display notifications to users with
+        various positions and configurations.
+      </p>
+    </div>
+  ),
+};

package/client/ui/StrategyTable.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StrategyTable } from "@/components/ui/StrategyTable";
+import {
+  IconConceptMind,
+  IconConceptCommunity,
+  IconConceptMovement,
+} from "@/components/icons/ConceptIcons";
+
+const meta = {
+  title: "Review/StrategyTable",
+  component: StrategyTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof StrategyTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const mockData = [
+  {
+    concept: {
+      id: "mind",
+      type: "mind" as const,
+      name: "Mind",
+      icon: <IconConceptMind />,
+    },
+    theme: {
+      id: "theme1",
+      code: "M01",
+      name: "Mental Health Support",
+    },
+    strategies: [
+      {
+        id: "strategy1",
+        code: "M01.1",
+        name: "Mental Health Support Policy",
+        score: "12",
+        hasTarget: true,
+      },
+      {
+        id: "strategy2",
+        code: "M01.2",
+        name: "Mental Health Resources",
+        score: "8",
+        hasTarget: false,
+      },
+    ],
+  },
+  {
+    concept: {
+      id: "community",
+      type: "community" as const,
+      name: "Community",
+      icon: <IconConceptCommunity />,
+    },
+    theme: {
+      id: "theme2",
+      code: "C01",
+      name: "Social Equity",
+    },
+    strategies: [
+      {
+        id: "strategy3",
+        code: "C01.1",
+        name: "Accessibility Features",
+        score: "15",
+        hasTarget: true,
+      },
+    ],
+  },
+  {
+    concept: {
+      id: "movement",
+      type: "movement" as const,
+      name: "Movement",
+      icon: <IconConceptMovement />,
+    },
+    theme: {
+      id: "theme3",
+      code: "V01",
+      name: "Physical Activity",
+    },
+    strategies: [
+      {
+        id: "strategy4",
+        code: "V01.1",
+        name: "Active Design",
+        score: "10",
+        hasTarget: false,
+      },
+      {
+        id: "strategy5",
+        code: "V01.2",
+        name: "Exercise Facilities",
+        score: "6",
+        hasTarget: true,
+      },
+    ],
+  },
+];
+
+export const Default: Story = {
+  render: () => <StrategyTable data={mockData} />,
+};
+
+export const SingleConcept: Story = {
+  render: () => (
+    <StrategyTable
+      data={[
+        {
+          concept: {
+            id: "mind",
+            type: "mind" as const,
+            name: "Mind",
+            icon: <IconConceptMind />,
+          },
+          theme: {
+            id: "theme1",
+            code: "M01",
+            name: "Mental Health Support",
+          },
+          strategies: [
+            {
+              id: "strategy1",
+              code: "M01.1",
+              name: "Mental Health Support Policy",
+              score: "12",
+              hasTarget: true,
+            },
+          ],
+        },
+      ]}
+    />
+  ),
+};

package/client/ui/Switch/Switch.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "../../components/ui/switch";
+import { Label } from "../../components/ui/Label";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Switch checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return <Switch checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <Switch disabled />,
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="notifications"
+          checked={checked}
+          onCheckedChange={setChecked}
+        />
+        <Label htmlFor="notifications">Enable notifications</Label>
+      </div>
+    );
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [settings, setSettings] = useState({
+      email: true,
+      push: false,
+      sms: false,
+    });
+
+    return (
+      <div className="space-y-4 w-full max-w-md">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="email">Email Notifications</Label>
+          <Switch
+            id="email"
+            checked={settings.email}
+            onCheckedChange={(value) =>
+              setSettings({ ...settings, email: value })
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <Label htmlFor="push">Push Notifications</Label>
+          <Switch
+            id="push"
+            checked={settings.push}
+            onCheckedChange={(value) =>
+              setSettings({ ...settings, push: value })
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <Label htmlFor="sms">SMS Notifications</Label>
+          <Switch
+            id="sms"
+            checked={settings.sms}
+            onCheckedChange={(value) =>
+              setSettings({ ...settings, sms: value })
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/Table/Table.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+
+const meta = {
+  title: "UI/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="overflow-x-auto w-full max-w-2xl">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Jane Smith</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>User</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Bob Johnson</TableCell>
+            <TableCell>bob@example.com</TableCell>
+            <TableCell>Moderator</TableCell>
+            <TableCell>Inactive</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};
+
+export const WithBadges: Story = {
+  render: () => (
+    <div className="overflow-x-auto w-full max-w-2xl">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Product</TableHead>
+            <TableHead>Price</TableHead>
+            <TableHead>Quantity</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Laptop</TableCell>
+            <TableCell>$999</TableCell>
+            <TableCell>5</TableCell>
+            <TableCell>
+              <span className="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800">
+                In Stock
+              </span>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Monitor</TableCell>
+            <TableCell>$299</TableCell>
+            <TableCell>0</TableCell>
+            <TableCell>
+              <span className="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-800">
+                Out of Stock
+              </span>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Keyboard</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>2</TableCell>
+            <TableCell>
+              <span className="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-xs font-medium text-yellow-800">
+                Low Stock
+              </span>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};
+
+export const Striped: Story = {
+  render: () => (
+    <div className="overflow-x-auto w-full max-w-2xl">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>ID</TableHead>
+            <TableHead>Project</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead>Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[1, 2, 3, 4, 5].map((row, idx) => (
+            <TableRow key={idx} className={idx % 2 === 0 ? "bg-gray-50" : ""}>
+              <TableCell>{String(row).padStart(4, "0")}</TableCell>
+              <TableCell>Project {row}</TableCell>
+              <TableCell>2024-01-{String(row).padStart(2, "0")}</TableCell>
+              <TableCell>${(row * 1000).toFixed(2)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};

package/client/ui/Tabs.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimatedTabs } from "@/components/ui/Tabs";
+
+const meta = {
+  title: "Review/Tabs",
+  component: AnimatedTabs,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof AnimatedTabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const tabs = [
+  { label: "Home", value: "home" },
+  { label: "About", value: "about" },
+  { label: "Contact", value: "contact" },
+];
+
+export const Default: Story = {
+  render: () => <AnimatedTabs tabs={tabs} />,
+};
+
+export const WithDangerZone: Story = {
+  render: () => (
+    <AnimatedTabs
+      tabs={[...tabs, { label: "Danger Zone", value: "danger-zone" }]}
+    />
+  ),
+};