From c6a8d5864458bad0f9d22c61319dfa62ae38a64a Mon Sep 17 00:00:00 2001 From: Matt Jones <885417+jonesmac@users.noreply.github.com> Date: Thu, 6 Nov 2025 11:46:42 -0500 Subject: [PATCH 1/4] WIP - PluginPropsContext --- .../contexts/PluginPropsContext/Provider.tsx | 32 +++++++++++++++++++ .../contexts/PluginPropsContext/context.ts | 5 +++ .../src/contexts/PluginPropsContext/index.ts | 4 +++ .../src/contexts/PluginPropsContext/state.ts | 9 ++++++ .../src/contexts/PluginPropsContext/use.ts | 5 +++ .../sdk/packages/embed/src/contexts/index.ts | 1 + 6 files changed, 56 insertions(+) create mode 100644 packages/sdk/packages/embed/src/contexts/PluginPropsContext/Provider.tsx create mode 100644 packages/sdk/packages/embed/src/contexts/PluginPropsContext/context.ts create mode 100644 packages/sdk/packages/embed/src/contexts/PluginPropsContext/index.ts create mode 100644 packages/sdk/packages/embed/src/contexts/PluginPropsContext/state.ts create mode 100644 packages/sdk/packages/embed/src/contexts/PluginPropsContext/use.ts diff --git a/packages/sdk/packages/embed/src/contexts/PluginPropsContext/Provider.tsx b/packages/sdk/packages/embed/src/contexts/PluginPropsContext/Provider.tsx new file mode 100644 index 0000000000..5741c5d959 --- /dev/null +++ b/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 = ({ children, pluginProps: pluginPropsProp }) => { + const [pluginProps, setPluginProps] = useState(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 ( + + {children} + + ) +} diff --git a/packages/sdk/packages/embed/src/contexts/PluginPropsContext/context.ts b/packages/sdk/packages/embed/src/contexts/PluginPropsContext/context.ts new file mode 100644 index 0000000000..79c02f423a --- /dev/null +++ b/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() diff --git a/packages/sdk/packages/embed/src/contexts/PluginPropsContext/index.ts b/packages/sdk/packages/embed/src/contexts/PluginPropsContext/index.ts new file mode 100644 index 0000000000..3e6fd6ae41 --- /dev/null +++ b/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' diff --git a/packages/sdk/packages/embed/src/contexts/PluginPropsContext/state.ts b/packages/sdk/packages/embed/src/contexts/PluginPropsContext/state.ts new file mode 100644 index 0000000000..d6f874633d --- /dev/null +++ b/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 +} + +export type PluginPropsState = ContextExState diff --git a/packages/sdk/packages/embed/src/contexts/PluginPropsContext/use.ts b/packages/sdk/packages/embed/src/contexts/PluginPropsContext/use.ts new file mode 100644 index 0000000000..af7fbfe076 --- /dev/null +++ b/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) diff --git a/packages/sdk/packages/embed/src/contexts/index.ts b/packages/sdk/packages/embed/src/contexts/index.ts index 86e959c5b8..b921ecacd3 100644 --- a/packages/sdk/packages/embed/src/contexts/index.ts +++ b/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' From 27062edfacacb00e6d002679442d3ae3b09d9b3a Mon Sep 17 00:00:00 2001 From: Matt Jones <885417+jonesmac@users.noreply.github.com> Date: Thu, 6 Nov 2025 11:49:29 -0500 Subject: [PATCH 2/4] pass pluginProps directly to Plugin Component --- .../src/components/embed-card/card/EmbedPluginCard.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx b/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx index 289d2241d4..5dec18465c 100644 --- a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx +++ b/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx @@ -3,7 +3,9 @@ import { FlexGrowRow } from '@xylabs/react-flexbox' 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,6 +17,7 @@ export const EmbedPluginCard: React.FC = ({ ...props }) => { activePlugin: ActivePlugin, plugins, hideElementsConfig, } = useEmbedPluginState() const { listMode } = useListMode() + const { pluginProps } = usePluginProps() const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1 return ( @@ -35,7 +38,7 @@ export const EmbedPluginCard: React.FC = ({ ...props }) => { : null} {ActivePlugin - ? + ? : null} From eb401cb6fa373b15bb27408a9a8d83fdc269fcce Mon Sep 17 00:00:00 2001 From: Matt Jones <885417+jonesmac@users.noreply.github.com> Date: Thu, 6 Nov 2025 12:02:44 -0500 Subject: [PATCH 3/4] add missing axios dep --- package.json | 1 + yarn.lock | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/package.json b/package.json index 387b2902ee..84ca4256a5 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f7250ca4bd..c5dffefa84 100644 --- a/yarn.lock +++ b/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" From 95b8029832b50acce59161393dab1d947fe552cf Mon Sep 17 00:00:00 2001 From: Matt Jones <885417+jonesmac@users.noreply.github.com> Date: Thu, 6 Nov 2025 12:03:10 -0500 Subject: [PATCH 4/4] fix all lint issues in embed package --- packages/sdk/packages/embed/package.json | 1 + .../embed/src/components/embed-card/card/EmbedCardHeader.tsx | 3 ++- .../embed/src/components/embed-card/card/EmbedPluginCard.tsx | 3 ++- .../components/embed-card/error-handling/EmbedErrorCard.tsx | 3 ++- .../embed/src/components/embed-card/menu/JsonMenuItem.tsx | 3 ++- .../embed/src/contexts/RefreshPayloadContext/Provider.tsx | 4 ++-- .../embed/src/contexts/ResolvePayloadContext/Provider.tsx | 5 +++-- 7 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/sdk/packages/embed/package.json b/packages/sdk/packages/embed/package.json index a12fcb3b39..32b710cbd0 100644 --- a/packages/sdk/packages/embed/package.json +++ b/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:^", diff --git a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedCardHeader.tsx b/packages/sdk/packages/embed/src/components/embed-card/card/EmbedCardHeader.tsx index 1b8c4f7649..9dcb0e1351 100644 --- a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedCardHeader.tsx +++ b/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 = () => { } action={( - {timestamp + {isDefined(timestamp) && !Number.isNaN(timestamp) ? hideTimestamp && hideRefreshButton ? '' : ( diff --git a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx b/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx index 5dec18465c..f67d04eadc 100644 --- a/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx +++ b/packages/sdk/packages/embed/src/components/embed-card/card/EmbedPluginCard.tsx @@ -1,5 +1,6 @@ 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' @@ -18,7 +19,7 @@ export const EmbedPluginCard: React.FC = ({ ...props }) => { } = useEmbedPluginState() const { listMode } = useListMode() const { pluginProps } = usePluginProps() - const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1 + const supportsListMode = isTruthy(ActivePlugin?.components?.box?.listModes?.length) ? true : false return ( diff --git a/packages/sdk/packages/embed/src/components/embed-card/error-handling/EmbedErrorCard.tsx b/packages/sdk/packages/embed/src/components/embed-card/error-handling/EmbedErrorCard.tsx index 195c95e7fc..378b45a70e 100644 --- a/packages/sdk/packages/embed/src/components/embed-card/error-handling/EmbedErrorCard.tsx +++ b/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 = ({ return ( Whoops! Something went wrong - {scope + {isDefined(scope) ? ( Scope: diff --git a/packages/sdk/packages/embed/src/components/embed-card/menu/JsonMenuItem.tsx b/packages/sdk/packages/embed/src/components/embed-card/menu/JsonMenuItem.tsx index ffacaa6877..1e6e4df733 100644 --- a/packages/sdk/packages/embed/src/components/embed-card/menu/JsonMenuItem.tsx +++ b/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 = (props) => { return ( <> - {huri + {isDefined(huri) ? ( window.open(huri, '_blank')} {...props}> JSON diff --git a/packages/sdk/packages/embed/src/contexts/RefreshPayloadContext/Provider.tsx b/packages/sdk/packages/embed/src/contexts/RefreshPayloadContext/Provider.tsx index 5058dd4aeb..a2da444bde 100644 --- a/packages/sdk/packages/embed/src/contexts/RefreshPayloadContext/Provider.tsx +++ b/packages/sdk/packages/embed/src/contexts/RefreshPayloadContext/Provider.tsx @@ -11,12 +11,12 @@ export interface RefreshPayloadProps { export const RefreshPayloadProvider: React.FC> = ({ children, onRefresh, refreshPayload, }) => { - const [localRefreshPayload, setRefreshPayload] = useState(refreshPayload) + const [localRefreshPayload, setLocalRefreshPayload] = useState(refreshPayload) return ( // eslint-disable-next-line @eslint-react/no-unstable-context-value {children} diff --git a/packages/sdk/packages/embed/src/contexts/ResolvePayloadContext/Provider.tsx b/packages/sdk/packages/embed/src/contexts/ResolvePayloadContext/Provider.tsx index 65cb2ed151..5f0f16c6b5 100644 --- a/packages/sdk/packages/embed/src/contexts/ResolvePayloadContext/Provider.tsx +++ b/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 { - 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 { onRefresh?.() - if (huri) { + if (isDefined(huri)) { setRefreshPayload?.(false) } }