From 34eea767f4606a61091aa7ec4e4b182c5a88e96c Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Tue, 13 Jun 2023 22:54:56 -0400 Subject: [PATCH 01/31] draft: new folder struct --- .../swingset-theme-hashicorp/src/index.tsx | 5 +- packages/swingset/src/get-nav-tree.ts | 103 +++++++++++++++++- packages/swingset/src/loader.ts | 4 +- 3 files changed, 109 insertions(+), 3 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx index 93d729c..a746c14 100644 --- a/packages/swingset-theme-hashicorp/src/index.tsx +++ b/packages/swingset-theme-hashicorp/src/index.tsx @@ -1,9 +1,10 @@ // NOTE: global css import needs to be at the top so component-specific CSS is loaded after the theme reset (component-specific CSS is loaded as a result of the swingset/meta import below) +'use client' import '../style.css' import React from 'react' import Link from 'next/link' -import { meta, categories } from 'swingset/meta' +import { meta, categories, categories__NEW } from 'swingset/meta' import { cx } from 'class-variance-authority' import Page from './page' @@ -42,6 +43,8 @@ export default function SwingsetLayout({ }: { children: React.ReactNode }) { + console.log(categories) + console.log(categories__NEW) return ( diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 7d500c4..5d8e093 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -1,5 +1,104 @@ import { ComponentEntity, DocsEntity } from './types.js' +type ComponentNavigation = Pick< + ComponentEntity, + 'title' | 'slug' | 'componentPath' | 'children' +> + +type Folder = { + title: string + parentCategory: string + children: ComponentNavigation[] +} + +type NavigationData = Record< + string, + { + folders: Folder[] + children: ComponentNavigation[] + } +> + +export function getNavigationTree__NEW(entities: (ComponentEntity | DocsEntity)[]) { + const result: NavigationData = {} + + const componentEntities = entities.filter( + (entity) => entity.__type === 'component' + ) as ComponentEntity[] + + const componentEntitiesWithChildren = componentEntities.map((entity) => { + if (entity.isNested) return entity + + entity.children = componentEntities.filter( + (childEntity) => + childEntity.isNested && + childEntity.componentPath === entity.componentPath + ) + + return entity + }) + + const folders = new Map() + + // bucket components into categories, nested documents are categorized under their component's path + for (const entity of componentEntitiesWithChildren) { + if (entity.isNested) continue + + const entityData = { + title: entity.title, + slug: entity.slug, + componentPath: entity.componentPath, + children: entity.children, + } + + //TODO: Handle Default Category + const category = entity.navigationData?.category! + const folder = entity.navigationData?.folder + + result[category] ||= { folders: [], children: [] } + + if (folder) { + if (folders.has(folder)) { + const storedFolder = folders.get(folder) + + storedFolder?.children.push(entityData) + } else { + folders.set(folder, { + title: folder, + parentCategory: category, + children: [entityData], + }) + } + } else { + result[category].children.push(entityData) + } + + + + // result[category].push({ + // title: entity.title, + // slug: entity.slug, + // componentPath: entity.componentPath, + // children: entity.children, + // }) + + // result[category].sort((a, b) => (a.slug > b.slug ? 1 : -1)) + } + + folders.forEach((folder) => { + result[folder.parentCategory].folders.push(folder) + }) + + return result +} + +/* +ORIGINAL FUNC +================= +*/ + + + export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { let result: Record< string, @@ -10,6 +109,8 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { (entity) => entity.__type === 'component' ) as ComponentEntity[] + + const componentEntitiesWithChildren = componentEntities.map((entity) => { if (entity.isNested) return entity @@ -44,6 +145,6 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { result[category].sort((a, b) => (a.slug > b.slug ? 1 : -1)) } - + console.log(result) return result } diff --git a/packages/swingset/src/loader.ts b/packages/swingset/src/loader.ts index 2ee994e..fae7d00 100644 --- a/packages/swingset/src/loader.ts +++ b/packages/swingset/src/loader.ts @@ -6,7 +6,7 @@ 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' +import { getNavigationTree, getNavigationTree__NEW } from './get-nav-tree.js' import { resolveDocs } from './resolvers/doc.js' import { NEXT_MDX_COMPONENTS_ALIAS } from './constants.js' import { type SwingsetConfig } from './config.js' @@ -90,6 +90,8 @@ export async function loader( } export const categories = ${JSON.stringify(getNavigationTree(entities))} + + export const categories__NEW = ${JSON.stringify(getNavigationTree__NEW(entities))} ` return result From 357b0abba0b8ea91e8250b67fd7248f58c2fb95e Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 17:36:18 -0400 Subject: [PATCH 02/31] Add new Component to better view form capabilities --- examples/basic/components/checkbox/docs.mdx | 11 +++++++++++ examples/basic/components/checkbox/index.tsx | 3 +++ 2 files changed, 14 insertions(+) create mode 100644 examples/basic/components/checkbox/docs.mdx create mode 100644 examples/basic/components/checkbox/index.tsx diff --git a/examples/basic/components/checkbox/docs.mdx b/examples/basic/components/checkbox/docs.mdx new file mode 100644 index 0000000..a46ff64 --- /dev/null +++ b/examples/basic/components/checkbox/docs.mdx @@ -0,0 +1,11 @@ +--- +title: 'Checkbox' +description: 'A checkbox' +path: 'Components/Forms/Checkbox' +--- + +import { Checkbox } from '.' + +## Simple + + diff --git a/examples/basic/components/checkbox/index.tsx b/examples/basic/components/checkbox/index.tsx new file mode 100644 index 0000000..e201f61 --- /dev/null +++ b/examples/basic/components/checkbox/index.tsx @@ -0,0 +1,3 @@ +export function Checkbox(props) { + return +} From 822b002faec6a19662cbae724d9e76f153569611 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 17:37:13 -0400 Subject: [PATCH 03/31] new nav data structure --- packages/swingset/src/get-nav-tree.ts | 66 +++++++++------------------ packages/swingset/src/loader.ts | 5 +- packages/swingset/src/meta.d.ts | 4 +- packages/swingset/src/types.ts | 24 ++++++++++ 4 files changed, 48 insertions(+), 51 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 5d8e093..55944ff 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -1,50 +1,34 @@ -import { ComponentEntity, DocsEntity } from './types.js' +import { ComponentEntity, DocsEntity, NavigationTree, FolderNode, ComponentNode } from './types.js' -type ComponentNavigation = Pick< - ComponentEntity, - 'title' | 'slug' | 'componentPath' | 'children' -> - -type Folder = { - title: string - parentCategory: string - children: ComponentNavigation[] -} - -type NavigationData = Record< - string, - { - folders: Folder[] - children: ComponentNavigation[] - } -> - -export function getNavigationTree__NEW(entities: (ComponentEntity | DocsEntity)[]) { - const result: NavigationData = {} +export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { + const result: NavigationTree = {} 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( + componentEntity.children = componentEntities.filter( (childEntity) => childEntity.isNested && - childEntity.componentPath === entity.componentPath + childEntity.componentPath === componentEntity.componentPath ) - return entity + return componentEntity }) + - const folders = new Map() + //TODO: Account for duplicate folder names [category]/[folder] + const folders = new Map() // bucket components into categories, nested documents are categorized under their component's path for (const entity of componentEntitiesWithChildren) { if (entity.isNested) continue - const entityData = { + const entityData: ComponentNode = { + type: 'component', title: entity.title, slug: entity.slug, componentPath: entity.componentPath, @@ -55,7 +39,7 @@ export function getNavigationTree__NEW(entities: (ComponentEntity | DocsEntity)[ const category = entity.navigationData?.category! const folder = entity.navigationData?.folder - result[category] ||= { folders: [], children: [] } + result[category] ||= [] if (folder) { if (folders.has(folder)) { @@ -64,38 +48,29 @@ export function getNavigationTree__NEW(entities: (ComponentEntity | DocsEntity)[ storedFolder?.children.push(entityData) } else { folders.set(folder, { + type: 'folder', title: folder, parentCategory: category, children: [entityData], }) } } else { - result[category].children.push(entityData) + result[category].push(entityData) } - - - // result[category].push({ - // title: entity.title, - // slug: entity.slug, - // componentPath: entity.componentPath, - // children: entity.children, - // }) - - // result[category].sort((a, b) => (a.slug > b.slug ? 1 : -1)) } - + //TODO: Sort Categories Alphbetically before returning -> see original folders.forEach((folder) => { - result[folder.parentCategory].folders.push(folder) + result[folder.parentCategory].push(folder) }) return result } /* -ORIGINAL FUNC +ORIGINAL FUNC - keeping to reference sort ================= -*/ + @@ -148,3 +123,4 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { console.log(result) return result } +*/ \ No newline at end of file diff --git a/packages/swingset/src/loader.ts b/packages/swingset/src/loader.ts index fae7d00..c342fc9 100644 --- a/packages/swingset/src/loader.ts +++ b/packages/swingset/src/loader.ts @@ -3,10 +3,9 @@ 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, getNavigationTree__NEW } from './get-nav-tree.js' +import { getNavigationTree } from './get-nav-tree.js' import { resolveDocs } from './resolvers/doc.js' import { NEXT_MDX_COMPONENTS_ALIAS } from './constants.js' import { type SwingsetConfig } from './config.js' @@ -90,8 +89,6 @@ export async function loader( } export const categories = ${JSON.stringify(getNavigationTree(entities))} - - export const categories__NEW = ${JSON.stringify(getNavigationTree__NEW(entities))} ` return result diff --git a/packages/swingset/src/meta.d.ts b/packages/swingset/src/meta.d.ts index 348aae0..b4939be 100644 --- a/packages/swingset/src/meta.d.ts +++ b/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 -export const categories: Record +export const categories: NavigationTree export function getEntity(slug: string): EvaluatedEntity | undefined diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 61c7460..9dc7e4e 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -40,3 +40,27 @@ export type EvaluatedEntity = T & { load: () => Promise } + +/* +Utility type to extract just necessary properties before going to theme, also renames '__type' key to type for external usage. +Unwanted Behavior?? The children property comes through as a ComponentEntity, which exposes the entities to the theme/clients +*/ +export type ComponentNode = Omit< + Pick< + ComponentEntity, + '__type' | 'title' | 'slug' | 'componentPath' | 'children' + >, + '__type' +> & { type: ComponentEntity['__type'] } + +export type FolderNode = { + type: 'folder' + title: string + parentCategory: string + children: ComponentNode[] +} + +export type NavigationNode = ComponentNode | FolderNode + + +export type NavigationTree = Record From 50b9643bb01ccca027a7fd0ecef856f14a7d6697 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 17:38:16 -0400 Subject: [PATCH 04/31] refactor ui to represent new nav data structure --- .../src/components/side-nav/category.tsx | 61 ++++++++++++++++ .../src/components/side-nav/index.tsx | 70 +++++++++++++++++++ .../swingset-theme-hashicorp/src/index.tsx | 26 ++----- 3 files changed, 136 insertions(+), 21 deletions(-) create mode 100644 packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx create mode 100644 packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx new file mode 100644 index 0000000..44ed9ac --- /dev/null +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -0,0 +1,61 @@ +import { NavigationNode } from 'swingset/types' +import { Link } from '../link' +import { cx } from 'class-variance-authority' + +function Category({ + title, + items, +}: { + title: string + items: NavigationNode[] +}) { + return ( +
  • +
    + {title.toUpperCase()} + +
    +
    • + ) +} +//Swap this out for already existing heading +function CategoryHeading({ children }: { children: string }) { + return

    {children.toUpperCase()}

    +} + +function ComponentList({ + isNested, + items, +}: { + isNested?: boolean + items: NavigationNode[] +}) { + return ( +
      + {items.map((item) => { + const isFolder = item.type === 'folder' + + return ( +
    • + {isFolder ? ( + + ) : ( + {item.title} + )} +
      • + ) + })} +
    + ) +} + +function Folder({ title, items }: { title: string; items: any[] }) { + return ( +
    + {title} + +
    + ) +} + +export default Category diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx new file mode 100644 index 0000000..5dcdd8a --- /dev/null +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -0,0 +1,70 @@ +import { NavigationTree } from 'swingset/types' +import Category from './category' + +/* +Keeping to reference old styling +================================ +function NavList({ items, level }: any) { + const isNested = level > 0 + + return ( +
      + {items.map(({ title, slug, children }: any) => ( +
    • + + {title} + + {children && } +
      • + ))} +
    + ) +} +*/ + +type SideNavBarProps = { + categories: NavigationTree +} + +function SideNavBar(props: SideNavBarProps) { + const { categories } = props + + + + + const categoriesArr = Object.entries(categories) + console.log(categoriesArr) + + const categoriesJSX = categoriesArr.map(([category, entities]) => { + + return + + }) + + + + + return ( + + ) +} + +export default SideNavBar diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx index a746c14..476c4b1 100644 --- a/packages/swingset-theme-hashicorp/src/index.tsx +++ b/packages/swingset-theme-hashicorp/src/index.tsx @@ -1,11 +1,11 @@ // NOTE: global css import needs to be at the top so component-specific CSS is loaded after the theme reset (component-specific CSS is loaded as a result of the swingset/meta import below) -'use client' import '../style.css' import React from 'react' import Link from 'next/link' -import { meta, categories, categories__NEW } from 'swingset/meta' +import { meta, categories } from 'swingset/meta' import { cx } from 'class-variance-authority' +import SideNavigation from './components/side-nav' import Page from './page' @@ -43,8 +43,8 @@ export default function SwingsetLayout({ }: { children: React.ReactNode }) { - console.log(categories) - console.log(categories__NEW) + + return ( @@ -58,23 +58,7 @@ export default function SwingsetLayout({ Swingset - +
    From 2008875b10505e33d6c8c7212b9d072982905901 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 19:13:26 -0400 Subject: [PATCH 05/31] enforce type safety --- .../src/components/side-nav/category.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index 44ed9ac..d5c5291 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -1,4 +1,4 @@ -import { NavigationNode } from 'swingset/types' +import { NavigationNode, ComponentNode } from 'swingset/types' import { Link } from '../link' import { cx } from 'class-variance-authority' @@ -27,7 +27,7 @@ function ComponentList({ isNested, items, }: { - isNested?: boolean + isNested?: true items: NavigationNode[] }) { return ( @@ -49,7 +49,7 @@ function ComponentList({ ) } -function Folder({ title, items }: { title: string; items: any[] }) { +function Folder({ title, items }: { title: ComponentNode['title']; items: ComponentNode[] }) { return (
    {title} From 2b3123a9351e6f949455d7326f01040e575b13da Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 19:19:39 -0400 Subject: [PATCH 06/31] remove log --- .../swingset-theme-hashicorp/src/components/side-nav/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index 5dcdd8a..0bdc5fa 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -45,7 +45,7 @@ function SideNavBar(props: SideNavBarProps) { const categoriesArr = Object.entries(categories) - console.log(categoriesArr) + const categoriesJSX = categoriesArr.map(([category, entities]) => { From cad984ce1deba9918608f082cab5c1d014dd69c9 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 19:49:16 -0400 Subject: [PATCH 07/31] prevent build failure --- packages/swingset/src/default-theme/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/swingset/src/default-theme/index.tsx b/packages/swingset/src/default-theme/index.tsx index 4c82e32..1aeed39 100644 --- a/packages/swingset/src/default-theme/index.tsx +++ b/packages/swingset/src/default-theme/index.tsx @@ -24,6 +24,12 @@ export default function SwingsetLayout({

  • {title}

    • + {/** + * 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) => (
  • {slug} From c366b49493c3530ca7875c33ef1e3f52e4fcb426 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 20:04:08 -0400 Subject: [PATCH 08/31] add styles --- .../src/components/side-nav/category.tsx | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index d5c5291..6093742 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -1,3 +1,4 @@ +'use client' import { NavigationNode, ComponentNode } from 'swingset/types' import { Link } from '../link' import { cx } from 'class-variance-authority' @@ -27,20 +28,31 @@ function ComponentList({ isNested, items, }: { - isNested?: true + isNested?: true items: NavigationNode[] }) { return ( -
      +
        {items.map((item) => { const isFolder = item.type === 'folder' - + console.log(item) return ( -
      • +
      • {isFolder ? ( ) : ( - {item.title} + + {item.title} + )}
        • ) @@ -49,10 +61,23 @@ function ComponentList({ ) } -function Folder({ title, items }: { title: ComponentNode['title']; items: ComponentNode[] }) { +function Folder({ + title, + items, +}: { + title: ComponentNode['title'] + items: ComponentNode[] +}) { return (
        - {title} + + {title} +
        ) From f2896665fd6b737e677e63dc1a87e40299fcad5a Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 21:14:34 -0400 Subject: [PATCH 09/31] formatting --- .../src/components/side-nav/category.tsx | 61 +++++++++++-------- .../swingset-theme-hashicorp/src/index.tsx | 34 +---------- 2 files changed, 39 insertions(+), 56 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index 6093742..65b90b8 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -1,6 +1,5 @@ -'use client' import { NavigationNode, ComponentNode } from 'swingset/types' -import { Link } from '../link' +import { LinkItem } from './link-item' import { cx } from 'class-variance-authority' function Category({ @@ -19,9 +18,9 @@ function Category({ ) } -//Swap this out for already existing heading +//Swap this out for already existing heading && Enquire about semantics, https://helios.hashicorp.design/components/application-state uses
        function CategoryHeading({ children }: { children: string }) { - return

        {children.toUpperCase()}

        + return
        {children.toUpperCase()}
        } function ComponentList({ @@ -32,28 +31,39 @@ function ComponentList({ items: NavigationNode[] }) { return ( -
          +
            {items.map((item) => { const isFolder = item.type === 'folder' - console.log(item) + + if (isFolder) { + return + } + + const hasChildren = (item.children?.length as number) > 0 + + if (hasChildren) { + return ( +
          • + + +
            • + ) + } + return ( -
          • - {isFolder ? ( - - ) : ( - - {item.title} - - )} +
          • +
            • ) })} @@ -73,14 +83,15 @@ function Folder({ {title} - +
    • ) } + export default Category diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx index 476c4b1..79c4954 100644 --- a/packages/swingset-theme-hashicorp/src/index.tsx +++ b/packages/swingset-theme-hashicorp/src/index.tsx @@ -5,38 +5,10 @@ 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 {SideNavigation} from './components/side-nav' import Page from './page' -function NavList({ items, level }: any) { - const isNested = level > 0 - - return ( -
      - {items.map(({ title, slug, children }: any) => ( -
    • - - {title} - - {children && } -
      • - ))} -
    - ) -} export default function SwingsetLayout({ children, @@ -48,7 +20,7 @@ export default function SwingsetLayout({ return ( -
    +
    {children} From 1cb9e86752635eed2be382e5bd0f03170562b1b3 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 21:15:02 -0400 Subject: [PATCH 10/31] formatting --- .../src/components/side-nav/index.tsx | 33 +++++-------------- .../src/components/side-nav/link-item.tsx | 18 ++++++++++ .../swingset-theme-hashicorp/src/index.tsx | 7 ++-- 3 files changed, 28 insertions(+), 30 deletions(-) create mode 100644 packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index 0bdc5fa..6619cb6 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -38,33 +38,16 @@ type SideNavBarProps = { categories: NavigationTree } -function SideNavBar(props: SideNavBarProps) { +function SideNavigation(props: SideNavBarProps) { const { categories } = props - - - - const categoriesArr = Object.entries(categories) - - - const categoriesJSX = categoriesArr.map(([category, entities]) => { - - return - - }) - - - - - return ( - + const categoriesJSX = Object.entries(categories).map( + ([category, entities]) => ( + + ) ) + + return } -export default SideNavBar +export { SideNavigation } diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx new file mode 100644 index 0000000..281bb2e --- /dev/null +++ b/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 ( + + {title} + + ) +} + +export {LinkItem} \ No newline at end of file diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx index 79c4954..c2dfe15 100644 --- a/packages/swingset-theme-hashicorp/src/index.tsx +++ b/packages/swingset-theme-hashicorp/src/index.tsx @@ -5,18 +5,15 @@ 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 { SideNavigation } from './components/side-nav' import Page from './page' - export default function SwingsetLayout({ children, }: { children: React.ReactNode }) { - - return ( @@ -30,7 +27,7 @@ export default function SwingsetLayout({ Swingset
    - +
    From 678197a0db9be861fc743b51c49ad3f30020f1aa Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 21:15:11 -0400 Subject: [PATCH 11/31] styling --- .../src/components/side-nav/category.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index 65b90b8..c598175 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -11,7 +11,7 @@ function Category({ }) { return (
  • -
    +
    {title.toUpperCase()}
    From b529bf8a850ed492b50a7c1eeb98233f0d8af783 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 23:39:02 -0400 Subject: [PATCH 12/31] clean up, remove unused --- .../src/components/side-nav/index.tsx | 33 ------------------- .../swingset-theme-hashicorp/src/index.tsx | 1 - 2 files changed, 34 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index 6619cb6..ed5ea56 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -1,39 +1,6 @@ import { NavigationTree } from 'swingset/types' import Category from './category' -/* -Keeping to reference old styling -================================ -function NavList({ items, level }: any) { - const isNested = level > 0 - - return ( -
      - {items.map(({ title, slug, children }: any) => ( -
    • - - {title} - - {children && } -
      • - ))} -
    - ) -} -*/ - type SideNavBarProps = { categories: NavigationTree } diff --git a/packages/swingset-theme-hashicorp/src/index.tsx b/packages/swingset-theme-hashicorp/src/index.tsx index c2dfe15..1728c9a 100644 --- a/packages/swingset-theme-hashicorp/src/index.tsx +++ b/packages/swingset-theme-hashicorp/src/index.tsx @@ -4,7 +4,6 @@ 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' From 23f82c85b9e222e9d6b533422129c9315368b9ab Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 23:39:44 -0400 Subject: [PATCH 13/31] sorting function --- packages/swingset/src/get-nav-tree.ts | 103 ++++++++++++-------------- 1 file changed, 46 insertions(+), 57 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 55944ff..73631a1 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -1,7 +1,7 @@ -import { ComponentEntity, DocsEntity, NavigationTree, FolderNode, ComponentNode } from './types.js' +import { ComponentEntity, DocsEntity, NavigationTree, FolderNode, ComponentNode, NavigationNode } from './types.js' export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { - const result: NavigationTree = {} + const tree: NavigationTree = {} const componentEntities = entities.filter( (entity) => entity.__type === 'component' @@ -39,7 +39,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { const category = entity.navigationData?.category! const folder = entity.navigationData?.folder - result[category] ||= [] + tree[category] ||= [] if (folder) { if (folders.has(folder)) { @@ -55,72 +55,61 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { }) } } else { - result[category].push(entityData) + tree[category].push(entityData) } } - //TODO: Sort Categories Alphbetically before returning -> see original + folders.forEach((folder) => { - result[folder.parentCategory].push(folder) + tree[folder.parentCategory].push(folder) }) - return result -} - -/* -ORIGINAL FUNC - keeping to reference sort -================= - - - - -export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { - let result: Record< - string, - Pick[] - > = {} - - const componentEntities = entities.filter( - (entity) => entity.__type === 'component' - ) as ComponentEntity[] - + const sortedTree = sortNavigationTree(tree); + return sortedTree +} - const componentEntitiesWithChildren = componentEntities.map((entity) => { - if (entity.isNested) return entity - - entity.children = componentEntities.filter( - (childEntity) => - childEntity.isNested && - childEntity.componentPath === entity.componentPath - ) - - return entity - }) - - // 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 compareTitleSort = (a: any, b: any) => { + if (a.title > b.title) return 1 + return -1 +} - result[category] ||= [] +function sortNavigationTree(tree: NavigationTree) { + const sortedByCategories = Object.keys(tree) + .sort() + .reduce((acc, category) => { + acc[category] = tree[category] + return acc + }, {}) + + function sortInPlace(toSort: NavigationTree[string] | NavigationTree[string][number]) { + + const isRoot = 'length' in toSort + + isRoot ? toSort as NavigationTree[string] : toSort as NavigationTree[string][number] + + if (isRoot) { + (toSort as NavigationTree[string]).sort(compareTitleSort) + } + + for (const node of (toSort as NavigationTree[string])) { + + const hasChildren = 'children' in node && node.children!.length > 0; + + + if (hasChildren) { + sortInPlace(node.children! as unknown as NavigationNode) + } + } + + + } + Object.values(sortedByCategories).forEach((categoryContents) => sortInPlace(categoryContents)) - result[category].push({ - title: entity.title, - slug: entity.slug, - componentPath: entity.componentPath, - children: entity.children, - }) - - result[category].sort((a, b) => (a.slug > b.slug ? 1 : -1)) - } - console.log(result) - return result -} -*/ \ No newline at end of file + return sortedByCategories +} \ No newline at end of file From 448f6ee4a6c2f5ad8295d79374569275425e9d06 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Wed, 14 Jun 2023 23:39:52 -0400 Subject: [PATCH 14/31] styling --- .../src/components/side-nav/category.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index c598175..bfcc946 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -11,7 +11,7 @@ function Category({ }) { return (
  • -
    +
    {title.toUpperCase()}
    @@ -20,7 +20,11 @@ function Category({ } //Swap this out for already existing heading && Enquire about semantics, https://helios.hashicorp.design/components/application-state uses
    function CategoryHeading({ children }: { children: string }) { - return
    {children.toUpperCase()}
    + return ( +
    + {children.toUpperCase()} +
    + ) } function ComponentList({ @@ -41,14 +45,16 @@ function ComponentList({ const isFolder = item.type === 'folder' if (isFolder) { - return + return ( + + ) } const hasChildren = (item.children?.length as number) > 0 if (hasChildren) { return ( -
  • +
  • - +
    • ) })} @@ -93,5 +96,4 @@ function Folder({ ) } - export default Category From af5e17aa733de810d4788784ea320d1736a435e9 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 11:52:55 -0400 Subject: [PATCH 15/31] reshape tree structure --- .../src/components/side-nav/index.tsx | 8 +- packages/swingset/src/get-nav-tree.ts | 147 ++++++++++-------- packages/swingset/src/types.ts | 9 +- 3 files changed, 98 insertions(+), 66 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index ed5ea56..0bf34e5 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -8,9 +8,11 @@ type SideNavBarProps = { function SideNavigation(props: SideNavBarProps) { const { categories } = props - const categoriesJSX = Object.entries(categories).map( - ([category, entities]) => ( - + + + const categoriesJSX = Object.values(categories).map( + (category) => ( + ) ) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 73631a1..da12599 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -1,27 +1,34 @@ -import { ComponentEntity, DocsEntity, NavigationTree, FolderNode, ComponentNode, NavigationNode } from './types.js' +import { + ComponentEntity, + DocsEntity, + ComponentNode, + CategoryNode, +} from './types.js' export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { - const tree: NavigationTree = {} + const componentEntities = entities.filter( (entity) => entity.__type === 'component' ) as ComponentEntity[] - const componentEntitiesWithChildren = componentEntities.map((componentEntity) => { - if (componentEntity.isNested) return componentEntity + const componentEntitiesWithChildren = componentEntities.map( + (componentEntity) => { + if (componentEntity.isNested) return componentEntity - componentEntity.children = componentEntities.filter( - (childEntity) => - childEntity.isNested && - childEntity.componentPath === componentEntity.componentPath - ) + componentEntity.children = componentEntities.filter( + (childEntity) => + childEntity.isNested && + childEntity.componentPath === componentEntity.componentPath + ) - return componentEntity - }) - + return componentEntity + } + ) //TODO: Account for duplicate folder names [category]/[folder] - const folders = new Map() + const categories = new Map() + // bucket components into categories, nested documents are categorized under their component's path for (const entity of componentEntitiesWithChildren) { @@ -35,48 +42,63 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { children: entity.children, } - //TODO: Handle Default Category - const category = entity.navigationData?.category! - const folder = entity.navigationData?.folder + + const categoryTitle = entity.navigationData?.category || 'default' + const folderTitle = entity.navigationData?.folder + const hasFolder = !!folderTitle + + const storedCategory = + categories.has(categoryTitle) && categories.get(categoryTitle) - tree[category] ||= [] + - if (folder) { - if (folders.has(folder)) { - const storedFolder = folders.get(folder) + if (!!storedCategory) { + if (hasFolder) { + + storedCategory.children.forEach((child) => { + const correctFolder = + child.type === 'folder' && child.title === folderTitle - storedFolder?.children.push(entityData) + if (correctFolder) { + child.children.push(entityData) + } + }) + }else{ + storedCategory.children.push(entityData) + } + } else { + if (hasFolder) { + categories.set(categoryTitle, { + type: 'category', + title: categoryTitle, + children: [ + { + type: 'folder', + title: folderTitle, + parentCategory: categoryTitle, + children: [entityData], + }, + ], + }) } else { - folders.set(folder, { - type: 'folder', - title: folder, - parentCategory: category, + categories.set(categoryTitle, { + type: 'category', + title: categoryTitle, children: [entityData], }) } - } else { - tree[category].push(entityData) } - } - folders.forEach((folder) => { - tree[folder.parentCategory].push(folder) - }) - - const sortedTree = sortNavigationTree(tree); - - return sortedTree + const tree = Object.fromEntries(categories) + return tree } - - - +/* const compareTitleSort = (a: any, b: any) => { if (a.title > b.title) return 1 return -1 } - function sortNavigationTree(tree: NavigationTree) { const sortedByCategories = Object.keys(tree) .sort() @@ -85,31 +107,32 @@ function sortNavigationTree(tree: NavigationTree) { return acc }, {}) - function sortInPlace(toSort: NavigationTree[string] | NavigationTree[string][number]) { - - const isRoot = 'length' in toSort - - isRoot ? toSort as NavigationTree[string] : toSort as NavigationTree[string][number] - - if (isRoot) { - (toSort as NavigationTree[string]).sort(compareTitleSort) - } - - for (const node of (toSort as NavigationTree[string])) { - - const hasChildren = 'children' in node && node.children!.length > 0; - - - if (hasChildren) { - sortInPlace(node.children! as unknown as NavigationNode) - } + function sortInPlace( + toSort: NavigationTree[string] | NavigationTree[string][number] + ) { + const isRoot = 'length' in toSort + + isRoot + ? (toSort as NavigationTree[string]) + : (toSort as NavigationTree[string][number]) + + if (isRoot) { + ;(toSort as NavigationTree[string]).sort(compareTitleSort) + } + + for (const node of toSort as NavigationTree[string]) { + const hasChildren = 'children' in node && node.children!.length > 0 + + if (hasChildren) { + sortInPlace(node.children! as unknown as NavigationNode) } - - } + } - Object.values(sortedByCategories).forEach((categoryContents) => sortInPlace(categoryContents)) + Object.values(sortedByCategories).forEach((categoryContents) => + sortInPlace(categoryContents) + ) - return sortedByCategories -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 9dc7e4e..69f0e27 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -62,5 +62,12 @@ export type FolderNode = { export type NavigationNode = ComponentNode | FolderNode +export type CategoryNode = { + type: 'category' + title: string + children: NavigationNode[] +} + + -export type NavigationTree = Record +export type NavigationTree = CategoryNode[] From 47617842a365a0fd9f8f9060fbdf05c9aa362fc9 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 12:01:26 -0400 Subject: [PATCH 16/31] make `readonly` --- packages/swingset/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 69f0e27..09f41a4 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -51,7 +51,7 @@ export type ComponentNode = Omit< '__type' | 'title' | 'slug' | 'componentPath' | 'children' >, '__type' -> & { type: ComponentEntity['__type'] } +> & { readonly type: ComponentEntity['__type'] } export type FolderNode = { type: 'folder' From f216eada51bc4bea1637d427493e9f80c323f460 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 12:10:20 -0400 Subject: [PATCH 17/31] remove `readonly` --- packages/swingset/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 09f41a4..69f0e27 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -51,7 +51,7 @@ export type ComponentNode = Omit< '__type' | 'title' | 'slug' | 'componentPath' | 'children' >, '__type' -> & { readonly type: ComponentEntity['__type'] } +> & { type: ComponentEntity['__type'] } export type FolderNode = { type: 'folder' From 5d0001cb8de8014e42d1885f618494e2034ad55f Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 12:18:30 -0400 Subject: [PATCH 18/31] remove comment --- packages/swingset/src/get-nav-tree.ts | 45 +-------------------------- 1 file changed, 1 insertion(+), 44 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index da12599..32f64d3 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -92,47 +92,4 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { const tree = Object.fromEntries(categories) return tree -} -/* -const compareTitleSort = (a: any, b: any) => { - if (a.title > b.title) return 1 - return -1 -} - -function sortNavigationTree(tree: NavigationTree) { - const sortedByCategories = Object.keys(tree) - .sort() - .reduce((acc, category) => { - acc[category] = tree[category] - return acc - }, {}) - - function sortInPlace( - toSort: NavigationTree[string] | NavigationTree[string][number] - ) { - const isRoot = 'length' in toSort - - isRoot - ? (toSort as NavigationTree[string]) - : (toSort as NavigationTree[string][number]) - - if (isRoot) { - ;(toSort as NavigationTree[string]).sort(compareTitleSort) - } - - for (const node of toSort as NavigationTree[string]) { - const hasChildren = 'children' in node && node.children!.length > 0 - - if (hasChildren) { - sortInPlace(node.children! as unknown as NavigationNode) - } - } - } - - Object.values(sortedByCategories).forEach((categoryContents) => - sortInPlace(categoryContents) - ) - - return sortedByCategories -} -*/ \ No newline at end of file +} \ No newline at end of file From ddbe5bb7444070d72e98d10e7f5a6d0f009d302e Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 13:50:20 -0400 Subject: [PATCH 19/31] formatting --- packages/swingset/src/loader.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/swingset/src/loader.ts b/packages/swingset/src/loader.ts index c342fc9..95542e7 100644 --- a/packages/swingset/src/loader.ts +++ b/packages/swingset/src/loader.ts @@ -5,7 +5,7 @@ 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' +import { getNavigationTree } from './get-nav-tree.js' import { resolveDocs } from './resolvers/doc.js' import { NEXT_MDX_COMPONENTS_ALIAS } from './constants.js' import { type SwingsetConfig } from './config.js' @@ -66,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')} }; From 37f21b2c376c651379b660c628c6c96c491d3ba5 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 13:56:36 -0400 Subject: [PATCH 20/31] formatting --- packages/swingset/src/get-nav-tree.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 32f64d3..11da692 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -6,8 +6,6 @@ import { } from './types.js' export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { - - const componentEntities = entities.filter( (entity) => entity.__type === 'component' ) as ComponentEntity[] @@ -29,7 +27,6 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { //TODO: Account for duplicate folder names [category]/[folder] const categories = new Map() - // bucket components into categories, nested documents are categorized under their component's path for (const entity of componentEntitiesWithChildren) { if (entity.isNested) continue @@ -42,7 +39,6 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { children: entity.children, } - const categoryTitle = entity.navigationData?.category || 'default' const folderTitle = entity.navigationData?.folder const hasFolder = !!folderTitle @@ -50,11 +46,8 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { const storedCategory = categories.has(categoryTitle) && categories.get(categoryTitle) - - if (!!storedCategory) { if (hasFolder) { - storedCategory.children.forEach((child) => { const correctFolder = child.type === 'folder' && child.title === folderTitle @@ -63,7 +56,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { child.children.push(entityData) } }) - }else{ + } else { storedCategory.children.push(entityData) } } else { @@ -92,4 +85,4 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { const tree = Object.fromEntries(categories) return tree -} \ No newline at end of file +} From 5a3a1f382f7bbbacc8a309b25d8342634ee08def Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 13:58:30 -0400 Subject: [PATCH 21/31] remove `Omit` --- packages/swingset/src/types.ts | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 69f0e27..6a88143 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -41,17 +41,10 @@ export type EvaluatedEntity = load: () => Promise } -/* -Utility type to extract just necessary properties before going to theme, also renames '__type' key to type for external usage. -Unwanted Behavior?? The children property comes through as a ComponentEntity, which exposes the entities to the theme/clients -*/ -export type ComponentNode = Omit< - Pick< - ComponentEntity, - '__type' | 'title' | 'slug' | 'componentPath' | 'children' - >, - '__type' -> & { type: ComponentEntity['__type'] } +export type ComponentNode = Pick< + ComponentEntity, + '__type' | 'title' | 'slug' | 'componentPath' | 'children' +> export type FolderNode = { type: 'folder' @@ -68,6 +61,4 @@ export type CategoryNode = { children: NavigationNode[] } - - export type NavigationTree = CategoryNode[] From 1756b6d7b1af7ca7cf7d3a7264cbc81e004850bf Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 14:02:57 -0400 Subject: [PATCH 22/31] add `__` --- packages/swingset/src/get-nav-tree.ts | 6 +++--- packages/swingset/src/types.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 11da692..e9fead3 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -32,7 +32,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { if (entity.isNested) continue const entityData: ComponentNode = { - type: 'component', + __type: 'component', title: entity.title, slug: entity.slug, componentPath: entity.componentPath, @@ -50,7 +50,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { if (hasFolder) { storedCategory.children.forEach((child) => { const correctFolder = - child.type === 'folder' && child.title === folderTitle + child.__type === 'folder' && child.title === folderTitle if (correctFolder) { child.children.push(entityData) @@ -66,7 +66,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { title: categoryTitle, children: [ { - type: 'folder', + __type: 'folder', title: folderTitle, parentCategory: categoryTitle, children: [entityData], diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 6a88143..5d11197 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -47,7 +47,7 @@ export type ComponentNode = Pick< > export type FolderNode = { - type: 'folder' + __type: 'folder' title: string parentCategory: string children: ComponentNode[] From d70bf281467f262a7b8f340603051d2438cffb04 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 14:06:12 -0400 Subject: [PATCH 23/31] add `__` --- .../src/components/side-nav/category.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index bfcc946..2e22449 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -42,7 +42,7 @@ function ComponentList({ )} > {items.map((item) => { - const isFolder = item.type === 'folder' + const isFolder = item.__type === 'folder' if (isFolder) { return ( From 3163c553e326bbb5315d0e26ab5c0ec152635037 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 15:01:43 -0400 Subject: [PATCH 24/31] logic rewrite --- packages/swingset/src/get-nav-tree.ts | 71 +++++++++++++-------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index e9fead3..556f5f7 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -40,47 +40,46 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { } const categoryTitle = entity.navigationData?.category || 'default' + + let storedCategory = + categories.has(categoryTitle) && categories.get(categoryTitle)! + + //if category doesnt exist, create it + if (storedCategory === false) { + categories.set(categoryTitle, { + type: 'category', + title: categoryTitle, + children: [], + }) + storedCategory = categories.get(categoryTitle)! + } + const folderTitle = entity.navigationData?.folder const hasFolder = !!folderTitle + const folder = storedCategory.children.find( + (node) => node.title === folderTitle + ) - const storedCategory = - categories.has(categoryTitle) && categories.get(categoryTitle) - - if (!!storedCategory) { - if (hasFolder) { - storedCategory.children.forEach((child) => { - const correctFolder = - child.__type === 'folder' && child.title === folderTitle + //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: [entityData], + }) + continue + } - if (correctFolder) { - child.children.push(entityData) - } - }) - } else { - storedCategory.children.push(entityData) - } - } else { - if (hasFolder) { - categories.set(categoryTitle, { - type: 'category', - title: categoryTitle, - children: [ - { - __type: 'folder', - title: folderTitle, - parentCategory: categoryTitle, - children: [entityData], - }, - ], - }) - } else { - categories.set(categoryTitle, { - type: 'category', - title: categoryTitle, - children: [entityData], - }) - } + //if node belongs in a folder, and folder already exists, add node to folder + if (hasFolder && !!folder) { + folder.children ||= [] + folder.children.push(entity) + continue } + + //if node doesnt belong in folder, add node + storedCategory.children.push(entityData) } const tree = Object.fromEntries(categories) From c0217d8208edb440d62a5b57f05a2e50fc4808e2 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 15:21:56 -0400 Subject: [PATCH 25/31] rename to node --- packages/swingset/src/get-nav-tree.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 556f5f7..4a9b890 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -31,7 +31,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { for (const entity of componentEntitiesWithChildren) { if (entity.isNested) continue - const entityData: ComponentNode = { + const componentNode: ComponentNode = { __type: 'component', title: entity.title, slug: entity.slug, @@ -66,7 +66,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { __type: 'folder', title: folderTitle, parentCategory: categoryTitle, - children: [entityData], + children: [componentNode], }) continue } @@ -79,7 +79,7 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { } //if node doesnt belong in folder, add node - storedCategory.children.push(entityData) + storedCategory.children.push(componentNode) } const tree = Object.fromEntries(categories) From d52d6f2d5bc2400a5585c63a03b1c5ab7391ea8b Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Thu, 15 Jun 2023 15:29:45 -0400 Subject: [PATCH 26/31] use ternary over if --- packages/swingset/src/get-nav-tree.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 4a9b890..3866a5c 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -41,18 +41,17 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { const categoryTitle = entity.navigationData?.category || 'default' - let storedCategory = - categories.has(categoryTitle) && categories.get(categoryTitle)! + const hasCategory = categories.has(categoryTitle) //if category doesnt exist, create it - if (storedCategory === false) { - categories.set(categoryTitle, { - type: 'category', - title: categoryTitle, - children: [], - }) - storedCategory = categories.get(categoryTitle)! - } + const storedCategory = hasCategory + ? categories.get(categoryTitle)! + : categories.set(categoryTitle, { + type: 'category', + title: categoryTitle, + children: [], + }) && categories.get(categoryTitle)! + const folderTitle = entity.navigationData?.folder const hasFolder = !!folderTitle From 7cb16835c9e261908112365055de188c5971e8e7 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Fri, 16 Jun 2023 11:56:08 -0400 Subject: [PATCH 27/31] type fix --- .../src/components/side-nav/link-item.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx index 281bb2e..428d366 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/link-item.tsx @@ -1,7 +1,12 @@ import { Link } from "../link" import { cx } from "class-variance-authority" -function LinkItem({ title, to }: Record<'title' | 'to', string>) { +type LinkItemProps = { + title: string + to: string +} + +function LinkItem({ title, to }: LinkItemProps) { return ( Date: Fri, 16 Jun 2023 12:15:48 -0400 Subject: [PATCH 28/31] return correct type --- packages/swingset/src/get-nav-tree.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index 3866a5c..d2d6fd3 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -3,9 +3,12 @@ import { DocsEntity, ComponentNode, CategoryNode, + NavigationTree, } from './types.js' -export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { +export function getNavigationTree( + entities: (ComponentEntity | DocsEntity)[] +): NavigationTree { const componentEntities = entities.filter( (entity) => entity.__type === 'component' ) as ComponentEntity[] @@ -52,7 +55,6 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { children: [], }) && categories.get(categoryTitle)! - const folderTitle = entity.navigationData?.folder const hasFolder = !!folderTitle const folder = storedCategory.children.find( @@ -73,6 +75,10 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { //if node belongs in a folder, and folder already exists, add node to folder if (hasFolder && !!folder) { folder.children ||= [] + /**TODO: + * We should be pushing @type {ComponentNode} instead of @type {ComponentEntity} + * https://github.com/hashicorp/swingset/issues/107 + */ folder.children.push(entity) continue } @@ -81,6 +87,6 @@ export function getNavigationTree(entities: (ComponentEntity | DocsEntity)[]) { storedCategory.children.push(componentNode) } - const tree = Object.fromEntries(categories) + const tree = Array.from(categories.values()) return tree } From 0a0ef7a91e0c572ad37709f303a15a807568b65d Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Fri, 16 Jun 2023 12:21:43 -0400 Subject: [PATCH 29/31] change variable name and remove `Object.values` --- .../src/components/side-nav/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index 0bf34e5..5e8b5f5 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -10,13 +10,13 @@ function SideNavigation(props: SideNavBarProps) { - const categoriesJSX = Object.values(categories).map( + const renderCategories = categories.map( (category) => ( ) ) - return + return } export { SideNavigation } From 7176b92f3046de816b66dfb0f24bb90d677479c3 Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Fri, 16 Jun 2023 12:24:28 -0400 Subject: [PATCH 30/31] destructure --- .../src/components/side-nav/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx index 5e8b5f5..59da100 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/index.tsx @@ -5,9 +5,7 @@ type SideNavBarProps = { categories: NavigationTree } -function SideNavigation(props: SideNavBarProps) { - const { categories } = props - +function SideNavigation({ categories }: SideNavBarProps) { const renderCategories = categories.map( From cbbca16f82314de83c783fd5203fdf388e1cecad Mon Sep 17 00:00:00 2001 From: Preston Bourne Date: Fri, 16 Jun 2023 14:15:20 -0400 Subject: [PATCH 31/31] --allow-empty-tag --- .../src/components/side-nav/category.tsx | 13 --------- packages/swingset/src/get-nav-tree.ts | 27 ++++++++----------- packages/swingset/src/types.ts | 2 +- 3 files changed, 12 insertions(+), 30 deletions(-) diff --git a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx index 2e22449..5f0f3e9 100644 --- a/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx +++ b/packages/swingset-theme-hashicorp/src/components/side-nav/category.tsx @@ -50,19 +50,6 @@ function ComponentList({ ) } - const hasChildren = (item.children?.length as number) > 0 - - if (hasChildren) { - return ( -
  • - - -
    • - ) - } return (
  • diff --git a/packages/swingset/src/get-nav-tree.ts b/packages/swingset/src/get-nav-tree.ts index d2d6fd3..47a5273 100644 --- a/packages/swingset/src/get-nav-tree.ts +++ b/packages/swingset/src/get-nav-tree.ts @@ -27,7 +27,6 @@ export function getNavigationTree( } ) - //TODO: Account for duplicate folder names [category]/[folder] const categories = new Map() // bucket components into categories, nested documents are categorized under their component's path @@ -39,21 +38,21 @@ export function getNavigationTree( 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)! + if (!hasCategory) { + categories.set(categoryTitle, { + type: 'category', + title: categoryTitle, + children: [], + }) + } + + const storedCategory = categories.get(categoryTitle)! const folderTitle = entity.navigationData?.folder const hasFolder = !!folderTitle @@ -73,13 +72,9 @@ export function getNavigationTree( } //if node belongs in a folder, and folder already exists, add node to folder - if (hasFolder && !!folder) { + if (hasFolder && !!folder && folder.__type === 'folder') { folder.children ||= [] - /**TODO: - * We should be pushing @type {ComponentNode} instead of @type {ComponentEntity} - * https://github.com/hashicorp/swingset/issues/107 - */ - folder.children.push(entity) + folder.children.push(componentNode) continue } diff --git a/packages/swingset/src/types.ts b/packages/swingset/src/types.ts index 5d11197..4dfd5e6 100644 --- a/packages/swingset/src/types.ts +++ b/packages/swingset/src/types.ts @@ -43,7 +43,7 @@ export type EvaluatedEntity = export type ComponentNode = Pick< ComponentEntity, - '__type' | 'title' | 'slug' | 'componentPath' | 'children' + '__type' | 'title' | 'slug' | 'componentPath' > export type FolderNode = {