@syscore/ui-library 1.1.12 → 1.2.0

package/client/ui/AspectRatio.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { AspectRatio } from "../components/ui/aspect-ratio";
 
 const meta = {
   title: "Review/AspectRatio",

package/client/ui/Button.stories.tsx

@@ -1,9 +1,9 @@
 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";
+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",

package/client/ui/Card.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
 import {
   Card,
   CardHeader,
@@ -6,8 +8,19 @@ import {
   CardTitle,
   CardDescription,
   CardContent,
-} from "../components/ui/Card";
-import { Button } from "@/components/ui/button";
+} from "../components/ui/card";
+import { Button } from "../components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import { Label } from "../components/ui/label";
+import { Toggle } from "../components/ui/toggle";
+
+import { UtilityReset } from "../components/icons/UtilityReset";
 
 const meta = {
   title: "Review/Card",
@@ -82,3 +95,211 @@ export const Multiple: Story = {
     </div>
   ),
 };
+
+export const FiltersPanel: Story = {
+  render: () => (
+    <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+      <div className="flex items-center justify-between w-full h-8">
+        <Label className="text-gray-800 overline-large">Filters</Label>
+        <Button
+          variant="secondary-light"
+          size="icon"
+          className="size-8 rounded-full border-gray-100 bg-white p-0"
+        >
+          <UtilityReset className="size-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-6 w-full">
+        {/* Segmented Control */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Label</Label>
+          <Toggle
+            options={[
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
+            ]}
+            defaultValue="active"
+          />
+        </div>
+
+        {/* Search Selects */}
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex flex-col gap-3">
+            <Label className="text-gray-600">Label</Label>
+            <Select>
+              <SelectTrigger className="h-12 border-gray-200 rounded-[6px] bg-white px-4">
+                <SelectValue placeholder="Placeholder" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+      </div>
+    </Card>
+  ),
+};
+
+// export const AttributesPanel: Story = {
+//   render: () => {
+//     const [activeTag, setActiveTag] = useState<string>("tag1");
+//     const tags = [
+//       { id: "tag1", label: "Tag" },
+//       { id: "tag2", label: "Tag" },
+//       { id: "tag3", label: "Tag" },
+//     ];
+
+//     return (
+//       <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+//         <div className="flex items-center justify-between w-full h-8">
+//           <Label className="text-gray-800 overline-large">Attributes</Label>
+//         </div>
+
+//         <div className="flex flex-col gap-6 w-full">
+//           {/* Segmented Control */}
+//           <div className="flex flex-col gap-3">
+//             <Label className="text-gray-600">Label</Label>
+//             <Toggle
+//               options={[
+//                 { label: "Active", value: "active" },
+//                 { label: "Inactive", value: "inactive" },
+//               ]}
+//               defaultValue="active"
+//             />
+//           </div>
+
+//           {/* Tags */}
+//           <div className="flex flex-col gap-3">
+//             <Label className="text-gray-600">Field name</Label>
+//             <div className="flex flex-wrap gap-3 items-start">
+//               {tags.map((tag) => (
+//                 <Tag
+//                   key={tag.id}
+//                   active={activeTag === tag.id}
+//                   onClick={() => setActiveTag(tag.id)}
+//                 >
+//                   {tag.label}
+//                 </Tag>
+//               ))}
+//             </div>
+//           </div>
+//         </div>
+//       </Card>
+//     );
+//   },
+// };
+
+import {
+  IconConceptAir,
+  IconConceptCommunity,
+  IconConceptLight,
+  IconConceptMaterials,
+  IconConceptMind,
+  IconConceptMovement,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptThermalComfort,
+  IconConceptWater,
+} from "../components/icons/ConceptIcons";
+
+// ... existing imports
+
+export const NavigatorPanel: Story = {
+  render: () => {
+    const [activeConcept, setActiveConcept] = useState<string>("community");
+    const [activeTheme, setActiveTheme] = useState<string>("C7");
+    const [activeStrategy, setActiveStrategy] = useState<string>("C7.4");
+
+    const concepts = [
+      { id: "mind", Icon: IconConceptMind },
+      { id: "community", Icon: IconConceptCommunity },
+      { id: "movement", Icon: IconConceptMovement },
+      { id: "water", Icon: IconConceptWater },
+      { id: "air", Icon: IconConceptAir },
+      { id: "light", Icon: IconConceptLight },
+      { id: "thermal", Icon: IconConceptThermalComfort },
+      { id: "nourishment", Icon: IconConceptNourishment },
+      { id: "sound", Icon: IconConceptSound },
+      { id: "materials", Icon: IconConceptMaterials },
+    ];
+
+    const themes = Array.from({ length: 9 }, (_, i) => `C${9 - i}`).reverse();
+    const strategies = ["C7.1", "C7.2", "C7.3", "C7.4"];
+
+    return (
+      <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+        {/* Concepts */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Concept</Label>
+          <div className="flex flex-wrap gap-2">
+            {concepts.map(({ id, Icon }) => (
+              <button
+                key={id}
+                onClick={() => setActiveConcept(id)}
+                className="rounded-full transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
+              >
+                <Icon active={activeConcept === id} className="size-12" />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Theme */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Theme</Label>
+          <div className="flex flex-wrap gap-2">
+            {themes.map((theme) => (
+              <button
+                key={theme}
+                onClick={() => setActiveTheme(theme)}
+                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${
+                  activeTheme === theme
+                    ? "bg-cyan-800 text-white"
+                    : "bg-blue-100 text-blue-600 hover:bg-blue-200"
+                }`}
+              >
+                <span className="body-small font-semibold">{theme}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Strategy */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Strategy</Label>
+          <div className="flex flex-wrap gap-2">
+            {strategies.map((strategy) => (
+              <button
+                key={strategy}
+                onClick={() => setActiveStrategy(strategy)}
+                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${
+                  activeStrategy === strategy
+                    ? "bg-[#0F748A]/10 border border-[#0F748A]/20 text-cyan-900"
+                    : "bg-blue-100 text-blue-600 hover:bg-blue-200"
+                }`}
+              >
+                <span className="body-small font-semibold">{strategy}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Scope */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Scope</Label>
+          <Toggle
+            className="w-full h-8 border border-gray-100 bg-white rounded-full p-0 [&>button]:flex-1"
+            options={[
+              { label: "Non-core", value: "non-core" },
+              { label: "Core", value: "core" },
+            ]}
+            defaultValue="non-core"
+          />
+        </div>
+      </Card>
+    );
+  },
+};

package/client/ui/CodeBadge.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBadge } from "../components/ui/code-badge";
+
+const meta = {
+    title: "Review/CodeBadge",
+    component: CodeBadge,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+} satisfies Meta<typeof CodeBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        code: "A01",
+    },
+};
+
+export const WithClassName: Story = {
+    render: () => (
+        <div className="flex gap-4">
+            <CodeBadge
+                code="C01"
+                className="bg-plum-50 border-plum-200 text-plum-800"
+            />
+            <CodeBadge
+                code="A02"
+                className="bg-cyan-50 border-cyan-200 text-cyan-800"
+            />
+            <CodeBadge
+                code="W03"
+                className="bg-blue-50 border-blue-200 text-blue-800"
+            />
+            <CodeBadge
+                code="N04"
+                className="bg-green-50 border-green-200 text-green-800"
+            />
+        </div>
+    ),
+};
+
+export const WithStyle: Story = {
+    render: () => (
+        <div className="flex gap-4">
+            <CodeBadge
+                code="R01"
+                className="border-none"
+                style={{
+                    backgroundColor: "#EFF5FB",
+                    color: "#2E74AD",
+                }}
+            />
+            <CodeBadge
+                code="R02"
+                className="border-none"
+                style={{
+                    backgroundColor: "#7B4F9D",
+                    color: "white",
+                }}
+            />
+            <CodeBadge
+                code="R03"
+                className="border-none"
+                style={{
+                    backgroundColor: "#2E74AD",
+                    color: "white",
+                }}
+            />
+        </div>
+    ),
+};
+

package/client/ui/Dialog.stories.tsx

@@ -1,15 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@/components/ui/Button";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
 import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+} from "../components/ui/dialog";
 
 const meta = {
   title: "Review/Dialog",
@@ -29,7 +31,7 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Dialog open={open}>
+        <Dialog open={open} onOpenChange={setOpen}>
           <DialogTrigger asChild>
             <Button
               size="large"
@@ -58,7 +60,7 @@ export const Default: Story = {
                 variant="general-primary"
                 onClick={() => setOpen(false)}
               >
-                Yes
+                Yes, delete user
               </Button>
             </div>
           </DialogContent>
@@ -67,3 +69,48 @@ export const Default: Story = {
     );
   },
 };
+
+export const WithForm: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="general-secondary">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className=" flex flex-col gap-y-3">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className=" flex flex-col gap-y-3">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                defaultValue="@peduarte"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              size="utility"
+              variant="general-primary"
+              type="submit"
+              onClick={() => setOpen(false)}
+            >
+              Save changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};

package/client/ui/Icons.stories.tsx

@@ -10,45 +10,45 @@ import {
   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";
+} 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";
+} 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";
+} from "../components/icons/ProviderSeals";
 
 const meta = {
   title: "Review/Icons",

package/client/ui/Input.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Button } from "../components/ui/button";
+import { Search, Copy } from "lucide-react";
+
+const meta = {
+  title: "Review/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 className="space-y-3">
+        <Label>Text</Label>
+        <Input type="text" placeholder="Enter text..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Email</Label>
+        <Input type="email" placeholder="Enter email..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Password</Label>
+        <Input type="password" placeholder="Enter password..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Number</Label>
+        <Input type="number" placeholder="Enter number..." />
+      </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 WithIcons: Story = {
+  render: () => (
+    <div className="space-y-4 min-w-[300px]">
+      <div className="space-y-3">
+        <Label>Currency (Span)</Label>
+        <Input
+          placeholder="0.00"
+          type="number"
+          startIcon={<span>€</span>}
+          endIcon={<span>EUR</span>}
+        />
+      </div>
+
+      <div className="space-y-3">
+        <Label>Search (Icon)</Label>
+        <Input
+          placeholder="Search..."
+          startIcon={<Search className="h-4 w-4" />}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <div className="space-y-4 min-w-[400px]">
+      <div className="space-y-3">
+        <Label>Icon Button</Label>
+        <Input
+          placeholder="Copy link"
+          value="https://example.com/share/123"
+          readOnly
+          endIcon={
+            <button
+              className="hover:text-gray-900 transition-colors"
+              onClick={() => alert("Copied!")}
+            >
+              <Copy className="h-4 w-4" />
+            </button>
+          }
+        />
+      </div>
+
+      <div className="space-y-3">
+        <Label>Wide Button (Auto-fit)</Label>
+        <Input
+          placeholder="Enter email"
+          endIcon={
+            <Button
+              size="utility"
+              className="h-8 px-3"
+              onClick={() => alert("Subscribed!")}
+            >
+              Subscribe
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  ),
+};