@xyo-network/react-embed 7.5.8 → 7.5.12

package/src/components/stories/storyPayload.ts

@@ -1,71 +0,0 @@
-import { asSchema } from '@xyo-network/payload-model'
-
-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',
-      },
-    },
-    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',
-      },
-    },
-    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',
-      },
-    },
-  },
-  schema: asSchema('network.xyo.crypto.asset', true),
-  timestamp: 1_659_625_815_232,
-}

package/src/components/stories/storyShared.tsx

@@ -1,19 +0,0 @@
-import type { StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import type { PluginProps } from '../../contexts/index.ts'
-import { PluginPropsProvider } from '../../contexts/index.ts'
-import { ApiEmbedPluginCard } from '../embed-card/index.ts'
-
-const pluginProps: PluginProps = { foo: true }
-
-export const Template: StoryFn<typeof ApiEmbedPluginCard> = (args) => {
-  return (
-    <PluginPropsProvider pluginProps={pluginProps}>
-      <BrowserRouter>
-        <ApiEmbedPluginCard {...args} />
-      </BrowserRouter>
-    </PluginPropsProvider>
-  )
-}

package/src/components/stories/xyoEmbedStoryBase.ts

@@ -1,9 +0,0 @@
-import type { Meta } from '@storybook/react-vite'
-
-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

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

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

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

package/src/components/validation-alerts/index.ts

@@ -1,2 +0,0 @@
-export * from './ValidatePayload.tsx'
-export * from './ValidatePlugins.tsx'

package/src/contexts/EmbedPluginContext/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { EmbedPluginState } from './State.ts'
-
-export const EmbedPluginContext = createContextEx<EmbedPluginState>()

package/src/contexts/EmbedPluginContext/Provider.tsx

@@ -1,36 +0,0 @@
-import { useResetState } from '@xylabs/react-hooks'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { EmbedPluginContext } from './Context.ts'
-import type { EmbedPluginBase } from './State.ts'
-
-export type EmbedPluginProviderProps = EmbedPluginBase
-
-/** Expose passed embed plugin props via context */
-export const EmbedPluginProvider: React.FC<PropsWithChildren<EmbedPluginProviderProps>> = ({
-  children,
-  refreshTitle,
-  timestampLabel,
-  hideElementsConfig,
-  plugins,
-  embedPluginConfig,
-}) => {
-  const [activePlugin, setActivePlugin] = useResetState(plugins ? plugins[0] : undefined)
-
-  return (
-    <EmbedPluginContext
-      value={{
-        activePlugin,
-        embedPluginConfig,
-        hideElementsConfig,
-        provided: true,
-        refreshTitle,
-        setActivePlugin,
-        timestampLabel,
-      }}
-    >
-      {children}
-    </EmbedPluginContext>
-  )
-}

package/src/contexts/EmbedPluginContext/State.ts

@@ -1,37 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import type { ListMode } from '@xyo-network/react-shared'
-import type { Dispatch, SetStateAction } from 'react'
-
-export interface EmbedPluginVisibilityConfig {
-  hideAvatar?: boolean
-  hideCardActions?: boolean
-  hideCardHeader?: boolean
-  hideErrorDetails?: boolean
-  hideRefreshButton?: boolean
-  hideTimestamp?: boolean
-  hideTitle?: boolean
-}
-
-/**
- * Extend for custom plugin configuration
- */
-export interface PluginConfig {
-  listMode?: ListMode
-}
-
-export interface EmbedPluginBase {
-  /** EmbedPlugin component configuration */
-  embedPluginConfig?: PluginConfig
-  hideElementsConfig?: EmbedPluginVisibilityConfig
-  /** @deprecated use huriPayload */
-  huri?: string
-  plugins?: PayloadRenderPlugin[]
-  refreshTitle?: string
-  timestampLabel?: string
-}
-
-export type EmbedPluginState = ContextExState<EmbedPluginBase & {
-  activePlugin?: PayloadRenderPlugin
-  setActivePlugin?: Dispatch<SetStateAction<PayloadRenderPlugin | undefined>>
-}>

package/src/contexts/EmbedPluginContext/index.ts

@@ -1,4 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/EmbedPluginContext/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { EmbedPluginContext } from './Context.ts'
-
-export const useEmbedPluginState = () => useContextEx(EmbedPluginContext, 'EmbedPlugin', true)

package/src/contexts/PluginPropsContext/Provider.tsx

@@ -1,31 +0,0 @@
-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 | undefined>(pluginPropsProp)
-
-  useEffect(() => {
-    // needs to be in useEffect since we are in a provider
-    setPluginProps(pluginPropsProp)
-  }, [pluginPropsProp])
-
-  const value: PluginPropsState = useMemo(() => ({
-    pluginProps,
-    provided: true,
-  }), [pluginProps])
-
-  return (
-    <PluginPropsContext value={value}>
-      {children}
-    </PluginPropsContext>
-  )
-}

