@xyo-network/react-embed 2.28.10 → 2.28.11

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"}