Merge pull request #510 from omnifed/442-docs-update-side-navjson-to-…

…be-side-navts

442 docs update side navjson to be side navts

docs/app/components/CategoryList.tsx

@@ -1,5 +1,5 @@
-import categoryData from '@/app/data/categories.json'
-import navData from '@/app/react/side-nav.json'
+import categoryData from '@/app/data/categories.react.json'
+import { sideNavData } from '@/app/react/side-nav'
 import { Image as ImageIcon } from '@cerberus-design/icons'
 import { Show } from '@cerberus-design/react'
 import { css } from '@cerberus/styled-system/css'
@@ -13,7 +13,7 @@ interface CategoryCardProps {
 }
 
 function CategoryCard(props: CategoryCardProps) {
-  const item = navData.find((navItem) => navItem.label === props.item)
+  const item = sideNavData.find((navItem) => navItem.label === props.item)
   return (
     <Show when={item != null}>
       <Link

docs/app/components/SideNav.tsx

@@ -4,19 +4,17 @@ import { type PropsWithChildren, memo } from 'react'
 import MatchSideNavItem from './MatchSideNavItem'
 
 export type NavList = (HeadingItem | LinkItem)[]
-type SideNavType = 'heading' | 'route'
+export type NavItemType = 'heading' | 'route'
 
-interface SideNavItem {
-  id: string
+export interface HeadingItem {
   label: string
-  type: SideNavType
-}
-
-export interface HeadingItem extends SideNavItem {
+  route?: never
+  tag?: never
   type: 'heading'
 }
 
-export interface LinkItem extends SideNavItem {
+export interface LinkItem {
+  label: string
   route: string
   tag: '' | 'new' | 'next'
   type: 'route'

docs/app/components/code-builder/builder-snippet.tsx

@@ -46,7 +46,7 @@ export default function BuilderSnippet(
       if (isFormState(key) || isProgressKey(key)) {
         return `{${selectedProps[key as keyof typeof selectedProps] || 'false'}}`
       }
-      return `"${selectedProps[key as keyof typeof selectedProps] || 'false'}"`
+      return `"${selectedProps[key as keyof typeof selectedProps] || ''}"`
     })
   }, [props.code, selectedProps])
 

docs/app/data/categories.json → docs/app/data/categories.react.json

@@ -2,31 +2,43 @@
   "actions": {
     "name": "Actions",
     "description": "Components that trigger an action.",
-    "items": ["Button", "Icon Button"]
+    "items": ["Button", "Icon Button"],
+    "next": [],
+    "new": []
   },
   "communication": {
     "name": "Communication",
     "description": "Communication components provide useful information.",
-    "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"]
+    "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"],
+    "next": [],
+    "new": ["Avatar", "Progress Bar"]
   },
   "containment": {
     "name": "Containment",
     "description": "Components that contain other components.",
-    "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"]
+    "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"],
+    "next": [],
+    "new": []
   },
   "navigation": {
     "name": "Navigation",
     "description": "Components that help users navigate through the app.",
-    "items": ["Nav Menu", "Tabs"]
+    "items": ["Nav Menu", "Tabs"],
+    "next": [],
+    "new": []
   },
   "selection": {
     "name": "Selection",
     "description": "Components that allow users to select choices.",
-    "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"]
+    "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"],
+    "next": [],
+    "new": ["Select", "Checkbox"]
   },
   "inputs": {
     "name": "Inputs",
     "description": "Components that allow users to input data.",
-    "items": ["Input", "Textarea", "File Uploader"]
+    "items": ["Input", "Textarea", "File Uploader"],
+    "next": [],
+    "new": ["File Uploader"]
   }
 }

docs/app/react/avatar/components/live-playground.tsx

@@ -59,7 +59,7 @@ export function AvatarPreview() {
     return (
       <Avatar
         {...selectedProps}
-        ariaLabel={(selectedProps.ariaLabel as string) || 'User Avatar'}
+        ariaLabel={selectedProps.ariaLabel as string}
         gradient="light-teal"
         src={selectedProps.src as string}
       />
@@ -68,7 +68,7 @@ export function AvatarPreview() {
   return (
     <Avatar
       {...selectedProps}
-      ariaLabel={(selectedProps.ariaLabel as string) || 'User Avatar'}
+      ariaLabel={selectedProps.ariaLabel as string}
       src={selectedProps.src as string}
     />
   )

docs/app/react/layout.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react'
-import { PageLayout, PageSideNav } from '../components/PageLayout'
-import SideNav, { type NavList } from '../components/SideNav'
-import sideNavData from './side-nav.json'
 import type { Metadata } from 'next/types'
+import { PageLayout, PageSideNav } from '../components/PageLayout'
+import SideNav from '../components/SideNav'
+import { sideNavData } from './side-nav'
 
 interface ReactProps {}
 
@@ -14,7 +14,7 @@ export default function ReactLayout(props: PropsWithChildren<ReactProps>) {
   return (
     <PageLayout>
       <PageSideNav>
-        <SideNav navList={sideNavData as NavList} />
+        <SideNav navList={sideNavData} />
       </PageSideNav>
 
       {props.children}