Merge pull request #746 from XYOracleNetwork/feature/plugin-props-context

plugin props context

Author: jonesmac

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>