@xyo-network/react-typedoc 2.26.35 → 2.26.38

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7efa6fa/packages/typedoc/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/c31a96d/packages/typedoc/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -83,5 +83,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.35"
+  "version": "2.26.38"
 }

package/src/CommentViewer.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { Comment } from 'typedoc'
+
+export interface CommentViewerProps extends FlexBoxProps {
+  comment: Comment
+}
+
+export const CommentViewer: React.FC<CommentViewerProps> = ({ comment, ...props }) => {
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      <Typography variant="body2">{comment.summary[0]?.text}</Typography>
+    </FlexCol>
+  )
+}

package/src/JsonViewerButton.tsx

@@ -0,0 +1,33 @@
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { ButtonEx, ButtonExProps } from '@xylabs/react-button'
+import { lazy, Suspense, useState } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface JsonViewerButtonProps extends ButtonExProps {
+  src: object
+  jsonViewProps?: Partial<ReactJsonViewProps>
+}
+
+export const JsonViewerButton: React.FC<JsonViewerButtonProps> = ({ title, src, jsonViewProps, ...props }) => {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <ButtonEx onClick={() => setOpen(!open)} {...props}>
+        JSON
+      </ButtonEx>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        {title ? <DialogTitle>{title}</DialogTitle> : null}
+        <DialogContent>
+          <Suspense fallback={<div />}>
+            <JsonView src={src} {...jsonViewProps} />
+          </Suspense>
+        </DialogContent>
+        <DialogActions>
+          <ButtonEx onClick={() => setOpen(false)}>Close</ButtonEx>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

package/src/ProjectTwoPanelReflectionViewer.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+// eslint-disable-next-line import/no-internal-modules
+import clientDocs from '@xyo-network/core/dist/docs.json'
+import { BrowserRouter } from 'react-router-dom'
+import { ProjectReflection } from 'typedoc'
+
+import { ProjectTwoPanelReflectionViewer } from './ProjectTwoPanelReflectionViewer'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ProjectTwoPanelReflectionViewer,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'typedoc/TypeDocViewer/ProjectTwoPanelReflectionViewer',
+} as ComponentMeta<typeof ProjectTwoPanelReflectionViewer>
+
+const Template: ComponentStory<typeof ProjectTwoPanelReflectionViewer> = ({ reflection, ...props }) => {
+  return (
+    <BrowserRouter>
+      <ProjectTwoPanelReflectionViewer height="90vh" reflection={reflection} {...props} />
+    </BrowserRouter>
+  )
+}
+
+const Client = Template.bind({})
+const clientDocsWithProject = { ...clientDocs }
+Client.args = {
+  reflection: clientDocsWithProject as unknown as ProjectReflection,
+}
+
+export { Client }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/ProjectTwoPanelReflectionViewer.tsx

@@ -0,0 +1,14 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { ProjectReflection } from 'typedoc'
+
+import { ContainerReflectionViewerProps, DeclarationContainerReflectionViewer } from './ReflectionViewer'
+import { TwoPanelReflectionViewer } from './TwoPanelReflectionViewer'
+
+export const ProjectTwoPanelReflectionViewer: React.FC<ContainerReflectionViewerProps<ProjectReflection>> = ({
+  reflection,
+  itemRenderer = DeclarationContainerReflectionViewer,
+  ...props
+}) => {
+  assertEx(reflection.kindString === 'Project', `Project !== ${reflection.kindString}`)
+  return <TwoPanelReflectionViewer itemRenderer={itemRenderer} reflection={reflection} {...props} />
+}

package/src/ReflectionLookup.ts

@@ -0,0 +1,3 @@
+import { DeclarationReflection } from 'typedoc'
+
+export type ReflectionLookup<T extends DeclarationReflection = DeclarationReflection> = Record<string, T>

package/src/ReflectionViewer/Container.tsx

