@xyo-network/react-payload-table 2.28.0

package/src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts

@@ -0,0 +1,27 @@
+export type PayloadDynamicTableColumnSlug = 'hash' | 'schema' | 'valid' | 'details' | 'render' | 'icon'
+
+export interface PayloadDynamicTableColumnConfig {
+  xs?: PayloadDynamicTableColumnSlug[]
+  sm?: PayloadDynamicTableColumnSlug[]
+  md?: PayloadDynamicTableColumnSlug[]
+  lg?: PayloadDynamicTableColumnSlug[]
+  xl?: PayloadDynamicTableColumnSlug[]
+}
+
+export const payloadColumnNames: Record<PayloadDynamicTableColumnSlug, string> = {
+  details: 'Details',
+  hash: 'Hash',
+  icon: 'Icon',
+  render: 'Render',
+  schema: 'Schema',
+  valid: 'Valid',
+}
+
+export const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {
+  const xs: PayloadDynamicTableColumnSlug[] = ['icon', 'hash', 'schema', 'render', 'valid']
+  const sm: PayloadDynamicTableColumnSlug[] = ['icon', 'hash', 'schema', 'render', 'valid']
+  const md: PayloadDynamicTableColumnSlug[] = ['icon', 'hash', 'schema', 'render', 'valid']
+  const lg: PayloadDynamicTableColumnSlug[] = ['icon', 'hash', 'schema', 'render', 'valid']
+  const xl: PayloadDynamicTableColumnSlug[] = ['icon', 'hash', 'schema', 'render', 'valid']
+  return { lg, md, sm, xl, xs }
+}

package/src/components/DynamicTable/Table.tsx

