@xyo-network/react-embed 7.5.7 → 7.5.11

package/src/components/controls/ListModeSelect.tsx

@@ -1,43 +0,0 @@
-import { MenuItem } from '@mui/material'
-import type { SelectExProps } from '@xylabs/react-select'
-import { SelectEx } from '@xylabs/react-select'
-import type { ListMode } from '@xyo-network/react-shared'
-import { useListMode } from '@xyo-network/react-shared'
-import React from 'react'
-
-import { EmbedFormControl } from './EmbedFormControl.tsx'
-
-const listModeSelectId = 'listmode-select-id'
-const listModeSelectLabel = 'List Mode'
-
-export const ListModeSelect: React.FC<SelectExProps<ListMode>> = (props) => {
-  const { listMode, setListMode } = useListMode()
-
-  return (
-    <SelectEx<ListMode>
-      value={(listMode ?? 'default') as ListMode}
-      onChange={(event) => {
-        setListMode?.(event.target.value as ListMode)
-      }}
-      {...props}
-    >
-      <MenuItem key="default" value="default">
-        Default
-      </MenuItem>
-      <MenuItem key="table" value="table">
-        Table
-      </MenuItem>
-      <MenuItem key="grid" value="grid">
-        Grid
-      </MenuItem>
-    </SelectEx>
-  )
-}
-
-export const ListModeSelectFormControl: React.FC<SelectExProps<ListMode>> = (props) => {
-  return (
-    <EmbedFormControl formId={listModeSelectId} formLabel={listModeSelectLabel}>
-      <ListModeSelect size="small" label={listModeSelectLabel} labelId={listModeSelectId} {...props} />
-    </EmbedFormControl>
-  )
-}

package/src/components/controls/RenderSelect.tsx

@@ -1,27 +0,0 @@
-import { MenuItem } from '@mui/material'
-import type { SelectExProps } from '@xylabs/react-select'
-import { SelectEx } from '@xylabs/react-select'
-import React from 'react'
-
-import { useEmbedPluginState } from '../../contexts/index.ts'
-import { EmbedFormControl } from './EmbedFormControl.tsx'
-
-const renderSelectId = 'render-select-id'
-const renderSelectLabel = 'Renderer'
-
-export const EmbedRenderSelect: React.FC<SelectExProps<string>> = (props) => {
-  const {
-    activePlugin, setActivePlugin, plugins,
-  } = useEmbedPluginState()
-  return (
-    <EmbedFormControl formId={renderSelectId} formLabel={renderSelectLabel}>
-      <SelectEx size="small" value={activePlugin?.name} {...props}>
-        {plugins?.map(plugin => (
-          <MenuItem value={plugin.name} key={plugin.name} onClick={() => setActivePlugin?.(plugin)}>
-            {plugin.name}
-          </MenuItem>
-        ))}
-      </SelectEx>
-    </EmbedFormControl>
-  )
-}

package/src/components/controls/index.ts

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

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

@@ -1,38 +0,0 @@
-import { useTheme } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { LoadResult } from '@xyo-network/react-shared'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { useRefreshPayload, useResolvePayload } from '../../contexts/index.ts'
-import { EmbedCardApiErrorRenderer } from './error-handling/index.ts'
-
-export const EmbedCardResolverFlexBox: React.FC<PropsWithChildren<FlexBoxProps>> = ({ children, ...props }) => {
-  const {
-    payload, notFound, huriError,
-  } = useResolvePayload()
-  const { refreshPayload } = useRefreshPayload()
-  const theme = useTheme()
-
-  return (
-    <LoadResult searchResult={payload} notFound={!!notFound} error={!!huriError}>
-      <EmbedCardApiErrorRenderer xyoError={huriError}>
-        <FlexCol
-          id="embed-outer-wrap"
-          alignItems="stretch"
-          justifyContent="start"
-          busy={Boolean(!refreshPayload && payload)}
-          busyCircularProps={{
-            style: {
-              alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2,
-            },
-          }}
-          {...props}
-        >
-          {children}
-        </FlexCol>
-      </EmbedCardApiErrorRenderer>
-    </LoadResult>
-  )
-}

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