@@ -0,0 +1,35 @@
+import { ContainerReflection, ReflectionGroup } from 'typedoc'
+
+import { createLookup } from '../createLookup'
+import { ReflectionGroupViewer } from './ReflectionGroupViewer'
+import { ReflectionViewer } from './ReflectionViewer'
+import { ReflectionViewerProps } from './ReflectionViewerProps'
+
+export interface ContainerReflectionViewerProps<T extends ContainerReflection = ContainerReflection> extends ReflectionViewerProps<T> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  itemRenderer?: React.FC<ReflectionViewerProps<any>>
+}
+
+export const ContainerReflectionViewer: React.FC<ContainerReflectionViewerProps> = ({ children, reflection, hiddenFlags, itemRenderer = ReflectionViewer, ...props }) => {
+  const lookup = createLookup(reflection)
+
+  return (
+    <ReflectionViewer title="ContainerReflectionViewer" sources reflection={reflection} lookup={lookup} {...props}>
+      {reflection.groups?.map((group: ReflectionGroup) => {
+        return (
+          <ReflectionGroupViewer
+            margin={1}
+            lookup={lookup}
+            renderer={itemRenderer}
+            key={group.title}
+            group={group}
+            reflection={reflection}
+            hiddenFlags={hiddenFlags}
+            alignItems="stretch"
+          />
+        )
+      })}
+      {children}
+    </ReflectionViewer>
+  )
+}

package/src/ReflectionViewer/Declaration.tsx

@@ -0,0 +1,30 @@
+import { DeclarationReflection, SignatureReflection } from 'typedoc'
+
+import { ReflectionViewer } from './ReflectionViewer'
+import { ReflectionViewerProps } from './ReflectionViewerProps'
+
+export const DeclarationReflectionViewer: React.FC<ReflectionViewerProps<DeclarationReflection>> = ({ reflection, hiddenFlags, ...props }) => {
+  const safeSignatures = (signatures?: SignatureReflection[] | SignatureReflection) => {
+    return Array.isArray(signatures) ? signatures : signatures ? [signatures] : undefined
+  }
+
+  return (
+    <ReflectionViewer
+      nameViewer={reflection.signatures || reflection.getSignature || reflection.setSignature ? null : undefined}
+      title="DeclarationReflectionViewer"
+      hiddenFlags={hiddenFlags}
+      reflection={reflection}
+      {...props}
+    >
+      {reflection.signatures?.map((signature) => {
+        return <ReflectionViewer key={signature.id} hiddenFlags={hiddenFlags} reflection={signature} />
+      })}
+      {safeSignatures(reflection.getSignature)?.map((signature) => {
+        return <ReflectionViewer marginX={1} key={signature.id} hiddenFlags={hiddenFlags} reflection={signature} />
+      })}
+      {safeSignatures(reflection.setSignature)?.map((signature) => {
+        return <ReflectionViewer marginX={1} key={signature.id} hiddenFlags={hiddenFlags} reflection={signature} />
+      })}
+    </ReflectionViewer>
+  )
+}

package/src/ReflectionViewer/DeclarationContainer.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from '@mui/material'
+import { useLocation } from 'react-router-dom'
+import { DeclarationReflection } from 'typedoc'
+
+import { ContainerReflectionViewer, ContainerReflectionViewerProps } from './Container'
+import { DeclarationReflectionViewer } from './Declaration'
+
+export interface DeclarationContainerReflectionViewerProps extends ContainerReflectionViewerProps {
+  reflection: DeclarationReflection
+}
+
+export const DeclarationContainerReflectionViewer: React.FC<DeclarationContainerReflectionViewerProps> = ({
+  reflection,
+  lookup,
+  itemRenderer = DeclarationReflectionViewer,
+  ...props
+}) => {
+  const { hash } = useLocation()
+  const theme = useTheme()
+
+  return (
+    <ContainerReflectionViewer
+      title="DeclarationContainerReflectionViewer"
+      paper={hash.substring(1) === reflection.name}
+      bgcolor={hash.substring(1) === reflection.name ? theme.palette.background.default : undefined}
+      lookup={lookup}
+      itemRenderer={itemRenderer}
+      reflection={reflection}
+      {...props}
+    />
+  )
+}

package/src/ReflectionViewer/NameViewer.tsx

