@xyo-network/react-schema 2.26.36 → 2.26.39

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/3b6a925/packages/schema/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/413a933/packages/schema/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -19,10 +19,10 @@
     "@xylabs/react-shared": "^2.14.10",
     "@xyo-network/api": "^2.22.15",
     "@xyo-network/payload": "^2.22.15",
-    "@xyo-network/react-archive": "^2.26.36",
-    "@xyo-network/react-archivist-api": "^2.26.36",
-    "@xyo-network/react-property": "^2.26.36",
-    "@xyo-network/react-shared": "^2.26.36",
+    "@xyo-network/react-archive": "^2.26.39",
+    "@xyo-network/react-archivist-api": "^2.26.39",
+    "@xyo-network/react-property": "^2.26.39",
+    "@xyo-network/react-shared": "^2.26.39",
     "@xyo-network/utils": "^2.22.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -85,5 +85,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.36"
+  "version": "2.26.39"
 }

package/src/components/Property/SchemaProperty.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentStory, Meta } from '@storybook/react'
+
+import { appThemeDecorator } from '../../../../../.storybook'
+import { SchemaProperty } from './SchemaProperty'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  args: {},
+  component: SchemaProperty,
+  decorators: [appThemeDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Schema/SchemaProperty',
+}
+
+const Template: ComponentStory<typeof SchemaProperty> = (args) => <SchemaProperty {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithVerfiedValue = Template.bind({})
+WithVerfiedValue.args = { value: 'network.xyo.schema' }
+
+const WithVerfiedValuePaper = Template.bind({})
+WithVerfiedValuePaper.args = { paper: true, value: 'network.xyo.schema' }
+
+const WithUnverfiedValue = Template.bind({})
+WithUnverfiedValue.args = { value: 'network.xyo.blahblah' }
+
+export { Default, WithUnverfiedValue, WithVerfiedValue, WithVerfiedValuePaper }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Property/SchemaProperty.tsx

@@ -0,0 +1,64 @@
+import NewReleasesIcon from '@mui/icons-material/NewReleases'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import VerifiedIcon from '@mui/icons-material/Verified'
+import { IconButton } from '@mui/material'
+import { LinkEx } from '@xylabs/react-link'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { Property, PropertyProps, PropertyValue } from '@xyo-network/react-property'
+import { XyoSchemaCache, XyoSchemaCacheEntry } from '@xyo-network/utils'
+import { useState } from 'react'
+
+export type SchemaPropertyProps = PropertyProps & {
+  value?: string
+  viewSchemaUrl?: string
+}
+
+const useResolveSchema = (schema?: string) => {
+  const [entry, setEntry] = useState<XyoSchemaCacheEntry | null>()
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (schema) {
+        const entry = await XyoSchemaCache.instance.get(schema)
+        if (mounted()) {
+          setEntry(entry)
+        }
+      }
+    },
+    [schema]
+  )
+  return entry
+}
+
+export const SchemaProperty: React.FC<SchemaPropertyProps> = ({ titleProps, value, viewSchemaUrl = 'https://explore.xyo.network/', ...props }) => {
+  const resolvedSchema = useResolveSchema(value)
+  return (
+    <Property title="Schema" value={value} tip="Schema sent with the payload" titleProps={titleProps} {...props}>
+      {value ? (
+        resolvedSchema === null ? (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={`${viewSchemaUrl}${value}`}>
+            <NewReleasesIcon color="warning" fontSize="inherit" />
+          </IconButton>
+        ) : resolvedSchema === undefined ? (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={`${viewSchemaUrl}${value}`}>
+            <NewReleasesIcon color="disabled" fontSize="inherit" />
+          </IconButton>
+        ) : (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={resolvedSchema?.huri?.href ?? ''}>
+            <VerifiedIcon color="success" fontSize="inherit" />
+          </IconButton>
+        )
+      ) : null}
+      {value ? (
+        <LinkEx flexGrow={1} alignItems="center" href={`${viewSchemaUrl}${value}`} rel="noopener noreferrer" display="flex">
+          <PropertyValue value={value} title="view schema in new window" />
+        </LinkEx>
+      ) : null}
+      {value ? (
+        <LinkEx marginX={1} alignItems="center" href={`${viewSchemaUrl}${value}`} target="_blank" rel="noopener noreferrer" display="flex">
+          <OpenInNewIcon fontSize="inherit" />
+        </LinkEx>
+      ) : null}
+    </Property>
+  )
+}

package/src/components/Property/index.ts

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

