@syscore/ui-library 1.1.10 → 1.1.12

package/client/ui/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,88 @@
+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>
+  ),
+};

package/client/ui/Tooltip.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+
+const meta = {
+  title: "Review/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-16">
+      <Tooltip>
+        <TooltipTrigger>Hover</TooltipTrigger>
+        <TooltipContent>
+          <div className="space-y-3">
+            <h4 className="text-white font-semibold text-base">
+              Strategy Details
+            </h4>
+            <div className="space-y-1">
+              <p className="text-white/90 text-sm">Status: Active</p>
+              <p className="text-white/90 text-sm">Score: 12 PTS</p>
+              <p className="text-white/90 text-sm">Last updated: 2 days ago</p>
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <div className="p-16">
+      <Tooltip>
+        <TooltipTrigger>Hover</TooltipTrigger>
+        <TooltipContent className="w-[400px]" alignOffset={500}>
+          <div className="space-y-4">
+            <h4 className="text-white font-semibold body-base">Header</h4>
+            <div className="space-y-4">
+              <p className="text-white/90 body-small">Body</p>
+              <Separator className="my-8" />
+              <p className="text-white/90 body-small">Body</p>
+
+              <div className="flex flex-row gap-4 justify-start items-start">
+                <Button size="utility" variant="tooltip-primary">
+                  Action
+                </Button>
+              </div>
+              <Button size="utility" variant="tooltip-secondary">
+                Action
+              </Button>
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};

package/client/ui/Typography.stories.tsx

