@syscore/ui-library 1.1.10 → 1.1.11

package/client/ui/Icons.stories.tsx

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  IconConceptMind,
+  IconConceptCommunity,
+  IconConceptMovement,
+  IconConceptWater,
+  IconConceptAir,
+  IconConceptLight,
+  IconConceptThermalComfort,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptMaterials,
+} from "@/components/icons/ConceptIcons";
+import { NavLogo } from "@/components/icons/NavLogo";
+import { NavAccount } from "@/components/icons/NavAccount";
+import { NavBullet } from "@/components/icons/NavBullet";
+import { UtilityAccordion } from "@/components/icons/UtilityAccordion";
+import { UtilityChevronDown } from "@/components/icons/UtilityChevronDown";
+import { UtilityClassification } from "@/components/icons/UtilityClassification";
+import { UtilityClose } from "@/components/icons/UtilityClose";
+import { UtilityDrag } from "@/components/icons/UtilityDrag";
+import { UtilityEdit } from "@/components/icons/UtilityEdit";
+import { UtilityOptions } from "@/components/icons/UtilityOptions";
+import { UtilityPortfolio } from "@/components/icons/UtilityPortfolio";
+import { UtilityReset } from "@/components/icons/UtilityReset";
+import { UtilityScoring } from "@/components/icons/UtilityScoring";
+import { UtilitySearch } from "@/components/icons/UtilitySearch";
+import { UtilitySort } from "@/components/icons/UtilitySort";
+import { UtilityText } from "@/components/icons/UtilityText";
+import { SealWell } from "@/components/icons/SealWell";
+import { SealIwbiMember } from "@/components/icons/SealIwbiMember";
+import { SealWellCertification } from "@/components/icons/SealWellCertification";
+import { SealWellCommunity } from "@/components/icons/SealWellCommunity";
+import { SealWellResidence } from "@/components/icons/SealWellResidence";
+import { SealWorksWithWell } from "@/components/icons/SealWorksWithWell";
+import { SealEnterpriseProvider } from "@/components/icons/ProviderSeals";
+import { SealPerformanceTestingProvider } from "@/components/icons/ProviderSeals";
+import { SealSurveyProvider } from "@/components/icons/ProviderSeals";
+import {
+  BadgeEnterpriseProvider,
+  BadgePerformanceTestingProvider,
+  BadgeProductProvider,
+  BadgeSurveyProvider,
+} from "@/components/icons/ProviderBadges";
+import { WatermarkMemberOrg } from "@/components/icons/WatermarkMemberOrg";
+import { WaterMarkWWWProducts } from "@/components/icons/WaterMarkWWWProducts";
+import { WaterMarkWellProjects } from "@/components/icons/WaterMarkWellProjects";
+import {
+  SealProductProvider,
+  SealProviders,
+} from "@/components/icons/ProviderSeals";
+
+const meta = {
+  title: "Review/Icons",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ConceptIcons: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-6">Concept Icons</h2>
+        <div className="space-y-12">
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMind active />
+              <span className="text-sm font-medium">Mind (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptCommunity active />
+              <span className="text-sm font-medium">Community (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMovement active />
+              <span className="text-sm font-medium">Movement (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptWater active />
+              <span className="text-sm font-medium">Water (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptAir active />
+              <span className="text-sm font-medium">Air (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptLight active />
+              <span className="text-sm font-medium">Light (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptThermalComfort active />
+              <span className="text-sm font-medium">
+                Thermal Comfort (Active)
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptNourishment active />
+              <span className="text-sm font-medium">Nourishment (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptSound active />
+              <span className="text-sm font-medium">Sound (Active)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMaterials active />
+              <span className="text-sm font-medium">Materials (Active)</span>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMind active={false} />
+              <span className="text-sm font-medium">Mind (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptCommunity active={false} />
+              <span className="text-sm font-medium">Community (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMovement active={false} />
+              <span className="text-sm font-medium">Movement (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptWater active={false} />
+              <span className="text-sm font-medium">Water (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptAir active={false} />
+              <span className="text-sm font-medium">Air (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptLight active={false} />
+              <span className="text-sm font-medium">Light (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptThermalComfort active={false} />
+              <span className="text-sm font-medium">
+                Thermal Comfort (Inactive)
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptNourishment active={false} />
+              <span className="text-sm font-medium">
+                Nourishment (Inactive)
+              </span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptSound active={false} />
+              <span className="text-sm font-medium">Sound (Inactive)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <IconConceptMaterials active={false} />
+              <span className="text-sm font-medium">Materials (Inactive)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const NavigationIcons: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-6">Navigation Icons</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="flex flex-col items-start gap-4">
+            <div className="flex items-center gap-3">
+              <NavLogo />
+              <span className="text-sm font-medium">NavLogo</span>
+            </div>
+          </div>
+          <div className="flex flex-col items-start gap-4">
+            <div className="flex items-center gap-3">
+              <NavAccount />
+              <span className="text-sm font-medium">NavAccount</span>
+            </div>
+          </div>
+          <div className="flex flex-col items-start gap-4">
+            <div className="flex items-center gap-3">
+              <NavBullet color="#F3E7D8" />
+              <span className="text-sm font-medium">NavBullet</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <NavBullet color="#0F748A" />
+              <span className="text-sm font-medium">NavBullet (Cyan)</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <NavBullet color="#17AA8D" />
+              <span className="text-sm font-medium">NavBullet (Green)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const UtilityIcons: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-6">Utility Icons</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <UtilityAccordion />
+            <span className="text-sm font-medium">Accordion</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityChevronDown />
+            <span className="text-sm font-medium">ChevronDown</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityClassification />
+            <span className="text-sm font-medium">Classification</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityClose />
+            <span className="text-sm font-medium">Close</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityDrag />
+            <span className="text-sm font-medium">Drag</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityEdit />
+            <span className="text-sm font-medium">Edit</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityOptions />
+            <span className="text-sm font-medium">Options</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityPortfolio />
+            <span className="text-sm font-medium">Portfolio</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityReset />
+            <span className="text-sm font-medium">Reset</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityScoring />
+            <span className="text-sm font-medium">Scoring</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilitySearch />
+            <span className="text-sm font-medium">Search</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilitySort />
+            <span className="text-sm font-medium">Sort</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityText />
+            <span className="text-sm font-medium">Text</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const MarkIcons: Story = {
+  render: () => (
+    <div className="space-y-8 p-8 bg-cyan-50">
+      <div>
+        <h2 className="text-2xl font-bold mb-6">Mark Icons</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="flex flex-col items-center gap-4">
+            <SealWell />
+            <SealIwbiMember />
+            <SealWellCertification />
+            <SealWellCommunity />
+            <SealWellResidence />
+            <SealWorksWithWell />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const ProviderBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8 bg-cyan-50">
+      <BadgeProductProvider />
+      <BadgeEnterpriseProvider />
+      <BadgePerformanceTestingProvider />
+      <BadgeSurveyProvider />
+    </div>
+  ),
+};
+
+export const WatermarkIcons: Story = {
+  render: () => (
+    <div className="space-y-8 p-8 bg-cyan-50">
+      <p>Member Org</p>
+      <WatermarkMemberOrg />
+      <p>WWW Products</p>
+      <WaterMarkWWWProducts />
+      <p>Well Projects</p>
+      <WaterMarkWellProjects />
+    </div>
+  ),
+};
+
+export const ProviderSeals: Story = {
+  render: () => (
+    <div className="space-y-8 p-8 bg-cyan-50">
+      <p>Providers</p>
+      <SealProviders />
+      <p>Product Provider</p>
+      <SealProductProvider />
+      <p>Enterprise Provider</p>
+      <SealEnterpriseProvider />
+      <p>Performance Testing Provider</p>
+      <SealPerformanceTestingProvider />
+      <p>Survey Provider</p>
+      <SealSurveyProvider />
+    </div>
+  ),
+};

package/client/ui/Input/Input.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../../components/ui/input";
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+export const WithType: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <div>
+        <label className="text-sm font-medium mb-2 block">Text</label>
+        <Input type="text" placeholder="Enter text..." />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Email</label>
+        <Input type="email" placeholder="Enter email..." />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Password</label>
+        <Input type="password" placeholder="Enter password..." />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Number</label>
+        <Input type="number" placeholder="Enter number..." />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Date</label>
+        <Input type="date" />
+      </div>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    placeholder: "Read-only input",
+    value: "This is read-only",
+    readOnly: true,
+  },
+};
+
+export const WithFile: Story = {
+  args: {
+    type: "file",
+  },
+};

package/client/ui/InputOTP/InputOTP.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "../../components/ui/input-otp";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/InputOTP",
+  component: InputOTP,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof InputOTP>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Enter OTP</label>
+        <InputOTP maxLength={6} value={value} onChange={setValue}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+    );
+  },
+};
+
+export const WithSeparator: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Enter Code</label>
+        <InputOTP maxLength={6} value={value} onChange={setValue}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+    );
+  },
+};
+
+export const FourDigits: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="space-y-2">
+        <label className="text-sm font-medium">PIN Code</label>
+        <InputOTP maxLength={4} value={value} onChange={setValue}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+    );
+  },
+};

package/client/ui/Label.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "../components/ui/Label";
+import { Input } from "../components/ui/input";
+
+const meta = {
+  title: "Review/Label",
+  component: Label,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Label",
+  },
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="space-y-2 w-full max-w-md">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="Enter your email" />
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="space-y-6 w-full max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name">Name</Label>
+        <Input id="name" placeholder="Enter your name" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="Enter your email" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="message">Message</Label>
+        <textarea
+          id="message"
+          className="flex h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="Enter your message"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="space-y-2 w-full max-w-md">
+      <Label htmlFor="required">
+        Field Name
+        <span className="text-red-500 ml-1">*</span>
+      </Label>
+      <Input id="required" placeholder="This field is required" />
+    </div>
+  ),
+};

package/client/ui/Menubar/Menubar.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+} from "../../components/ui/menubar";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/Menubar",
+  component: Menubar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New</MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Save</MenubarItem>
+          <MenubarItem>Exit</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo</MenubarItem>
+          <MenubarItem>Redo</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Show Sidebar</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Show Statusbar</MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};
+
+export const WithRadio: Story = {
+  render: () => {
+    const [theme, setTheme] = useState("light");
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+              <MenubarRadioItem value="light">Light</MenubarRadioItem>
+              <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+              <MenubarRadioItem value="auto">Auto</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Help</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Documentation</MenubarItem>
+            <MenubarItem>Report Issue</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    );
+  },
+};