@@ -0,0 +1,73 @@
+import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/react-shared'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+
+import { PayloadDynamicTableRow } from './DynamicTableRow'
+import { payloadColumnNames, PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
+
+export interface PayloadDynamicTableProps extends TableProps {
+  exploreDomain?: string
+  archive?: string
+  onRowClick?: (value: XyoPayload) => void
+  payloads?: XyoPayload[] | null
+  columns?: PayloadDynamicTableColumnConfig
+}
+
+export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
+  exploreDomain,
+  archive,
+  onRowClick,
+  payloads,
+  children,
+  columns = payloadDynamicTableColumnConfigDefaults(),
+  ...props
+}) => {
+  const breakPoint = useBreakpoint()
+  return breakPoint ? (
+    <Table {...props}>
+      <TableHead>
+        <TableRow>
+          {columns[breakPoint]?.map((column, index) => {
+            return (
+              <TableCell key={index} width={undefined} align="left">
+                <Typography variant="caption" noWrap>
+                  <strong>{payloadColumnNames[column]}</strong>
+                </Typography>
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {payloads?.map((payload, index) => {
+          const wrapper = new XyoPayloadWrapper(payload)
+          return (
+            <XyoApiThrownErrorBoundary
+              key={`${wrapper.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}
+              />
+            </XyoApiThrownErrorBoundary>
+          )
+        })}
+        {children}
+      </TableBody>
+    </Table>
+  ) : null
+}

package/src/components/DynamicTable/index.ts

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

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -0,0 +1,25 @@
+export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid'
+
+export interface PayloadTableColumnConfig {
+  xs?: PayloadTableColumnSlug[]
+  sm?: PayloadTableColumnSlug[]
+  md?: PayloadTableColumnSlug[]
+  lg?: PayloadTableColumnSlug[]
+  xl?: PayloadTableColumnSlug[]
+}
+
+export const payloadColumnNames: Record<PayloadTableColumnSlug, string> = {
+  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 }
+}

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

@@ -0,0 +1,47 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { samplePayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
+import { BrowserRouter } from 'react-router-dom'
+
+import { PayloadTable } from './Table'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadTable,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/Table',
+} as ComponentMeta<typeof PayloadTable>
+
+const Template: ComponentStory<typeof PayloadTable> = (args) => (
+  <BrowserRouter>
+    <PayloadTable {...args}></PayloadTable>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [useAppThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.decorators = [useAppThemeDecorator]
+
+const WithDynamicDataRow = Template.bind({})
+WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.decorators = [useAppThemeDecorator]
+
+const WithError = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { _hash, ...badPayload } = samplePayload
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+WithError.args = { payloads: [samplePayload, badPayload] }
+
+export { Default, WithData, WithDynamicDataRow, WithError }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -0,0 +1,73 @@
+import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/react-shared'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+
+import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
+import { PayloadTableRow } from './TableRow'
+
+export interface PayloadTableProps extends TableProps {
+  exploreDomain?: string
+  archive?: string
+  onRowClick?: (value: XyoPayload) => void
+  payloads?: XyoPayload[] | null
+  columns?: PayloadTableColumnConfig
+}
+
+export const PayloadTable: React.FC<PayloadTableProps> = ({
+  exploreDomain,
+  archive,
+  onRowClick,
+  payloads,
+  children,
+  columns = payloadTableColumnConfigDefaults(),
+  ...props
+}) => {
+  const breakPoint = useBreakpoint()
+  return breakPoint ? (
+    <Table {...props}>
+      <TableHead>
+        <TableRow>
+          {columns[breakPoint]?.map((column, index) => {
+            return (
+              <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
+                <Typography variant="caption" noWrap>
+                  <strong>{payloadColumnNames[column]}</strong>
+                </Typography>
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {payloads?.map((payload, index) => {
+          const wrapper = new XyoPayloadWrapper(payload)
+          return (
+            <XyoApiThrownErrorBoundary
+              key={`${wrapper.hash}-${index}`}
+              errorComponent={(e) => (
+                <Alert severity="error">
+                  Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+                </Alert>
+              )}
+            >
+              <PayloadTableRow
+                archive={archive}
+                onClick={
+                  onRowClick
+                    ? () => {
+                        onRowClick(payload)
+                      }
+                    : undefined
+                }
+                exploreDomain={exploreDomain}
+                payload={payload}
+              />
+            </XyoApiThrownErrorBoundary>
+          )
+        })}
+        {children}
+      </TableBody>
+    </Table>
+  ) : null
+}

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,80 @@
+import { TableCell, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/react-shared'
+import { XyoPayload, XyoPayloadValidator, XyoPayloadWrapper } from '@xyo-network/payload'
+import { useNetwork } from '@xyo-network/react-network'
+import { HashTableCell } from '@xyo-network/react-shared'
+import { MdClear, MdDone } from 'react-icons/md'
+
+import { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig'
+
+export interface PayloadTableRowProps extends TableRowProps {
+  payload?: XyoPayload
+  archive?: string
+  exploreDomain?: string
+  columns?: PayloadTableColumnConfig
+  network?: string
+}
+
+export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
+  exploreDomain,
+  network: networkProp,
+  payload,
+  archive,
+  columns = payloadTableColumnConfigDefaults(),
+  ...props
+}) => {
+  const breakPoint = useBreakpoint()
+  const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined
+  const { network } = useNetwork()
+
+  const hash: React.FC<TableCellProps> = (props) => (
+    <HashTableCell
+      key="hash"
+      archive={archive}
+      width="100%"
+      value={wrapper?.hash}
+      dataType="payload"
+      exploreDomain={exploreDomain}
+      network={networkProp ?? network?.slug}
+      {...props}
+    />
+  )
+
+  const schema: React.FC<TableCellProps> = (props) => (
+    <TableCell key="payloads" align="center" {...props}>
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {payload?.schema}
+      </Typography>
+    </TableCell>
+  )
+
+  const isValid = wrapper ? new XyoPayloadValidator(wrapper.body).validate().length === 0 : undefined
+
+  const valid: React.FC<TableCellProps> = (props) => (
+    <TableCell key="valid" align="center" {...props}>
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {isValid === undefined ? (
+          <MdDone fontSize={18} color="yellow" />
+        ) : isValid ? (
+          <MdDone fontSize={18} color="green" />
+        ) : (
+          <MdClear color="red" fontSize={18} />
+        )}
+      </Typography>
+    </TableCell>
+  )
+
+  const tableCells: Record<PayloadTableColumnSlug, React.FC<TableCellProps>> = {
+    hash,
+    schema,
+    valid,
+  }
+
+  return breakPoint ? (
+    <TableRow style={{ maxWidth: '100vw' }} {...props}>
+      {columns[breakPoint]?.map((column) => {
+        return tableCells[column]({})
+      })}
+    </TableRow>
+  ) : null
+}

package/src/components/Table/index.ts

@@ -0,0 +1,3 @@
+export * from './PayloadTableColumnConfig'
+export * from './Table'
+export * from './TableRow'

package/src/components/index.ts

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

package/src/index.ts

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