@@ -0,0 +1,39 @@
+import { Chip, Stack, Typography, TypographyVariant } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+
+import { JsonViewerButton } from '../JsonViewerButton'
+import { SomeReflection } from '../SomeReflection'
+import { trimFlagLabel } from '../trimFlagLabel'
+import { ReflectionViewerProps } from './ReflectionViewerProps'
+import { SomeTypeViewer } from './SomeTypeViewer'
+
+export interface NameViewerProps extends FlexBoxProps {
+  reflection: SomeReflection
+  variant?: TypographyVariant
+  reflectionViewer: React.FC<ReflectionViewerProps>
+}
+
+export const NameViewer: React.FC<NameViewerProps> = ({ reflectionViewer, variant, reflection, ...props }) => {
+  return (
+    <FlexRow justifyContent="flex-start" {...props}>
+      <FlexRow marginRight={1}>
+        <Typography variant={variant} noWrap>
+          {reflection.name}
+          {reflection.type ? <>:&nbsp;</> : null}
+        </Typography>
+        <SomeTypeViewer reflection={reflection} reflectionViewer={reflectionViewer} />
+      </FlexRow>
+      <Stack direction="row" spacing={1}>
+        <Chip size="small" label={reflection.kindString} />
+        {reflection.flags
+          ? Object.entries(reflection.flags).map(([flag, value]) => {
+              return value ? <Chip size="small" key={flag} label={trimFlagLabel(flag)} variant="outlined" /> : null
+            })
+          : null}
+      </Stack>
+      {document && document?.location.hostname === 'localhost' && (
+        <JsonViewerButton jsonViewProps={{ collapsed: 1 }} size="small" variant="contained" padding={0} marginX={1} src={reflection} />
+      )}
+    </FlexRow>
+  )
+}

package/src/ReflectionViewer/Project.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { ProjectReflection, ReflectionGroup } from 'typedoc'
+
+import { createLookup } from '../createLookup'
+import { ContainerReflectionViewerProps } from './Container'
+import { ReflectionGroupViewer } from './ReflectionGroupViewer'
+import { ReflectionViewer } from './ReflectionViewer'
+
+export const ProjectReflectionViewer: React.FC<ContainerReflectionViewerProps<ProjectReflection>> = ({ reflection, hiddenFlags, itemRenderer = ReflectionViewer, ...props }) => {
+  const lookup = useMemo(() => createLookup(reflection), [reflection])
+  return (
+    <ReflectionViewer title="ProjectReflectionViewer" hiddenFlags={hiddenFlags} reflection={reflection} {...props}>
+      {useMemo(() => {
+        return reflection.groups?.map((group: ReflectionGroup) => {
+          return (
+            <ReflectionGroupViewer
+              autoscroll
+              variant="h6"
+              lookup={lookup}
+              key={group.title}
+              renderer={itemRenderer}
+              group={group}
+              reflection={reflection}
+              alignItems="stretch"
+              hiddenFlags={hiddenFlags}
+            />
+          )
+        })
+      }, [lookup, reflection, hiddenFlags, itemRenderer])}
+    </ReflectionViewer>
+  )
+}

package/src/ReflectionViewer/ReflectionGroupViewer.tsx

