@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/Button.stories.tsx

@@ -0,0 +1,429 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@/components/ui/Button";
+import { UtilityReset } from "@/components/icons/UtilityReset";
+import { UtilityClose } from "@/components/icons/UtilityClose";
+import { UtilityChevronDown } from "@/components/icons/UtilityChevronDown";
+import { NavAccount } from "@/components/icons/NavAccount";
+
+const meta = {
+  title: "Review/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xlarge", "large", "utility", "icon"],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// CTA Buttons Stories
+export const CTAPrimaryGradient: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Xlarge, primary, gradient</p>
+        <Button variant="primary-gradient" size="xlarge">
+          Call to action
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large, primary, gradient</p>
+        <Button variant="primary-gradient" size="large">
+          Call to action
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const CTAPrimaryDark: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Xlarge, primary, dark</p>
+        <Button variant="primary-dark" size="xlarge">
+          Call to action
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large, primary, dark</p>
+        <Button variant="primary-dark" size="large">
+          Call to action
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const CTASecondaryLight: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Xlarge, secondary, light</p>
+        <Button variant="secondary-light" size="xlarge">
+          Call to action
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large, secondary, light</p>
+        <Button variant="secondary-light" size="large">
+          Call to action
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const CTATertiaryLight: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large, tertiary, light</p>
+        <Button variant="tertiary-light" size="large">
+          Call to action
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+// Utility Buttons Stories
+export const UtilityGeneralPrimary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">General, primary</p>
+        <Button variant="general-primary" size="utility">
+          Label
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const UtilityGeneralSecondary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">General, secondary</p>
+        <Button variant="general-secondary" size="utility">
+          Label
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const UtilityGeneralTertiary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">General, tertiary</p>
+        <Button variant="general-tertiary" size="utility">
+          Label
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const UtilityTooltipPrimary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Tooltip, primary</p>
+        <Button variant="tooltip-primary" size="utility">
+          Label
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const UtilityTooltipSecondary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Tooltip, secondary</p>
+        <Button variant="tooltip-secondary" size="utility">
+          Label
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+// Icon Buttons Stories
+export const IconReset: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <Button size="icon" className="hover:bg-btn-hover">
+          <UtilityReset className="group-hover:text-white" />
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const IconClose: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <Button size="icon" className="hover:bg-btn-hover">
+          <UtilityClose className="group-hover:text-white" />
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const IconContract: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Contract</p>
+        <Button size="icon" className="hover:bg-btn-hover">
+          <UtilityChevronDown className="group-hover:text-white rotate-180" />
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const IconExpand: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Expand</p>
+        <Button size="icon" className="hover:bg-btn-hover">
+          <UtilityChevronDown className="group-hover:text-white" />
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const IconAccount: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Account</p>
+        <div className="flex gap-6">
+          <Button size="icon" className="hover:bg-btn-hover">
+            <NavAccount className="group-hover:text-white" />
+          </Button>
+          <Button size="icon" className="bg-btn-hover">
+            <NavAccount className="group-hover:text-white text-bronze-100" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// All Variants Overview
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-12">
+      {/* CTA Buttons */}
+      <div className="space-y-6">
+        <h3 className="text-base font-semibold text-gray-700">CTA buttons</h3>
+        <div className="space-y-6">
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              Xlarge, primary, gradient
+            </p>
+            <Button variant="primary-gradient" size="xlarge">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Xlarge, primary, dark</p>
+            <Button variant="primary-dark" size="xlarge">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              Xlarge, secondary, light
+            </p>
+            <Button variant="secondary-light" size="xlarge">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              Large, primary, gradient
+            </p>
+            <Button variant="primary-gradient" size="large">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Large, primary, dark</p>
+            <Button variant="primary-dark" size="large">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">
+              Large, secondary, light
+            </p>
+            <Button variant="secondary-light" size="large">
+              Call to action
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Large, tertiary, light</p>
+            <Button variant="tertiary-light" size="large">
+              Call to action
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Utility Buttons */}
+      <div className="space-y-6">
+        <h3 className="text-base font-semibold text-gray-700">
+          Utility buttons
+        </h3>
+        <div className="space-y-6">
+          <div>
+            <p className="text-sm text-gray-600 mb-2">General, primary</p>
+            <Button variant="general-primary" size="utility">
+              Label
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">General, secondary</p>
+            <Button variant="general-secondary" size="utility">
+              Label
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">General, tertiary</p>
+            <Button variant="general-tertiary" size="utility">
+              Label
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Tooltip, primary</p>
+            <Button variant="tooltip-primary" size="utility">
+              Label
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Tooltip, secondary</p>
+            <Button variant="tooltip-secondary" size="utility">
+              Label
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Icon Buttons */}
+      <div className="space-y-6">
+        <h3 className="text-base font-semibold text-gray-700">Icon buttons</h3>
+        <div className="space-y-6">
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Reset</p>
+            <Button size="icon">
+              <div className="size-4 flex items-center justify-center">
+                <UtilityReset />
+              </div>
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Close</p>
+            <div className="flex gap-6">
+              <Button size="icon">
+                <div className="size-4 flex items-center justify-center">
+                  <UtilityClose />
+                </div>
+              </Button>
+              <Button size="icon">
+                <div className="size-4 flex items-center justify-center">
+                  <UtilityClose />
+                </div>
+              </Button>
+            </div>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Contract</p>
+            <Button size="icon">
+              <div className="size-4 flex items-center justify-center pb-0.5 pt-0 px-0">
+                <div className="rotate-180 scale-y-[-1]">
+                  <UtilityChevronDown />
+                </div>
+              </div>
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Expand</p>
+            <Button size="icon">
+              <div className="size-4 flex items-center justify-center pb-0 pt-0.5 px-0">
+                <div className="rotate-180 scale-y-[-1]">
+                  <UtilityChevronDown />
+                </div>
+              </div>
+            </Button>
+          </div>
+          <div>
+            <p className="text-sm text-gray-600 mb-2">Account</p>
+            <div className="flex gap-6">
+              <Button size="icon">
+                <div className="size-4 flex items-center justify-center">
+                  <NavAccount color="#E8D2B5" />
+                </div>
+              </Button>
+              <Button size="icon">
+                <div className="size-4 flex items-center justify-center">
+                  <NavAccount color="#FBF8F3" />
+                </div>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Disabled CTA Button</p>
+        <Button variant="primary-dark" size="large" disabled>
+          Call to action
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Disabled Utility Button</p>
+        <Button variant="general-primary" size="utility" disabled>
+          Label
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Disabled Icon Button</p>
+        <Button size="icon" disabled>
+          <div className="size-4 flex items-center justify-center">
+            <UtilityReset />
+          </div>
+        </Button>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Calendar/Calendar.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Calendar } from "../../components/ui/calendar";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        className="rounded-md border"
+      />
+    );
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [dates, setDates] = useState<Date[] | undefined>();
+
+    return (
+      <Calendar
+        mode="multiple"
+        selected={dates}
+        onSelect={setDates}
+        className="rounded-md border"
+      />
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [range, setRange] = useState<
+      { from?: Date; to?: Date } | undefined
+    >();
+
+    return (
+      <Calendar
+        mode="range"
+        selected={range}
+        onSelect={setRange}
+        className="rounded-md border"
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    const today = new Date();
+    const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        disabled={(date) => date < yesterday}
+        className="rounded-md border"
+      />
+    );
+  },
+};
+
+export const WithFooter: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="border rounded-lg p-4 space-y-4 max-w-sm">
+        <Calendar mode="single" selected={date} onSelect={setDate} />
+        {date && (
+          <div className="space-y-2 border-t pt-4">
+            <p className="text-sm font-medium">Selected date</p>
+            <p className="text-sm text-gray-600">{date.toLocaleDateString()}</p>
+          </div>
+        )}
+      </div>
+    );
+  },
+};

