@xyo-network/react-embed 2.27.4 → 2.27.7

package/dist/esm/contexts/XyoEmbedPluginContext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/XyoEmbedPluginContext/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA"}

package/dist/esm/contexts/XyoEmbedPluginContext/use.d.ts

@@ -0,0 +1,2 @@
+export declare const useXyoEmbedPluginState: () => import("./State").XyoEmbedPluginState;
+//# sourceMappingURL=use.d.ts.map

package/dist/esm/contexts/XyoEmbedPluginContext/use.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/XyoEmbedPluginContext/use.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,6CAQlC,CAAA"}

package/dist/esm/contexts/XyoEmbedPluginContext/use.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { XyoEmbedPluginContext } from './Context';
+export const useXyoEmbedPluginState = () => {
+    const context = useContext(XyoEmbedPluginContext);
+    if (context === undefined) {
+        console.warn('useXyoEmbedPluginState must be used within an XyoEmbedPluginContext');
+    }
+    return context;
+};
+//# sourceMappingURL=use.js.map

package/dist/esm/contexts/XyoEmbedPluginContext/use.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.js","sourceRoot":"","sources":["../../../../src/contexts/XyoEmbedPluginContext/use.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AAEjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAA;IAEjD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAA;KACpF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/esm/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './XyoEmbedPluginContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/esm/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './XyoEmbedPluginContext';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/package.json

@@ -16,12 +16,12 @@
     "@xylabs/react-button": "^2.14.10",
     "@xylabs/react-flexbox": "^2.14.10",
     "@xylabs/react-shared": "^2.14.10",
-    "@xyo-network/api": "^2.24.10",
-    "@xyo-network/payload": "^2.24.10",
-    "@xyo-network/react-auth-service": "^2.27.6",
-    "@xyo-network/react-payload-plugin": "^2.27.6",
-    "@xyo-network/react-shared": "^2.27.6",
-    "@xyo-network/react-webapp": "^2.27.6",
+    "@xyo-network/api": "^2.24.12",
+    "@xyo-network/payload": "^2.24.12",
+    "@xyo-network/react-auth-service": "^2.27.9",
+    "@xyo-network/react-payload-plugin": "^2.27.9",
+    "@xyo-network/react-shared": "^2.27.9",
+    "@xyo-network/react-webapp": "^2.27.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tslib": "^2.4.0"
@@ -29,10 +29,10 @@
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
     "@storybook/react": "^6.5.10",
-    "@xylabs/tsconfig-dom": "^2.5.13",
-    "@xyo-network/react-aggregate-price-plugin": "^2.27.5",
-    "@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.6",
-    "@xyo-network/react-storybook": "^2.27.6",
+    "@xylabs/tsconfig-dom": "^2.5.75",
+    "@xyo-network/react-aggregate-price-plugin": "^2.27.8",
+    "@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.9",
+    "@xyo-network/react-storybook": "^2.27.9",
     "react-router-dom": "^6.3.0"
   },
   "browser": "dist/esm/index.js",
@@ -84,5 +84,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.4"
+  "version": "2.27.7"
 }

package/src/components/XyoEmbedPlugin.stories.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from 'react-router-dom'
 
 import { XyoEmbedPlugin } from './XyoEmbedPlugin'
 
-const AggregatePricePointer = 'https://beta.api.archivist.xyo.network/f78f3ab27794eaab4658313fe871fb5a513de10cf89cf935a079c5ebb75fdce9'
+const AggregatePricePointer = 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c0'
 const UniswapPairPointer = 'https://beta.api.archivist.xyo.network/e36602006239d86b6e08412f7879372b2c622d74f4d6bc508a08a46fa8ad6523'
 
 // eslint-disable-next-line import/no-default-export
@@ -49,12 +49,14 @@ const AggregatePriceExample = Template.bind({})
 AggregatePriceExample.args = {
   huri: AggregatePricePointer,
   plugins: [CryptoAssetRenderPlugin],
+  timestampLabel: 'Last Updated - ',
 }
 
 const UniswapPairsExample = Template.bind({})
 UniswapPairsExample.args = {
   huri: UniswapPairPointer,
   plugins: [UniswapPairsRenderPlugin],
+  timestampLabel: 'Last Updated - ',
 }
 
 export { AggregatePriceExample, Default, UniswapPairsExample }

package/src/components/XyoEmbedPlugin.tsx