package/src/contexts/PluginPropsContext/context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { PluginPropsState } from './state.ts'
-
-export const PluginPropsContext = createContextEx<PluginPropsState>()

package/src/contexts/PluginPropsContext/index.ts

@@ -1,4 +0,0 @@
-export * from './context.ts'
-export * from './Provider.tsx'
-export * from './state.ts'
-export * from './use.ts'

package/src/contexts/PluginPropsContext/state.ts

@@ -1,9 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-
-export type PluginProps = Record<string, unknown>
-
-export interface PluginPropsStateFields {
-  pluginProps: PluginProps | undefined
-}
-
-export type PluginPropsState = ContextExState<PluginPropsStateFields>

package/src/contexts/PluginPropsContext/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { PluginPropsContext } from './context.ts'
-
-export const usePluginProps = (required = false) => useContextEx(PluginPropsContext, 'PluginProps', required)

package/src/contexts/RefreshPayloadContext/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { RefreshPayloadState } from './State.ts'
-
-export const RefreshPayloadContext = createContextEx<RefreshPayloadState>()

package/src/contexts/RefreshPayloadContext/Provider.tsx

@@ -1,24 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import React, { useState } from 'react'
-
-import { RefreshPayloadContext } from './Context.ts'
-
-export interface RefreshPayloadProps {
-  onRefresh?: () => void
-  refreshPayload?: boolean
-}
-
-export const RefreshPayloadProvider: React.FC<PropsWithChildren<RefreshPayloadProps>> = ({
-  children, onRefresh, refreshPayload,
-}) => {
-  const [localRefreshPayload, setLocalRefreshPayload] = useState(refreshPayload)
-
-  return (
-    <RefreshPayloadContext value={{
-      onRefresh, provided: true, refreshPayload: localRefreshPayload, setRefreshPayload: setLocalRefreshPayload,
-    }}
-    >
-      {children}
-    </RefreshPayloadContext>
-  )
-}

package/src/contexts/RefreshPayloadContext/State.ts

@@ -1,8 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { Dispatch, SetStateAction } from 'react'
-
-export type RefreshPayloadState = ContextExState<{
-  onRefresh?: () => void
-  refreshPayload?: boolean
-  setRefreshPayload?: Dispatch<SetStateAction<boolean | undefined>>
-}>

package/src/contexts/RefreshPayloadContext/index.ts

@@ -1,3 +0,0 @@
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/RefreshPayloadContext/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { RefreshPayloadContext } from './Context.ts'
-
-export const useRefreshPayload = () => useContextEx(RefreshPayloadContext, 'RefreshPayload', true)

package/src/contexts/ResolvePayloadContext/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { ResolvePayloadState } from './State.ts'
-
-export const ResolvePayloadContext = createContextEx<ResolvePayloadState>()

