@xyo-network/react-embed 2.28.8 → 2.28.11

package/src/components/controls/{ControlWrap.tsx → EmbedFormControl.tsx}

@@ -1,12 +1,12 @@
 import { FormControl, FormControlProps, InputLabel } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
 
-interface EmbedControlWrapProps extends FormControlProps {
+interface EmbedFormControlProps extends FormControlProps {
   formId?: string
   formLabel?: string
 }
 
-export const EmbedControlWrap: React.FC<WithChildren<EmbedControlWrapProps>> = ({ formId, formLabel, children, ...props }) => {
+export const EmbedFormControl: React.FC<WithChildren<EmbedFormControlProps>> = ({ formId, formLabel, children, ...props }) => {
   return (
     <FormControl {...props}>
       <InputLabel id={formId}>{formLabel}</InputLabel>

package/src/components/controls/ListModeSelect.tsx

@@ -1,7 +1,7 @@
 import { MenuItem, Select, SelectProps } from '@mui/material'
 import { ListMode, useListMode } from '@xyo-network/react-shared'
 
-import { EmbedControlWrap } from './ControlWrap'
+import { EmbedFormControl } from './EmbedFormControl'
 
 const listModeSelectId = 'listmode-select-id'
 const listModeSelectLabel = 'List Mode'
@@ -32,8 +32,8 @@ export const ListModeSelect: React.FC<SelectProps<ListMode>> = (props) => {
 
 export const ListModeSelectFormControl: React.FC<SelectProps<ListMode>> = (props) => {
   return (
-    <EmbedControlWrap formId={listModeSelectId} formLabel={listModeSelectLabel}>
+    <EmbedFormControl formId={listModeSelectId} formLabel={listModeSelectLabel}>
       <ListModeSelect size="small" label={listModeSelectLabel} labelId={listModeSelectId} {...props} />
-    </EmbedControlWrap>
+    </EmbedFormControl>
   )
 }

package/src/components/controls/RenderSelect.tsx

@@ -1,15 +1,15 @@
-import { MenuItem, Select } from '@mui/material'
+import { MenuItem, Select, SelectProps } from '@mui/material'
 
 import { useXyoEmbedPluginState } from '../../contexts'
-import { EmbedControlWrap } from './ControlWrap'
+import { EmbedFormControl } from './EmbedFormControl'
 
 const renderSelectId = 'render-select-id'
 const renderSelectLabel = 'Renderer'
 
-export const EmbedRenderSelect: React.FC = (props) => {
+export const EmbedRenderSelect: React.FC<SelectProps> = (props) => {
   const { activePlugin, setActivePlugin, plugins } = useXyoEmbedPluginState()
   return (
-    <EmbedControlWrap formId={renderSelectId} formLabel={renderSelectLabel}>
+    <EmbedFormControl formId={renderSelectId} formLabel={renderSelectLabel}>
       <Select size="small" value={activePlugin?.name} {...props}>
         {plugins?.map((plugin) => (
           <MenuItem value={plugin.name} key={plugin.name} onClick={() => setActivePlugin?.(plugin)}>
@@ -17,6 +17,6 @@ export const EmbedRenderSelect: React.FC = (props) => {
           </MenuItem>
         ))}
       </Select>
-    </EmbedControlWrap>
+    </EmbedFormControl>
   )
 }

package/src/components/controls/index.ts

@@ -1,3 +1,3 @@
-export * from './ControlWrap'
+export * from './EmbedFormControl'
 export * from './ListModeSelect'
 export * from './RenderSelect'

package/src/components/embed-card/EmbedCardHeader.tsx

@@ -22,7 +22,7 @@ export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
         )
       }
       action={
-        <FlexRow>
+        <FlexRow flexWrap="wrap" columnGap={0.5}>
           {payload?.timestamp ? (
             hideTimestamp && hideRefreshButton ? (
               ''

package/src/components/embed-card/EmbedCardResolver.tsx

@@ -1,27 +1,28 @@
 import { useTheme } from '@mui/material'
 import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
 import { WithChildren } from '@xylabs/react-shared'
-import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
 import { ResultLoader } from '@xyo-network/react-webapp'
 
 import { useRefreshPayload, useResolvePayload } from '../../contexts'
+import { EmbedCardApiErrorRenderer } from './error-handling'
 
-export const EmbedCardResolver: React.FC<WithChildren<FlexBoxProps>> = ({ children, ...props }) => {
+export const EmbedCardResolverFlexBox: React.FC<WithChildren<FlexBoxProps>> = ({ children, ...props }) => {
   const { payload, notFound, huriApiError } = useResolvePayload()
   const { refreshPayload } = useRefreshPayload()
   const theme = useTheme()
 
   return (
     <ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
-      <XyoApiErrorRender apiError={huriApiError}>
+      <EmbedCardApiErrorRenderer apiError={huriApiError}>
         <FlexGrowCol
+          alignItems="stretch"
           busy={Boolean(!refreshPayload && payload)}
           busyCircularProps={{ style: { alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2 } }}
           {...props}
         >
           {children}
         </FlexGrowCol>
-      </XyoApiErrorRender>
+      </EmbedCardApiErrorRenderer>
     </ResultLoader>
   )
 }

package/src/components/embed-card/EmbedPluginCard.tsx

@@ -6,19 +6,22 @@ import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
 import { EmbedRenderSelect, ListModeSelectFormControl } from '../controls'
 import { EmbedCardHeader } from './EmbedCardHeader'
 
-export const EmbedPluginCard: React.FC<CardProps> = (props) => {
+export const EmbedPluginCard: React.FC<CardProps> = ({ ...props }) => {
   const { payload } = useResolvePayload()
   const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useXyoEmbedPluginState()
   const { listMode } = useListMode()
+  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1
 
   return (
     <Card elevation={3} variant="elevation" {...props}>
       {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}
       <FlexGrowRow columnGap={2} rowGap={2} flexWrap="wrap" justifyContent="center" pb={1}>
         {plugins && plugins.length > 1 ? <EmbedRenderSelect /> : null}
-        {(ActivePlugin?.components?.box?.listModes?.length ?? 0) > 1 ? <ListModeSelectFormControl /> : null}
+        {supportsListMode ? <ListModeSelectFormControl /> : null}
       </FlexGrowRow>
-      <CardContent>{ActivePlugin ? <ActivePlugin.components.box.details payload={payload} listMode={listMode} /> : null}</CardContent>
+      <CardContent>
+        {ActivePlugin ? <ActivePlugin.components.box.details payload={payload} {...(supportsListMode && { listMode })} /> : null}
+      </CardContent>
     </Card>
   )
 }

package/src/components/embed-card/ValidatePayload.tsx

@@ -1,15 +1,15 @@
-import { Alert, AlertProps, AlertTitle } from '@mui/material'
+import { Alert, AlertProps } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
 
 import { useValidatePayload } from '../../contexts'
 
-export const ValidatePayload: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
+export const ValidatePayloadAlert: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
   const { validPayload, enabled, schema } = useValidatePayload()
 
   if (enabled && validPayload === false) {
     return (
-      <Alert severity="error" {...props}>
-        <AlertTitle>Invalid Payload!</AlertTitle>Payload schema claimed to be {schema} but failed to validate.
+      <Alert severity="error" title="Invalid Payload!" {...props}>
+        Payload schema claimed to be {schema} but failed to validate.
       </Alert>
     )
   }

package/src/components/embed-card/ValidatePlugins.tsx

@@ -1,15 +1,15 @@
-import { Alert, AlertTitle } from '@mui/material'
+import { Alert, AlertProps, AlertTitle } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
 
 import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
 
-export const ValidatePlugins: React.FC<WithChildren> = ({ children }) => {
+export const ValidatePluginsAlert: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
   const { payload } = useResolvePayload()
   const { plugins } = useXyoEmbedPluginState()
 
   if (payload && plugins?.length === 0) {
     return (
-      <Alert severity="warning">
+      <Alert severity="warning" {...props}>
         <AlertTitle>Missing plugins!</AlertTitle>Payload found but no plugins were present.
       </Alert>
     )

package/src/components/embed-card/error-handling/EmbedCardApiErrorRenderer.tsx

@@ -0,0 +1,27 @@
+import { CardProps } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
+import { ApiErrorAlert } from '@xyo-network/react-shared'
+
+import { EmbedErrorCard } from './EmbedErrorCard'
+
+interface EmbedCardApiErrorRendererProps extends CardProps {
+  apiError?: XyoApiError
+}
+
+export const EmbedCardApiErrorRenderer: React.FC<WithChildren<EmbedCardApiErrorRendererProps>> = ({ apiError, children, ...props }) => {
+  return (
+    <XyoApiErrorRender apiError={apiError} noReAuth noErrorDisplay customError={<CustomApiErrorCard apiError={apiError} {...props} />}>
+      {children}
+    </XyoApiErrorRender>
+  )
+}
+
+const CustomApiErrorCard: React.FC<EmbedCardApiErrorRendererProps> = ({ apiError, ...props }) => {
+  return (
+    <EmbedErrorCard {...props}>
+      <ApiErrorAlert call={apiError} />
+    </EmbedErrorCard>
+  )
+}

package/src/components/embed-card/error-handling/EmbedErrorCard.tsx

@@ -0,0 +1,41 @@
+import { Alert, AlertProps, AlertTitle, Card, CardContent, CardProps, Typography } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+
+interface EmbedErrorCardBaseProps {
+  alertProps?: AlertProps
+  error?: Error
+  hideErrorDetails?: boolean
+}
+
+interface EmbedErrorCardProps extends EmbedErrorCardBaseProps, CardProps {
+  alertProps?: AlertProps
+  error?: Error
+}
+
+export const EmbedErrorCard: React.FC<WithChildren<EmbedErrorCardProps>> = (props) => {
+  const { alertProps, error, hideErrorDetails = true, children, ...cardProps } = props
+  const errorProps = { alertProps, error, hideErrorDetails }
+  return (
+    <Card {...cardProps}>
+      <CardContent>{children ?? <DefaultErrorAlert {...errorProps} />}</CardContent>
+    </Card>
+  )
+}
+
+const DefaultErrorAlert: React.FC<EmbedErrorCardBaseProps> = ({ alertProps, hideErrorDetails, error }) => {
+  return (
+    <Alert severity="error" {...alertProps}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      {!hideErrorDetails && error ? (
+        <>
+          <Typography variant="caption">Error: </Typography>
+          <Typography variant="caption">{error?.message}</Typography>
+        </>
+      ) : (
+        <Typography variant="caption" fontSize="small">
+          Error Loading Plugin
+        </Typography>
+      )}
+    </Alert>
+  )
+}

package/src/components/embed-card/error-handling/index.ts

@@ -0,0 +1,2 @@
+export * from './EmbedCardApiErrorRenderer'
+export * from './EmbedErrorCard'

package/src/components/embed-card/index.ts

@@ -1,4 +1,5 @@
 export * from './EmbedCardResolver'
 export * from './EmbedPluginCard'
+export * from './error-handling'
 export * from './ValidatePayload'
 export * from './ValidatePlugins'

package/src/components/embed-plugin-stories/XyoEmbedPlugin.examples.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/react'
+import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plugin'
+import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-payload-plugin'
+
+import { Template, xyoEmbedStoryBase } from './shared.stories'
+
+const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
+const UniswapPairPointer = 'https://beta.api.archivist.xyo.network/e36602006239d86b6e08412f7879372b2c622d74f4d6bc508a08a46fa8ad6523'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  ...xyoEmbedStoryBase,
+  title: 'embed/XyoEmbedPlugin/examples',
+} as Meta
+
+const AggregatePriceExample = Template.bind({})
+AggregatePriceExample.args = {
+  huriPayload: AggregatePricePointer,
+  plugins: [CryptoAssetRenderPlugin],
+}
+
+const UniswapPairsExample = Template.bind({})
+UniswapPairsExample.args = {
+  huriPayload: UniswapPairPointer,
+  plugins: [UniswapPairsRenderPlugin],
+}
+
+export { AggregatePriceExample, UniswapPairsExample }

package/src/components/{XyoEmbedPlugin.stories.tsx → embed-plugin-stories/XyoEmbedPlugin.states.stories.tsx}

@@ -1,35 +1,19 @@
-import { ComponentStory, Meta } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plugin'
 import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-payload-plugin'
 import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { BrowserRouter } from 'react-router-dom'
 
 import { payloadData } from './payload.stories'
-import { XyoEmbedPlugin } from './XyoEmbedPlugin'
+import { Template, xyoEmbedStoryBase } from './shared.stories'
 
 const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
-const UniswapPairPointer = 'https://beta.api.archivist.xyo.network/e36602006239d86b6e08412f7879372b2c622d74f4d6bc508a08a46fa8ad6523'
 
 // eslint-disable-next-line import/no-default-export
 export default {
-  argTypes: {},
-  component: XyoEmbedPlugin,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'embed/XyoEmbedPlugin',
+  ...xyoEmbedStoryBase,
+  title: 'embed/XyoEmbedPlugin/states',
 } as Meta
 
-const Template: ComponentStory<typeof XyoEmbedPlugin> = (args) => {
-  return (
-    <BrowserRouter>
-      <XyoEmbedPlugin {...args} />
-    </BrowserRouter>
-  )
-}
-
 const testPlugin = createPayloadRenderPlugin({
   canRender: () => true,
   name: 'Test Plugin',
@@ -40,28 +24,34 @@ const testPlugin1 = createPayloadRenderPlugin({
   name: 'Test1 Plugin',
 })
 
+const failingPlugin = createPayloadRenderPlugin({
+  canRender: () => true,
+  components: {
+    box: {
+      details: () => {
+        throw Error('testing Error Boundary')
+      },
+    },
+  },
+  name: 'Failing Plugin',
+})
+
 const Default = Template.bind({})
 Default.args = {
   huri: AggregatePricePointer,
   plugins: [testPlugin, testPlugin1],
 }
 
-const AggregatePriceExample = Template.bind({})
-AggregatePriceExample.args = {
-  huriPayload: AggregatePricePointer,
-  plugins: [CryptoAssetRenderPlugin],
-}
-
-const UniswapPairsExample = Template.bind({})
-UniswapPairsExample.args = {
-  huriPayload: UniswapPairPointer,
+const ApiError = Template.bind({})
+ApiError.args = {
+  huriPayload: 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c',
   plugins: [UniswapPairsRenderPlugin],
 }
 
-const Error = Template.bind({})
-Error.args = {
-  huriPayload: 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c',
-  plugins: [UniswapPairsRenderPlugin],
+const ThrownError = Template.bind({})
+ThrownError.args = {
+  huriPayload: AggregatePricePointer,
+  plugins: [failingPlugin],
 }
 
 const HiddenElements = Template.bind({})
@@ -98,4 +88,4 @@ WithOnRefresh.args = {
   plugins: [CryptoAssetRenderPlugin],
 }
 
-export { AggregatePriceExample, Default, Error, HiddenElements, UniswapPairsExample, WithOnRefresh, WithPassedPayload, WithSetBusyExternally }
+export { ApiError, Default, HiddenElements, ThrownError, WithOnRefresh, WithPassedPayload, WithSetBusyExternally }

package/src/components/embed-plugin-stories/shared.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { XyoEmbedPlugin } from '../XyoEmbedPlugin'
+
+export const xyoEmbedStoryBase: Meta = {
+  argTypes: {},
+  component: XyoEmbedPlugin,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+}
+
+export const Template: ComponentStory<typeof XyoEmbedPlugin> = (args) => {
+  return (
+    <BrowserRouter>
+      <XyoEmbedPlugin {...args} />
+    </BrowserRouter>
+  )
+}

package/src/contexts/XyoEmbedPluginContext/State.ts

@@ -9,6 +9,7 @@ export interface EmbedPluginVisibilityConfig {
   hideTimestamp?: boolean
   hideCardActions?: boolean
   hideCardHeader?: boolean
+  hideErrorDetails?: boolean
 }
 
 /**

package/dist/cjs/components/controls/ControlWrap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlWrap.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/ControlWrap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAc,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAO1E,CAAA"}

package/dist/cjs/components/controls/ControlWrap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlWrap.js","sourceRoot":"","sources":["../../../../src/components/controls/ControlWrap.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAyE;AAQlE,MAAM,gBAAgB,GAAkD,CAAC,EAAyC,EAAE,EAAE;QAA7C,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAAvC,mCAAyC,CAAF;IACrH,OAAO,CACL,wBAAC,sBAAW,oBAAK,KAAK,eACpB,uBAAC,qBAAU,kBAAC,EAAE,EAAE,MAAM,gBAAG,SAAS,IAAc,EAC/C,QAAQ,KACG,CACf,CAAA;AACH,CAAC,CAAA;AAPY,QAAA,gBAAgB,oBAO5B"}

package/dist/esm/components/controls/ControlWrap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlWrap.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/ControlWrap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAc,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAO1E,CAAA"}

package/dist/esm/components/controls/ControlWrap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlWrap.js","sourceRoot":"","sources":["../../../../src/components/controls/ControlWrap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAA;AAQzE,MAAM,CAAC,MAAM,gBAAgB,GAAkD,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3H,OAAO,CACL,MAAC,WAAW,OAAK,KAAK,aACpB,KAAC,UAAU,IAAC,EAAE,EAAE,MAAM,YAAG,SAAS,GAAc,EAC/C,QAAQ,IACG,CACf,CAAA;AACH,CAAC,CAAA"}