@@ -1,95 +1,17 @@
-import { Alert, AlertTitle, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import { useAsyncEffect } from '@xylabs/react-shared'
-import { XyoApiError } from '@xyo-network/api'
-import { Huri, XyoPayload } from '@xyo-network/payload'
-import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
-import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
 import { ListModeProvider } from '@xyo-network/react-shared'
-import { ResultLoader } from '@xyo-network/react-webapp'
-import { useState } from 'react'
 
-import { ListModeSelect } from './ListModeSelect'
-import { RenderComponent } from './RenderComponent'
+import { XyoEmbedPluginProvider } from '../contexts'
+import { EmbedPluginContainer, ValidatePlugins } from './embed-card'
 import { XyoEmbedPluginProps } from './XyoEmbedPluginProps'
 
-const renderSelectId = 'render-select-id'
-const renderSelectLabel = 'Renderer'
-
-const listModeSelectId = 'listmode-select-id'
-const listModeSelectLabel = 'List Mode'
-
-export const XyoEmbedPlugin: React.FC<XyoEmbedPluginProps> = ({ plugins = [], huri, ...props }) => {
-  const [payload, setPayload] = useState<XyoPayload>()
-  const [notFound, setNotFound] = useState<boolean>()
-  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
-  const [ActivePlugin, setActivePlugin] = useState<XyoPayloadRenderPlugin>(plugins[0])
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if (!payload && huri) {
-        try {
-          const huriInstance = new Huri(huri)
-          const result = await huriInstance.fetch()
-
-          if (mounted()) {
-            if (result === null) setNotFound(true)
-            if (payload === undefined) setPayload(result)
-          }
-        } catch (e) {
-          setHuriApiError(e as XyoApiError)
-        }
-      }
-    },
-    [huri, payload]
-  )
-
-  const refreshHuri = () => {
-    setHuriApiError(undefined)
-    setNotFound(undefined)
-    setPayload(undefined)
-  }
-
-  if (payload && plugins?.length === 0) {
-    return (
-      <Alert severity="warning">
-        <AlertTitle>Missing plugins!</AlertTitle>Payload found but no plugins were present.
-      </Alert>
-    )
-  }
-
+export const XyoEmbedPlugin: React.FC<XyoEmbedPluginProps> = ({ plugins = [], huri, refreshTitle = '', timestampLabel = 'Data From', ...props }) => {
   return (
-    <ListModeProvider>
-      <ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
-        <XyoApiErrorRender apiError={huriApiError} rowGap={2} {...props}>
-          <FlexGrowRow columnGap={2} rowGap={2} flexWrap="wrap">
-            <FormControl>
-              <InputLabel id={renderSelectId}>{renderSelectLabel}</InputLabel>
-              <Select size="small" value={ActivePlugin.name} label={renderSelectLabel} labelId={renderSelectId}>
-                {plugins?.map((plugin) => (
-                  <MenuItem value={plugin.name} key={plugin.name} onClick={() => setActivePlugin(plugin)}>
-                    {plugin.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            {(ActivePlugin?.components?.box?.listModes?.length ?? 0) > 1 ? (
-              <FormControl>
-                <InputLabel id={listModeSelectId}>{listModeSelectLabel}</InputLabel>
-                <ListModeSelect size="small" label={listModeSelectLabel} labelId={listModeSelectId} />
-              </FormControl>
-            ) : null}
-          </FlexGrowRow>
-          <RenderComponent payload={payload} ActivePlugin={ActivePlugin} />
-          <FlexGrowRow>
-            <ButtonEx variant="contained" onClick={refreshHuri}>
-              Refresh
-            </ButtonEx>
-          </FlexGrowRow>
-        </XyoApiErrorRender>
-      </ResultLoader>
-    </ListModeProvider>
+    <XyoEmbedPluginProvider refreshTitle={refreshTitle} timestampLabel={timestampLabel} plugins={plugins} huri={huri}>
+      <ListModeProvider>
+        <ValidatePlugins>
+          <EmbedPluginContainer {...props} />
+        </ValidatePlugins>
+      </ListModeProvider>
+    </XyoEmbedPluginProvider>
   )
 }

package/src/components/XyoEmbedPluginProps.ts

@@ -4,4 +4,6 @@ import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
 export interface XyoEmbedPluginProps extends FlexBoxProps {
   plugins?: XyoPayloadRenderPlugin[]
   huri?: string
+  refreshTitle?: string
+  timestampLabel?: string
 }

package/src/components/controls/ControlWrap.tsx

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

package/src/components/{ListModeSelect.tsx → controls/ListModeSelect.tsx}

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

package/src/components/controls/RenderSelect.tsx

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

package/src/components/controls/index.ts

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

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

@@ -0,0 +1,25 @@
+import { Card, CardProps, SxProps, Theme } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+import { useAppSettings } from '@xyo-network/react-app-settings'
+import { useCallback } from 'react'
+
+export const EmbedCardEx: React.FC<WithChildren<CardProps>> = ({ children, ...props }) => {
+  const { darkMode } = useAppSettings()
+  const cardProps = useCallback(() => {
+    if (darkMode) {
+      return props
+    } else {
+      const lightModeOverrides: { sx: SxProps<Theme> } = {
+        sx: {
+          bgcolor: props.elevation ? '#F6F5FA' : 'inherit',
+        },
+      }
+      return {
+        ...props,
+        ...lightModeOverrides,
+      }
+    }
+  }, [darkMode, props])
+
+  return <Card {...cardProps()}>{children}</Card>
+}

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

@@ -0,0 +1,48 @@
+import RefreshIcon from '@mui/icons-material/Refresh'
+import { Avatar, CardContent, CardHeader, Link, Theme } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { TypographyEx } from '@xyo-network/react-shared'
+import { Fragment } from 'react'
+
+import { useXyoEmbedPluginState } from '../../contexts'
+import { EmbedRenderSelect, ListModeSelectFormControl } from '../controls'
+import { RenderComponent } from '../RenderComponent'
+import { EmbedCardEx } from './EmbedCardEx'
+
+export const EmbedPluginContainer: React.FC = () => {
+  const { activePlugin, payload, timestampLabel, refreshHuri, refreshTitle, plugins } = useXyoEmbedPluginState()
+  return (
+    <EmbedCardEx elevation={3}>
+      <CardHeader
+        sx={{ flexWrap: 'wrap', rowGap: 1 }}
+        avatar={
+          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>
+            {activePlugin?.name?.charAt(0)}
+          </Avatar>
+        }
+        action={
+          <Fragment>
+            {payload?.timestamp ? (
+              <FlexGrowRow>
+                <TypographyEx variant="caption">{`${timestampLabel} ${new Date(payload.timestamp).toLocaleString()}`}</TypographyEx>
+                <Link onClick={refreshHuri} sx={{ cursor: 'pointer' }} title={refreshTitle}>
+                  <RefreshIcon sx={{ height: (theme: Theme) => theme.spacing(1), position: 'relative', top: '2px' }} />
+                </Link>
+              </FlexGrowRow>
+            ) : (
+              <></>
+            )}
+          </Fragment>
+        }
+        title={activePlugin?.name}
+      />
+      <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}
+      </FlexGrowRow>
+      <CardContent>
+        <RenderComponent payload={payload} ActivePlugin={activePlugin} />
+      </CardContent>
+    </EmbedCardEx>
+  )
+}

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

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

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

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

package/src/components/index.ts

@@ -1,2 +1 @@
-export * from './ListModeSelect'
 export * from './XyoEmbedPlugin'

package/src/contexts/XyoEmbedPluginContext/Context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { XyoEmbedPluginState } from './State'
+
+export const XyoEmbedPluginContext = createContext<XyoEmbedPluginState>({})

package/src/contexts/XyoEmbedPluginContext/Provider.tsx

@@ -0,0 +1,67 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { Huri, XyoPayload } from '@xyo-network/payload'
+import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
+import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
+import { ResultLoader } from '@xyo-network/react-webapp'
+import { useState } from 'react'
+
+import { XyoEmbedPluginContext } from './Context'
+
+export interface XyoEmbedPluginProviderProps extends FlexBoxProps {
+  plugins?: XyoPayloadRenderPlugin[]
+  huri?: string
+  refreshTitle?: string
+  timestampLabel?: string
+}
+
+export const XyoEmbedPluginProvider: React.FC<WithChildren<XyoEmbedPluginProviderProps>> = ({
+  children,
+  refreshTitle,
+  timestampLabel,
+  huri,
+  plugins,
+  ...props
+}) => {
+  const [payload, setPayload] = useState<XyoPayload>()
+  const [notFound, setNotFound] = useState<boolean>()
+  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
+  const [activePlugin, setActivePlugin] = useState<XyoPayloadRenderPlugin | undefined>(plugins ? plugins[0] : undefined)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (!payload && huri) {
+        try {
+          const huriInstance = new Huri(huri)
+          const result = await huriInstance.fetch()
+
+          if (mounted()) {
+            if (result === null) setNotFound(true)
+            if (payload === undefined) setPayload(result)
+          }
+        } catch (e) {
+          setHuriApiError(e as XyoApiError)
+        }
+      }
+    },
+    [huri, payload]
+  )
+
+  const refreshHuri = () => {
+    setHuriApiError(undefined)
+    setNotFound(undefined)
+    setPayload(undefined)
+  }
+
+  return (
+    <XyoEmbedPluginContext.Provider value={{ activePlugin, payload, refreshHuri, refreshTitle, setActivePlugin, timestampLabel }}>
+      <ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
+        <XyoApiErrorRender apiError={huriApiError} {...props}>
+          {children}
+        </XyoApiErrorRender>
+      </ResultLoader>
+    </XyoEmbedPluginContext.Provider>
+  )
+}

package/src/contexts/XyoEmbedPluginContext/State.ts

@@ -0,0 +1,13 @@
+import { XyoPayload } from '@xyo-network/payload'
+import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface XyoEmbedPluginState {
+  activePlugin?: XyoPayloadRenderPlugin
+  setActivePlugin?: Dispatch<SetStateAction<XyoPayloadRenderPlugin | undefined>>
+  payload?: XyoPayload
+  plugins?: XyoPayloadRenderPlugin[]
+  refreshHuri?: () => void
+  refreshTitle?: string
+  timestampLabel?: string
+}

package/src/contexts/XyoEmbedPluginContext/index.ts

@@ -0,0 +1,2 @@
+export * from './Provider'
+export * from './use'

package/src/contexts/XyoEmbedPluginContext/use.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react'
+
+import { XyoEmbedPluginContext } from './Context'
+
+export const useXyoEmbedPluginState = () => {
+  const context = useContext(XyoEmbedPluginContext)
+
+  if (context === undefined) {
+    console.warn('useXyoEmbedPluginState must be used within an XyoEmbedPluginContext')
+  }
+
+  return context
+}

package/src/contexts/index.ts

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