@@ -0,0 +1,70 @@
+import { Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { ContainerReflection, ReflectionFlags, ReflectionGroup } from 'typedoc'
+
+import { JsonViewerButton } from '../JsonViewerButton'
+import { resolveChildren } from '../resolveChildren'
+import { ReflectionViewer } from './ReflectionViewer'
+import { FlagFilter, ReflectionViewerProps } from './ReflectionViewerProps'
+
+export interface ReflectionGroupViewerProps extends ReflectionViewerProps<ContainerReflection> {
+  reflection: ContainerReflection
+  renderer?: React.FC<ReflectionViewerProps>
+  group: ReflectionGroup
+  autoscroll?: boolean
+}
+
+export const ReflectionGroupViewer: React.FC<ReflectionGroupViewerProps> = ({
+  variant,
+  group,
+  children,
+  lookup,
+  autoscroll = false,
+  renderer = ReflectionViewer,
+  hiddenFlags,
+  ...props
+}) => {
+  const hide = (flags?: ReflectionFlags, hiddenFlags: FlagFilter[] = []) => {
+    let hide = false
+    hiddenFlags.map((hiddenFlag) => {
+      if (flags?.[hiddenFlag]) {
+        hide = true
+      }
+    })
+    return hide
+  }
+
+  const resolvedChildern = resolveChildren(group, lookup) ?? []
+
+  const visibleChildren = hiddenFlags
+    ? resolvedChildern.reduce((acc, item) => {
+        return acc + (hide(item.flags, hiddenFlags) ? 0 : 1)
+      }, 0)
+    : 1
+
+  const { hash } = useLocation()
+  useEffect(() => {
+    if (hash && autoscroll) {
+      document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [hash, autoscroll])
+  return visibleChildren > 0 ? (
+    <FlexCol title="ReflectionGroupViewer" {...props}>
+      <FlexRow marginY={1} justifyContent="flex-start">
+        <Typography variant={variant}>{group.title}</Typography>
+        <JsonViewerButton jsonViewProps={{ collapsed: 1 }} size="small" variant="contained" padding={0} marginX={1} src={resolveChildren(group, lookup)} />
+      </FlexRow>
+      {resolveChildren(group, lookup).map((reflection) => {
+        return reflection ? (
+          // I wrap this in a div since React does not understand that they have keys using the Renderer
+          <div id={reflection.name} key={reflection.id}>
+            {renderer({ hiddenFlags, lookup, margin: 1, padding: 1, reflection })}
+          </div>
+        ) : null
+      })}
+      {children}
+    </FlexCol>
+  ) : null
+}

package/src/ReflectionViewer/ReflectionViewer.tsx

@@ -0,0 +1,40 @@
+import { FlexCol } from '@xylabs/react-flexbox'
+import { ReflectionFlags } from 'typedoc'
+
+import { CommentViewer } from '../CommentViewer'
+import { SomeReflection } from '../SomeReflection'
+import { SourceViewer } from '../SourceViewer'
+import { NameViewer } from './NameViewer'
+import { FlagFilter, ReflectionViewerProps } from './ReflectionViewerProps'
+
+const hide = (flags?: ReflectionFlags, hiddenFlags: FlagFilter[] = []) => {
+  let hide = false
+  hiddenFlags.map((hiddenFlag) => {
+    if (flags?.[hiddenFlag]) {
+      hide = true
+    }
+  })
+  return hide
+}
+
+export const ReflectionViewer: React.FC<ReflectionViewerProps> = ({ variant, nameViewer, children, reflection, hiddenFlags, sources = false, ...props }) => {
+  const someReflection = reflection as SomeReflection
+
+  return hide(reflection?.flags, hiddenFlags) ? null : (
+    <FlexCol title="ReflectionViewer" alignItems="stretch" {...props}>
+      {nameViewer === undefined ? <NameViewer marginY={0.25} variant={variant} reflection={someReflection} reflectionViewer={ReflectionViewer} /> : nameViewer}
+      {reflection.comment ? <CommentViewer comment={reflection.comment} /> : null}
+      {sources && reflection.sources && children ? (
+        <>
+          {reflection.sources.map((source, index) => {
+            return <SourceViewer key={index} source={source} />
+          })}
+        </>
+      ) : null}
+      {someReflection.parameters?.map((parameter) => {
+        return <ReflectionViewer hiddenFlags={hiddenFlags} marginY={0.25} marginX={1} key={parameter.id} reflection={parameter} />
+      }) ?? null}
+      {children}
+    </FlexCol>
+  )
+}

package/src/ReflectionViewer/ReflectionViewerProps.tsx

@@ -0,0 +1,17 @@
+import { TypographyVariant } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { ReactElement } from 'react'
+import { Reflection } from 'typedoc'
+
+import { ReflectionLookup } from '../ReflectionLookup'
+
+export type FlagFilter = 'isPublic' | 'isPrivate' | 'isProtected'
+
+export interface ReflectionViewerProps<T extends Reflection = Reflection> extends FlexBoxProps {
+  reflection: T
+  nameViewer?: ReactElement | null
+  lookup?: ReflectionLookup
+  hiddenFlags?: FlagFilter[]
+  sources?: boolean
+  variant?: TypographyVariant
+}

package/src/ReflectionViewer/SomeTypeViewer/SomeTypeViewer.tsx

@@ -0,0 +1,23 @@
+import { Typography, TypographyProps } from '@mui/material'
+
+import { SomeReflection } from '../../SomeReflection'
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { buildTypeString } from './buildTypeString'
+
+export interface SomeTypeViewerProps extends TypographyProps {
+  reflection: SomeReflection
+  opacity?: number
+  reflectionViewer: React.FC<ReflectionViewerProps>
+}
+
+export const SomeTypeViewer: React.FC<SomeTypeViewerProps> = ({ reflectionViewer, opacity = 0.5, reflection, ...props }) => {
+  const typeReactNode = reflection.type ? buildTypeString(reflection.type, reflectionViewer) : ''
+  if (typeof typeReactNode === 'string') {
+    return (
+      <Typography title="SomeTypeViewer" style={{ opacity }} {...props}>
+        {typeReactNode}
+      </Typography>
+    )
+  }
+  return <>{typeReactNode}</>
+}

package/src/ReflectionViewer/SomeTypeViewer/TypeBuilder.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+import { SomeType, Type } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+
+export type TypeBuilder = (type: SomeType | Type, reflectionViewer: React.FC<ReflectionViewerProps>, typeBuilder?: TypeBuilder) => ReactNode

package/src/ReflectionViewer/SomeTypeViewer/buildArrayString.tsx

@@ -0,0 +1,14 @@
+import { ArrayType } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { TypeBuilder } from './TypeBuilder'
+
+export const buildArrayString = (typeObj: ArrayType, reflectionViewer: React.FC<ReflectionViewerProps>, typeBuilder: TypeBuilder) => {
+  const parts: string[] = []
+  const typeString = typeBuilder(typeObj.elementType, reflectionViewer)
+  if (typeof typeString === 'string') {
+    parts.push(typeString)
+  }
+  parts.push('[]')
+  return parts
+}

package/src/ReflectionViewer/SomeTypeViewer/buildIntersectionString.tsx

@@ -0,0 +1,18 @@
+import { IntersectionType } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { TypeBuilder } from './TypeBuilder'
+
+export const buildIntersectionString = (typeObj: IntersectionType, reflectionViewer: React.FC<ReflectionViewerProps>, typeBuilder: TypeBuilder) => {
+  const parts: string[] = []
+  if (typeObj.types) {
+    parts.push(
+      typeObj.types
+        .map((arg) => {
+          return typeBuilder(arg, reflectionViewer)
+        })
+        .join(' & ')
+    )
+  }
+  return parts
+}

package/src/ReflectionViewer/SomeTypeViewer/buildReferenceString.ts

@@ -0,0 +1,21 @@
+import { ReferenceType } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { TypeBuilder } from './TypeBuilder'
+
+export const buildReferenceString = (typeObj: ReferenceType, reflectionViewer: React.FC<ReflectionViewerProps>, typeBuilder: TypeBuilder) => {
+  const parts: string[] = []
+  parts.push(typeObj.name)
+  if (typeObj.typeArguments) {
+    parts.push('<')
+    parts.push(
+      typeObj.typeArguments
+        .map((arg) => {
+          return typeBuilder(arg, reflectionViewer)
+        })
+        .join(', ')
+    )
+    parts.push('>')
+  }
+  return parts
+}

package/src/ReflectionViewer/SomeTypeViewer/buildReflectionString.tsx

@@ -0,0 +1,9 @@
+import { ReflectionType } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+
+export const buildRelfectionString = (typeObj: ReflectionType, reflectionViewer: React.FC<ReflectionViewerProps>) => {
+  if (typeObj.declaration) {
+    return <>{reflectionViewer({ reflection: typeObj.declaration })}</>
+  }
+}

package/src/ReflectionViewer/SomeTypeViewer/buildTypeString.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react'
+import { SomeType, Type } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { buildArrayString } from './buildArrayString'
+import { buildIntersectionString } from './buildIntersectionString'
+import { buildReferenceString } from './buildReferenceString'
+import { buildRelfectionString } from './buildReflectionString'
+import { buildUnionString } from './buildUnionString'
+import { TypeBuilder } from './TypeBuilder'
+
+export const buildTypeString: TypeBuilder = (type: SomeType | Type, reflectionViewer: React.FC<ReflectionViewerProps>): ReactNode => {
+  const someType = type as SomeType
+  const parts: string[] = []
+
+  switch (someType.type) {
+    case 'intrinsic':
+      parts.push(someType.name)
+      break
+    case 'intersection': {
+      parts.push(...buildIntersectionString(someType, reflectionViewer, buildTypeString))
+      break
+    }
+    case 'literal':
+      parts.push(JSON.stringify(someType.value))
+      break
+    case 'array': {
+      parts.push(...buildArrayString(someType, reflectionViewer, buildTypeString))
+      break
+    }
+    case 'reference': {
+      parts.push(...buildReferenceString(someType, reflectionViewer, buildTypeString))
+      break
+    }
+    case 'union': {
+      parts.push(...buildUnionString(someType, reflectionViewer, buildTypeString))
+      break
+    }
+    case 'reflection': {
+      return buildRelfectionString(someType, reflectionViewer)
+    }
+    default:
+      parts.push('#')
+      parts.push(someType.type)
+      parts.push('#')
+      break
+  }
+  return parts.join('')
+}

package/src/ReflectionViewer/SomeTypeViewer/buildUnionString.tsx

@@ -0,0 +1,18 @@
+import { UnionType } from 'typedoc'
+
+import { ReflectionViewerProps } from '../ReflectionViewerProps'
+import { TypeBuilder } from './TypeBuilder'
+
+export const buildUnionString = (typeObj: UnionType, reflectionViewer: React.FC<ReflectionViewerProps>, typeBuilder: TypeBuilder) => {
+  const parts: string[] = []
+  if (typeObj.types) {
+    parts.push(
+      typeObj.types
+        .map((arg) => {
+          return typeBuilder(arg, reflectionViewer)
+        })
+        .join(' | ')
+    )
+  }
+  return parts
+}

package/src/ReflectionViewer/SomeTypeViewer/index.ts

@@ -0,0 +1 @@
+export * from './SomeTypeViewer'

package/src/ReflectionViewer/index.ts

@@ -0,0 +1,8 @@
+export * from './Container'
+export * from './Declaration'
+export * from './DeclarationContainer'
+export * from './Project'
+export * from './ReflectionGroupViewer'
+export * from './ReflectionViewer'
+export * from './ReflectionViewerProps'
+export * from './SomeTypeViewer'

package/src/SomeReflection.ts

@@ -0,0 +1,7 @@
+import { ParameterReflection, Reflection, SomeType } from 'typedoc'
+
+export type WithSomeType<T> = T & { type?: SomeType }
+
+export type WithSomeParameters<T> = T & { parameters?: ParameterReflection[] }
+
+export type SomeReflection = WithSomeParameters<WithSomeType<Reflection>>

package/src/SourceViewer.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { SourceReference } from 'typedoc'
+
+export interface SourceViewerProps extends FlexBoxProps {
+  source: SourceReference
+}
+
+export const SourceViewer: React.FC<SourceViewerProps> = ({ source, ...props }) => {
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      <Typography style={{ opacity: 0.5 }} variant="body2">
+        <i>{source.fileName}</i>
+      </Typography>
+    </FlexCol>
+  )
+}

package/src/TreeViewer/Reflection.tsx

@@ -0,0 +1,62 @@
+import { Add, Remove } from '@mui/icons-material'
+import { TreeItem, TreeView } from '@mui/lab'
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { useNavigate } from 'react-router-dom'
+import { ContainerReflection, Reflection } from 'typedoc'
+
+import { ReflectionLookup } from '../ReflectionLookup'
+import { FlagFilter } from '../ReflectionViewer'
+
+export interface ReflectionTreeViewerProps<T extends Reflection = ContainerReflection> extends FlexBoxProps {
+  reflection: T
+  lookup?: ReflectionLookup
+  hiddenFlags?: FlagFilter[]
+  searchTerm?: string
+}
+
+export const ReflectionTreeViewer: React.FC<ReflectionTreeViewerProps> = ({ lookup, reflection, searchTerm, ...props }) => {
+  const navigate = useNavigate()
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {/* TODO - move this into a title component */}
+      {/*{nameViewer === undefined ? <NameViewer variant={variant} reflection={reflection} /> : nameViewer}*/}
+      {/*{reflection.comment ? <CommentViewer comment={reflection.comment} /> : null}*/}
+      {/*{reflection.sources ? (*/}
+      {/*  <>*/}
+      {/*    {reflection.sources.map((source, index) => {*/}
+      {/*      return <SourceViewer key={index} source={source} />*/}
+      {/*    })}*/}
+      {/*  </>*/}
+      {/*) : null}*/}
+      {/* TODO - when searching do not include categories that dont have children, pull maps out of view */}
+      <TreeView
+        aria-label="XYO SDK Documentation"
+        defaultExpandIcon={<Add />}
+        defaultCollapseIcon={<Remove />}
+        defaultExpanded={reflection.groups ? [reflection.groups[0].title] : []}
+      >
+        {reflection.groups?.map((group, index) => (
+          <TreeItem key={`primary-${index}`} nodeId={group.title} label={<Typography variant="h6">{group.title}</Typography>}>
+            {group.children.map((child, jndex) => {
+              const searchTermTrimmed = searchTerm?.trim().toLowerCase()
+              const childReflection = typeof child === 'number' ? lookup?.[child as number] : child
+              return childReflection && (!searchTermTrimmed || childReflection.name.toLowerCase().indexOf(searchTermTrimmed) !== -1) ? (
+                <TreeItem
+                  key={`secondary-${index}- ${jndex}`}
+                  nodeId={`declaration-${childReflection?.id}`}
+                  label={childReflection.name}
+                  onClick={() => {
+                    const hash = `#${childReflection.name}`
+                    navigate({ hash })
+                    document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth' })
+                  }}
+                />
+              ) : null
+            })}
+          </TreeItem>
+        ))}
+      </TreeView>
+    </FlexCol>
+  )
+}

package/src/TreeViewer/ReflectionGroup.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+import { JsonViewerButton } from '../JsonViewerButton'
+import { ReflectionGroupViewerProps, ReflectionViewer } from '../ReflectionViewer'
+import { resolveChildren } from '../resolveChildren'
+
+export const ReflectionGroupTreeViewer: React.FC<ReflectionGroupViewerProps> = ({ variant, group, children, lookup, renderer = ReflectionViewer, ...props }) => {
+  return (
+    <FlexCol {...props}>
+      <FlexRow marginY={1} justifyContent="flex-start">
+        <Typography variant={variant}>{group.title}</Typography>
+        <JsonViewerButton jsonViewProps={{ collapsed: 1 }} size="small" variant="contained" padding={0} marginX={1} src={resolveChildren(group, lookup)} />
+      </FlexRow>
+      {resolveChildren(group, lookup).map((reflection) => {
+        return reflection ? (
+          // I wrap this in a div since React does not understand that they have keys using the Renderer
+          <div key={reflection.id}>{renderer({ lookup, margin: 1, reflection })}</div>
+        ) : null
+      })}
+      {children}
+    </FlexCol>
+  )
+}

package/src/TreeViewer/index.ts

@@ -0,0 +1,2 @@
+export * from './Reflection'
+export * from './ReflectionGroup'

package/src/TwoPanelReflectionViewer.tsx

@@ -0,0 +1,99 @@
+import { Search } from '@mui/icons-material'
+import { TextField, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import { useMemo, useState } from 'react'
+import { ReflectionGroup } from 'typedoc'
+
+import { createLookup } from './createLookup'
+import { ContainerReflectionViewerProps, ReflectionGroupViewer, ReflectionViewer } from './ReflectionViewer'
+import { ReflectionTreeViewer } from './TreeViewer'
+
+export const TwoPanelReflectionViewer: React.FC<ContainerReflectionViewerProps> = ({ reflection, itemRenderer = ReflectionViewer, hiddenFlags, ...props }) => {
+  const lookup = useMemo(() => createLookup(reflection), [reflection])
+  const theme = useTheme()
+  const [searchTerm, setSearchTerm] = useState<string>()
+  const onSearchTermChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value)
+  }
+
+  const reflectionGroups = useMemo(() => {
+    return reflection.groups?.map((group: ReflectionGroup) => {
+      return (
+        <ReflectionGroupViewer
+          autoscroll
+          variant="h6"
+          lookup={lookup}
+          renderer={itemRenderer}
+          key={group.title}
+          group={group}
+          reflection={reflection}
+          alignItems="stretch"
+          hiddenFlags={hiddenFlags}
+        />
+      )
+    })
+  }, [itemRenderer, lookup, reflection, hiddenFlags])
+
+  const NavigationCol: React.FC<FlexBoxProps> = (props) => {
+    return (
+      <FlexCol {...props}>
+        <TextField
+          fullWidth
+          InputProps={{
+            startAdornment: <Search />,
+          }}
+          onChange={onSearchTermChange}
+        />
+        <FlexGrowCol marginTop={1} alignItems="stretch">
+          <ReflectionTreeViewer
+            justifyContent="flex-start"
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            overflow="scroll"
+            searchTerm={searchTerm}
+            hiddenFlags={hiddenFlags}
+            reflection={reflection}
+            lookup={lookup}
+            border={`1px solid ${theme.palette.grey['300']}`}
+            borderRadius={1}
+            paddingY={1}
+          />
+        </FlexGrowCol>
+      </FlexCol>
+    )
+  }
+
+  const DetailsCol: React.FC<FlexBoxProps> = (props) => {
+    return (
+      <FlexGrowCol {...props}>
+        <FlexGrowCol alignItems="stretch">
+          <FlexCol
+            alignItems="stretch"
+            justifyContent="flex-start"
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            overflow="scroll"
+            borderRadius={1}
+            padding={1}
+            border={`1px solid ${theme.palette.grey['300']}`}
+          >
+            {reflectionGroups}
+          </FlexCol>
+        </FlexGrowCol>
+      </FlexGrowCol>
+    )
+  }
+
+  return (
+    <FlexRow alignItems="stretch" justifyContent="start" sx={{ overflowY: 'scroll' }} {...props}>
+      <NavigationCol minWidth={320} alignItems="stretch" justifyContent="flex-start" overflow="hidden" />
+      <DetailsCol marginLeft={1} alignItems="stretch" justifyContent="flex-start" overflow="hidden" />
+    </FlexRow>
+  )
+}

