@xyo-network/react-payload-table 3.0.2 → 3.0.4

package/src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts

@@ -20,35 +20,79 @@ export interface PayloadDynamicTableColumnConfig {
 
 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' },
+    {
+      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' },
+    {
+      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' },
+    {
+      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' },
+    {
+      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' },
+    {
+      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 }
+  return {
+    lg, md, sm, xl, xs,
+  }
 }

package/src/components/DynamicTable/Table.tsx

@@ -1,6 +1,7 @@
-import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'
-import type {
-  TableProps } from '@mui/material'
+import {
+  FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
+} from '@mui/icons-material'
+import type { TableProps } from '@mui/material'
 import {
   Alert,
   Box,
@@ -20,7 +21,9 @@ import type { Payload } from '@xyo-network/payload-model'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
 import type { ReactNode } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { PayloadDynamicTableRow } from './DynamicTableRow.tsx'
 import type { PayloadDynamicTableColumnConfig } from './PayloadDynamicTableColumnConfig.ts'
@@ -44,7 +47,9 @@ interface TablePaginationActionsProps {
 
 function TablePaginationActions(props: TablePaginationActionsProps) {
   const theme = useTheme()
-  const { count, page, rowsPerPage, onPageChange } = props
+  const {
+    count, page, rowsPerPage, onPageChange,
+  } = props
 
   const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onPageChange(event, 0)
@@ -179,9 +184,7 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
                 rowsPerPage={rowsPerPage}
                 page={page}
                 SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
+                  inputProps: { 'aria-label': 'rows per page' },
                   native: true,
                 }}
                 onPageChange={handleChangePage}

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

@@ -1,5 +1,7 @@
 import { Button, Typography } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { delay } from '@xylabs/delay'
 import type { Payload } from '@xyo-network/payload-model'
 import { useEvent } from '@xyo-network/react-event'
@@ -12,7 +14,9 @@ const newPayloads = () =>
   Array(50)
     // eslint-disable-next-line unicorn/no-useless-undefined
     .fill(undefined)
-    .map((_, index) => ({ index, random: Math.random(), schema: 'network.xyo.stories.test' }))
+    .map((_, index) => ({
+      index, random: Math.random(), schema: 'network.xyo.stories.test',
+    }))
 
 // simulating the end of the list
 const maxPayloads = 200
@@ -31,9 +35,10 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
 
   useEffect(() => {
     // simulate initial async payloads
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       addToTotalPayloads(testPayloads)
     }, 500)
+    return () => clearTimeout(timeout)
   }, [])
 
   const addPayloads = () => {
@@ -73,11 +78,7 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
 const StorybookEntry = {
   argTypes: {},
   component: PayloadTable,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'payload/FetchMoreTable',
 } as Meta<typeof PayloadTable>
 

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -23,5 +23,7 @@ export const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig =>
   const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
   const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
   const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  return { lg, md, sm, xl, xs }
+  return {
+    lg, md, sm, xl, xs,
+  }
 }

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

@@ -11,11 +11,7 @@ import { PayloadTable } from './Table.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: PayloadTable,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'payload/Table',
 } as Meta<typeof PayloadTable>
 
@@ -55,9 +51,7 @@ const payloads: Payload[] = [
 ]
 
 const WithData = Template.bind({})
-WithData.args = {
-  payloads,
-}
+WithData.args = { payloads }
 
 const WithOutStickyHeaderFooter = Template.bind({})
 WithOutStickyHeaderFooter.args = {
@@ -72,8 +66,11 @@ WithDataAndMaxSchemaDepth.args = {
 }
 
 const WithInvalid = Template.bind({})
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { schema, ...badPayload } = sampleIdPayload
+
+const {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  schema, ...badPayload
+} = sampleIdPayload
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -85,6 +82,8 @@ WithNoResults.args = { payloads: [] }
 const WithLoading = Template.bind({})
 WithLoading.args = { loading: true, payloads: [] }
 
-export { Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter }
+export {
+  Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter,
+}
 
 export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -3,14 +3,18 @@ import type { Payload } from '@xyo-network/payload-model'
 import type { TableExProps } from '@xyo-network/react-table'
 import { TableEx } from '@xyo-network/react-table'
 import type { ComponentType } from 'react'
-import React, { forwardRef, useEffect, useMemo, useState } from 'react'
+import React, {
+  forwardRef, useEffect, useMemo, useState,
+} from 'react'
 
 import type { PayloadTableColumnConfig } from './PayloadTableColumnConfig.ts'
 import { PayloadTableBody } from './TableBody.tsx'
 import { PayloadTableFooter } from './TableFooter.tsx'
 import { PayloadTableHead } from './TableHead.tsx'
 import { TableRowNoData } from './TableRowNoData.tsx'
-import type { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types/index.ts'
+import type {
+  PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps,
+} from './types/index.ts'
 
 export interface PayloadTableProps extends TableExProps {
   PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>

package/src/components/Table/TableBody.tsx

@@ -1,4 +1,6 @@
-import { Alert, TableBody, Typography } from '@mui/material'
+import {
+  Alert, TableBody, Typography,
+} from '@mui/material'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
 import type { ReactNode } from 'react'

package/src/components/Table/TableFooter.tsx

@@ -1,4 +1,6 @@
-import { styled, TablePagination, TableRow } from '@mui/material'
+import {
+  styled, TablePagination, TableRow,
+} from '@mui/material'
 import { TableFooterEx } from '@xyo-network/react-table'
 import React from 'react'
 
@@ -23,9 +25,7 @@ export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
         rowsPerPage={rowsPerPage ?? 10}
         page={page ?? 0}
         SelectProps={{
-          inputProps: {
-            'aria-label': 'rows per page',
-          },
+          inputProps: { 'aria-label': 'rows per page' },
           native: true,
         }}
         onPageChange={handleChangePage ?? (() => {})}
@@ -38,9 +38,7 @@ export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
 )
 
 const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
-  '& > .MuiToolbar-root': {
-    paddingLeft: theme.spacing(1),
-  },
+  '& > .MuiToolbar-root': { paddingLeft: theme.spacing(1) },
   'borderTop': '1px solid',
   'borderTopColor': theme.palette.divider,
 }))

package/src/components/Table/TableHead.tsx

@@ -1,4 +1,6 @@
-import { TableCell, TableHead, TableRow, Typography } from '@mui/material'
+import {
+  TableCell, TableHead, TableRow, Typography,
+} from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
 import React, { useMemo } from 'react'
 

package/src/components/Table/TablePagination.tsx

@@ -1,5 +1,9 @@
-import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'
-import { Box, CircularProgress, IconButton, useTheme } from '@mui/material'
+import {
+  FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
+} from '@mui/icons-material'
+import {
+  Box, CircularProgress, IconButton, useTheme,
+} from '@mui/material'
 import { useEvent } from '@xyo-network/react-event'
 import React from 'react'
 
@@ -14,7 +18,9 @@ export interface TablePaginationActionsProps {
   rowsPerPage: number
 }
 
-export function TablePaginationActions({ count, enableNextPage, loading, onPageChange, page, rowsPerPage }: TablePaginationActionsProps) {
+export function TablePaginationActions({
+  count, enableNextPage, loading, onPageChange, page, rowsPerPage,
+}: TablePaginationActionsProps) {
   const theme = useTheme()
   const [paginationRef, paginationDispatch] = useEvent<HTMLButtonElement, PaginationNouns>()
 
@@ -41,7 +47,14 @@ export function TablePaginationActions({ count, enableNextPage, loading, onPageC
   return (
     <>
       {loading
-        ? <CircularProgress size="small" sx={{ height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) }} />
+        ? (
+            <CircularProgress
+              size="small"
+              sx={{
+                height: theme.spacing(2), position: 'absolute', width: theme.spacing(2),
+              }}
+            />
+          )
         : null}
       <Box sx={{ flexShrink: 0, ml: 2.5 }}>
         <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">

package/src/components/Table/TableRow.tsx

@@ -4,7 +4,9 @@ import {
   WarningAmberRounded as WarningAmberRoundedIcon,
 } from '@mui/icons-material'
 import type { TableCellProps, TableRowProps } from '@mui/material'
-import { alpha, TableCell, TableRow, Typography } from '@mui/material'
+import {
+  alpha, TableCell, TableRow, Typography,
+} from '@mui/material'
 import type { Hash } from '@xylabs/hex'
 import { usePromise } from '@xylabs/react-promise'
 import { useBreakpoint } from '@xylabs/react-shared'

package/src/components/Table/TableRowNoData.tsx

@@ -1,5 +1,7 @@
 import type { TableRowProps, TypographyProps } from '@mui/material'
-import { styled, TableCell, TableRow, Typography } from '@mui/material'
+import {
+  styled, TableCell, TableRow, Typography,
+} from '@mui/material'
 import React from 'react'
 
 export interface TableRowNoDataProps extends TableRowProps {
@@ -8,7 +10,9 @@ export interface TableRowNoDataProps extends TableRowProps {
   typographyProps?: TypographyProps
 }
 
-export const TableRowNoData: React.FC<TableRowNoDataProps> = ({ additionalCells, hideBorder = false, typographyProps, ...props }) => {
+export const TableRowNoData: React.FC<TableRowNoDataProps> = ({
+  additionalCells, hideBorder = false, typographyProps, ...props
+}) => {
   return (
     <TableRow {...props}>
       <StyledTableCell hideBorder={hideBorder}>
@@ -32,6 +36,4 @@ interface StyledTableCellProps {
 const StyledTableCell = styled(TableCell, {
   name: 'StyledTableCell',
   shouldForwardProp: (prop: string) => prop !== 'hideBorder',
-})<StyledTableCellProps>(({ hideBorder }) => ({
-  ...(hideBorder && { border: 'none' }),
-}))
+})<StyledTableCellProps>(({ hideBorder }) => ({ ...(hideBorder && { border: 'none' }) }))

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },