@syscore/ui-library 1.3.7 → 1.5.0

package/client/ui/StandardTable.stories.tsx

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