package/client/ui/Card.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "../components/ui/Card";
+import { Button } from "@/components/ui/button";
+
+const meta = {
+  title: "Review/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+      </CardHeader>
+      <CardContent>This is the main content area of the card.</CardContent>
+      <CardFooter>
+        <p className="body-base text-gray-600">Footer information</p>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Product</CardTitle>
+        <CardDescription>Limited offer available now</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="body-base text-gray-600 mb-4">
+          Experience the best features with our new product.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button size="large" variant="primary-dark">
+          Call to action
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 gap-4 max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle className="heading-xsmall">Card One</CardTitle>
+        </CardHeader>
+        <CardContent>Content for the first card</CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="heading-xsmall">Card Two</CardTitle>
+        </CardHeader>
+        <CardContent>Content for the second card</CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="heading-xsmall">Card Three</CardTitle>
+        </CardHeader>
+        <CardContent>Content for the third card</CardContent>
+      </Card>
+    </div>
+  ),
+};

package/client/ui/Carousel/Carousel.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "../../components/ui/carousel";
+
+const meta = {
+  title: "UI/Carousel",
+  component: Carousel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {[1, 2, 3, 4, 5].map((index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <div className="flex aspect-square items-center justify-center rounded-lg bg-gray-200">
+                <span className="text-4xl font-semibold">{index}</span>
+              </div>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+};
+
+export const Images: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-md">
+      <CarouselContent>
+        {[1, 2, 3].map((index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <div className="relative aspect-video overflow-hidden rounded-lg bg-gray-200">
+                <img
+                  src={`https://images.unsplash.com/photo-${150 + index}?w=400`}
+                  alt={`Slide ${index}`}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+};
+
+export const WithSize: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-2xl">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <div className="flex aspect-square items-center justify-center rounded-lg bg-linear-to-br from-blue-400 to-blue-600 text-white">
+                <span className="text-2xl font-semibold">Item {index + 1}</span>
+              </div>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+};