@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/ui/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-} from "../../components/ui/dropdown-menu";
-import { Button } from "../../components/ui/button";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-
-const meta = {
-  title: "UI/DropdownMenu",
-  component: DropdownMenu,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-} satisfies Meta<typeof DropdownMenu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">
-          Open Menu
-          <ChevronDown className="ml-2 h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuItem>Profile</DropdownMenuItem>
-        <DropdownMenuItem>Settings</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>Sign Out</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const WithCheckboxes: Story = {
-  render: () => {
-    const [items, setItems] = useState({
-      bold: false,
-      italic: false,
-      underline: false,
-    });
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Text Options</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuCheckboxItem
-            checked={items.bold}
-            onCheckedChange={(checked) => setItems({ ...items, bold: checked })}
-          >
-            Bold
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={items.italic}
-            onCheckedChange={(checked) =>
-              setItems({ ...items, italic: checked })
-            }
-          >
-            Italic
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={items.underline}
-            onCheckedChange={(checked) =>
-              setItems({ ...items, underline: checked })
-            }
-          >
-            Underline
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};
-
-export const WithRadio: Story = {
-  render: () => {
-    const [theme, setTheme] = useState("light");
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Theme</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-            <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};
-
-export const Complex: Story = {
-  render: () => {
-    const [showNotifications, setShowNotifications] = useState(true);
-    const [theme, setTheme] = useState("light");
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Menu</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuCheckboxItem
-            checked={showNotifications}
-            onCheckedChange={setShowNotifications}
-          >
-            Show Notifications
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-            <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className="text-red-600">Sign Out</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};

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

@@ -1,48 +0,0 @@
-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/Table/Table.stories.tsx

@@ -1,135 +0,0 @@
-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/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ToggleGroup, ToggleGroupItem } from "../../components/ui/toggle-group";
-import {
-  Bold,
-  Italic,
-  Underline,
-  AlignLeft,
-  AlignCenter,
-  AlignRight,
-} from "lucide-react";
-import { useState } from "react";
-
-const meta = {
-  title: "UI/ToggleGroup",
-  component: ToggleGroup,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-} satisfies Meta<typeof ToggleGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    return (
-      <ToggleGroup type="single" value={value} onValueChange={setValue}>
-        <ToggleGroupItem value="left">Left</ToggleGroupItem>
-        <ToggleGroupItem value="center">Center</ToggleGroupItem>
-        <ToggleGroupItem value="right">Right</ToggleGroupItem>
-      </ToggleGroup>
-    );
-  },
-};
-
-export const Multiple: Story = {
-  render: () => {
-    const [value, setValue] = useState<string[]>([]);
-    return (
-      <ToggleGroup type="multiple" value={value} onValueChange={setValue}>
-        <ToggleGroupItem value="bold">
-          <Bold className="h-4 w-4 mr-2" />
-          Bold
-        </ToggleGroupItem>
-        <ToggleGroupItem value="italic">
-          <Italic className="h-4 w-4 mr-2" />
-          Italic
-        </ToggleGroupItem>
-        <ToggleGroupItem value="underline">
-          <Underline className="h-4 w-4 mr-2" />
-          Underline
-        </ToggleGroupItem>
-      </ToggleGroup>
-    );
-  },
-};
-
-export const TextAlignment: Story = {
-  render: () => {
-    const [value, setValue] = useState("left");
-    return (
-      <ToggleGroup type="single" value={value} onValueChange={setValue}>
-        <ToggleGroupItem value="left" aria-label="Align left">
-          <AlignLeft className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="center" aria-label="Align center">
-          <AlignCenter className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="right" aria-label="Align right">
-          <AlignRight className="h-4 w-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <ToggleGroup type="single" defaultValue="option1" disabled>
-      <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
-      <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
-      <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};