@xyo-network/react-shared 2.23.7

package/src/components/StyleGuide/Buttons.example.tsx

@@ -0,0 +1,41 @@
+import { Button, ButtonTypeMap, Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+
+const colors = ['primary', 'secondary'] as ButtonTypeMap['props']['color'][]
+const variants = ['text', 'contained', 'outlined'] as ButtonTypeMap['props']['variant'][]
+
+export const ButtonsExample: React.FC = ({ ...props }) => {
+  return (
+    <FlexCol {...props} alignItems="stretch">
+      <Typography variant="subtitle1">Buttons</Typography>
+      <Typography variant="subtitle2">Buttons</Typography>
+      <FlexRow alignItems="stretch" mb={2}>
+        {colors.map((color) => (
+          <>
+            <Button variant="contained" color={color}>
+              {color}
+            </Button>
+            &nbsp;
+          </>
+        ))}
+      </FlexRow>
+      {variants.map((variant) => (
+        <FlexCol key={`btn-${variant}`} alignItems="stretch" mb={2}>
+          <Typography variant="subtitle2">
+            <span style={{ textTransform: 'capitalize' }}>{variant}</span> Buttons
+          </Typography>
+          <FlexRow alignItems="stretch">
+            <Button variant={variant}>Button</Button>&nbsp;
+            <Button variant={variant} disabled>
+              Disabled
+            </Button>
+            &nbsp;
+            <Button variant={variant} href="#href">
+              Link
+            </Button>
+          </FlexRow>
+        </FlexCol>
+      ))}
+    </FlexCol>
+  )
+}

package/src/components/StyleGuide/Papers.example.tsx

@@ -0,0 +1,19 @@
+import { Paper, Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+
+export const PapersExample: React.FC = ({ ...props }) => {
+  return (
+    <FlexCol {...props}>
+      <Typography variant="subtitle1">Paper</Typography>
+      <FlexRow alignItems="stretch">
+        {Array.from({ length: 5 }, () => undefined).map((_, index) => (
+          <FlexCol key={`paper-${index}`} marginRight={2}>
+            <Paper key={`paper-${index}`} elevation={index * 2} color="secondary">
+              <Typography margin={1}>Elevation-{index * 3}</Typography>
+            </Paper>
+          </FlexCol>
+        ))}
+      </FlexRow>
+    </FlexCol>
+  )
+}

package/src/components/StyleGuide/StyleGuide.example.tsx

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/sdk-react'
+
+import { AppBarsExample } from './AppBars.example'
+import { ButtonsExample } from './Buttons.example'
+import { PapersExample } from './Papers.example'
+import { TextsExample } from './Texts.example'
+
+export const StyleGuideExample: React.FC = () => {
+  return (
+    <FlexCol alignItems="stretch">
+      <Typography variant="h5">XYO Network Style Guide</Typography>
+      <AppBarsExample />
+      <ButtonsExample />
+      <PapersExample />
+      <TextsExample />
+    </FlexCol>
+  )
+}

package/src/components/StyleGuide/StyleGuide.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { StyleGuideExample } from './StyleGuide.example'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: StyleGuideExample,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'UI/StyleGuide',
+} as ComponentMeta<typeof StyleGuideExample>
+
+const Template: ComponentStory<typeof StyleGuideExample> = () => <StyleGuideExample />
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = []
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/StyleGuide/Texts.example.tsx

@@ -0,0 +1,16 @@
+import { Typography, TypographyVariant } from '@mui/material'
+import { FlexCol } from '@xylabs/sdk-react'
+
+export const TextsExample = () => {
+  const variantList: TypographyVariant[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']
+
+  return (
+    <FlexCol>
+      {variantList.map((variant) => (
+        <Typography key={variant} variant={variant}>
+          {variant} - XYO Network
+        </Typography>
+      ))}
+    </FlexCol>
+  )
+}

package/src/components/StyleGuide/VariantContext.example.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const VariantContext = createContext('main')

package/src/components/TableCell/AddressTableCell.tsx

@@ -0,0 +1,13 @@
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'
+
+export interface AddressTableCellProps extends EllipsisTableCellProps {
+  archive?: string
+  exploreDomain?: string
+}
+
+export const AddressTableCell: React.FC<AddressTableCellProps> = ({ value, archive, exploreDomain, ...props }) => {
+  const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined
+  const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined
+
+  return <EllipsisTableCell value={value} href={href} to={to} {...props} />
+}

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -0,0 +1,90 @@
+import { TableCell, TableCellProps, Typography, useTheme } from '@mui/material'
+import { LinkEx } from '@xylabs/sdk-react'
+import { useEffect, useRef, useState } from 'react'
+import { To } from 'react-router-dom'
+
+import { findParent } from './findParent'
+import { getRemainingRowWidth } from './getRemainingRowWidth'
+import { getSmallestParentWidth } from './getSmallestParentWidth'
+
+interface TableCellValueProps {
+  value: string | undefined
+  hashCellWidth: number | undefined
+}
+
+const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) => (
+  <Typography
+    variant="body2"
+    fontFamily="monospace"
+    style={{
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      width: hashCellWidth,
+    }}
+  >
+    {value}
+  </Typography>
+)
+
+export interface EllipsisTableCellProps extends TableCellProps {
+  value?: string
+  to?: To | undefined
+  href?: string | undefined
+}
+
+export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
+  const [hashCellWidth, setHashCellWidth] = useState<number>()
+  const hashDivRef = useRef<HTMLDivElement>(null)
+
+  const theme = useTheme()
+  const spacing = parseInt(theme.spacing(2).substring(-2))
+
+  useEffect(() => {
+    const currentElement = hashDivRef.current?.parentElement
+    const cell = findParent('td', currentElement)
+    const row = findParent('tr', currentElement)
+
+    const checkWidth = (cell: HTMLElement) => {
+      const smallestParentWidth = getSmallestParentWidth(cell)
+      if (smallestParentWidth && row) {
+        const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing
+        if (cell.clientWidth > remainderWidth) {
+          setHashCellWidth(remainderWidth)
+        } else if (hashCellWidth === undefined) {
+          setHashCellWidth(cell.clientWidth)
+        }
+      }
+    }
+
+    const onResize = () => {
+      if (cell) {
+        checkWidth(cell)
+      }
+    }
+
+    if (cell) {
+      checkWidth(cell)
+      window.addEventListener('resize', onResize)
+    }
+    return () => {
+      window.removeEventListener('resize', onResize)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hashDivRef, spacing])
+
+  return (
+    <TableCell {...props}>
+      <div ref={hashDivRef}>
+        {href || to ? (
+          <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
+            <TableCellValue hashCellWidth={hashCellWidth} value={value} />
+          </LinkEx>
+        ) : (
+          <TableCellValue hashCellWidth={hashCellWidth} value={value} />
+        )}
+      </div>
+    </TableCell>
+  )
+}

package/src/components/TableCell/HashTableCell.tsx

@@ -0,0 +1,13 @@
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'
+
+export interface HashTableCellProps extends EllipsisTableCellProps {
+  archive?: string
+  dataType?: 'block' | 'payload'
+  exploreDomain?: string
+  network?: string
+}
+
+export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
+  const explorePath = `/archive/${archive}/${dataType}/hash/${value}?network=${network ?? 'main'}`
+  return <EllipsisTableCell value={value} href={exploreDomain ? `${exploreDomain}${explorePath}}` : undefined} to={exploreDomain ? undefined : explorePath} {...props} />
+}

