plugin props context

package.json

@@ -82,6 +82,7 @@
     "@xylabs/tsconfig-dom": "~7.1.8",
     "@xylabs/tsconfig-react": "~7.1.8",
     "@xyo-network/hash": "~5.1.15",
+    "axios": "^1.13.2",
     "chromatic": "~13.3.2",
     "copyfiles": "~2.4.1",
     "dotenv": "~17.2.3",

packages/sdk/packages/embed/package.json

@@ -50,6 +50,7 @@
     "@xylabs/react-hooks": "~7.1.8",
     "@xylabs/react-select": "~7.1.8",
     "@xylabs/react-shared": "~7.1.8",
+    "@xylabs/typeof": "~5.0.18",
     "@xyo-network/huri": "~5.1.15",
     "@xyo-network/payload-model": "~5.1.15",
     "@xyo-network/react-payload-plugin": "workspace:^",

packages/sdk/packages/embed/src/components/embed-card/card/EmbedCardHeader.tsx

@@ -4,6 +4,7 @@ import {
   Avatar, CardHeader, Chip,
 } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
+import { isDefined } from '@xylabs/typeof'
 import React from 'react'
 
 import { useEmbedPluginState, useResolvePayload } from '../../../contexts/index.ts'
@@ -33,7 +34,7 @@ export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
       }
       action={(
         <FlexRow flexWrap="wrap" columnGap={0.5}>
-          {timestamp
+          {isDefined(timestamp) && !Number.isNaN(timestamp)
             ? hideTimestamp && hideRefreshButton
               ? ''
               : (

packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx

@@ -1,9 +1,12 @@
 import { CardContent } from '@mui/material'
 import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { isTruthy } from '@xylabs/typeof'
 import { useListMode } from '@xyo-network/react-shared'
 import React from 'react'
 
-import { useEmbedPluginState, useResolvePayload } from '../../../contexts/index.ts'
+import {
+  useEmbedPluginState, usePluginProps, useResolvePayload,
+} from '../../../contexts/index.ts'
 import { EmbedRenderSelect, ListModeSelectFormControl } from '../../controls/index.ts'
 import type { BusyCardProps } from './BusyCard.tsx'
 import { BusyCard } from './BusyCard.tsx'
@@ -15,7 +18,8 @@ export const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {
     activePlugin: ActivePlugin, plugins, hideElementsConfig,
   } = useEmbedPluginState()
   const { listMode } = useListMode()
-  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1
+  const { pluginProps } = usePluginProps()
+  const supportsListMode = isTruthy(ActivePlugin?.components?.box?.listModes?.length) ? true : false
 
   return (
     <BusyCard {...props}>
@@ -35,7 +39,7 @@ export const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {
         : null}
       <CardContent sx={{ height: '100%' }}>
         {ActivePlugin
-          ? <ActivePlugin.components.box.detailsBox payload={payload} {...(supportsListMode && { listMode })} />
+          ? <ActivePlugin.components.box.detailsBox payload={payload} {...pluginProps} {...(supportsListMode && { listMode })} />
           : null}
       </CardContent>
     </BusyCard>

packages/sdk/packages/embed/src/components/embed-card/error-handling/EmbedErrorCard.tsx

@@ -2,6 +2,7 @@ import type { AlertProps, CardProps } from '@mui/material'
 import {
   Alert, AlertTitle, Card, CardContent, Typography,
 } from '@mui/material'
+import { isDefined } from '@xylabs/typeof'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
 
@@ -34,7 +35,7 @@ const DefaultErrorAlert: React.FC<EmbedErrorCardBaseProps> = ({
   return (
     <Alert severity="error" {...alertProps}>
       <AlertTitle>Whoops! Something went wrong</AlertTitle>
-      {scope
+      {isDefined(scope)
         ? (
             <Typography variant="caption">
               Scope:

packages/sdk/packages/embed/src/components/embed-card/menu/JsonMenuItem.tsx

@@ -3,6 +3,7 @@ import type { MenuItemProps } from '@mui/material'
 import {
   ListItemIcon, ListItemText, MenuItem,
 } from '@mui/material'
+import { isDefined } from '@xylabs/typeof'
 import React from 'react'
 
 import { useResolvePayload } from '../../../contexts/index.ts'
@@ -12,7 +13,7 @@ export const JsonMenuItem: React.FC<MenuItemProps> = (props) => {
 
   return (
     <>
-      {huri
+      {isDefined(huri)
         ? (
             <MenuItem title="Source Payload JSON" onClick={() => window.open(huri, '_blank')} {...props}>
               <ListItemText sx={{ mr: 1 }}>JSON</ListItemText>

packages/sdk/packages/embed/src/contexts/PluginPropsContext/Provider.tsx

@@ -0,0 +1,32 @@
+import type { PropsWithChildren } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
+
+import { PluginPropsContext } from './context.ts'
+import type { PluginProps, PluginPropsState } from './state.ts'
+
+export interface PluginPropsProviderProps extends PropsWithChildren {
+  pluginProps: PluginProps
+}
+
+export const PluginPropsProvider: React.FC<PluginPropsProviderProps> = ({ children, pluginProps: pluginPropsProp }) => {
+  const [pluginProps, setPluginProps] = useState<PluginProps>(pluginPropsProp)
+
+  useEffect(() => {
+    // needs to be in useEffect since we are in a provider
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    setPluginProps(pluginPropsProp)
+  }, [pluginPropsProp])
+
+  const value: PluginPropsState = useMemo(() => ({
+    pluginProps,
+    provided: true,
+  }), [pluginProps])
+
+  return (
+    <PluginPropsContext value={value}>
+      {children}
+    </PluginPropsContext>
+  )
+}

packages/sdk/packages/embed/src/contexts/PluginPropsContext/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xylabs/react-shared'
+
+import type { PluginPropsState } from './state.ts'
+
+export const PluginPropsContext = createContextEx<PluginPropsState>()

packages/sdk/packages/embed/src/contexts/PluginPropsContext/index.ts

@@ -0,0 +1,4 @@
+export * from './context.ts'
+export * from './Provider.tsx'
+export * from './state.ts'
+export * from './use.ts'

packages/sdk/packages/embed/src/contexts/PluginPropsContext/state.ts

@@ -0,0 +1,9 @@
+import type { ContextExState } from '@xylabs/react-shared'
+
+export type PluginProps = React.PropsWithChildren
+
+export interface PluginPropsStateFields {
+  pluginProps: Record<string, unknown>
+}
+
+export type PluginPropsState = ContextExState<PluginPropsStateFields>

packages/sdk/packages/embed/src/contexts/PluginPropsContext/use.ts

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xylabs/react-shared'
+
+import { PluginPropsContext } from './context.ts'
+
+export const usePluginProps = (required = false) => useContextEx(PluginPropsContext, 'PluginProps', required)

packages/sdk/packages/embed/src/contexts/RefreshPayloadContext/Provider.tsx

@@ -11,12 +11,12 @@ export interface RefreshPayloadProps {
 export const RefreshPayloadProvider: React.FC<PropsWithChildren<RefreshPayloadProps>> = ({
   children, onRefresh, refreshPayload,
 }) => {
-  const [localRefreshPayload, setRefreshPayload] = useState(refreshPayload)
+  const [localRefreshPayload, setLocalRefreshPayload] = useState(refreshPayload)
 
   return (
     // eslint-disable-next-line @eslint-react/no-unstable-context-value
     <RefreshPayloadContext value={{
-      onRefresh, provided: true, refreshPayload: localRefreshPayload, setRefreshPayload,
+      onRefresh, provided: true, refreshPayload: localRefreshPayload, setRefreshPayload: setLocalRefreshPayload,
     }}
     >
       {children}

packages/sdk/packages/embed/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 import { delay } from '@xylabs/delay'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
+import { isDefined } from '@xylabs/typeof'
 import { Huri } from '@xyo-network/huri'
 import type {
   ModuleError, Payload, WithSources,
@@ -36,7 +37,7 @@ export const ResolvePayloadProvider: React.FC<PropsWithChildren<ResolvePayloadPr
 
   useAsyncEffect(
     async (mounted) => {
-      if (huri && !refreshPayload) {
+      if (isDefined(huri) && !refreshPayload) {
         try {
           const huriInstance = new Huri(huri)
           const result = await huriInstance.fetch()
@@ -61,7 +62,7 @@ export const ResolvePayloadProvider: React.FC<PropsWithChildren<ResolvePayloadPr
 
   const refreshHuri = () => {
     onRefresh?.()
-    if (huri) {
+    if (isDefined(huri)) {
       setRefreshPayload?.(false)
     }
   }

packages/sdk/packages/embed/src/contexts/index.ts

@@ -1,4 +1,5 @@
 export * from './EmbedPluginContext/index.ts'
+export * from './PluginPropsContext/index.ts'
 export * from './RefreshPayloadContext/index.ts'
 export * from './ResolvePayloadContext/index.ts'
 export * from './ValidatePayloadContext/index.ts'

yarn.lock

@@ -4361,6 +4361,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xylabs/typeof@npm:~5.0.18":
+  version: 5.0.18
+  resolution: "@xylabs/typeof@npm:5.0.18"
+  checksum: 10/1b873a04ae3e1f072a5f9120ad6264a297f24fdfc652105c3f06be2ece5319d77bf2030434cc4e09465fc244a52af9b96a60c0ab6b5b04e11bd38e163c9f53c2
+  languageName: node
+  linkType: hard
+
 "@xyo-network/abstract-witness@npm:~5.1.15, @xyo-network/abstract-witness@npm:~5.1.2":
   version: 5.1.15
   resolution: "@xyo-network/abstract-witness@npm:5.1.15"
@@ -6748,6 +6755,7 @@ __metadata:
     "@xylabs/tsconfig": "npm:~7.1.8"
     "@xylabs/tsconfig-dom": "npm:~7.1.8"
     "@xylabs/tsconfig-react": "npm:~7.1.8"
+    "@xylabs/typeof": "npm:~5.0.18"
     "@xyo-network/huri": "npm:~5.1.15"
     "@xyo-network/payload-model": "npm:~5.1.15"
     "@xyo-network/react-aggregate-price-plugin": "workspace:^"
@@ -9095,6 +9103,7 @@ __metadata:
     "@xyo-network/react-modules": "workspace:^"
     "@xyo-network/react-plugins": "workspace:^"
     "@xyo-network/react-sdk": "workspace:^"
+    axios: "npm:^1.13.2"
     chromatic: "npm:~13.3.2"
     copyfiles: "npm:~2.4.1"
     dotenv: "npm:~17.2.3"
@@ -9798,6 +9807,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.13.2":
+  version: 1.13.2
+  resolution: "axios@npm:1.13.2"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
+    form-data: "npm:^4.0.4"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10/ae4e06dcd18289f2fd18179256d550d27f9a53ecb2f9c59f2ccc4efd1d7151839ba8c3e0fb533dac793e4a59a576ca8689a19244dce5c396680837674a47a867
+  languageName: node
+  linkType: hard
+
 "babel-plugin-macros@npm:^3.1.0":
   version: 3.1.0
   resolution: "babel-plugin-macros@npm:3.1.0"