@@ -0,0 +1,421 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Review/Typography",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Section header component
+const SectionHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-lg font-medium text-black">{title}</p>
+      <div className="h-px bg-gray-200" />
+    </div>
+  );
+};
+
+// Typography row component
+const TypographyRow = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return <div className="flex gap-8 items-start w-full">{children}</div>;
+};
+
+export const Default: Story = {
+  render: () => {
+    const sampleText = "Become a legendary designer";
+    const sampleBodyText =
+      "One of the hallmarks of the team is this sense of looking to be wrong.";
+    const sampleNumber = "20:04–02:54";
+    const sampleNumberSmall = "1, 4–6";
+
+    return (
+      <div className="min-h-screen bg-white">
+        {/* Header */}
+        <div className="px-20 py-16 border-b border-gray-200">
+          <div className="flex gap-4 items-center">
+            <h1 className="text-[36px] font-extrabold leading-[44px] tracking-[-0.72px] text-black">
+              Web
+            </h1>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="px-20 py-16 space-y-20">
+          {/* Heading Large */}
+          <div className="space-y-8">
+            <SectionHeader title="Heading large" />
+            <TypographyRow>
+              <h1 className="flex-1 heading-large text-black">{sampleText}</h1>
+            </TypographyRow>
+          </div>
+
+          {/* Heading Medium */}
+          <div className="space-y-8">
+            <SectionHeader title="Heading medium" />
+            <TypographyRow>
+              <p className="flex-1 heading-medium text-black">{sampleText}</p>
+            </TypographyRow>
+          </div>
+
+          {/* Heading Small */}
+          <div className="space-y-8">
+            <SectionHeader title="Heading small" />
+            <TypographyRow>
+              <p className="flex-1 heading-small text-black">{sampleText}</p>
+            </TypographyRow>
+          </div>
+
+          {/* Heading XSmall */}
+          <div className="space-y-8">
+            <SectionHeader title="Heading xsmall" />
+            <TypographyRow>
+              <p className="flex-1 heading-xsmall text-black">{sampleText}</p>
+            </TypographyRow>
+          </div>
+
+          {/* Heading XXSmall */}
+          <div className="space-y-8">
+            <SectionHeader title="Heading xxsmall" />
+            <TypographyRow>
+              <p
+                className="flex-1 text-[20px] leading-[22px] tracking-[-0.2px] font-normal text-black"
+                style={{ fontFamily: "var(--font-ftmade)" }}
+              >
+                {sampleText}
+              </p>
+            </TypographyRow>
+          </div>
+
+          {/* Body Large */}
+          <div className="space-y-8">
+            <SectionHeader title="Body large" />
+            <TypographyRow>
+              <p
+                className="flex-1 body-large text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-large text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-large text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 body-large text-black font-normal italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-large text-black font-medium italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-large text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+          </div>
+
+          {/* Body Base */}
+          <div className="space-y-8">
+            <SectionHeader title="Body base" />
+            <TypographyRow>
+              <p
+                className="flex-1 body-base text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 body-base text-black font-normal italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-medium italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 body-base text-black font-normal underline decoration-dotted"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-medium underline decoration-dotted"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-base text-black font-semibold underline decoration-dotted"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+          </div>
+
+          {/* Body Small */}
+          <div className="space-y-8">
+            <SectionHeader title="Body small" />
+            <TypographyRow>
+              <p
+                className="flex-1 body-small text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-small text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-small text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 body-small text-black font-normal italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-small text-black font-medium italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+              <p
+                className="flex-1 body-small text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleBodyText}
+              </p>
+            </TypographyRow>
+          </div>
+
+          {/* Body Overline */}
+          <div className="space-y-8">
+            <SectionHeader title="Body overline" />
+            <TypographyRow>
+              <p
+                className="flex-1 overline-large text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+              <p
+                className="flex-1 overline-large text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 overline-medium text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+              <p
+                className="flex-1 overline-medium text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 overline-small text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+              <p
+                className="flex-1 overline-small text-black font-semibold italic"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleText}
+              </p>
+            </TypographyRow>
+          </div>
+
+          {/* Body Number */}
+          <div className="space-y-8">
+            <SectionHeader title="Body number" />
+            <TypographyRow>
+              <p
+                className="flex-1 number-large text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-large text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-large text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 number-base text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-base text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-base text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 text-[10.32px] leading-[20px] text-black font-normal"
+                style={{
+                  fontVariantNumeric: "lining-nums tabular-nums",
+                  fontFamily: "var(--font-mazzard)",
+                }}
+              >
+                {sampleNumberSmall}
+              </p>
+              <p
+                className="flex-1 text-[10.32px] leading-[21px] text-black font-semibold"
+                style={{
+                  fontVariantNumeric: "lining-nums tabular-nums",
+                  fontFamily: "var(--font-mazzard)",
+                }}
+              >
+                {sampleNumberSmall}
+              </p>
+              <p
+                className="flex-1 text-[10.32px] leading-[21px] text-black font-semibold"
+                style={{
+                  fontVariantNumeric: "lining-nums tabular-nums",
+                  fontFamily: "var(--font-mazzard)",
+                }}
+              >
+                {sampleNumberSmall}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 number-small text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-small text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-small text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+            </TypographyRow>
+            <TypographyRow>
+              <p
+                className="flex-1 number-xsmall text-black font-normal"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-xsmall text-black font-medium"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+              <p
+                className="flex-1 number-xsmall text-black font-semibold"
+                style={{ fontFamily: "var(--font-mazzard)" }}
+              >
+                {sampleNumber}
+              </p>
+            </TypographyRow>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/WELLDashboard/WELLDashboard.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { WELLDashboard } from ".";
+
+const meta = {
+  title: "UI/WELLDashboard",
+  component: WELLDashboard,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    certifiedPercentage: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "Percentage of locations certified (0-100)",
+    },
+  },
+} satisfies Meta<typeof WELLDashboard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Default dashboard with standard data
+export const Default: Story = {
+  args: {
+    certifiedPercentage: 60,
+  },
+};
+
+// Full certification (100%)
+export const FullyCertified: Story = {
+  args: {
+    certifiedPercentage: 100,
+  },
+};
+
+// Low certification percentage
+export const LowCertification: Story = {
+  args: {
+    certifiedPercentage: 25,
+  },
+};
+
+// Custom data example
+export const CustomData: Story = {
+  args: {
+    certifiedPercentage: 75,
+    certifications: [
+      { name: "Platinum", locations: 3, color: "#A8A7AE" },
+      { name: "Gold", locations: 5, color: "#D7C686" },
+      { name: "Silver", locations: 2, color: "#C0C2C4" },
+      { name: "Bronze", locations: 1, color: "#D1A778" },
+    ],
+    ratings: [
+      { name: "Health-Safety", locations: 8, color: "#7FB3DC", percentage: 80 },
+      { name: "Equity", locations: 5, color: "#41937D", percentage: 60 },
+      { name: "Performance", locations: 3, color: "#0B667F", percentage: 40 },
+      { name: "Coworking", locations: 1, color: "#AD7DA3", percentage: 15 },
+    ],
+  },
+};
+
+// All ratings active
+export const AllRatingsActive: Story = {
+  args: {
+    certifiedPercentage: 85,
+    ratings: [
+      { name: "Health-Safety", locations: 10, color: "#7FB3DC", percentage: 90 },
+      { name: "Equity", locations: 8, color: "#41937D", percentage: 75 },
+      { name: "Performance", locations: 6, color: "#0B667F", percentage: 60 },
+      { name: "Coworking", locations: 4, color: "#AD7DA3", percentage: 45 },
+    ],
+  },
+};
+
+// Complete overview in a constrained container
+export const InContainer: Story = {
+  render: (args) => (
+    <div className="max-w-6xl mx-auto p-8 bg-[#FAFAFA]">
+      <WELLDashboard {...args} />
+    </div>
+  ),
+  args: {
+    certifiedPercentage: 60,
+  },
+};
+
+// Responsive demo
+export const ResponsiveDemo: Story = {
+  render: (args) => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Desktop (1200px)</h3>
+        <div className="w-full max-w-6xl border-2 border-dashed border-gray-300 p-4">
+          <WELLDashboard {...args} />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Tablet (768px)</h3>
+        <div className="w-full max-w-3xl border-2 border-dashed border-gray-300 p-4">
+          <WELLDashboard {...args} />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Mobile (375px)</h3>
+        <div className="w-full max-w-sm border-2 border-dashed border-gray-300 p-4">
+          <WELLDashboard {...args} />
+        </div>
+      </div>
+    </div>
+  ),
+  args: {
+    certifiedPercentage: 60,
+  },
+};