package/src/components/SelectEx/SchemaSelectEx.stories.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { SelectExProps } from '@xylabs/react-common'
+
+import { authDecorator, WrappedArgs } from '../../../../../.storybook'
+import { ArchivistApiProvider } from '../../../../archivist-api/src'
+import { SchemaMemoryProvider } from '../../contexts'
+import { SchemaSelectEx } from './SchemaSelectEx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: SchemaSelectEx,
+  decorators: [authDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'schema/SchemaSelectEx',
+} as ComponentMeta<typeof SchemaSelectEx>
+
+const Template: ComponentStory<typeof SchemaSelectEx> = (args) => {
+  return <SchemaSelectEx {...args}></SchemaSelectEx>
+}
+
+const TemplateWithProvider: ComponentStory<typeof SchemaSelectEx> = (args) => {
+  const combinedArgs = args as WrappedArgs & SelectExProps<string>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { authState, ...props } = combinedArgs
+  return (
+    <SchemaMemoryProvider knownSchemaList={['network.xyo.schema', 'network.xyo.domain']}>
+      <SchemaSelectEx {...props}></SchemaSelectEx>
+    </SchemaMemoryProvider>
+  )
+}
+
+const TemplateWithApi: ComponentStory<typeof SchemaSelectEx> = (args) => {
+  const combinedArgs = args as WrappedArgs & SelectExProps<string>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { authState, ...props } = combinedArgs
+  return (
+    <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+      <SchemaMemoryProvider>
+        <SchemaSelectEx {...props}></SchemaSelectEx>
+      </SchemaMemoryProvider>
+    </ArchivistApiProvider>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithProvider = TemplateWithProvider.bind({})
+WithProvider.args = {}
+
+const WithApi = TemplateWithApi.bind({})
+WithApi.args = {}
+
+export { Default, WithApi, WithProvider }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SelectEx/SchemaSelectEx.tsx

@@ -0,0 +1,39 @@
+import { MenuItem, Typography } from '@mui/material'
+import { SelectEx, SelectExProps } from '@xylabs/react-common'
+
+import { useSchema } from '../../contexts'
+
+export type SchemaSelectExProps = SelectExProps<string>
+
+export const SchemaSelectEx: React.FC<SchemaSelectExProps> = ({ onChange, ...props }) => {
+  const { schema, setSchema, schemaList } = useSchema(false)
+
+  return (
+    <SelectEx
+      variant="outlined"
+      size="small"
+      value={schema ?? 'none'}
+      onChange={(event, child) => {
+        if (event.target.value !== schema) {
+          onChange?.(event, child)
+          setSchema?.(event.target.value)
+        }
+      }}
+      renderValue={(value) => {
+        return <Typography>{value === 'none' ? '- None -' : value}</Typography>
+      }}
+      {...props}
+    >
+      {schemaList?.map((schema, index) => {
+        return (
+          <MenuItem key={index} value={schema}>
+            {schema}
+          </MenuItem>
+        )
+      })}
+      <MenuItem key="none" value="none">
+        - None -
+      </MenuItem>
+    </SelectEx>
+  )
+}

package/src/components/SelectEx/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Property'
+export * from './SelectEx'

package/src/contexts/Schema/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { SchemaContextState } from './State'
+
+export const SchemaContext = createContextEx<SchemaContextState>()

package/src/contexts/Schema/Hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useSchemaDefinitions'
+export * from './useSchemaList'
+export * from './useSchemaStats'

package/src/contexts/Schema/Hooks/useSchemaDefinitions.tsx

@@ -0,0 +1,28 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoSchemaPayload } from '@xyo-network/payload'
+import { XyoSchemaCache } from '@xyo-network/utils'
+import { useState } from 'react'
+
+import { useSchemaList } from './useSchemaList'
+
+export const useSchemaDefinitions = (): XyoSchemaPayload[] | undefined => {
+  const [schemaList] = useSchemaList()
+  const [schemaPayloads, setSchemaPayloads] = useState<XyoSchemaPayload[]>()
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (schemaList) {
+        const promiseResults = await Promise.allSettled(schemaList?.map((schema) => XyoSchemaCache.instance.get(schema)))
+        if (mounted()) {
+          setSchemaPayloads(
+            promiseResults
+              .map((result) => (result.status === 'fulfilled' ? result.value?.payload : undefined))
+              .filter((item) => item !== undefined && item !== null) as XyoSchemaPayload[]
+          )
+        }
+      }
+    },
+    [schemaList]
+  )
+  return schemaPayloads
+}

package/src/contexts/Schema/Hooks/useSchemaList.tsx

@@ -0,0 +1,25 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { Dispatch, useState } from 'react'
+
+export const useSchemaList = (knownSchemaList?: string[]): [string[] | undefined, Dispatch<string[]>] => {
+  const { api } = useArchivistApi(false)
+  const { archive = 'temp' } = useArchive(false)
+  const [schemaList, setSchemaList] = useState<string[] | undefined>(knownSchemaList)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (api && archive) {
+        const list = await api?.archive(archive).payload.schema.get()
+        if (mounted()) {
+          setSchemaList(list)
+        }
+      }
+    },
+    [api, archive]
+  )
+
+  return [schemaList, setSchemaList]
+}

package/src/contexts/Schema/Hooks/useSchemaStats.tsx

