@xyo-network/react-payload-table 7.5.7 → 7.5.11

package/src/components/DynamicTable/DynamicTable.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
-import { DefaultPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { PayloadRenderPluginResolver, PayloadRenderPluginResolverProvider } from '@xyo-network/react-payload-plugin-resolver'
-import {
-  sampleCoinGeckoPayload, sampleIdPayload, sampleSystemInfoBrowserPayload, sampleUniswapPayload,
-} from '@xyo-network/react-storybook'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { PayloadDynamicTable } from './Table.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PayloadDynamicTable,
-  parameters: { docs: { page: null } },
-  title: 'payload/DynamicTable',
-} as Meta<typeof PayloadDynamicTable>
-
-const Template: StoryFn<typeof PayloadDynamicTable> = args => (
-  <PayloadRenderPluginResolverProvider
-    resolver={new PayloadRenderPluginResolver().register(UniswapPairsRenderPlugin).register(DefaultPayloadRenderPlugin)}
-  >
-    <BrowserRouter>
-      <PayloadDynamicTable {...args}></PayloadDynamicTable>
-    </BrowserRouter>
-  </PayloadRenderPluginResolverProvider>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = {
-  payloads: [
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleCoinGeckoPayload,
-    sampleSystemInfoBrowserPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleCoinGeckoPayload,
-    sampleSystemInfoBrowserPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleCoinGeckoPayload,
-    sampleSystemInfoBrowserPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleIdPayload,
-    sampleUniswapPayload,
-    sampleSystemInfoBrowserPayload,
-  ],
-}
-
-const WithError = Template.bind({})
-
-const { ...badPayload } = sampleIdPayload
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-WithError.args = { payloads: [sampleIdPayload, badPayload] }
-
-export {
-  Default, WithData, WithError,
-}
-
-export default StorybookEntry

package/src/components/DynamicTable/DynamicTableRow.tsx

@@ -1,134 +0,0 @@
-import {
-  CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,
-  ErrorOutlineRounded as ErrorOutlineRoundedIcon,
-  WarningAmberRounded as WarningAmberRoundedIcon,
-} from '@mui/icons-material'
-import type {
-  AvatarProps, TableCellProps, TableRowProps,
-} from '@mui/material'
-import {
-  TableCell, TableRow, Typography,
-} from '@mui/material'
-import { usePromise } from '@xylabs/react-promise'
-import { useBreakpoint } from '@xylabs/react-shared'
-import { PayloadBuilder } from '@xyo-network/payload-builder'
-import type { Payload } from '@xyo-network/payload-model'
-import { PayloadValidator } from '@xyo-network/payload-validator'
-import { useNetwork } from '@xyo-network/react-network'
-import type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'
-import { usePayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin-resolver'
-import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
-import type { ComponentType } from 'react'
-import React, { useMemo } from 'react'
-
-import type { TableCellRenderer } from '../lib/index.ts'
-import type {
-  PayloadDynamicTableColumnConfig,
-  PayloadDynamicTableColumnSlug,
-} from './PayloadDynamicTableColumnConfig.ts'
-import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig.ts'
-
-export interface PayloadDynamicTableRowProps extends TableRowProps {
-  /** @deprecated - archives are no longer used */
-  archive?: string
-  columns?: PayloadDynamicTableColumnConfig
-  /** @deprecated - use event listeners instead of link building via props */
-  exploreDomain?: string
-  network?: string
-  payload?: Payload & { sources?: string[] }
-}
-
-export const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({
-  columns,
-  network: networkProp,
-  payload,
-  ...props
-}) => {
-  const breakPoint = useBreakpoint()
-  const payloadHash = usePayloadHash(payload)
-  const { network } = useNetwork()
-  const { resolver } = usePayloadRenderPluginResolver()
-  const [validationErrors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])
-  const isValid = validationErrors.length === 0
-  const payloadFieldCount = payload ? Object.keys(PayloadBuilder.hashableFields(payload)).length : 0
-
-  const hash: TableCellRenderer = props => (
-    <HashTableCell
-      key="hash"
-      align="left"
-      value={payloadHash}
-      dataType="payload"
-      network={networkProp ?? network?.slug}
-      {...props}
-    />
-  )
-
-  const schema: TableCellRenderer = props => (
-    <TableCell key="payloads" align="left" {...props}>
-      <Typography fontFamily="monospace" variant="body2" noWrap>
-        {payload?.schema}
-      </Typography>
-    </TableCell>
-  )
-
-  const details: TableCellRenderer = props => (
-    <TableCell key="payloads" align="left" {...props}>
-      <Typography fontFamily="monospace" variant="body2" noWrap>
-        {payloadFieldCount}
-      </Typography>
-    </TableCell>
-  )
-
-  const render: TableCellRenderer = (props) => {
-    const Render: ComponentType<PayloadRenderProps & TableCellProps> | undefined
-      = payload ? resolver?.resolve(payload)?.components.table.cell : undefined
-    return Render ? <Render payload={payload} {...props} /> : <TableCell key="payloads" align="left" {...props}></TableCell>
-  }
-
-  const icon: TableCellRenderer = (props) => {
-    const Avatar: ComponentType<PayloadRenderProps & AvatarProps> | undefined
-      = payload ? resolver?.resolve(payload)?.components.avatar.image : undefined
-
-    return (
-      <TableCell key="payloads" align="left" {...props}>
-        {Avatar
-          ? <Avatar payload={payload} />
-          : null}
-      </TableCell>
-    )
-  }
-
-  const valid: TableCellRenderer = props => (
-    <TableCell key="valid" align="center" {...props}>
-      {isValid === undefined && payload != undefined
-        ? <WarningAmberRoundedIcon fontSize="small" color="warning" />
-        : isValid === true
-          ? <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
-          : isValid === false
-            ? <ErrorOutlineRoundedIcon color="error" fontSize="small" />
-          // nbsp to keep row height consistent even when no data is provided for the row
-            : <Typography> &nbsp;</Typography>}
-    </TableCell>
-  )
-
-  const tableCells: Record<PayloadDynamicTableColumnSlug, TableCellRenderer> = {
-    details,
-    hash,
-    icon,
-    render,
-    schema,
-    valid,
-  }
-
-  const columnsMemo = useMemo(() => columns ?? payloadDynamicTableColumnConfigDefaults(), [columns])
-
-  return breakPoint
-    ? (
-        <TableRow style={{ maxWidth: '100vw' }} {...props}>
-          {columnsMemo[breakPoint]?.map((column) => {
-            return column.slug ? tableCells[column.slug]({}) : null
-          })}
-        </TableRow>
-      )
-    : null
-}

package/src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts

@@ -1,98 +0,0 @@
-export type PayloadDynamicTableColumnSlug = 'hash' | 'schema' | 'valid' | 'details' | 'render' | 'icon'
-
-export interface PayloadDynamicTableColumnHeadData {
-  alignment?: 'left' | 'center' | 'right'
-  name?: string
-  slug?: 'hash' | 'schema' | 'valid' | 'details' | 'render' | 'icon'
-  width?: string | number
-}
-
-export interface PayloadDynamicTableColumnConfig {
-  xs?: PayloadDynamicTableColumnHeadData[]
-  // eslint-disable-next-line @typescript-eslint/member-ordering
-  sm?: PayloadDynamicTableColumnHeadData[]
-  // eslint-disable-next-line @typescript-eslint/member-ordering
-  md?: PayloadDynamicTableColumnHeadData[]
-  // eslint-disable-next-line @typescript-eslint/member-ordering
-  lg?: PayloadDynamicTableColumnHeadData[]
-  xl?: PayloadDynamicTableColumnHeadData[]
-}
-
-export const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {
-  const xs: PayloadDynamicTableColumnHeadData[] = [
-    {
-      alignment: 'left', name: 'Hash', slug: 'hash', width: '100%',
-    },
-    {
-      alignment: 'left', name: 'Schema', slug: 'schema', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Valid', slug: 'valid', width: '50px',
-    },
-  ]
-  const sm: PayloadDynamicTableColumnHeadData[] = [
-    {
-      alignment: 'left', name: 'Icon', slug: 'icon', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Hash', slug: 'hash', width: '100%',
-    },
-    {
-      alignment: 'left', name: 'Schema', slug: 'schema', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Valid', slug: 'valid', width: '50px',
-    },
-  ]
-  const md: PayloadDynamicTableColumnHeadData[] = [
-    {
-      alignment: 'left', name: 'Icon', slug: 'icon', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Hash', slug: 'hash', width: '100%',
-    },
-    {
-      alignment: 'left', name: 'Schema', slug: 'schema', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Valid', slug: 'valid', width: '50px',
-    },
-  ]
-  const lg: PayloadDynamicTableColumnHeadData[] = [
-    {
-      alignment: 'left', name: 'Icon', slug: 'icon', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Hash', slug: 'hash', width: '100%',
-    },
-    {
-      alignment: 'left', name: 'Schema', slug: 'schema', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Render', slug: 'render', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Valid', slug: 'valid', width: '50px',
-    },
-  ]
-  const xl: PayloadDynamicTableColumnHeadData[] = [
-    {
-      alignment: 'left', name: 'Icon', slug: 'icon', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Hash', slug: 'hash', width: '100%',
-    },
-    {
-      alignment: 'left', name: 'Schema', slug: 'schema', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Render', slug: 'render', width: '50px',
-    },
-    {
-      alignment: 'left', name: 'Valid', slug: 'valid', width: '50px',
-    },
-  ]
-  return {
-    lg, md, sm, xl, xs,
-  }
-}

package/src/components/DynamicTable/Table.tsx

@@ -1,194 +0,0 @@
-import {
-  FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
-} from '@mui/icons-material'
-import type { TableProps } from '@mui/material'
-import {
-  Alert,
-  Box,
-  IconButton,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  Typography,
-  useTheme,
-} from '@mui/material'
-import { ThrownErrorBoundary } from '@xylabs/react-error'
-import { useResetState } from '@xylabs/react-hooks'
-import { useBreakpoint } from '@xylabs/react-shared'
-import type { Payload } from '@xyo-network/payload-model'
-import { usePayloadHashes } from '@xyo-network/react-shared'
-import type { ReactNode } from 'react'
-import React, { useMemo, useState } from 'react'
-
-import { PayloadDynamicTableRow } from './DynamicTableRow.tsx'
-import type { PayloadDynamicTableColumnConfig } from './PayloadDynamicTableColumnConfig.ts'
-import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig.ts'
-
-export interface PayloadDynamicTableProps extends TableProps {
-  archive?: string
-  columns?: PayloadDynamicTableColumnConfig
-  exploreDomain?: string
-  onRowClick?: (value: Payload) => void
-  payloads?: Payload[] | null
-  rowsPerPage?: number
-}
-
-interface TablePaginationActionsProps {
-  count: number
-  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
-  page: number
-  rowsPerPage: number
-}
-
-const TablePaginationActions: React.FC<TablePaginationActionsProps> = (props) => {
-  const theme = useTheme()
-  const {
-    count, page, rowsPerPage, onPageChange,
-  } = props
-
-  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, 0)
-  }
-
-  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page - 1)
-  }
-
-  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page + 1)
-  }
-
-  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
-  }
-
-  return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
-      <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
-        {theme.direction === 'rtl'
-          ? <LastPageIcon />
-          : <FirstPageIcon />}
-      </IconButton>
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
-        {theme.direction === 'rtl'
-          ? <KeyboardArrowRight />
-          : <KeyboardArrowLeft />}
-      </IconButton>
-      <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
-        {theme.direction === 'rtl'
-          ? <KeyboardArrowLeft />
-          : <KeyboardArrowRight />}
-      </IconButton>
-      <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
-        {theme.direction === 'rtl'
-          ? <FirstPageIcon />
-          : <LastPageIcon />}
-      </IconButton>
-    </Box>
-  )
-}
-
-export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
-  archive,
-  children,
-  columns,
-  exploreDomain,
-  onRowClick,
-  rowsPerPage: rowsPerPageProp = 10,
-  payloads,
-  ...props
-}) => {
-  const breakPoint = useBreakpoint()
-  const [page, setPage] = useState(0)
-  const [rowsPerPage, setRowsPerPage] = useResetState(rowsPerPageProp)
-  const payloadCount = payloads ? payloads.length : 0
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
-
-  const pagedPayloads = useMemo(() => payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [payloads, page, rowsPerPage])
-
-  const payloadPairs = usePayloadHashes(pagedPayloads)
-
-  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
-    setPage(newPage)
-  }
-
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setRowsPerPage(Number.parseInt(event.target.value, 10))
-    setPage(0)
-  }
-
-  return breakPoint
-    ? (
-        <Table stickyHeader {...props}>
-          <TableHead>
-            <TableRow>
-              {(columns ?? payloadDynamicTableColumnConfigDefaults())[breakPoint]?.map((column, index) => {
-                return (
-                  <TableCell key={index} align={column.alignment ?? 'left'} width={column.width}>
-                    <Typography variant="body2" noWrap>
-                      {column.name}
-                    </Typography>
-                  </TableCell>
-                )
-              })}
-            </TableRow>
-          </TableHead>
-          <TableBody sx={{ overflowY: 'scroll ' }}>
-            {payloadPairs?.map(([payload, hash], index) => {
-              return (
-                <ThrownErrorBoundary
-                  boundaryName="PayloadTableBody"
-                  key={`${hash}-${index}`}
-                  errorComponent={e => (
-                    <Alert severity="error">
-                      Error Loading Payload:
-                      {' '}
-                      <Typography fontWeight="bold">{e.message}</Typography>
-                    </Alert>
-                  )}
-                >
-                  <PayloadDynamicTableRow
-                    archive={archive}
-                    onClick={
-                      onRowClick
-                        ? () => {
-                            onRowClick(payload)
-                          }
-                        : undefined
-                    }
-                    exploreDomain={exploreDomain}
-                    payload={payload}
-                  />
-                </ThrownErrorBoundary>
-              )
-            })}
-            {children}
-            {emptyRows ? (Array.from({ length: emptyRows }).fill(<PayloadDynamicTableRow />) as ReactNode[]) : null}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={5}
-                count={payloadCount}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: { 'aria-label': 'rows per page' },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      )
-    : null
-}

