@xyo-network/react-shared 2.23.7

package/src/components/TypeDocViewer/ReflectionViewer/ReflectionViewer.tsx

@@ -0,0 +1,40 @@
+import { FlexCol } from '@xylabs/sdk-react'
+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/components/TypeDocViewer/ReflectionViewer/ReflectionViewerProps.tsx

@@ -0,0 +1,17 @@
+import { TypographyVariant } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/sdk-react'
+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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/ReflectionViewer/SomeTypeViewer/index.ts

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

package/src/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/SourceViewer.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+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/components/TypeDocViewer/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/sdk-react'
+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/components/TypeDocViewer/TreeViewer/ReflectionGroup.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+
+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/components/TypeDocViewer/TreeViewer/index.ts

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

package/src/components/TypeDocViewer/TwoPanelReflectionViewer.tsx

@@ -0,0 +1,98 @@
+import { Search } from '@mui/icons-material'
+import { TextField, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowCol, FlexRow } from '@xylabs/sdk-react'
+import { useMemo, useState } from 'react'
+
+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) => {
+      return (
+        <ReflectionGroupViewer
+          autoscroll
+          variant="h6"
+          lookup={lookup}
+          renderer={itemRenderer}
+          key={group.kind}
+          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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/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/components/TypeDocViewer/trimFlagLabel.ts

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

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './Ampersand'
+export * from './ArchiveProperty'
+export * from './Footer'
+export * from './JsonRouteWrapper'
+export * from './NotFound'
+export * from './Pipe'
+export * from './ScrollTableOnSm'
+export * from './TableCell'
+export * from './TypeDocViewer'

package/src/contexts/Pixel/Context.ts

@@ -0,0 +1,4 @@
+import { createContextEx } from '../contextEx'
+import { PixelContextState } from './State'
+
+export const PixelContext = createContextEx<PixelContextState>()

package/src/contexts/Pixel/Provider.tsx

@@ -0,0 +1,24 @@
+import { XyPixel } from '@xylabs/pixel'
+import { WithChildren } from '@xylabs/sdk-react'
+
+import { PixelContext } from './Context'
+
+export interface PixelProviderProps {
+  id: string
+}
+
+export const PixelProvider: React.FC<WithChildren<PixelProviderProps>> = (props) => {
+  const { children, id } = props
+  XyPixel.init(id)
+
+  return (
+    <PixelContext.Provider
+      value={{
+        pixel: XyPixel.instance,
+        provided: true,
+      }}
+    >
+      {children}
+    </PixelContext.Provider>
+  )
+}

package/src/contexts/Pixel/State.ts

@@ -0,0 +1,7 @@
+import { XyPixel } from '@xylabs/pixel'
+
+import { ContextExState } from '../contextEx'
+
+export interface PixelContextState extends ContextExState {
+  pixel?: XyPixel
+}

package/src/contexts/Pixel/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/Pixel/use.ts

@@ -0,0 +1,7 @@
+import { useContextEx } from '../contextEx'
+import { PixelContext } from './Context'
+
+export const usePixel = (required = true) => {
+  const { pixel } = useContextEx(PixelContext, 'Pixel', required)
+  return pixel
+}

package/src/contexts/contextEx/State.ts

@@ -0,0 +1,3 @@
+export interface ContextExState {
+  provided: boolean
+}

package/src/contexts/contextEx/create.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { ContextExState } from './State'
+
+export const createContextEx = <T>() => createContext<T & ContextExState>({ provided: false } as T & ContextExState)

package/src/contexts/contextEx/index.ts

@@ -0,0 +1,3 @@
+export * from './create'
+export * from './State'
+export * from './use'

package/src/contexts/contextEx/use.ts

@@ -0,0 +1,11 @@
+import { Context, useContext } from 'react'
+
+import { ContextExState } from './State'
+
+export const useContextEx = <T extends ContextExState>(context: Context<T>, contextName: string, required = true) => {
+  const { provided, ...props } = useContext(context)
+  if (!provided && required) {
+    throw Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`)
+  }
+  return props
+}

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './contextEx'
+export * from './Pixel'

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useFooterOffsetResizer'
+export * from './useIsMobile'
+export * from './useMediaQuery'