package/src/createLookup.ts

@@ -0,0 +1,7 @@
+import { ContainerReflection, DeclarationReflection } from 'typedoc'
+
+export const createLookup = <T extends DeclarationReflection>(reflection: ContainerReflection) => {
+  const lookup: Record<number, T> = {}
+  reflection.children?.forEach((item) => (lookup[item.id] = item as unknown as T))
+  return lookup
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './CommentViewer'
+export * from './JsonViewerButton'
+export * from './ProjectTwoPanelReflectionViewer'
+export * from './ReflectionLookup'
+export * from './ReflectionViewer'
+export * from './SomeReflection'
+export * from './SourceViewer'
+export * from './TreeViewer'
+export * from './TwoPanelReflectionViewer'

package/src/resolveChildren.ts

@@ -0,0 +1,24 @@
+import { Reflection } from 'typedoc'
+
+import { ReflectionLookup } from './ReflectionLookup'
+import { SomeReflection } from './SomeReflection'
+
+type ReflectionWithChildren = { children: Reflection[] }
+
+export const resolveChildren = <T extends SomeReflection>(reflection: ReflectionWithChildren, lookup: ReflectionLookup = {}): T[] => {
+  return (reflection.children?.map((child) => {
+    switch (typeof child) {
+      case 'object':
+        return child
+      case 'number': {
+        const childObj = lookup[child]
+        if (childObj === undefined) {
+          throw Error(`Child Reference Not Found [${child}]`)
+        }
+        return childObj
+      }
+      default:
+        throw Error(`Invalid Child Type [${typeof child}, ${child}]`)
+    }
+  }) ?? []) as T[]
+}

package/src/trimFlagLabel.ts

@@ -0,0 +1,6 @@
+export const trimFlagLabel = (label: string) => {
+  if (label.startsWith('is')) {
+    return label.substring(2)
+  }
+  return label
+}