@@ -0,0 +1,26 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoArchivistArchivePayloadSchemaStats } from '@xyo-network/api'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { useState } from 'react'
+
+export const useSchemaStats = (): XyoArchivistArchivePayloadSchemaStats | undefined => {
+  const { api } = useArchivistApi(false)
+  const { archive = 'temp' } = useArchive(false)
+  const [stats, setStats] = useState<XyoArchivistArchivePayloadSchemaStats>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (api && archive) {
+        const stats = await api?.archive(archive).payload.schema.stats.get()
+        if (mounted()) {
+          setStats(stats)
+        }
+      }
+    },
+    [api, archive]
+  )
+
+  return stats
+}

package/src/contexts/Schema/Provider/Memory.tsx

@@ -0,0 +1,13 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { SchemaContext } from '../Context'
+import { useSchemaList } from '../Hooks'
+import { SchemaProviderProps } from './Props'
+
+export const SchemaMemoryProvider: React.FC<WithChildren<SchemaProviderProps>> = ({ defaultSchema, knownSchemaList = [], ...props }) => {
+  const [schema, setSchema] = useState(defaultSchema)
+  const [schemaList, setSchemaList] = useSchemaList(knownSchemaList)
+
+  return <SchemaContext.Provider value={{ provided: true, schema, schemaList, setSchema, setSchemaList }} {...props} />
+}

package/src/contexts/Schema/Provider/Props.tsx

@@ -0,0 +1,4 @@
+export interface SchemaProviderProps {
+  defaultSchema?: string
+  knownSchemaList?: string[]
+}

package/src/contexts/Schema/Provider/Route.tsx

@@ -0,0 +1,62 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useCallback, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import { SchemaContext } from '../Context'
+import { useSchema } from '../use'
+import { SchemaMemoryProvider } from './Memory'
+import { SchemaProviderProps } from './Props'
+
+const SchemaRouteProviderInner: React.FC<WithChildren> = ({ children }) => {
+  const { schema, setSchema, schemaList } = useSchema()
+
+  const [params, setParams] = useSearchParams()
+
+  const routeSchema = params.get('schema')
+
+  //update the network stored in the route
+  const setSchemaParam = useCallback(
+    (schema?: string) => {
+      if (schema) {
+        params.set('schema', schema)
+        setParams(params, { replace: true })
+        setSchema?.(schema)
+      } else {
+        params.delete('network')
+      }
+    },
+    [params, setParams, setSchema]
+  )
+
+  //if the network is actively changed, update both memory and route
+  const setSchemaLocal = useCallback(
+    (schema: string) => {
+      setSchemaParam(schema)
+      setSchema?.(schema)
+    },
+    [setSchemaParam, setSchema]
+  )
+
+  //sync memory and route storage of network
+  useEffect(() => {
+    if (routeSchema !== schema) {
+      if (routeSchema === undefined && schema !== undefined) {
+        //if the route does not have a network selected, use what is in the memory context
+        setSchemaLocal(schema)
+      } else if (routeSchema) {
+        //if the route has a selection and it is different from memory, update memory
+        setSchema?.(routeSchema)
+      }
+    }
+  }, [routeSchema, schema, setSchemaParam, setSchema, setSchemaLocal])
+
+  return <SchemaContext.Provider value={{ provided: true, schema, schemaList, setSchema: setSchemaLocal }}>{children}</SchemaContext.Provider>
+}
+
+export const SchemaRouteProvider: React.FC<WithChildren<SchemaProviderProps>> = ({ knownSchemaList, defaultSchema, ...props }) => {
+  return (
+    <SchemaMemoryProvider knownSchemaList={knownSchemaList} defaultSchema={defaultSchema}>
+      <SchemaRouteProviderInner {...props} />
+    </SchemaMemoryProvider>
+  )
+}

package/src/contexts/Schema/Provider/index.ts

@@ -0,0 +1,3 @@
+export * from './Memory'
+export * from './Props'
+export * from './Route'

package/src/contexts/Schema/State.ts

@@ -0,0 +1,13 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch } from 'react'
+
+export interface SchemaContextState extends ContextExState {
+  /** @field The currently selected XYO Schema */
+  schema?: string
+  /** @field The list of known available schema */
+  schemaList?: string[]
+  /** @field Function to set the selected Schema */
+  setSchema?: Dispatch<string>
+  /** @field Function to set the list of known available schema */
+  setSchemaList?: Dispatch<string[]>
+}

package/src/contexts/Schema/index.ts

@@ -0,0 +1,5 @@
+export * from './Context'
+export * from './Hooks'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/Schema/use.ts

@@ -0,0 +1,8 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { SchemaContext } from './Context'
+import { SchemaContextState } from './State'
+
+export const useSchema = (required = false) => {
+  return useContextEx<SchemaContextState>(SchemaContext, 'Schema', required)
+}

package/src/contexts/index.ts

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

package/src/index.ts

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