@syscore/ui-library 1.1.9 → 1.1.11

package/client/ui/AspectRatio.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+const meta = {
+  title: "Review/AspectRatio",
+  component: AspectRatio,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <AspectRatio ratio={16 / 9} className="bg-gray-200">
+        <img
+          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400"
+          alt="Aspect ratio example"
+          className="h-full w-full object-cover rounded-md"
+        />
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-48">
+      <AspectRatio ratio={1} className="bg-gray-200">
+        <img
+          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"
+          alt="Square aspect ratio"
+          className="h-full w-full object-cover rounded-md"
+        />
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Portrait: Story = {
+  render: () => (
+    <div className="w-48">
+      <AspectRatio ratio={9 / 16} className="bg-gray-200">
+        <img
+          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"
+          alt="Portrait aspect ratio"
+          className="h-full w-full object-cover rounded-md"
+        />
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Custom: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="w-64">
+        <AspectRatio ratio={3 / 2} className="bg-gray-200">
+          <div className="h-full w-full flex items-center justify-center">
+            <span className="text-gray-600">3:2 Ratio</span>
+          </div>
+        </AspectRatio>
+      </div>
+      <div className="w-64">
+        <AspectRatio ratio={4 / 3} className="bg-gray-200">
+          <div className="h-full w-full flex items-center justify-center">
+            <span className="text-gray-600">4:3 Ratio</span>
+          </div>
+        </AspectRatio>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Avatar/Avatar.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+} from "../../components/ui/avatar";
+
+const meta = {
+  title: "UI/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="" />
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="" />
+        <AvatarFallback>XY</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};
+
+export const WithUser: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Avatar>
+        <AvatarImage src="" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <div>
+        <p className="text-sm font-semibold">John Doe</p>
+        <p className="text-xs text-gray-600">john@example.com</p>
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar className="h-8 w-8">
+        <AvatarImage src="" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-16 w-16">
+        <AvatarImage src="" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};

package/client/ui/Badge/Badge.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../../components/ui/badge";
+
+const meta = {
+  title: "UI/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "secondary", "destructive", "outline-solid"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+    variant: "default",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Destructive",
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Outline",
+    variant: "outline",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+};

package/client/ui/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../../components/ui/breadcrumb";
+import { ChevronRight } from "lucide-react";
+
+const meta = {
+  title: "UI/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Getting Started</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const WithCustomSeparator: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <ChevronRight className="h-4 w-4" />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <ChevronRight className="h-4 w-4" />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Product Details</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const Long: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components/breadcrumb">
+            Breadcrumb
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Implementation</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};