@xyo-network/react-embed 2.81.9 → 2.82.0

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

@@ -1,8 +1,8 @@
 import { MoreVert as MoreVertIcon } from '@mui/icons-material'
 import { IconButton, IconButtonProps, Menu } from '@mui/material'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { JsonMenuItem } from './JsonMenuItem.js'
+import { JsonMenuItem } from './JsonMenuItem.tsx'
 
 export const EmbedMenu: React.FC<IconButtonProps> = (props) => {
   // TODO - link to explore website

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

@@ -1,21 +1,24 @@
 import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'
 import { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'
+import React from 'react'
 
-import { useResolvePayload } from '../../../contexts/index.js'
+import { useResolvePayload } from '../../../contexts/index.ts'
 
 export const JsonMenuItem: React.FC<MenuItemProps> = (props) => {
   const { huri } = useResolvePayload()
 
   return (
     <>
-      {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}
+      {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 +1 @@
-export * from './EmbedMenu.js'
+export * from './EmbedMenu.tsx'

package/src/components/index.ts

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

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

@@ -2,12 +2,11 @@ import { Meta } from '@storybook/react'
 import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plugin'
 import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
 
-import { Template, xyoEmbedStoryBase } from './storyShared.js'
+import { Template, xyoEmbedStoryBase } from './storyShared.tsx'
 
 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/EmbedPlugin/examples',

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

@@ -3,12 +3,11 @@ import { CryptoAssetRenderPlugin } from '@xyo-network/react-aggregate-price-plug
 import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
 import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
 
-import { payloadData } from './storyPayload.js'
-import { Template, xyoEmbedStoryBase } from './storyShared.js'
+import { payloadData } from './storyPayload.ts'
+import { Template, xyoEmbedStoryBase } from './storyShared.tsx'
 
 const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
 
-// eslint-disable-next-line import/no-default-export
 export default {
   ...xyoEmbedStoryBase,
   title: 'embed/EmbedPlugin/states',

package/src/components/stories/storyShared.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { ApiEmbedPluginCard } from '../embed-card/index.js'
+import { ApiEmbedPluginCard } from '../embed-card/index.ts'
 
 export const xyoEmbedStoryBase: Meta = {
   argTypes: {},

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

@@ -1,7 +1,8 @@
 import { Alert, AlertProps } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
+import React from 'react'
 
-import { useValidatePayload } from '../../contexts/index.js'
+import { useValidatePayload } from '../../contexts/index.ts'
 
 export const ValidatePayloadAlert: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
   const { validPayload, enabled, schema } = useValidatePayload()
@@ -9,7 +10,11 @@ export const ValidatePayloadAlert: React.FC<WithChildren<AlertProps>> = ({ child
   if (enabled && validPayload === false) {
     return (
       <Alert severity="error" title="Invalid Payload!" {...props}>
-        Payload schema claimed to be {schema} but failed to validate.
+        Payload schema claimed to be
+        {' '}
+        {schema}
+        {' '}
+        but failed to validate.
       </Alert>
     )
   }

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

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

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

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

package/src/contexts/EmbedPluginContext/{Context.tsx → Context.ts}

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

package/src/contexts/EmbedPluginContext/Provider.tsx

@@ -1,9 +1,9 @@
 import { WithChildren } from '@xylabs/react-shared'
 import { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { EmbedPluginContext } from './Context.js'
-import { EmbedPluginBase } from './State.js'
+import { EmbedPluginContext } from './Context.ts'
+import { EmbedPluginBase } from './State.ts'
 
 export type EmbedPluginProviderProps = EmbedPluginBase
 
@@ -24,6 +24,7 @@ export const EmbedPluginProvider: React.FC<WithChildren<EmbedPluginProviderProps
 
   return (
     <EmbedPluginContext.Provider
+      // eslint-disable-next-line @eslint-react/no-unstable-context-value
       value={{
         activePlugin,
         embedPluginConfig,

package/src/contexts/EmbedPluginContext/index.ts

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

package/src/contexts/EmbedPluginContext/{use.tsx → use.ts}

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

package/src/contexts/RefreshPayloadContext/{Context.tsx → Context.ts}

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

package/src/contexts/RefreshPayloadContext/Provider.tsx

@@ -1,7 +1,7 @@
 import { WithChildren } from '@xylabs/react-shared'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { RefreshPayloadContext } from './Context.js'
+import { RefreshPayloadContext } from './Context.ts'
 
 export interface RefreshPayloadProps {
   onRefresh?: () => void
@@ -12,6 +12,7 @@ export const RefreshPayloadProvider: React.FC<WithChildren<RefreshPayloadProps>>
   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 }}>
       {children}
     </RefreshPayloadContext.Provider>

package/src/contexts/RefreshPayloadContext/index.ts

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

package/src/contexts/RefreshPayloadContext/{use.tsx → use.ts}

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

package/src/contexts/ResolvePayloadContext/Context.ts

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

package/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -3,11 +3,11 @@ import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { WithChildren } from '@xylabs/react-shared'
 import { Huri } from '@xyo-network/huri'
 import { ModuleError, ModuleErrorSchema, Payload } from '@xyo-network/payload-model'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { useRefreshPayload } from '../RefreshPayloadContext/index.js'
-import { ResolvePayloadContext } from './Context.js'
-import { ResolvePayloadState } from './State.js'
+import { useRefreshPayload } from '../RefreshPayloadContext/index.ts'
+import { ResolvePayloadContext } from './Context.ts'
+import { ResolvePayloadState } from './State.ts'
 
 export type ResolvePayloadProviderProps = Omit<ResolvePayloadState, 'provided'>
 
@@ -17,6 +17,7 @@ export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProvide
   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)
@@ -28,7 +29,6 @@ export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProvide
   const [huriError, setHuriError] = useState<ModuleError>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (mounted) => {
       if (huri && !refreshPayload) {
         try {
@@ -59,6 +59,7 @@ 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 }}>
       {children}
     </ResolvePayloadContext.Provider>

package/src/contexts/ResolvePayloadContext/index.ts

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

package/src/contexts/ResolvePayloadContext/{use.tsx → use.ts}

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

package/src/contexts/ValidatePayloadContext/Context.ts

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

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

@@ -1,11 +1,12 @@
 import { Typography } from '@mui/material'
 import { Decorator, Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { EmbedPluginContext, EmbedPluginState } from '../EmbedPluginContext/index.js'
-import { RefreshPayloadProvider } from '../RefreshPayloadContext/index.js'
-import { ResolvePayloadContext, ResolvePayloadState } from '../ResolvePayloadContext/index.js'
-import { ValidatePayloadProvider, ValidatePayloadProviderProps } from './Provider.js'
-import { useValidatePayload } from './use.js'
+import { EmbedPluginContext, EmbedPluginState } from '../EmbedPluginContext/index.ts'
+import { RefreshPayloadProvider } from '../RefreshPayloadContext/index.ts'
+import { ResolvePayloadContext, ResolvePayloadState } from '../ResolvePayloadContext/index.ts'
+import { ValidatePayloadProvider, ValidatePayloadProviderProps } from './Provider.tsx'
+import { useValidatePayload } from './use.ts'
 
 const EmbedDecorator: Decorator<ValidatePayloadProviderPropsEx> = (Story, { args }) => {
   const { xyoEmbedPluginContext, resolvePayloadContext, ...props } = args
@@ -70,5 +71,4 @@ ValidationFailed.args = {
 
 export { Default, ValidationFailed, ValidationSucceeded }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/contexts/ValidatePayloadContext/Provider.tsx

@@ -2,10 +2,10 @@ import { Chip } from '@mui/material'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { WithChildren } from '@xylabs/react-shared'
 import { SchemaCache, SchemaNameToValidatorMap } from '@xyo-network/schema-cache'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { useResolvePayload } from '../ResolvePayloadContext/index.js'
-import { ValidatePayloadContext } from './Context.js'
+import { useResolvePayload } from '../ResolvePayloadContext/index.ts'
+import { ValidatePayloadContext } from './Context.ts'
 
 export interface ValidatePayloadProviderProps {
   // Opt-in flag to validate payloads for the plugin(s)
@@ -18,7 +18,6 @@ export const ValidatePayloadProvider: React.FC<WithChildren<ValidatePayloadProvi
   const [valid, setValid] = useState<boolean>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       if (payload && enabled) {
         await SchemaCache.instance.get(payload.schema)
@@ -36,10 +35,11 @@ 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 }}>
-      {enabled ?
-        <>{initialized ? children : <Chip label="Validating Payload..." />}</>
-      : children}
+      {enabled
+        ? <>{initialized ? children : <Chip label="Validating Payload..." />}</>
+        : children}
     </ValidatePayloadContext.Provider>
   )
 }

package/src/contexts/ValidatePayloadContext/index.ts

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

package/src/contexts/ValidatePayloadContext/{use.tsx → use.ts}

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

package/src/contexts/index.ts

@@ -1,4 +1,4 @@
-export * from './EmbedPluginContext/index.js'
-export * from './RefreshPayloadContext/index.js'
-export * from './ResolvePayloadContext/index.js'
-export * from './ValidatePayloadContext/index.js'
+export * from './EmbedPluginContext/index.ts'
+export * from './RefreshPayloadContext/index.ts'
+export * from './ResolvePayloadContext/index.ts'
+export * from './ValidatePayloadContext/index.ts'

package/src/index.ts

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

package/src/types/EmbedPluginProps.ts

@@ -1,6 +1,6 @@
 import { Payload } from '@xyo-network/payload-model'
 
-import { EmbedPluginBase, EmbedPluginVisibilityConfig } from '../contexts/index.js'
+import { EmbedPluginBase, EmbedPluginVisibilityConfig } from '../contexts/index.ts'
 
 export interface EmbedPluginProps extends EmbedPluginBase {
   hideElementsConfig?: EmbedPluginVisibilityConfig

package/src/types/index.ts

@@ -1 +1 @@
-export * from './EmbedPluginProps.js'
+export * from './EmbedPluginProps.ts'