Refactoring getNavigationTree to include folders

examples/basic/components/checkbox/docs.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Checkbox'
+description: 'A checkbox'
+path: 'Components/Forms/Checkbox'
+---
+
+import { Checkbox } from '.'
+
+## Simple
+
+<Checkbox />

examples/basic/components/checkbox/index.tsx

@@ -0,0 +1,3 @@
+export function Checkbox(props) {
+ return <input type="checkbox" {...props} />
+}

packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx

@@ -0,0 +1,99 @@
+import { NavigationNode, ComponentNode } from 'swingset/types'
+import { LinkItem } from './link-item'
+import { cx } from 'class-variance-authority'
+
+function Category({
+  title,
+  items,
+}: {
+  title: string
+  items: NavigationNode[]
+}) {
+  return (
+    <li className="ss-list-none">
+      <section className="ss-mb-4">
+        <CategoryHeading>{title.toUpperCase()}</CategoryHeading>
+        <ComponentList items={items} />
+      </section>
+    </li>
+  )
+}
+//Swap this out for already existing heading && Enquire about semantics, https://helios.hashicorp.design/components/application-state uses <div>
+function CategoryHeading({ children }: { children: string }) {
+  return (
+    <div className="ss-uppercase ss-text-xs ss-font-semibold ss-leading-6 ss-text-foreground-faint ss-border-b ss-border-faint ss-pb-2">
+      {children.toUpperCase()}
+    </div>
+  )
+}
+
+function ComponentList({
+  isNested,
+  items,
+}: {
+  isNested?: true
+  items: NavigationNode[]
+}) {
+  return (
+    <ul
+      className={cx(
+        'ss-mt-2 ss-space-y-1',
+        isNested && 'ss-ml-2 ss-border-l ss-border-faint ss-mt-0'
+      )}
+    >
+      {items.map((item) => {
+        const isFolder = item.__type === 'folder'
+
+        if (isFolder) {
+          return (
+            <Folder key={item.title} title={item.title} items={item.children} />
+          )
+        }
+
+        const hasChildren = (item.children?.length as number) > 0
+
+        if (hasChildren) {
+          return (
+            <li key={item.title}>
+              <LinkItem to={item.slug} title={item.title} />
+              <ComponentList
+                isNested
+                items={item.children as unknown[] as ComponentNode[]}
+              />
+            </li>
+          )
+        }
+
+        return (
+          <li key={item.title}>
+            <LinkItem to={item.slug} title={item.title} />
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+function Folder({
+  title,
+  items,
+}: {
+  title: ComponentNode['title']
+  items: ComponentNode[]
+}) {
+  return (
+    <details>
+      <summary
+        className={cx(
+          'ss-text-foreground-primary hover:ss-text-foreground-action hover:ss-bg-surface-action',
+          'ss-rounded-md ss-p-2 ss-text-sm ss-leading-6 ss-cursor-pointer'
+        )}
+      >
+        {title}
+      </summary>
+      <ComponentList isNested items={items} />
+    </details>
+  )
+}
+
+export default Category

packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx

@@ -0,0 +1,22 @@
+import { NavigationTree } from 'swingset/types'
+import Category from './category'
+
+type SideNavBarProps = {
+  categories: NavigationTree
+}
+
+function SideNavigation(props: SideNavBarProps) {
+  const { categories } = props
+
+
+
+  const categoriesJSX = Object.values(categories).map(
+    (category) => (
+      <Category title={category.title} key={category.title} items={category.children} />
+    )
+  )
+
+  return <nav>{categoriesJSX}</nav>
+}
+
+export { SideNavigation }

packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx

@@ -0,0 +1,18 @@
+import { Link } from "../link"
+import { cx } from "class-variance-authority"
+
+function LinkItem({ title, to }: Record<'title' | 'to', string>) {
+ return (
+   <Link
+     className={cx(
+       'ss-text-foreground-primary hover:ss-text-foreground-action hover:ss-bg-surface-action',
+       'ss-group ss-flex ss-gap-x-3 ss-rounded-md ss-p-2 ss-text-sm ss-leading-6 ss-no-underline'
+     )}
+     href={`swingset/${to}`}
+   >
+     {title}
+   </Link>
+ )
+}
+
+export {LinkItem}

packages/swingset-theme-hashicorp/src/index.tsx

@@ -4,39 +4,10 @@ import '../style.css'
 import React from 'react'
 import Link from 'next/link'
 import { meta, categories } from 'swingset/meta'
-import { cx } from 'class-variance-authority'
+import { SideNavigation } from './components/side-nav'
 
 import Page from './page'
 
-function NavList({ items, level }: any) {
-  const isNested = level > 0
-
-  return (
-    <ul
-      role="list"
-      className={cx(
-        'ss-mt-2 ss-space-y-1',
-        isNested && 'ss-ml-2 ss-border-l ss-border-faint ss-mt-0'
-      )}
-    >
-      {items.map(({ title, slug, children }: any) => (
-        <li key={slug}>
-          <Link
-            href={`/swingset/${slug}`}
-            className={cx(
-              'ss-text-foreground-primary hover:ss-text-foreground-action hover:ss-bg-surface-action',
-              'ss-group ss-flex ss-gap-x-3 ss-rounded-md ss-p-2 ss-text-sm ss-leading-6'
-            )}
-          >
-            {title}
-          </Link>
-          {children && <NavList level={level + 1} items={children} />}
-        </li>
-      ))}
-    </ul>
-  )
-}
-
 export default function SwingsetLayout({
   children,
 }: {
@@ -45,7 +16,7 @@ export default function SwingsetLayout({
   return (
     <html lang="en" className="ss-h-full">
       <body className="ss-h-full flex flex-col">
-        <div className="ss-hidden lg:ss-fixed lg:ss-inset-y-0 lg:ss-z-50 lg:ss-flex lg:ss-w-72 lg:ss-flex-col">
+        <aside className="ss-hidden lg:ss-fixed lg:ss-inset-y-0 lg:ss-z-50 lg:ss-flex lg:ss-w-72 lg:ss-flex-col">
           <div className="ss-flex ss-grow ss-flex-col ss-gap-y-5 ss-overflow-y-auto ss-border-r ss-border-faint ss-bg-surface-faint ss-px-6 ss-py-10">
             <div className="ss-flex ss-shrink-0 ss-items-center">
               <Link
@@ -55,25 +26,9 @@ export default function SwingsetLayout({
                 Swingset
               </Link>
             </div>
-            <nav className="ss-flex ss-flex-1 ss-flex-col">
-              <ul
-                role="list"
-                className="ss-flex ss-flex-1 ss-flex-col ss-gap-y-7"
-              >
-                {Object.entries(categories).map(([title, items]) => (
-                  <>
-                    <li>
-                      <h3 className="ss-uppercase ss-text-xs ss-font-semibold ss-leading-6 ss-text-foreground-faint ss-border-b ss-border-faint ss-pb-2">
-                        {title}
-                      </h3>
-                      <NavList items={items} level={0} />
-                    </li>
-                  </>
-                ))}
-              </ul>
-            </nav>
+            <SideNavigation categories={categories} />
           </div>
-        </div>
+        </aside>
         <main className="ss-py-10 lg:ss-pl-72 ss-flex ss-flex-col ss-flex-grow ss-h-full">
           <div className="ss-px-4 sm:ss-px-6 lg:ss-px-8 ss-flex ss-flex-col ss-flex-grow">
             {children}

packages/swingset/src/default-theme/index.tsx

@@ -24,6 +24,12 @@ export default function SwingsetLayout({
                       <li>
                         <h3 className="ss-my-2 ss-text-gray-600">{title}</h3>
                       </li>
+                      {/**
+                       * TODO: Rewrite this for the new 
+                       * https://github.com/hashicorp/swingset/pull/105
+                       * @type {NavigationTree}
+                       * Leaving ts ignore to ensure build step succeeds
+                       * @ts-ignore   */}
                       {(items as string[]).map((slug: string) => (
                         <li>
                           <Link href={`/swingset/${slug}`}>{slug}</Link>

packages/swingset/src/get-nav-tree.ts

@@ -1,49 +1,86 @@
-import { ComponentEntity, DocsEntity } from './types.js'
+import {
+  ComponentEntity,
+  DocsEntity,
+  ComponentNode,
+  CategoryNode,
+} from './types.js'
 
 export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) {
-  let result: Record<
-    string,
-    Pick<ComponentEntity, 'title' | 'slug' | 'componentPath' | 'children'>[]
-  > = {}
-
   const componentEntities = entities.filter(
     (entity) => entity.__type === 'component'
   ) as ComponentEntity[]
 
-  const componentEntitiesWithChildren = componentEntities.map((entity) => {
-    if (entity.isNested) return entity
+  const componentEntitiesWithChildren = componentEntities.map(
+    (componentEntity) => {
+      if (componentEntity.isNested) return componentEntity
 
-    entity.children = componentEntities.filter(
-      (childEntity) =>
-        childEntity.isNested &&
-        childEntity.componentPath === entity.componentPath
-    )
+      componentEntity.children = componentEntities.filter(
+        (childEntity) =>
+          childEntity.isNested &&
+          childEntity.componentPath === componentEntity.componentPath
+      )
 
-    return entity
-  })
+      return componentEntity
+    }
+  )
+
+  //TODO: Account for duplicate folder names [category]/[folder]
+  const categories = new Map<CategoryNode['title'], CategoryNode>()
 
   // bucket components into categories, nested documents are categorized under their component's path
   for (const entity of componentEntitiesWithChildren) {
     if (entity.isNested) continue
 
-    //TODO: Handle Default Category
-    const category = entity.navigationData?.category!
+    const componentNode: ComponentNode = {
+      __type: 'component',
+      title: entity.title,
+      slug: entity.slug,
+      componentPath: entity.componentPath,
+      children: entity.children,
+    }
+
+    const categoryTitle = entity.navigationData?.category || 'default'
 
+    const hasCategory = categories.has(categoryTitle)
 
+    //if category doesnt exist, create it
+    const storedCategory = hasCategory
+      ? categories.get(categoryTitle)!
+      : categories.set(categoryTitle, {
+          type: 'category',
+          title: categoryTitle,
+          children: [],
+        }) && categories.get(categoryTitle)!
 
-    result[category] ||= []
 
+    const folderTitle = entity.navigationData?.folder
+    const hasFolder = !!folderTitle
+    const folder = storedCategory.children.find(
+      (node) => node.title === folderTitle
+    )
 
-
-    result[category].push({
-      title: entity.title,
-      slug: entity.slug,
-      componentPath: entity.componentPath,
-      children: entity.children,
-    })
+    //if node belongs in a folder, and folder doesnt exist, create folder with node
+    if (hasFolder && !!folder === false) {
+      storedCategory.children.push({
+        __type: 'folder',
+        title: folderTitle,
+        parentCategory: categoryTitle,
+        children: [componentNode],
+      })
+      continue
+    }
+
+    //if node belongs in a folder, and folder already exists, add node to folder
+    if (hasFolder && !!folder) {
+      folder.children ||= []
+      folder.children.push(entity)
+      continue
+    }
 
-    result[category].sort((a, b) => (a.slug > b.slug ? 1 : -1))
+    //if node doesnt belong in folder, add node
+    storedCategory.children.push(componentNode)
   }
 
-  return result
+  const tree = Object.fromEntries(categories)
+  return tree
 }

packages/swingset/src/loader.ts

@@ -3,7 +3,6 @@ import { compile, CompileOptions } from '@mdx-js/mdx'
 import { VFile } from 'vfile'
 import { matter } from 'vfile-matter'
 import { type LoaderContext } from 'webpack'
-
 import { resolveComponents } from './resolvers/component.js'
 import { stringifyEntity } from './resolvers/stringify-entity.js'
 import { getNavigationTree } from './get-nav-tree.js'
@@ -67,9 +66,7 @@ export async function loader(
     const result = `
       export const meta = {
         ${entities
-          .map(
-            (entity) => `'${entity.slug}': ${stringifyEntity(entity)}`
-          )
+          .map((entity) => `'${entity.slug}': ${stringifyEntity(entity)}`)
           .join(',\n')}
       };
 

packages/swingset/src/meta.d.ts

@@ -1,11 +1,11 @@
 /**
  * This file is a stub for a loader target and should never be imported directly
  */
-import { EvaluatedEntity } from './types'
+import { EvaluatedEntity, NavigationTree, ComponentEntity } from './types'
 
 export const meta: Record<string, EvaluatedEntity>
 
-export const categories: Record<string, string[]>
+export const categories: NavigationTree
 
 export function getEntity(slug: string): EvaluatedEntity | undefined