package/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -1,76 +0,0 @@
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import { delay, isDefined } from '@xylabs/sdk-js'
-import { Huri } from '@xyo-network/huri'
-import type {
-  ModuleError, Payload, WithSources,
-} from '@xyo-network/payload-model'
-import { ModuleErrorSchema } from '@xyo-network/payload-model'
-import type { PropsWithChildren } from 'react'
-import React, { useEffect, useState } from 'react'
-
-import { useRefreshPayload } from '../RefreshPayloadContext/index.ts'
-import { ResolvePayloadContext } from './Context.ts'
-import type { ResolvePayloadState } from './State.ts'
-
-export type ResolvePayloadProviderProps = Omit<ResolvePayloadState, 'provided'>
-
-export const ResolvePayloadProvider: React.FC<PropsWithChildren<ResolvePayloadProviderProps>> = ({ children, huriPayload }) => {
-  const [payload, setPayload] = useState<Payload>()
-  const [huri, setHuri] = useState<string>()
-  const {
-    refreshPayload, setRefreshPayload, onRefresh,
-  } = useRefreshPayload()
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    typeof huriPayload === 'string' ? setHuri(huriPayload) : undefined
-    if (typeof huriPayload === 'object') {
-      setPayload(huriPayload)
-      setRefreshPayload?.(true)
-    }
-  }, [huriPayload, setRefreshPayload])
-
-  const [notFound, setNotFound] = useState<boolean>()
-  const [huriError, setHuriError] = useState<WithSources<ModuleError>>()
-
-  useAsyncEffect(
-    async (mounted) => {
-      if (isDefined(huri) && !refreshPayload) {
-        try {
-          const huriInstance = new Huri(huri)
-          const result = await huriInstance.fetch()
-          // ensure the busy state can stay for a moment to avoid flashing too quickly
-          await delay(500)
-
-          if (mounted()) {
-            setNotFound(result === null)
-            setPayload(result)
-            setRefreshPayload?.(true)
-          }
-        } catch (e) {
-          const error = e as Error
-          setHuriError({
-            message: error.message, schema: ModuleErrorSchema, $sources: [],
-          })
-        }
-      }
-    },
-    [huri, payload, refreshPayload, setRefreshPayload],
-  )
-
-  const refreshHuri = () => {
-    onRefresh?.()
-    if (isDefined(huri)) {
-      setRefreshPayload?.(false)
-    }
-  }
-
-  return (
-    <ResolvePayloadContext value={{
-      huri, huriError, notFound, payload, provided: true, refreshHuri, setPayload,
-    }}
-    >
-      {children}
-    </ResolvePayloadContext>
-  )
-}

package/src/contexts/ResolvePayloadContext/State.ts

@@ -1,13 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { ModuleError, Payload } from '@xyo-network/payload-model'
-import type { Dispatch, SetStateAction } from 'react'
-
-export type ResolvePayloadState = ContextExState<{
-  huri?: string
-  huriError?: ModuleError
-  huriPayload?: string | Payload
-  notFound?: boolean
-  payload?: Payload
-  refreshHuri?: () => void
-  setPayload?: Dispatch<SetStateAction<Payload | undefined>>
-}>

package/src/contexts/ResolvePayloadContext/index.ts

@@ -1,4 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/ResolvePayloadContext/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { ResolvePayloadContext } from './Context.ts'
-
-export const useResolvePayload = () => useContextEx(ResolvePayloadContext, 'ResolvePayload', true)

package/src/contexts/ValidatePayloadContext/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { ValidatePayloadState } from './State.ts'
-
-export const ValidatePayloadContext = createContextEx<ValidatePayloadState>()

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

