@syscore/ui-library 1.7.8 → 1.9.0

package/client/ui/CodeBadge.stories.tsx

@@ -1,76 +0,0 @@
-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/StandardTable.stories.tsx

@@ -1,311 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  StandardTable,
-  StandardTableRow,
-  StandardTableContent,
-  StandardTableContainer,
-  StandardTableHeader,
-  StandardTableRowHeader,
-  StandardTableTrigger,
-  StandardTableListRow,
-} from "@/components/ui/standard-table";
-import { CodeBadge } from "@/components/ui/code-badge";
-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/StandardTable",
-  component: StandardTable,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof StandardTable>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: 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 (
-      <StandardTableContainer>
-        <StandardTableHeader
-          title="CONCEPTS"
-          hasExpanded={hasAnyExpanded}
-          onToggleAll={toggleAllConcepts}
-        />
-
-        <StandardTable
-          allowMultiple={true}
-          expandedValues={expandedConcepts}
-          onExpandedChange={setExpandedConcepts}
-        >
-          {[...concepts].map((concept) => {
-            const slug = getSlugFromName(concept.name);
-            const Icon = CONCEPT_ICONS[slug];
-            const color = getConceptColor(slug);
-
-            return (
-              <StandardTableRow key={concept.id} value={concept.id}>
-                <StandardTableRowHeader onClick={() => navigateTo("/")}>
-                  <Icon active={true} className="size-12 shrink-0" />
-                  <span className="overline-large flex-1">{concept.name}</span>
-                  <StandardTableTrigger />
-                </StandardTableRowHeader>
-
-                <StandardTableContent>
-                  {concept.themes.map((theme) => (
-                    <StandardTableListRow
-                      key={theme.id}
-                      badge={
-                        <CodeBadge
-                          code={theme.code}
-                          style={{
-                            backgroundColor: color.contrast || color.solid,
-                            borderColor: color.border,
-                            color: "white",
-                          }}
-                        />
-                      }
-                      title={theme.name}
-                      variant="nested"
-                      onClick={() => navigateTo("/")}
-                    />
-                  ))}
-                </StandardTableContent>
-              </StandardTableRow>
-            );
-          })}
-        </StandardTable>
-      </StandardTableContainer>
-    );
-  },
-};
-
-export const ConceptsTable: 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 (
-      <StandardTableContainer>
-        <StandardTableHeader
-          title="THEMES"
-          hasExpanded={hasAnyExpanded}
-          onToggleAll={toggleAllThemes}
-        />
-
-        <StandardTable
-          allowMultiple={true}
-          expandedValues={expandedThemes}
-          onExpandedChange={setExpandedThemes}
-        >
-          {conceptData?.themes.map((theme) => {
-            return (
-              <StandardTableRow key={theme.id} value={theme.id}>
-                <StandardTableRowHeader onClick={() => navigateTo("/")}>
-                  <CodeBadge
-                    code={theme.code}
-                    style={{
-                      backgroundColor:
-                        conceptColor.contrast || conceptColor.solid,
-                      borderColor: conceptColor.border,
-                      color: "white",
-                    }}
-                  />
-                  <Text as="p" variant="body-large" className="flex-1">
-                    {theme.name}
-                  </Text>
-                  <StandardTableTrigger />
-                </StandardTableRowHeader>
-
-                <StandardTableContent>
-                  {theme.strategies.map((strategy) => (
-                    <StandardTableListRow
-                      key={strategy.id}
-                      badge={
-                        <CodeBadge
-                          code={strategy.code}
-                          style={{
-                            backgroundColor: conceptColor.light,
-                            borderColor: conceptColor.border,
-                            color: conceptColor.contrast || conceptColor.solid,
-                          }}
-                        />
-                      }
-                      title={strategy.name}
-                      variant="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>
-                      }
-                    />
-                  ))}
-                </StandardTableContent>
-              </StandardTableRow>
-            );
-          })}
-        </StandardTable>
-      </StandardTableContainer>
-    );
-  },
-};
-
-export const ThemesTable: 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 (
-      <StandardTableContainer>
-        <StandardTableHeader title="STRATEGIES" />
-
-        <StandardTable>
-          {themeData?.strategies.map((strategy) => {
-            return (
-              <StandardTableRow key={strategy.id} value={strategy.id}>
-                <StandardTableRowHeader onClick={() => navigateTo("/")}>
-                  <CodeBadge
-                    code={strategy.code}
-                    style={{
-                      backgroundColor: conceptColor.light,
-                      borderColor: conceptColor.border,
-                      color: conceptColor.contrast || conceptColor.solid,
-                    }}
-                  />
-                  <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>
-                </StandardTableRowHeader>
-
-                {/* <StandardTableContent>
-                  {themeData?.strategies.map((strategy) => (
-                    <StandardTableListRow
-                      key={strategy.id}
-                      badge={
-                        <CodeBadge
-                          code={strategy.code}
-                          style={{
-                            backgroundColor: themeColor.light,
-                            borderColor: themeColor.border,
-                            color: themeColor.contrast || themeColor.solid,
-                          }}
-                        />
-                      }
-                      title={strategy.name}
-                      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>
-                      }
-                    />
-                  ))}
-                </StandardTableContent> */}
-              </StandardTableRow>
-            );
-          })}
-        </StandardTable>
-      </StandardTableContainer>
-    );
-  },
-};