@xyo-network/react-payload-details 2.32.0-rc.11

package/src/components/Details/JsonDetails.tsx

@@ -0,0 +1,43 @@
+import { Paper, useMediaQuery, useTheme } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { XyoPayload } from '@xyo-network/payload'
+import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
+import { lazy, Suspense } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export type PayloadJsonDetailsProps = PropertyGroupProps & {
+  payload?: XyoPayload
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints, palette } = useTheme()
+  const belowSm = useMediaQuery(breakpoints.down('sm'))
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="JSON" tip="The raw JSON of the payload" {...props}>
+      <Paper square variant="elevation" style={{ overflow: 'hidden', padding: '16px', width: '100%' }}>
+        <Suspense fallback={<FlexGrowRow />}>
+          <JsonView
+            groupArraysAfterLength={20}
+            style={{ backgroundColor: undefined, overflow: 'hidden' }}
+            src={payload}
+            enableClipboard
+            theme={jsonTheme}
+            collapseStringsAfterLength={belowSm ? 24 : 32}
+            {...jsonViewProps}
+          />
+        </Suspense>
+      </Paper>
+    </PropertyGroup>
+  )
+}

package/src/components/Details/ValidationDetails/ValidationDetails.stories.tsx

@@ -0,0 +1,55 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { samplePayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
+import { BrowserRouter } from 'react-router-dom'
+
+import { PayloadDetails } from '../Details'
+import { PayloadValidationDetails } from './ValidationDetails'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  args: {
+    value: {
+      schema: 'network.xyo.schema',
+    },
+  },
+  component: PayloadDetails,
+  decorators: [useAppThemeDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/ValidationDetails',
+}
+
+const Template: ComponentStory<typeof PayloadValidationDetails> = (args) => (
+  <BrowserRouter>
+    <PayloadValidationDetails {...args} />
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = { skipBody: true }
+
+const WithViewSchemaLink = Template.bind({})
+WithViewSchemaLink.args = {
+  viewSchemaUrl: 'http://beta.explore.xyo.network/6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2/?huri=huri',
+}
+
+const WithErrorsInToolTip = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+WithErrorsInToolTip.args = { value: { ...samplePayload, ...{ _hash: '6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2' } } }
+
+const SkipBody = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+SkipBody.args = {
+  skipBody: true,
+  value: { _hash: '44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a', _timestamp: new Date().getTime(), schema: 'network.xyo.test' },
+}
+
+export { Default, SkipBody, WithErrorsInToolTip, WithViewSchemaLink }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/ValidationDetails/ValidationDetails.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoPayloadValidator } from '@xyo-network/payload'
+import { Property, PropertyGroup } from '@xyo-network/react-property'
+import { SchemaProperty } from '@xyo-network/react-schema'
+
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps'
+
+export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ viewSchemaUrl, skipBody = false, value, ...props }) => {
+  const validator = value ? new XyoPayloadValidator(value) : undefined
+
+  const bodyErrors = skipBody ? [] : validator?.body.validate() ?? []
+  const errors: Error[] = [...bodyErrors]
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Validation" tip="The results from validating the payload" {...props}>
+      <Property
+        titleProps={{ elevation }}
+        flexGrow={1}
+        title="Valid"
+        value={errors.length === 0 ? 'True' : 'False'}
+        tip={
+          errors.length > 0 ? (
+            <FlexCol>
+              {errors.map((error, index) => {
+                return <Typography key={index}>{error.toString()}</Typography>
+              })}
+            </FlexCol>
+          ) : (
+            <Typography>No Errors</Typography>
+          )
+        }
+      />
+      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} viewSchemaUrl={viewSchemaUrl} />}
+    </PropertyGroup>
+  )
+}

package/src/components/Details/ValidationDetails/ValidationDetailsProps.ts

@@ -0,0 +1,8 @@
+import { XyoPayloadWithPartialMeta } from '@xyo-network/payload'
+import { PropertyGroupProps } from '@xyo-network/react-property'
+
+export type PayloadValidationDetailsProps = PropertyGroupProps & {
+  skipBody?: boolean
+  value?: XyoPayloadWithPartialMeta
+  viewSchemaUrl?: string
+}

package/src/components/Details/ValidationDetails/index.ts

@@ -0,0 +1,2 @@
+export * from './ValidationDetails'
+export * from './ValidationDetailsProps'

package/src/components/Details/index.ts

@@ -0,0 +1,4 @@
+export * from './DataDetails'
+export * from './Details'
+export * from './JsonDetails'
+export * from './ValidationDetails'

package/src/components/index.ts

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

package/src/index.ts

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