@@ -1,71 +0,0 @@
-import { useTheme } from '@mui/material'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { useRefreshPayload, useResolvePayload } from '../../contexts/index.ts'
-import type { EmbedPluginProps } from '../../types/index.ts'
-import { EmbedPluginInner } from '../EmbedPlugin.tsx'
-import type { BusyCardProps } from './card/index.ts'
-import { EmbedPluginCard } from './card/index.ts'
-import { EmbedCardApiErrorRenderer } from './error-handling/index.ts'
-
-export interface EmbedPluginCardProps extends PropsWithChildren, EmbedPluginProps, BusyCardProps {}
-
-export const ApiEmbedPluginCard: React.FC<EmbedPluginCardProps> = ({ children, ...props }) => {
-  const {
-    validateSchema,
-    plugins = [],
-    huriPayload,
-    refreshTitle = '',
-    timestampLabel = 'Data From',
-    hideElementsConfig,
-    embedPluginConfig,
-    onRefresh,
-    ...busyCardProps
-  } = props
-
-  return (
-    <EmbedPluginInner
-      {...{
-        embedPluginConfig,
-        hideElementsConfig,
-        huriPayload,
-        onRefresh,
-        plugins,
-        refreshTitle,
-        timestampLabel,
-        validateSchema,
-      }}
-    >
-      <EmbedPluginCardInner {...busyCardProps} />
-      {children}
-    </EmbedPluginInner>
-  )
-}
-
-export const EmbedPluginCardInner: React.FC<BusyCardProps> = (props) => {
-  const { payload, huriError } = useResolvePayload()
-  const { refreshPayload } = useRefreshPayload()
-  const theme = useTheme()
-
-  return (
-    <EmbedCardApiErrorRenderer xyoError={huriError}>
-      <EmbedPluginCard
-        elevation={3}
-        variant="elevation"
-        busy={Boolean(!refreshPayload && payload)}
-        busyVariantProps={{
-          style: {
-            alignItems: 'start', paddingTop: theme.spacing(2), zIndex: 2,
-          },
-        }}
-        sx={{ position: 'relative' }}
-        {...props}
-      />
-    </EmbedCardApiErrorRenderer>
-  )
-}
-
-/** @deprecated - use EmbedPluginCard and use CardProps instead of FlexBoxProps */
-
-export { EmbedPluginCard as EmbedPlugin } from './card/index.ts'

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

@@ -1,43 +0,0 @@
-import type { CardProps } from '@mui/material'
-import { Card } from '@mui/material'
-import { useBusyTiming } from '@xylabs/react-flexbox'
-import type {
-  BusyCircularProgressProps,
-  BusyLinearProgressProps,
-  BusyVariant,
-} from '@xylabs/react-shared'
-import {
-  BusyCircularProgress,
-  BusyLinearProgress,
-} from '@xylabs/react-shared'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-export interface BusyCardProps extends CardProps {
-  busy?: boolean
-  busyMinimum?: number
-  busyVariant?: BusyVariant
-  busyVariantProps?: BusyCircularProgressProps | BusyLinearProgressProps
-}
-
-export const BusyCard: React.FC<PropsWithChildren<BusyCardProps>> = ({
-  busy,
-  busyMinimum = 500,
-  busyVariant = 'circular',
-  busyVariantProps,
-  children,
-  ...props
-}) => {
-  const internalBusy = useBusyTiming(busy, busyMinimum)
-  return (
-    <Card {...props}>
-      {children}
-      {busyVariant === 'circular' && internalBusy
-        ? <BusyCircularProgress {...(busyVariantProps as BusyCircularProgressProps)} />
-        : null}
-      {busyVariant === 'linear' && internalBusy
-        ? <BusyLinearProgress {...(busyVariantProps as BusyLinearProgressProps)} />
-        : null}
-    </Card>
-  )
-}

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

