@syscore/ui-library 1.8.0 → 1.9.0

package/client/ui/Accordion.stories.tsx

@@ -0,0 +1,430 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionContainer,
+  AccordionSectionHeader,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionListRow,
+} from "@/components/ui/accordion";
+import { Tag } from "@/components/ui/tag";
+import { useState } from "react";
+import { concepts } from "@/lib/concepts-mock-data";
+import { getConceptColor } from "@/lib/concept-colors";
+import { CONCEPT_ICONS } from "@/lib/concept-icons";
+import { Text } from "@/components/ui/typography";
+
+const meta = {
+  title: "Review/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Generic unstyled example
+export const Default: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+    return (
+      <div className="p-8 max-w-2xl">
+        <Accordion
+          allowMultiple={false}
+          expandedValues={expanded}
+          onExpandedChange={setExpanded}
+          className="border rounded-lg overflow-hidden"
+        >
+          <AccordionItem value="item-1" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Is it accessible?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. It adheres to the WAI-ARIA design pattern and includes
+                smooth animations powered by Motion.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-2" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Is it animated?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. It uses Motion/React for smooth height and opacity
+                animations.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-3" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Can multiple items be open?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. Set <code>allowMultiple=true</code> to allow multiple items
+                to be expanded at once.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+// Multiple selection example
+export const MultipleSelection: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+    return (
+      <div className="p-8 max-w-2xl">
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expanded}
+          onExpandedChange={setExpanded}
+          className="border rounded-lg overflow-hidden"
+        >
+          <AccordionItem value="item-1" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section One</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section one. Multiple sections can be open
+                simultaneously.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-2" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section Two</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section two. Try opening multiple sections at once.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-3" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section Three</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section three. All three can be expanded together.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+// IWBI Standard Table styled variant
+export const IWBIConceptsTable: Story = {
+  render: () => {
+    const [expandedConcepts, setExpandedConcepts] = useState<Set<string>>(
+      new Set(),
+    );
+
+    const hasAnyExpanded = expandedConcepts.size > 0;
+
+    const toggleAllConcepts = () => {
+      if (hasAnyExpanded) {
+        setExpandedConcepts(new Set());
+      } else {
+        setExpandedConcepts(new Set(concepts.map((c) => c.id)));
+      }
+    };
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    function getSlugFromName(name: string) {
+      return name.toLowerCase().replace(/\s+/g, "-");
+    }
+
+    return (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="CONCEPTS"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllConcepts}
+          className="standard-table-header"
+        />
+
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expandedConcepts}
+          onExpandedChange={setExpandedConcepts}
+          className="border border-blue-200 rounded-xl overflow-hidden"
+        >
+          {[...concepts].map((concept) => {
+            const slug = getSlugFromName(concept.name);
+            const Icon = CONCEPT_ICONS[slug];
+            const color = getConceptColor(slug);
+
+            return (
+              <AccordionItem
+                key={concept.id}
+                value={concept.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Icon active={true} className="size-12 shrink-0" />
+                  <span className="overline-large flex-1">{concept.name}</span>
+                  <AccordionTrigger className="standard-table-trigger" />
+                </AccordionHeader>
+
+                <AccordionContent className="standard-table-content">
+                  <div className="standard-table-content__inner">
+                    {concept.themes.map((theme) => (
+                      <AccordionListRow
+                        key={theme.id}
+                        badge={
+                          <Tag
+                            variant="code"
+                            style={{
+                              backgroundColor: color.contrast || color.solid,
+                              borderColor: color.border,
+                              color: "white",
+                            }}
+                          >
+                            {theme.code}
+                          </Tag>
+                        }
+                        title={theme.name}
+                        titleClassName="standard-table-list-row__title body-large"
+                        className="standard-table-list-row standard-table-list-row--nested"
+                        onClick={() => navigateTo("/")}
+                      />
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};
+
+export const IWBIThemesTable: Story = {
+  render: () => {
+    const conceptSlug = "community";
+
+    const [expandedThemes, setExpandedThemes] = useState<Set<string>>(
+      new Set(),
+    );
+
+    const hasAnyExpanded = expandedThemes.size > 0;
+
+    const toggleAllThemes = () => {
+      if (hasAnyExpanded) {
+        setExpandedThemes(new Set());
+      } else {
+        setExpandedThemes(new Set(conceptData?.themes.map((t) => t.id) || []));
+      }
+    };
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    const conceptData = concepts.find(
+      (c) => c.name.toLowerCase() === conceptSlug.toLowerCase(),
+    );
+
+    const conceptColor = getConceptColor(conceptSlug);
+
+    return (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="THEMES"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllThemes}
+          className="standard-table-header"
+        />
+
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expandedThemes}
+          onExpandedChange={setExpandedThemes}
+          className="border border-blue-200 rounded-xl overflow-hidden"
+        >
+          {conceptData?.themes.map((theme) => {
+            return (
+              <AccordionItem
+                key={theme.id}
+                value={theme.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Tag
+                    variant="code"
+                    style={{
+                      backgroundColor:
+                        conceptColor.contrast || conceptColor.solid,
+                      borderColor: conceptColor.border,
+                      color: "white",
+                    }}
+                  >
+                    {theme.code}
+                  </Tag>
+                  <Text as="p" variant="body-large" className="flex-1">
+                    {theme.name}
+                  </Text>
+                  <AccordionTrigger className="standard-table-trigger" />
+                </AccordionHeader>
+
+                <AccordionContent className="standard-table-content">
+                  <div className="standard-table-content__inner">
+                    {theme.strategies.map((strategy) => (
+                      <AccordionListRow
+                        key={strategy.id}
+                        badge={
+                          <Tag
+                            variant="code"
+                            style={{
+                              backgroundColor: conceptColor.light,
+                              borderColor: conceptColor.border,
+                              color:
+                                conceptColor.contrast || conceptColor.solid,
+                            }}
+                          >
+                            {strategy.code}
+                          </Tag>
+                        }
+                        title={strategy.name}
+                        titleClassName="standard-table-list-row__title body-large"
+                        className="standard-table-list-row standard-table-list-row--nested"
+                        onClick={() => navigateTo("/")}
+                        rightContent={
+                          <span className="flex justify-center items-center number-large font-semibold">
+                            {strategy.points}{" "}
+                            <span className="overline-medium ml-1">
+                              PT
+                              <span
+                                className={
+                                  strategy.points === "1"
+                                    ? "opacity-0"
+                                    : "opacity-100"
+                                }
+                              >
+                                S
+                              </span>
+                            </span>
+                          </span>
+                        }
+                      />
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};
+
+export const IWBIStrategiesTable: Story = {
+  render: () => {
+    const conceptSlug = "community";
+    const themeCode = "C8";
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    const conceptData = concepts.find(
+      (c) => c.name.toLowerCase() === conceptSlug.toLowerCase(),
+    );
+    const themeData = conceptData?.themes.find((t) => t.code === themeCode);
+
+    const conceptColor = getConceptColor(conceptSlug);
+
+    return (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="STRATEGIES"
+          className="standard-table-header"
+        />
+
+        <Accordion className="border border-blue-200 rounded-xl overflow-hidden">
+          {themeData?.strategies.map((strategy) => {
+            return (
+              <AccordionItem
+                key={strategy.id}
+                value={strategy.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Tag
+                    variant="code"
+                    style={{
+                      backgroundColor: conceptColor.light,
+                      borderColor: conceptColor.border,
+                      color: conceptColor.contrast || conceptColor.solid,
+                    }}
+                  >
+                    {strategy.code}
+                  </Tag>
+                  <Text as="p" variant="body-large" className="flex-1">
+                    {strategy.name}
+                  </Text>
+                  <span className="flex justify-center items-center number-large font-semibold">
+                    {strategy.points}{" "}
+                    <span className="overline-medium ml-1">
+                      PT
+                      <span
+                        className={
+                          strategy.points === "1" ? "opacity-0" : "opacity-100"
+                        }
+                      >
+                        S
+                      </span>
+                    </span>
+                  </span>
+                </AccordionHeader>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};

package/client/ui/PageHeader.stories.tsx

@@ -8,7 +8,7 @@ import {
   PageHeaderDescription,
 } from "../components/ui/page-header";
 import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
-import { CodeBadge } from "../components/ui/code-badge";
+import { Tag } from "../components/ui/tag";
 import {
   Tooltip,
   TooltipTrigger,
@@ -96,14 +96,16 @@ export const ThemeHeader: Story = {
       <PageHeader>
         <PageHeaderTopSection className="mb-4">
           <PageHeaderLeftContent>
-            <CodeBadge
-              code={themeCode}
+            <Tag
+              variant="code"
               style={{
                 backgroundColor: conceptColor.contrast || conceptColor.solid,
                 borderColor: conceptColor.border,
                 color: "white",
               }}
-            />
+            >
+              {themeCode}
+            </Tag>
             <Tooltip trigger="click">
               <TooltipTrigger>
                 <span className="body-base text-gray-600 underline-dotted cursor-pointer">

package/client/ui/Panel.stories.tsx

@@ -2,7 +2,6 @@ import { LayoutGroup } from "motion/react";
 import { motion } from "motion/react";
 import { AnimatePresence } from "motion/react";
 import { getConceptColor } from "../lib/concept-colors";
-import { CodeBadge } from "../components/ui/code-badge";
 import { capitalize, cn } from "../lib/utils";
 import { Tag } from "../components/ui/tag";
 import { CONCEPT_ICONS } from "../lib/concept-icons";
@@ -187,8 +186,8 @@ const ExploreSidePanelView = (args: any) => {
                       onMouseLeave={() => setHoveredTheme(null)}
                       className="cursor-pointer"
                     >
-                      <CodeBadge
-                        code={theme.code}
+                      <Tag
+                        variant="code"
                         className={cn(!isSelected && "hover:border-blue-300")}
                         style={
                           isFilled
@@ -220,7 +219,9 @@ const ExploreSidePanelView = (args: any) => {
                                     borderWidth: "3px",
                                   }
                         }
-                      />
+                      >
+                        {theme.code}
+                      </Tag>
                     </button>
                   );
                 })}
@@ -281,8 +282,8 @@ const ExploreSidePanelView = (args: any) => {
                       onMouseLeave={() => setHoveredStrategy(null)}
                       className="cursor-pointer"
                     >
-                      <CodeBadge
-                        code={strategy.code}
+                      <Tag
+                        variant="code"
                         className={cn(
                           !isSelected && "hover:border-blue-300",
                           "border-[3px]",
@@ -304,7 +305,9 @@ const ExploreSidePanelView = (args: any) => {
                                 borderWidth: "3px",
                               }
                         }
-                      />
+                      >
+                        {strategy.code}
+                      </Tag>
                     </button>
                   );
                 })}
@@ -343,14 +346,14 @@ const ExploreSidePanelView = (args: any) => {
           <Label>PURSUIT</Label>
           <div className=" inline-flex gap-3">
             <Tag
-              variant="light"
+              variant="text"
               active={activePursuits.has("certification")}
               onClick={() => onPursuitToggle("certification")}
             >
               Certification
             </Tag>
             <Tag
-              variant="light"
+              variant="text"
               active={activePursuits.has("rating")}
               onClick={() => onPursuitToggle("rating")}
             >