package/src/components/DynamicTable/index.ts

@@ -1,3 +0,0 @@
-export * from './DynamicTableRow.tsx'
-export * from './PayloadDynamicTableColumnConfig.ts'
-export * from './Table.tsx'

package/src/components/Table/FetchMoreTable.stories.tsx

@@ -1,100 +0,0 @@
-import { Button, Typography } from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { delay } from '@xylabs/sdk-js'
-import { asSchema, type Payload } from '@xyo-network/payload-model'
-import { useEvent } from '@xyo-network/react-event'
-import React, { useEffect, useState } from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { PayloadTable } from './Table.tsx'
-
-const newPayloads = () =>
-  Array(50)
-    // eslint-disable-next-line unicorn/no-useless-undefined
-    .fill(undefined)
-    .map((_, index) => ({
-      index, random: Math.random(), schema: asSchema('network.xyo.stories.test', true),
-    }))
-
-// simulating the end of the list
-const maxPayloads = 200
-
-const NewPayloadsDecorator: Decorator = (Story, args) => {
-  const testPayloads = newPayloads()
-  const [payloads, setPayloads] = useState<Payload[]>([])
-  const [count, setCount] = useState(0)
-
-  const addToTotalPayloads = (payloads: Payload[]) =>
-    setPayloads((previous) => {
-      previous.push(...payloads)
-      setCount(previous.length)
-      return previous
-    })
-
-  useEffect(() => {
-    // simulate initial async payloads
-    const timeout = setTimeout(() => {
-      addToTotalPayloads(testPayloads)
-    }, 500)
-    return () => clearTimeout(timeout)
-  }, [])
-
-  const addPayloads = () => {
-    addToTotalPayloads(newPayloads())
-    return true
-  }
-
-  const newPayloadList = async () => {
-    // Simulating delay fetching new payloads
-    await delay(800)
-    const newPayloadList = newPayloads()
-    setCount(newPayloadList.length)
-    setPayloads(newPayloadList)
-  }
-
-  args.args = {
-    ...args.args,
-    count,
-    fetchMorePayloads: payloads.length < maxPayloads ? addPayloads : null,
-    payloads,
-  }
-
-  return (
-    <>
-      <Typography>
-        Max Payloads:
-        {maxPayloads}
-      </Typography>
-      <Button variant="contained" onClick={newPayloadList}>
-        Simulate Network Change
-      </Button>
-      <Story {...args} />
-    </>
-  )
-}
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PayloadTable,
-  parameters: { docs: { page: null } },
-  title: 'payload/FetchMoreTable',
-} as Meta<typeof PayloadTable>
-
-const Template: StoryFn<typeof PayloadTable> = (args) => {
-  const [ref] = useEvent<HTMLTableElement>((noun, verb, data) => console.log(`[${noun}|${verb}|${data}]`))
-  return (
-    <BrowserRouter>
-      <PayloadTable ref={ref} {...args}></PayloadTable>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-Default.decorators = [NewPayloadsDecorator]
-
-export { Default }
-
-export default StorybookEntry

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -1,22 +0,0 @@
-import type { TableColumnConfig, TableColumnNames } from './lib/index.ts'
-
-export type PayloadTableColumnConfig = TableColumnConfig<PayloadTableColumnSlug>
-
-export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid' | string
-
-export const payloadColumnNames: TableColumnNames<PayloadTableColumnSlug> = {
-  hash: 'Hash',
-  schema: 'Schema',
-  valid: 'Valid',
-}
-
-export const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig => {
-  const xs: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  const sm: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  return {
-    lg, md, sm, xl, xs,
-  }
-}