@@ -1,57 +0,0 @@
-import { Refresh as RefreshIcon } from '@mui/icons-material'
-import type { CardHeaderProps, Theme } from '@mui/material'
-import {
-  Avatar, CardHeader, Chip,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { isDefined } from '@xylabs/sdk-js'
-import React from 'react'
-
-import { useEmbedPluginState, useResolvePayload } from '../../../contexts/index.ts'
-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 ?? {}
-  // this is temporary so that we can add the ability to get a timestamp via diviner later
-  const timestamp = Date.now()
-  return (
-    <CardHeader
-      sx={{ flexWrap: 'wrap', rowGap: 1 }}
-      avatar={
-        hideAvatar
-          ? <></>
-          : (
-              <Avatar sx={{ bgcolor: (theme: Theme) => theme.vars.palette.primary.main }} aria-label={activePlugin?.name}>
-                {activePlugin?.name?.charAt(0)}
-              </Avatar>
-            )
-      }
-      action={(
-        <FlexRow flexWrap="wrap" columnGap={0.5}>
-          {isDefined(timestamp) && !Number.isNaN(timestamp)
-            ? hideTimestamp && hideRefreshButton
-              ? ''
-              : (
-                  <Chip
-                    avatar={hideRefreshButton ? <></> : <RefreshIcon />}
-                    clickable={hideRefreshButton ? false : true}
-                    onClick={refreshHuri}
-                    label={hideTimestamp ? '' : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`}
-                  />
-                )
-
-            : null}
-          {/* Huri case is valid as long as the only menu item is JSON */}
-          {hideCardActions || huri === undefined ? null : <EmbedMenu />}
-        </FlexRow>
-      )}
-      title={hideTitle ? '' : activePlugin?.name}
-    />
-  )
-}

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

@@ -1,47 +0,0 @@
-import { CardContent } from '@mui/material'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import { isTruthy } from '@xylabs/sdk-js'
-import { useListMode } from '@xyo-network/react-shared'
-import React from 'react'
-
-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'
-import { EmbedCardHeader } from './EmbedCardHeader.tsx'
-
-export const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {
-  const { payload } = useResolvePayload()
-  const {
-    activePlugin: ActivePlugin, plugins, hideElementsConfig,
-  } = useEmbedPluginState()
-  const { listMode } = useListMode()
-  const { pluginProps } = usePluginProps()
-  const supportsListMode = isTruthy(ActivePlugin?.components?.box?.listModes?.length) ? true : false
-
-  return (
-    <BusyCard {...props}>
-      {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}
-      {/* Only show the row if the children are present */}
-      {(plugins && plugins.length > 0) || supportsListMode
-        ? (
-            <FlexGrowRow columnGap={2} rowGap={2} flexWrap="wrap" pb={1}>
-              {plugins && plugins.length > 1
-                ? <EmbedRenderSelect />
-                : null}
-              {supportsListMode
-                ? <ListModeSelectFormControl />
-                : null}
-            </FlexGrowRow>
-          )
-        : null}
-      <CardContent sx={{ height: '100%' }}>
-        {ActivePlugin
-          ? <ActivePlugin.components.box.detailsBox payload={payload} {...pluginProps} {...(supportsListMode && { listMode })} />
-          : null}
-      </CardContent>
-    </BusyCard>
-  )
-}

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

@@ -1,3 +0,0 @@
-export * from './BusyCard.tsx'
-export * from './EmbedCardHeader.tsx'
-export * from './EmbedPluginCard.tsx'

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

@@ -1,29 +0,0 @@
-import type { CardProps } from '@mui/material'
-import { ErrorAlert, ErrorRender } from '@xylabs/react-error'
-import type { ModuleError } from '@xyo-network/payload-model'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { EmbedErrorCard } from './EmbedErrorCard.tsx'
-
-interface EmbedCardApiErrorRendererProps extends CardProps {
-  xyoError?: ModuleError
-}
-
-export const EmbedCardApiErrorRenderer: React.FC<PropsWithChildren<EmbedCardApiErrorRendererProps>> = ({
-  xyoError, children, ...props
-}) => {
-  return (
-    <ErrorRender error={xyoError} noReAuth noErrorDisplay customError={<CustomApiErrorCard xyoError={xyoError} {...props} />}>
-      {children}
-    </ErrorRender>
-  )
-}
-
-const CustomApiErrorCard: React.FC<EmbedCardApiErrorRendererProps> = ({ xyoError, ...props }) => {
-  return (
-    <EmbedErrorCard {...props}>
-      <ErrorAlert error={xyoError} />
-    </EmbedErrorCard>
-  )
-}

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

@@ -1,60 +0,0 @@
-import type { AlertProps, CardProps } from '@mui/material'
-import {
-  Alert, AlertTitle, Card, CardContent, Typography,
-} from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-interface EmbedErrorCardBaseProps {
-  alertProps?: AlertProps
-  error?: Error
-  hideErrorDetails?: boolean
-  scope?: string
-}
-
-interface EmbedErrorCardProps extends EmbedErrorCardBaseProps, CardProps {}
-
-export const EmbedErrorCard: React.FC<PropsWithChildren<EmbedErrorCardProps>> = (props) => {
-  const {
-    alertProps, error, scope, hideErrorDetails = true, children, ...cardProps
-  } = props
-  const errorProps = {
-    alertProps, error, hideErrorDetails, scope,
-  }
-  return (
-    <Card {...cardProps}>
-      <CardContent>{children ?? <DefaultErrorAlert {...errorProps} />}</CardContent>
-    </Card>
-  )
-}
-
-const DefaultErrorAlert: React.FC<EmbedErrorCardBaseProps> = ({
-  alertProps, scope, hideErrorDetails, error,
-}) => {
-  return (
-    <Alert severity="error" {...alertProps}>
-      <AlertTitle>Whoops! Something went wrong</AlertTitle>
-      {isDefined(scope)
-        ? (
-            <Typography variant="caption">
-              Scope:
-              {scope}
-            </Typography>
-          )
-        : null}
-      {!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

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

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

@@ -1,2 +0,0 @@
-export * from './card/index.ts'
-export * from './EmbedPluginCard.tsx'

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

@@ -1,37 +0,0 @@
-import { MoreVert as MoreVertIcon } from '@mui/icons-material'
-import type { IconButtonProps } from '@mui/material'
-import { IconButton, Menu } from '@mui/material'
-import React, { useState } from 'react'
-
-import { JsonMenuItem } from './JsonMenuItem.tsx'
-
-export const EmbedMenu: React.FC<IconButtonProps> = (props) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <>
-      <IconButton onClick={handleClick} {...props}>
-        <MoreVertIcon />
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        slotProps={{
-          paper: { variant: 'elevation' },
-          list: { dense: true },
-        }}
-      >
-        <JsonMenuItem />
-      </Menu>
-    </>
-  )
-}

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

@@ -1,28 +0,0 @@
-import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'
-import type { MenuItemProps } from '@mui/material'
-import {
-  ListItemIcon, ListItemText, MenuItem,
-} from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import React from 'react'
-
-import { useResolvePayload } from '../../../contexts/index.ts'
-
-export const JsonMenuItem: React.FC<MenuItemProps> = (props) => {
-  const { huri } = useResolvePayload()
-
-  return (
-    <>
-      {isDefined(huri)
-        ? (
-            <MenuItem title="Source Payload JSON" onClick={() => window.open(huri, '_blank')} {...props}>
-              <ListItemText sx={{ mr: 1 }}>JSON</ListItemText>
-              <ListItemIcon sx={{ justifyContent: 'end' }}>
-                <OpenInNewIcon fontSize="small" />
-              </ListItemIcon>
-            </MenuItem>
-          )
-        : null}
-    </>
-  )
-}

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

@@ -1 +0,0 @@
-export * from './EmbedMenu.tsx'

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from './embed-card/index.ts'
-export * from './EmbedPlugin.tsx'

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

@@ -1,28 +0,0 @@
-import type { Meta } from '@storybook/react-vite'
-import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plugin'
-import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
-
-import { Template } from './storyShared.tsx'
-import { xyoEmbedStoryBase } from './xyoEmbedStoryBase.ts'
-
-const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
-const UniswapPairPointer = 'https://beta.api.archivist.xyo.network/e36602006239d86b6e08412f7879372b2c622d74f4d6bc508a08a46fa8ad6523'
-
-export default {
-  ...xyoEmbedStoryBase,
-  title: 'embed/EmbedPlugin/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/stories/XyoEmbedPlugin.states.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta } from '@storybook/react-vite'
-import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plugin'
-import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
-import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-
-import { payloadData } from './storyPayload.ts'
-import { Template } from './storyShared.tsx'
-import { xyoEmbedStoryBase } from './xyoEmbedStoryBase.ts'
-
-const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
-
-export default {
-  ...xyoEmbedStoryBase,
-  title: 'embed/EmbedPlugin/states',
-} as Meta
-
-const testPlugin = createPayloadRenderPlugin({
-  canRender: () => true,
-  name: 'Test Plugin',
-})
-
-const testPlugin1 = createPayloadRenderPlugin({
-  canRender: () => true,
-  name: 'Test1 Plugin',
-})
-
-const failingPlugin = createPayloadRenderPlugin({
-  canRender: () => true,
-  components: {
-    box: {
-      details: () => {
-        throw new Error('testing Error Boundary')
-      },
-    },
-  },
-  name: 'Failing Plugin',
-})
-
-const Default = Template.bind({})
-Default.args = {
-  huri: AggregatePricePointer,
-  plugins: [testPlugin, testPlugin1],
-}
-
-const ApiError = Template.bind({})
-ApiError.args = {
-  huriPayload: 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c',
-  plugins: [UniswapPairsRenderPlugin],
-}
-
-const ThrownError = Template.bind({})
-ThrownError.args = {
-  huriPayload: AggregatePricePointer,
-  plugins: [failingPlugin],
-}
-
-const HiddenElements = Template.bind({})
-HiddenElements.args = {
-  hideElementsConfig: {
-    hideAvatar: true,
-    hideCardActions: true,
-    hideCardHeader: true,
-    hideRefreshButton: true,
-    hideTimestamp: true,
-    hideTitle: true,
-  },
-  huriPayload: AggregatePricePointer,
-  plugins: [CryptoAssetRenderPlugin],
-}
-
-const WithPassedPayload = Template.bind({})
-WithPassedPayload.args = {
-  huriPayload: payloadData,
-  plugins: [CryptoAssetRenderPlugin],
-}
-
-const WithSetBusyExternally = Template.bind({})
-WithSetBusyExternally.args = {
-  busy: true,
-  huriPayload: payloadData,
-  plugins: [CryptoAssetRenderPlugin],
-}
-
-const WithOnRefresh = Template.bind({})
-WithOnRefresh.args = {
-  huriPayload: payloadData,
-  onRefresh: () => console.log('refreshed'),
-  plugins: [CryptoAssetRenderPlugin],
-}
-
-export {
-  ApiError, Default, HiddenElements, ThrownError, WithOnRefresh, WithPassedPayload, WithSetBusyExternally,
-}