@xyo-network/react-embed 3.0.2 → 3.0.3

package/src/components/EmbedPlugin.tsx

@@ -3,7 +3,9 @@ import type { WithChildren } from '@xylabs/react-shared'
 import { ErrorBoundary, ListModeProvider } from '@xyo-network/react-shared'
 import React from 'react'
 
-import { EmbedPluginProvider, RefreshPayloadProvider, ResolvePayloadProvider, ValidatePayloadProvider } from '../contexts/index.ts'
+import {
+  EmbedPluginProvider, RefreshPayloadProvider, ResolvePayloadProvider, ValidatePayloadProvider,
+} from '../contexts/index.ts'
 import type { EmbedPluginProps } from '../types/index.ts'
 import { EmbedResolver } from './EmbedResolver.tsx'
 import { ValidatePayloadAlert, ValidatePluginsAlert } from './validation-alerts/index.ts'
@@ -40,7 +42,9 @@ export const EmbedPluginInner: React.FC<WithChildren<EmbedPluginProps>> = ({
 
 interface WithResolversProps extends Pick<EmbedPluginProps, 'onRefresh' | 'huriPayload'>, FlexBoxProps {}
 
-const WithResolvers: React.FC<WithChildren<WithResolversProps>> = ({ children, onRefresh, huriPayload }) => {
+const WithResolvers: React.FC<WithChildren<WithResolversProps>> = ({
+  children, onRefresh, huriPayload,
+}) => {
   return (
     <RefreshPayloadProvider onRefresh={onRefresh}>
       <ResolvePayloadProvider huriPayload={huriPayload}>

package/src/components/EmbedResolver.tsx

@@ -5,7 +5,9 @@ import React from 'react'
 import { useResolvePayload } from '../contexts/index.ts'
 
 export const EmbedResolver: React.FC<WithChildren> = ({ children }) => {
-  const { payload, notFound, huriError } = useResolvePayload()
+  const {
+    payload, notFound, huriError,
+  } = useResolvePayload()
 
   return (
     <LoadResult searchResult={payload} notFound={!!notFound} error={!!huriError}>

package/src/components/controls/EmbedFormControl.tsx

@@ -8,7 +8,9 @@ interface EmbedFormControlProps extends FormControlProps {
   formLabel?: string
 }
 
-export const EmbedFormControl: React.FC<WithChildren<EmbedFormControlProps>> = ({ 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/RenderSelect.tsx

@@ -10,7 +10,9 @@ const renderSelectId = 'render-select-id'
 const renderSelectLabel = 'Renderer'
 
 export const EmbedRenderSelect: React.FC<SelectExProps<string>> = (props) => {
-  const { activePlugin, setActivePlugin, plugins } = useEmbedPluginState()
+  const {
+    activePlugin, setActivePlugin, plugins,
+  } = useEmbedPluginState()
   return (
     <EmbedFormControl formId={renderSelectId} formLabel={renderSelectLabel}>
       <SelectEx size="small" value={activePlugin?.name} {...props}>

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

@@ -9,7 +9,9 @@ import { useRefreshPayload, useResolvePayload } from '../../contexts/index.ts'
 import { EmbedCardApiErrorRenderer } from './error-handling/index.ts'
 
 export const EmbedCardResolverFlexBox: React.FC<WithChildren<FlexBoxProps>> = ({ children, ...props }) => {
-  const { payload, notFound, huriError } = useResolvePayload()
+  const {
+    payload, notFound, huriError,
+  } = useResolvePayload()
   const { refreshPayload } = useRefreshPayload()
   const theme = useTheme()
 
@@ -21,7 +23,11 @@ export const EmbedCardResolverFlexBox: React.FC<WithChildren<FlexBoxProps>> = ({
           alignItems="stretch"
           justifyContent="start"
           busy={Boolean(!refreshPayload && payload)}
-          busyCircularProps={{ style: { alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2 } }}
+          busyCircularProps={{
+            style: {
+              alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2,
+            },
+          }}
           {...props}
         >
           {children}

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

@@ -54,7 +54,11 @@ export const EmbedPluginCardInner: React.FC<BusyCardProps> = (props) => {
         elevation={3}
         variant="elevation"
         busy={Boolean(!refreshPayload && payload)}
-        busyVariantProps={{ style: { alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2 } }}
+        busyVariantProps={{
+          style: {
+            alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2,
+          },
+        }}
         sx={{ position: 'relative' }}
         {...props}
       />

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

@@ -5,7 +5,8 @@ import type {
   BusyCircularProgressProps,
   BusyLinearProgressProps,
   BusyVariant,
-  WithChildren } from '@xylabs/react-shared'
+  WithChildren,
+} from '@xylabs/react-shared'
 import {
   BusyCircularProgress,
   BusyLinearProgress,

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

@@ -1,6 +1,8 @@
 import { Refresh as RefreshIcon } from '@mui/icons-material'
 import type { CardHeaderProps, Theme } from '@mui/material'
-import { Avatar, CardHeader, Chip } from '@mui/material'
+import {
+  Avatar, CardHeader, Chip,
+} from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
@@ -9,8 +11,12 @@ import { EmbedMenu } from '../menu/index.ts'
 
 export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
   const { refreshHuri, huri } = useResolvePayload()
-  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState()
-  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}
+  const {
+    activePlugin, timestampLabel, hideElementsConfig,
+  } = useEmbedPluginState()
+  const {
+    hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions,
+  } = hideElementsConfig ?? {}
   // this is temporary so that we can add the ability to get a timestamp via diviner later
   const timestamp = Date.now()
   return (

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

@@ -11,7 +11,9 @@ import { EmbedCardHeader } from './EmbedCardHeader.tsx'
 
 export const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {
   const { payload } = useResolvePayload()
-  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState()
+  const {
+    activePlugin: ActivePlugin, plugins, hideElementsConfig,
+  } = useEmbedPluginState()
   const { listMode } = useListMode()
   const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1
 

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

@@ -10,7 +10,9 @@ interface EmbedCardApiErrorRendererProps extends CardProps {
   xyoError?: ModuleError
 }
 
-export const EmbedCardApiErrorRenderer: React.FC<WithChildren<EmbedCardApiErrorRendererProps>> = ({ xyoError, children, ...props }) => {
+export const EmbedCardApiErrorRenderer: React.FC<WithChildren<EmbedCardApiErrorRendererProps>> = ({
+  xyoError, children, ...props
+}) => {
   return (
     <ErrorRender error={xyoError} noReAuth noErrorDisplay customError={<CustomApiErrorCard xyoError={xyoError} {...props} />}>
       {children}

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

@@ -1,5 +1,7 @@
 import type { AlertProps, CardProps } from '@mui/material'
-import { Alert, AlertTitle, Card, CardContent, Typography } from '@mui/material'
+import {
+  Alert, AlertTitle, Card, CardContent, Typography,
+} from '@mui/material'
 import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
@@ -13,8 +15,12 @@ interface EmbedErrorCardBaseProps {
 interface EmbedErrorCardProps extends EmbedErrorCardBaseProps, CardProps {}
 
 export const EmbedErrorCard: React.FC<WithChildren<EmbedErrorCardProps>> = (props) => {
-  const { alertProps, error, scope, hideErrorDetails = true, children, ...cardProps } = props
-  const errorProps = { alertProps, error, hideErrorDetails, scope }
+  const {
+    alertProps, error, scope, hideErrorDetails = true, children, ...cardProps
+  } = props
+  const errorProps = {
+    alertProps, error, hideErrorDetails, scope,
+  }
   return (
     <Card {...cardProps}>
       <CardContent>{children ?? <DefaultErrorAlert {...errorProps} />}</CardContent>
@@ -22,7 +28,9 @@ export const EmbedErrorCard: React.FC<WithChildren<EmbedErrorCardProps>> = (prop
   )
 }
 
-const DefaultErrorAlert: React.FC<EmbedErrorCardBaseProps> = ({ alertProps, scope, hideErrorDetails, error }) => {
+const DefaultErrorAlert: React.FC<EmbedErrorCardBaseProps> = ({
+  alertProps, scope, hideErrorDetails, error,
+}) => {
   return (
     <Alert severity="error" {...alertProps}>
       <AlertTitle>Whoops! Something went wrong</AlertTitle>

package/src/components/embed-card/menu/JsonMenuItem.tsx

@@ -1,6 +1,8 @@
 import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'
 import type { MenuItemProps } from '@mui/material'
-import { ListItemIcon, ListItemText, MenuItem } from '@mui/material'
+import {
+  ListItemIcon, ListItemText, MenuItem,
+} from '@mui/material'
 import React from 'react'
 
 import { useResolvePayload } from '../../../contexts/index.ts'

package/src/components/stories/XyoEmbedPlugin.states.stories.tsx

@@ -87,4 +87,6 @@ WithOnRefresh.args = {
   plugins: [CryptoAssetRenderPlugin],
 }
 
-export { ApiError, Default, HiddenElements, ThrownError, WithOnRefresh, WithPassedPayload, WithSetBusyExternally }
+export {
+  ApiError, Default, HiddenElements, ThrownError, WithOnRefresh, WithPassedPayload, WithSetBusyExternally,
+}

package/src/components/stories/storyPayload.ts

@@ -1,20 +1,68 @@
 export const payloadData = {
   assets: {
-    ada: { value: { btc: '0.00002192', eth: '0.00031141', eur: '0.491867', usd: '0.502045' } },
-    btc: { value: { btc: '1', eth: '14.213346', eur: '22450', usd: '22914' } },
-    busd: { value: { btc: '0.00004369', eth: '0.00062074', eur: '0.980451', usd: '1.001' } },
+    ada: {
+      value: {
+        btc: '0.00002192', eth: '0.00031141', eur: '0.491867', usd: '0.502045',
+      },
+    },
+    btc: {
+      value: {
+        btc: '1', eth: '14.213346', eur: '22450', usd: '22914',
+      },
+    },
+    busd: {
+      value: {
+        btc: '0.00004369', eth: '0.00062074', eur: '0.980451', usd: '1.001',
+      },
+    },
     dai: { value: { usdc: '1.00004', xyo: '114.394' } },
-    doge: { value: { btc: '0.00000293', eth: '0.00004157', eur: '0.065655', usd: '0.067013' } },
-    dot: { value: { btc: '0.00035508', eth: '0.00504454', eur: '7.97', usd: '8.13' } },
-    eth: { value: { btc: '0.0703878', eth: '1', eur: '1579.47', usd: '1612.16' } },
+    doge: {
+      value: {
+        btc: '0.00000293', eth: '0.00004157', eur: '0.065655', usd: '0.067013',
+      },
+    },
+    dot: {
+      value: {
+        btc: '0.00035508', eth: '0.00504454', eur: '7.97', usd: '8.13',
+      },
+    },
+    eth: {
+      value: {
+        btc: '0.0703878', eth: '1', eur: '1579.47', usd: '1612.16',
+      },
+    },
     frax: { value: { usdc: '0.999738' } },
     link: { value: { xyo: '837.731' } },
-    sol: { value: { btc: '0.00169369', eth: '0.02406215', eur: '38.01', usd: '38.79' } },
-    usdc: { value: { btc: '0.0000436965', dai: '0.999963', eth: '0.0006204464999999999', eur: '0.979419', frax: '1.00026', usd: '0.999732' } },
-    usdt: { value: { btc: '0.00004367', eth: '0.0006204', eur: '0.979881', usd: '1.001', usdc: '1.00022', xyo: '113.28' } },
-    wbtc: { value: { btc: '0.99903669', eth: '14.2015745', eur: '22418', usd: '22882', usdc: '22860.8', xyo: '2617950' } },
-    weth: { value: { btc: '0.0703735', usdc: '1610.82', xyo: '186652' } },
-    xyo: { value: { btc: '3.79226e-7', dai: '0.00874169', eth: '0.000005353785', eur: '0.00844792', link: '0.0011937', usd: '0.00872519' } },
+    sol: {
+      value: {
+        btc: '0.00169369', eth: '0.02406215', eur: '38.01', usd: '38.79',
+      },
+    },
+    usdc: {
+      value: {
+        btc: '0.0000436965', dai: '0.999963', eth: '0.0006204464999999999', eur: '0.979419', frax: '1.00026', usd: '0.999732',
+      },
+    },
+    usdt: {
+      value: {
+        btc: '0.00004367', eth: '0.0006204', eur: '0.979881', usd: '1.001', usdc: '1.00022', xyo: '113.28',
+      },
+    },
+    wbtc: {
+      value: {
+        btc: '0.99903669', eth: '14.2015745', eur: '22418', usd: '22882', usdc: '22860.8', xyo: '2617950',
+      },
+    },
+    weth: {
+      value: {
+        btc: '0.0703735', usdc: '1610.82', xyo: '186652',
+      },
+    },
+    xyo: {
+      value: {
+        btc: '3.79226e-7', dai: '0.00874169', eth: '0.000005353785', eur: '0.00844792', link: '0.0011937', usd: '0.00872519',
+      },
+    },
   },
   schema: 'network.xyo.crypto.asset',
   timestamp: 1_659_625_815_232,

package/src/components/stories/storyShared.tsx

@@ -1,19 +1,9 @@
-import type { Meta, StoryFn } from '@storybook/react'
+import type { StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
 import { ApiEmbedPluginCard } from '../embed-card/index.ts'
 
-export const xyoEmbedStoryBase: Meta = {
-  argTypes: {},
-  component: ApiEmbedPluginCard,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-}
-
 export const Template: StoryFn<typeof ApiEmbedPluginCard> = (args) => {
   return (
     <BrowserRouter>

package/src/components/stories/xyoEmbedStoryBase.ts

@@ -0,0 +1,9 @@
+import type { Meta } from '@storybook/react'
+
+import { ApiEmbedPluginCard } from '../embed-card/index.ts'
+
+export const xyoEmbedStoryBase: Meta = {
+  argTypes: {},
+  component: ApiEmbedPluginCard,
+  parameters: { docs: { page: null } },
+}

package/src/components/validation-alerts/ValidatePayload.tsx

@@ -6,7 +6,9 @@ import React from 'react'
 import { useValidatePayload } from '../../contexts/index.ts'
 
 export const ValidatePayloadAlert: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
-  const { validPayload, enabled, schema } = useValidatePayload()
+  const {
+    validPayload, enabled, schema,
+  } = useValidatePayload()
 
   if (enabled && validPayload === false) {
     return (

package/src/contexts/RefreshPayloadContext/Provider.tsx

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

package/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -15,7 +15,9 @@ export type ResolvePayloadProviderProps = Omit<ResolvePayloadState, 'provided'>
 export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProviderProps>> = ({ children, huriPayload }) => {
   const [payload, setPayload] = useState<Payload>()
   const [huri, setHuri] = useState<string>()
-  const { refreshPayload, setRefreshPayload, onRefresh } = useRefreshPayload()
+  const {
+    refreshPayload, setRefreshPayload, onRefresh,
+  } = useRefreshPayload()
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -45,7 +47,9 @@ export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProvide
           }
         } catch (e) {
           const error = e as Error
-          setHuriError({ message: error.message, schema: ModuleErrorSchema, sources: [] })
+          setHuriError({
+            message: error.message, schema: ModuleErrorSchema, sources: [],
+          })
         }
       }
     },
@@ -61,7 +65,10 @@ export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProvide
 
   return (
     // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    <ResolvePayloadContext.Provider value={{ huri, huriError, notFound, payload, provided: true, refreshHuri, setPayload }}>
+    <ResolvePayloadContext.Provider value={{
+      huri, huriError, notFound, payload, provided: true, refreshHuri, setPayload,
+    }}
+    >
       {children}
     </ResolvePayloadContext.Provider>
   )

package/src/contexts/ValidatePayloadContext/Provider.stories.tsx

@@ -1,5 +1,7 @@
 import { Typography } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import React from 'react'
 
 import type { EmbedPluginState } from '../EmbedPluginContext/index.ts'
@@ -12,7 +14,9 @@ import { ValidatePayloadProvider } from './Provider.tsx'
 import { useValidatePayload } from './use.ts'
 
 const EmbedDecorator: Decorator<ValidatePayloadProviderPropsEx> = (Story, { args }) => {
-  const { xyoEmbedPluginContext, resolvePayloadContext, ...props } = args
+  const {
+    xyoEmbedPluginContext, resolvePayloadContext, ...props
+  } = args
   console.log(resolvePayloadContext)
   return (
     <RefreshPayloadProvider>
@@ -72,6 +76,8 @@ ValidationFailed.args = {
   xyoEmbedPluginContext: stubProviderDefaultValue,
 }
 
-export { Default, ValidationFailed, ValidationSucceeded }
+export {
+  Default, ValidationFailed, ValidationSucceeded,
+}
 
 export default StorybookEntry

package/src/contexts/ValidatePayloadContext/Provider.tsx

@@ -37,7 +37,10 @@ export const ValidatePayloadProvider: React.FC<WithChildren<ValidatePayloadProvi
 
   return (
     // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    <ValidatePayloadContext.Provider value={{ enabled, provided: true, schema: payload?.schema, validPayload: valid }}>
+    <ValidatePayloadContext.Provider value={{
+      enabled, provided: true, schema: payload?.schema, validPayload: valid,
+    }}
+    >
       {enabled
         ? <>{initialized ? children : <Chip label="Validating Payload..." />}</>
         : children}

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },