tweaks and update tests

chromaui · Aug 30, 2024 · 0cde6bf · 0cde6bf
1 parent 8dbd431
commit 0cde6bf
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
@@ -41,6 +41,6 @@ const navGroups = navItems ? transformNavGroups(navItems) : [];
 <Container>
   <Search />
   <DropdownNav client:only="react" groups={navGroups as any} url={url} />
-  <SideNav client:load sidebarItems={navGroups} url={url} />
+  <SideNav client:load sidebarGroups={navGroups} url={url} />
   <Support client:load />
 </Container>
diff --git a/src/components/Navigation/SideNav.tsx b/src/components/Navigation/SideNav.tsx
@@ -9,6 +9,11 @@ import {
   minMd,
 } from "@chromatic-com/tetra";
 import type { CollectionEntry } from "astro:content";
+import {
+  isNestedTransformedGroup,
+  type TransformedNavGroup,
+  type TransformedNavGroupItem,
+} from "./types";
 
 const Trigger = styled(Collapsible.Trigger)`
   all: unset;
@@ -147,7 +152,7 @@ export interface SidebarItem {
 
 interface SideNavProps {
   url?: string;
-  sidebarItems?: SidebarItem[];
+  sidebarGroups?: TransformedNavGroup[];
 }
 
 const withBase = (url: string) =>
@@ -165,20 +170,19 @@ const CollapsibleItem = ({
   timeline,
   isHome,
 }: {
-  item: Item;
+  item: TransformedNavGroupItem;
   url?: string;
   timeline?: boolean;
   isHome?: boolean;
 }) => {
-  const isActive =
-    isHome && item.data.isHome ? true : withBase(item.slug) === url;
+  const isActive = isHome && item.isHome ? true : withBase(item.slug) === url;
 
   return (
     <Collapsible.Content asChild>
       <Line href={withBase(item.slug)}>
         {!!timeline && <Bullet isActive={isActive} />}
         <ContentItem isActive={isActive} isTimeline={!!timeline}>
-          {item.data.sidebar.label}
+          {item.label}
         </ContentItem>
       </Line>
     </Collapsible.Content>
@@ -190,12 +194,12 @@ const CollapsibleGroup = ({
   url,
   isHome,
 }: {
-  group: SidebarItem;
+  group: TransformedNavGroup;
   url?: string;
   isHome?: boolean;
 }) => {
   const isSomeActive = group.items.some((item) => {
-    if (isNestedItem(item)) {
+    if (isNestedTransformedGroup(item)) {
       return item.items.some((nestedItem) => withBase(nestedItem.slug) === url);
     } else {
       return withBase(item.slug) === url;
@@ -214,13 +218,14 @@ const CollapsibleGroup = ({
         {group.items.map((item, j) => {
           if (isNestedItem(item)) {
             return (
-              <NestedContent>
+              <NestedContent key={j}>
                 <CollapsibleGroup group={item} url={url} isHome={isHome} />
               </NestedContent>
             );
           }
           return (
             <CollapsibleItem
+              key={j}
               item={item}
               url={url}
               timeline={group.timeline}
@@ -233,15 +238,15 @@ const CollapsibleGroup = ({
   );
 };
 
-export const SideNav = ({ url, sidebarItems }: SideNavProps) => {
+export const SideNav = ({ url, sidebarGroups }: SideNavProps) => {
   const isHome = url === homeUrl;
 
   return (
     <SidebarContainer>
-      {sidebarItems &&
-        sidebarItems.map((group, i) => {
+      {sidebarGroups &&
+        sidebarGroups.map((group, i) => {
           return (
-            <CollapsibleGroup group={group} url={url} isHome={isHome} key={i} />
+            <CollapsibleGroup key={i} group={group} url={url} isHome={isHome} />
           );
         })}
     </SidebarContainer>

diff --git a/src/components/Navigation/transform-nav-groups.test.ts b/src/components/Navigation/transform-nav-groups.test.ts
@@ -236,6 +236,7 @@ describe("transformNavGroups", () => {
             label: "UI Tests",
             order: 2,
             slug: "test",
+            isHome: false,
           },
         ],
       },
@@ -258,6 +259,7 @@ describe("transformNavGroups", () => {
                   order: 2,
                   hide: false,
                 },
+                isHome: false,
               },
             },
           ],
@@ -272,6 +274,7 @@ describe("transformNavGroups", () => {
             label: "Test",
             order: 2,
             slug: "test",
+            isHome: false,
           },
         ],
       },
@@ -310,6 +313,7 @@ describe("transformNavGroups", () => {
             label: "Introduction",
             order: 1,
             slug: "",
+            isHome: true,
           },
         ],
       },
@@ -346,6 +350,7 @@ describe("transformNavGroups", () => {
             label: "UI Tests",
             order: 999,
             slug: "test",
+            isHome: false,
           },
         ],
       },
@@ -392,6 +397,7 @@ describe("transformNavGroups", () => {
                 label: "Story Modes",
                 order: 999,
                 slug: "modes",
+                isHome: false,
               },
             ],
           },
@@ -430,6 +436,7 @@ describe("transformNavGroups", () => {
             label: "UI Tests",
             order: 2,
             slug: "test",
+            isHome: false,
           },
         ],
       },
@@ -475,6 +482,7 @@ describe("transformNavGroups", () => {
                 label: "Story Modes",
                 order: 999,
                 slug: "modes",
+                isHome: false,
               },
             ],
           },
@@ -493,30 +501,35 @@ describe("transformNavGroups", () => {
             label: "Introduction",
             order: 1,
             slug: "",
+            isHome: true,
           },
           {
             hide: false,
             label: "UI Tests",
             order: 2,
             slug: "test",
+            isHome: false,
           },
           {
             hide: false,
             label: "UI Review",
             order: 3,
             slug: "review",
+            isHome: false,
           },
           {
             hide: false,
             label: "Automate with CI",
             order: 4,
             slug: "ci",
+            isHome: false,
           },
           {
             hide: false,
             label: "Diff Inspector",
             order: 5,
             slug: "diff-inspector",
+            isHome: false,
           },
         ],
       },
@@ -581,12 +594,14 @@ describe("transformNavGroups", () => {
             label: "Introduction",
             order: 1,
             slug: "",
+            isHome: true,
           },
           {
             hide: false,
             label: "Diff Inspector",
             order: 5,
             slug: "diff-inspector",
+            isHome: false,
           },
         ],
       },
@@ -603,24 +618,28 @@ describe("transformNavGroups", () => {
             label: "Setup",
             order: 1,
             slug: "storybook",
+            isHome: false,
           },
           {
             hide: false,
             label: "Interaction tests",
             order: 2,
             slug: "interactions",
+            isHome: false,
           },
           {
             hide: false,
             label: "Publish",
             order: 3,
             slug: "storybook/publish",
+            isHome: false,
           },
           {
             hide: false,
             label: "Composition",
             order: 4,
             slug: "composition",
+            isHome: false,
           },
           {
             hide: false,
@@ -630,24 +649,28 @@ describe("transformNavGroups", () => {
                 label: "Story Modes",
                 order: 1,
                 slug: "modes",
+                isHome: false,
               },
               {
                 hide: false,
                 label: "Themes",
                 order: 3,
                 slug: "themes",
+                isHome: false,
               },
               {
                 hide: false,
                 label: "Custom decorators",
                 order: 4,
                 slug: "custom-decorators",
+                isHome: false,
               },
               {
                 hide: false,
                 label: "Viewports (legacy)",
                 order: 5,
                 slug: "legacy-viewports",
+                isHome: false,
               },
             ],
             order: 999,

diff --git a/src/components/Navigation/transform-nav-groups.ts b/src/components/Navigation/transform-nav-groups.ts
@@ -20,6 +20,7 @@ export function transformNavItem(item: NavGroupItem): TransformedNavGroupItem {
     slug: item.data?.isHome ? "" : item.slug,
     order: item.data?.sidebar?.order || 999,
     hide: item.data?.sidebar?.hide || false,
+    isHome: item.data?.isHome || false,
   };
 }
 

diff --git a/src/components/Navigation/types.ts b/src/components/Navigation/types.ts
@@ -38,7 +38,7 @@ export type TransformedNavGroupItem =
       slug: string;
       order: number;
       hide: boolean;
-      items?: TransformedNavGroupItem[];
+      isHome?: boolean;
     }
   | TransformedNavGroup;
 
@@ -50,3 +50,9 @@ export interface TransformedNavGroup {
   order: number;
   hide: boolean;
 }
+
+export function isNestedTransformedGroup(
+  item: TransformedNavGroupItem,
+): item is TransformedNavGroup {
+  return (item as TransformedNavGroup).items !== undefined;
+}