@@ -1,87 +0,0 @@
-import { Typography } from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { asSchema } from '@xyo-network/payload-model'
-import React from 'react'
-
-import type { EmbedPluginState } from '../EmbedPluginContext/index.ts'
-import { EmbedPluginContext } from '../EmbedPluginContext/index.ts'
-import { RefreshPayloadProvider } from '../RefreshPayloadContext/index.ts'
-import type { ResolvePayloadState } from '../ResolvePayloadContext/index.ts'
-import { ResolvePayloadContext } from '../ResolvePayloadContext/index.ts'
-import type { ValidatePayloadProviderProps } from './Provider.tsx'
-import { ValidatePayloadProvider } from './Provider.tsx'
-import { useValidatePayload } from './use.ts'
-
-const EmbedDecorator: Decorator<ValidatePayloadProviderPropsEx> = (Story, { args }) => {
-  const {
-    xyoEmbedPluginContext, resolvePayloadContext, ...props
-  } = args
-  console.log(resolvePayloadContext)
-  if (resolvePayloadContext.provided && xyoEmbedPluginContext.provided) {
-    return (
-      <RefreshPayloadProvider>
-        <ResolvePayloadContext value={resolvePayloadContext}>
-          <EmbedPluginContext value={xyoEmbedPluginContext}>
-            <Story {...props} />
-          </EmbedPluginContext>
-        </ResolvePayloadContext>
-      </RefreshPayloadProvider>
-    )
-  }
-  return <></>
-}
-
-const StorybookEntry: Meta<ValidatePayloadProviderPropsEx> = {
-  component: ValidatePayloadProvider,
-  decorators: [EmbedDecorator],
-  title: 'embed/ValidatePayloadProvider',
-}
-
-const ValidatePayloadState = () => {
-  const state = useValidatePayload()
-  return <pre>{JSON.stringify(state, null, 2)}</pre>
-}
-
-interface ValidatePayloadProviderPropsEx extends ValidatePayloadProviderProps {
-  resolvePayloadContext: ResolvePayloadState
-  xyoEmbedPluginContext: EmbedPluginState
-}
-
-const Template: StoryFn<React.FC<ValidatePayloadProviderPropsEx>> = (props) => {
-  return (
-    <ValidatePayloadProvider {...props}>
-      <Typography>State:</Typography>
-      <ValidatePayloadState />
-      <Typography>Children</Typography>
-    </ValidatePayloadProvider>
-  )
-}
-
-const InvalidPayload = { schema: asSchema('network.xyo.schema', true) }
-const ValidPayload = { definition: { $id: 'test.schema' }, schema: asSchema('network.xyo.schema', true) }
-const stubProviderDefaultValue = { provided: true }
-
-const Default = Template.bind({})
-Default.args = { resolvePayloadContext: stubProviderDefaultValue, xyoEmbedPluginContext: stubProviderDefaultValue }
-
-const ValidationSucceeded = Template.bind({})
-ValidationSucceeded.args = {
-  enabled: true,
-  resolvePayloadContext: { payload: ValidPayload, ...stubProviderDefaultValue } as ResolvePayloadState,
-  xyoEmbedPluginContext: stubProviderDefaultValue,
-}
-
-const ValidationFailed = Template.bind({})
-ValidationFailed.args = {
-  enabled: true,
-  resolvePayloadContext: { payload: InvalidPayload, ...stubProviderDefaultValue } as ResolvePayloadState,
-  xyoEmbedPluginContext: stubProviderDefaultValue,
-}
-
-export {
-  Default, ValidationFailed, ValidationSucceeded,
-}
-
-export default StorybookEntry

package/src/contexts/ValidatePayloadContext/Provider.tsx

@@ -1,49 +0,0 @@
-import { Chip } from '@mui/material'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import type { SchemaNameToValidatorMap } from '@xyo-network/schema-cache'
-import { SchemaCache } from '@xyo-network/schema-cache'
-import type { PropsWithChildren } from 'react'
-import React, { useState } from 'react'
-
-import { useResolvePayload } from '../ResolvePayloadContext/index.ts'
-import { ValidatePayloadContext } from './Context.ts'
-
-export interface ValidatePayloadProviderProps {
-  // Opt-in flag to validate payloads for the plugin(s)
-  enabled?: boolean
-}
-
-export const ValidatePayloadProvider: React.FC<PropsWithChildren<ValidatePayloadProviderProps>> = ({ children, enabled = false }) => {
-  const { payload } = useResolvePayload()
-  const [initialized, setInitialized] = useState(false)
-  const [valid, setValid] = useState<boolean>()
-
-  useAsyncEffect(
-    async () => {
-      if (payload && enabled) {
-        await SchemaCache.instance.get(payload.schema)
-
-        const possibleKnownSchema = payload.schema as keyof SchemaNameToValidatorMap
-
-        if (SchemaCache.instance.validators[possibleKnownSchema]) {
-          const validator = SchemaCache.instance.validators[possibleKnownSchema]
-          // TODO: Fix Types
-          // setValid(validator?.(payload))
-        }
-        setInitialized(true)
-      }
-    },
-    [payload, enabled],
-  )
-
-  return (
-    <ValidatePayloadContext value={{
-      enabled, provided: true, schema: payload?.schema, validPayload: valid,
-    }}
-    >
-      {enabled
-        ? <>{initialized ? children : <Chip label="Validating Payload..." />}</>
-        : children}
-    </ValidatePayloadContext>
-  )
-}

package/src/contexts/ValidatePayloadContext/State.ts

@@ -1,7 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-
-export type ValidatePayloadState = ContextExState<{
-  enabled?: boolean
-  schema?: string
-  validPayload?: boolean
-}>

package/src/contexts/ValidatePayloadContext/index.ts

@@ -1,3 +0,0 @@
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/ValidatePayloadContext/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { ValidatePayloadContext } from './Context.ts'
-
-export const useValidatePayload = () => useContextEx(ValidatePayloadContext, 'ValidateSchema', true)

package/src/contexts/index.ts

@@ -1,5 +0,0 @@
-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'

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './components/index.ts'
-export * from './contexts/index.ts'
-export * from './types/index.ts'