package/src/components/TableCell/findParent.ts

@@ -0,0 +1,10 @@
+export const findParent = (tagName: string, element: HTMLElement | null = null) => {
+  let currentElement = element
+  while (currentElement) {
+    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {
+      return currentElement
+    } else {
+      currentElement = currentElement.parentElement
+    }
+  }
+}

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -0,0 +1,22 @@
+const getPadding = (item: Element) => {
+  const computedStyles = window.getComputedStyle(item, null)
+  return (
+    parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0)
+  )
+}
+
+export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
+  let width = 0
+  let padding = 0
+  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
+    const item = row?.children.item(i)
+    if (item) {
+      if (i !== forCell) {
+        width += item?.clientWidth ?? 0
+      }
+      padding += getPadding(item)
+    }
+  }
+
+  return width + padding
+}

package/src/components/TableCell/getSmallestParentWidth.ts

@@ -0,0 +1,13 @@
+export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
+  let currentElement: HTMLElement | null = element?.parentElement
+  let width = currentElement?.clientWidth ?? 1024
+  let maxDepthCounter = maxDepth
+  while (currentElement && maxDepthCounter > 0) {
+    if (width > currentElement.getBoundingClientRect()?.['width']) {
+      width = currentElement.getBoundingClientRect()?.['width']
+    }
+    currentElement = currentElement.parentElement
+    maxDepthCounter--
+  }
+  return width
+}

package/src/components/TableCell/index.ts

@@ -0,0 +1,3 @@
+export * from './AddressTableCell'
+export * from './EllipsisTableCell'
+export * from './HashTableCell'

package/src/components/TypeDocViewer/CommentViewer.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+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.text ?? comment.shortText}</Typography>
+    </FlexCol>
+  )
+}

package/src/components/TypeDocViewer/JsonViewerButton.tsx

@@ -0,0 +1,33 @@
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { ButtonEx, ButtonExProps } from '@xylabs/sdk-react'
+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/components/TypeDocViewer/ProjectTwoPanelReflectionViewer.stories.tsx

@@ -0,0 +1,39 @@
+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: 'ProjectTwoPanelReflectionViewer',
+} as ComponentMeta<typeof ProjectTwoPanelReflectionViewer>
+
+const Template: ComponentStory<typeof ProjectTwoPanelReflectionViewer> = ({ reflection, ...props }) => {
+  return (
+    <BrowserRouter>
+      <ProjectTwoPanelReflectionViewer height="90vh" reflection={reflection} {...props} />
+    </BrowserRouter>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const Client = Template.bind({})
+Client.args = {
+  reflection: clientDocs as unknown as ProjectReflection,
+}
+
+export { Client, Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/TypeDocViewer/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/components/TypeDocViewer/ReflectionLookup.ts

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

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

@@ -0,0 +1,35 @@
+import { ContainerReflection } 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) => {
+        return (
+          <ReflectionGroupViewer
+            margin={1}
+            lookup={lookup}
+            renderer={itemRenderer}
+            key={group.kind}
+            group={group}
+            reflection={reflection}
+            hiddenFlags={hiddenFlags}
+            alignItems="stretch"
+          />
+        )
+      })}
+      {children}
+    </ReflectionViewer>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { Chip, Stack, Typography, TypographyVariant } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+
+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/components/TypeDocViewer/ReflectionViewer/Project.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { ProjectReflection } 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) => {
+          return (
+            <ReflectionGroupViewer
+              autoscroll
+              variant="h6"
+              lookup={lookup}
+              key={group.kind}
+              renderer={itemRenderer}
+              group={group}
+              reflection={reflection}
+              alignItems="stretch"
+              hiddenFlags={hiddenFlags}
+            />
+          )
+        })
+      }, [lookup, reflection, hiddenFlags, itemRenderer])}
+    </ReflectionViewer>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+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
+}