@xyo-network/react-embed 2.27.23 → 2.27.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/XyoEmbedPlugin.d.ts.map +1 -1
- package/dist/cjs/components/XyoEmbedPlugin.js +2 -2
- package/dist/cjs/components/XyoEmbedPlugin.js.map +1 -1
- package/dist/cjs/components/XyoEmbedPluginProps.d.ts +1 -0
- package/dist/cjs/components/XyoEmbedPluginProps.d.ts.map +1 -1
- package/dist/cjs/components/embed-card/EmbedPluginContainer.d.ts +4 -1
- package/dist/cjs/components/embed-card/EmbedPluginContainer.d.ts.map +1 -1
- package/dist/cjs/components/embed-card/EmbedPluginContainer.js +6 -6
- package/dist/cjs/components/embed-card/EmbedPluginContainer.js.map +1 -1
- package/dist/cjs/components/embed-card/ValidatePayload.d.ts +5 -0
- package/dist/cjs/components/embed-card/ValidatePayload.d.ts.map +1 -0
- package/dist/cjs/components/embed-card/ValidatePayload.js +17 -0
- package/dist/cjs/components/embed-card/ValidatePayload.js.map +1 -0
- package/dist/cjs/components/embed-card/ValidatePlugins.d.ts.map +1 -1
- package/dist/cjs/components/embed-card/ValidatePlugins.js +1 -3
- package/dist/cjs/components/embed-card/ValidatePlugins.js.map +1 -1
- package/dist/cjs/components/embed-card/index.d.ts +1 -0
- package/dist/cjs/components/embed-card/index.d.ts.map +1 -1
- package/dist/cjs/components/embed-card/index.js +1 -0
- package/dist/cjs/components/embed-card/index.js.map +1 -1
- package/dist/cjs/components/embed-card/menu/EmbedMenu.d.ts +4 -0
- package/dist/cjs/components/embed-card/menu/EmbedMenu.d.ts.map +1 -0
- package/dist/cjs/components/embed-card/menu/EmbedMenu.js +23 -0
- package/dist/cjs/components/embed-card/menu/EmbedMenu.js.map +1 -0
- package/dist/cjs/components/embed-card/menu/JsonMenuItem.d.ts +4 -0
- package/dist/cjs/components/embed-card/menu/JsonMenuItem.d.ts.map +1 -0
- package/dist/cjs/components/embed-card/menu/JsonMenuItem.js +14 -0
- package/dist/cjs/components/embed-card/menu/JsonMenuItem.js.map +1 -0
- package/dist/cjs/components/embed-card/menu/index.d.ts +2 -0
- package/dist/cjs/components/embed-card/menu/index.d.ts.map +1 -0
- package/dist/cjs/components/embed-card/menu/index.js +5 -0
- package/dist/cjs/components/embed-card/menu/index.js.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Context.d.ts +4 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Context.d.ts.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Context.js +6 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Context.js.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Provider.d.ts +7 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Provider.d.ts.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Provider.js +32 -0
- package/dist/cjs/contexts/ValidatePayloadContext/Provider.js.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/State.d.ts +7 -0
- package/dist/cjs/contexts/ValidatePayloadContext/State.d.ts.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/State.js +3 -0
- package/dist/cjs/contexts/ValidatePayloadContext/State.js.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/index.d.ts +3 -0
- package/dist/cjs/contexts/ValidatePayloadContext/index.d.ts.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/index.js +6 -0
- package/dist/cjs/contexts/ValidatePayloadContext/index.js.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/use.d.ts +2 -0
- package/dist/cjs/contexts/ValidatePayloadContext/use.d.ts.map +1 -0
- package/dist/cjs/contexts/ValidatePayloadContext/use.js +8 -0
- package/dist/cjs/contexts/ValidatePayloadContext/use.js.map +1 -0
- package/dist/cjs/contexts/XyoEmbedPluginContext/Context.d.ts +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/Context.d.ts.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/Context.js +2 -2
- package/dist/cjs/contexts/XyoEmbedPluginContext/Context.js.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/Provider.d.ts.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/Provider.js +4 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/Provider.js.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/State.d.ts +3 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/State.d.ts.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/index.d.ts +2 -0
- package/dist/cjs/contexts/XyoEmbedPluginContext/index.d.ts.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/index.js +2 -0
- package/dist/cjs/contexts/XyoEmbedPluginContext/index.js.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/use.d.ts +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/use.d.ts.map +1 -1
- package/dist/cjs/contexts/XyoEmbedPluginContext/use.js +2 -8
- package/dist/cjs/contexts/XyoEmbedPluginContext/use.js.map +1 -1
- package/dist/cjs/contexts/index.d.ts +1 -0
- package/dist/cjs/contexts/index.d.ts.map +1 -1
- package/dist/cjs/contexts/index.js +1 -0
- package/dist/cjs/contexts/index.js.map +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/components/XyoEmbedPlugin.d.ts.map +1 -1
- package/dist/esm/components/XyoEmbedPlugin.js +4 -4
- package/dist/esm/components/XyoEmbedPlugin.js.map +1 -1
- package/dist/esm/components/XyoEmbedPluginProps.d.ts +1 -0
- package/dist/esm/components/XyoEmbedPluginProps.d.ts.map +1 -1
- package/dist/esm/components/embed-card/EmbedPluginContainer.d.ts +4 -1
- package/dist/esm/components/embed-card/EmbedPluginContainer.d.ts.map +1 -1
- package/dist/esm/components/embed-card/EmbedPluginContainer.js +7 -8
- package/dist/esm/components/embed-card/EmbedPluginContainer.js.map +1 -1
- package/dist/esm/components/embed-card/ValidatePayload.d.ts +5 -0
- package/dist/esm/components/embed-card/ValidatePayload.d.ts.map +1 -0
- package/dist/esm/components/embed-card/ValidatePayload.js +11 -0
- package/dist/esm/components/embed-card/ValidatePayload.js.map +1 -0
- package/dist/esm/components/embed-card/ValidatePlugins.d.ts.map +1 -1
- package/dist/esm/components/embed-card/ValidatePlugins.js +1 -3
- package/dist/esm/components/embed-card/ValidatePlugins.js.map +1 -1
- package/dist/esm/components/embed-card/index.d.ts +1 -0
- package/dist/esm/components/embed-card/index.d.ts.map +1 -1
- package/dist/esm/components/embed-card/index.js +1 -0
- package/dist/esm/components/embed-card/index.js.map +1 -1
- package/dist/esm/components/embed-card/menu/EmbedMenu.d.ts +4 -0
- package/dist/esm/components/embed-card/menu/EmbedMenu.d.ts.map +1 -0
- package/dist/esm/components/embed-card/menu/EmbedMenu.js +18 -0
- package/dist/esm/components/embed-card/menu/EmbedMenu.js.map +1 -0
- package/dist/esm/components/embed-card/menu/JsonMenuItem.d.ts +4 -0
- package/dist/esm/components/embed-card/menu/JsonMenuItem.d.ts.map +1 -0
- package/dist/esm/components/embed-card/menu/JsonMenuItem.js +9 -0
- package/dist/esm/components/embed-card/menu/JsonMenuItem.js.map +1 -0
- package/dist/esm/components/embed-card/menu/index.d.ts +2 -0
- package/dist/esm/components/embed-card/menu/index.d.ts.map +1 -0
- package/dist/esm/components/embed-card/menu/index.js +2 -0
- package/dist/esm/components/embed-card/menu/index.js.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/Context.d.ts +4 -0
- package/dist/esm/contexts/ValidatePayloadContext/Context.d.ts.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/Context.js +3 -0
- package/dist/esm/contexts/ValidatePayloadContext/Context.js.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/Provider.d.ts +7 -0
- package/dist/esm/contexts/ValidatePayloadContext/Provider.d.ts.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/Provider.js +27 -0
- package/dist/esm/contexts/ValidatePayloadContext/Provider.js.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/State.d.ts +7 -0
- package/dist/esm/contexts/ValidatePayloadContext/State.d.ts.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/State.js +2 -0
- package/dist/esm/contexts/ValidatePayloadContext/State.js.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/index.d.ts +3 -0
- package/dist/esm/contexts/ValidatePayloadContext/index.d.ts.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/index.js +3 -0
- package/dist/esm/contexts/ValidatePayloadContext/index.js.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/use.d.ts +2 -0
- package/dist/esm/contexts/ValidatePayloadContext/use.d.ts.map +1 -0
- package/dist/esm/contexts/ValidatePayloadContext/use.js +4 -0
- package/dist/esm/contexts/ValidatePayloadContext/use.js.map +1 -0
- package/dist/esm/contexts/XyoEmbedPluginContext/Context.d.ts +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/Context.d.ts.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/Context.js +2 -2
- package/dist/esm/contexts/XyoEmbedPluginContext/Context.js.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/Provider.d.ts.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/Provider.js +4 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/Provider.js.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/State.d.ts +3 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/State.d.ts.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/index.d.ts +2 -0
- package/dist/esm/contexts/XyoEmbedPluginContext/index.d.ts.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/index.js +2 -0
- package/dist/esm/contexts/XyoEmbedPluginContext/index.js.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/use.d.ts +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/use.d.ts.map +1 -1
- package/dist/esm/contexts/XyoEmbedPluginContext/use.js +2 -8
- package/dist/esm/contexts/XyoEmbedPluginContext/use.js.map +1 -1
- package/dist/esm/contexts/index.d.ts +1 -0
- package/dist/esm/contexts/index.d.ts.map +1 -1
- package/dist/esm/contexts/index.js +1 -0
- package/dist/esm/contexts/index.js.map +1 -1
- package/package.json +12 -11
- package/src/components/XyoEmbedPlugin.tsx +19 -8
- package/src/components/XyoEmbedPluginProps.ts +1 -0
- package/src/components/embed-card/EmbedPluginContainer.tsx +19 -17
- package/src/components/embed-card/ValidatePayload.tsx +18 -0
- package/src/components/embed-card/ValidatePlugins.tsx +3 -2
- package/src/components/embed-card/index.ts +1 -0
- package/src/components/embed-card/menu/EmbedMenu.tsx +36 -0
- package/src/components/embed-card/menu/JsonMenuItem.tsx +21 -0
- package/src/components/embed-card/menu/index.ts +1 -0
- package/src/contexts/ValidatePayloadContext/Context.ts +5 -0
- package/src/contexts/ValidatePayloadContext/Provider.stories.tsx +58 -0
- package/src/contexts/ValidatePayloadContext/Provider.tsx +42 -0
- package/src/contexts/ValidatePayloadContext/State.ts +7 -0
- package/src/contexts/ValidatePayloadContext/index.ts +2 -0
- package/src/contexts/ValidatePayloadContext/use.tsx +5 -0
- package/src/contexts/XyoEmbedPluginContext/Context.tsx +2 -2
- package/src/contexts/XyoEmbedPluginContext/Provider.tsx +6 -1
- package/src/contexts/XyoEmbedPluginContext/State.ts +3 -1
- package/src/contexts/XyoEmbedPluginContext/index.ts +2 -0
- package/src/contexts/XyoEmbedPluginContext/use.tsx +2 -10
- package/src/contexts/index.ts +1 -0
- package/dist/cjs/components/embed-card/EmbedCardEx.d.ts +0 -5
- package/dist/cjs/components/embed-card/EmbedCardEx.d.ts.map +0 -1
- package/dist/cjs/components/embed-card/EmbedCardEx.js +0 -28
- package/dist/cjs/components/embed-card/EmbedCardEx.js.map +0 -1
- package/dist/esm/components/embed-card/EmbedCardEx.d.ts +0 -5
- package/dist/esm/components/embed-card/EmbedCardEx.d.ts.map +0 -1
- package/dist/esm/components/embed-card/EmbedCardEx.js +0 -25
- package/dist/esm/components/embed-card/EmbedCardEx.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA"}
|
package/package.json
CHANGED
|
@@ -14,15 +14,16 @@
|
|
|
14
14
|
"@emotion/styled": "^11.10.0",
|
|
15
15
|
"@mui/icons-material": "^5.8.4",
|
|
16
16
|
"@mui/material": "^5.10.0",
|
|
17
|
-
"@xylabs/react-flexbox": "^2.14.
|
|
18
|
-
"@xylabs/react-shared": "^2.14.
|
|
17
|
+
"@xylabs/react-flexbox": "^2.14.13",
|
|
18
|
+
"@xylabs/react-shared": "^2.14.13",
|
|
19
|
+
"@xylabs/sdk-js": "^2.6.5",
|
|
19
20
|
"@xyo-network/api": "^2.25.2",
|
|
20
21
|
"@xyo-network/payload": "^2.25.2",
|
|
21
|
-
"@xyo-network/react-
|
|
22
|
-
"@xyo-network/react-
|
|
23
|
-
"@xyo-network/react-
|
|
24
|
-
"@xyo-network/react-
|
|
25
|
-
"@xyo-network/
|
|
22
|
+
"@xyo-network/react-auth-service": "^2.27.28",
|
|
23
|
+
"@xyo-network/react-payload-plugin": "^2.27.28",
|
|
24
|
+
"@xyo-network/react-shared": "^2.27.28",
|
|
25
|
+
"@xyo-network/react-webapp": "^2.27.28",
|
|
26
|
+
"@xyo-network/utils": "^2.25.2",
|
|
26
27
|
"react": "^18.2.0",
|
|
27
28
|
"react-dom": "^18.2.0",
|
|
28
29
|
"tslib": "^2.4.0"
|
|
@@ -30,9 +31,9 @@
|
|
|
30
31
|
"description": "Common React library for all XYO projects that use React",
|
|
31
32
|
"devDependencies": {
|
|
32
33
|
"@storybook/react": "^6.5.10",
|
|
33
|
-
"@xylabs/tsconfig-dom": "^2.5.
|
|
34
|
-
"@xyo-network/react-aggregate-price-plugin": "^2.27.
|
|
35
|
-
"@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.
|
|
34
|
+
"@xylabs/tsconfig-dom": "^2.5.97",
|
|
35
|
+
"@xyo-network/react-aggregate-price-plugin": "^2.27.27",
|
|
36
|
+
"@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.28",
|
|
36
37
|
"react-router-dom": "^6.3.0"
|
|
37
38
|
},
|
|
38
39
|
"browser": "dist/esm/index.js",
|
|
@@ -77,5 +78,5 @@
|
|
|
77
78
|
},
|
|
78
79
|
"sideEffects": false,
|
|
79
80
|
"types": "dist/esm/index.d.ts",
|
|
80
|
-
"version": "2.27.
|
|
81
|
+
"version": "2.27.26"
|
|
81
82
|
}
|
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
import { ListModeProvider } from '@xyo-network/react-shared'
|
|
2
2
|
|
|
3
|
-
import { XyoEmbedPluginProvider } from '../contexts'
|
|
4
|
-
import { EmbedPluginContainer, ValidatePlugins } from './embed-card'
|
|
3
|
+
import { ValidatePayloadProvider, XyoEmbedPluginProvider } from '../contexts'
|
|
4
|
+
import { EmbedPluginContainer, ValidatePayload, ValidatePlugins } from './embed-card'
|
|
5
5
|
import { XyoEmbedPluginProps } from './XyoEmbedPluginProps'
|
|
6
6
|
|
|
7
|
-
export const XyoEmbedPlugin: React.FC<XyoEmbedPluginProps> = ({
|
|
7
|
+
export const XyoEmbedPlugin: React.FC<XyoEmbedPluginProps> = ({
|
|
8
|
+
validateSchema,
|
|
9
|
+
plugins = [],
|
|
10
|
+
huri,
|
|
11
|
+
refreshTitle = '',
|
|
12
|
+
timestampLabel = 'Data From',
|
|
13
|
+
...props
|
|
14
|
+
}) => {
|
|
8
15
|
return (
|
|
9
16
|
<XyoEmbedPluginProvider refreshTitle={refreshTitle} timestampLabel={timestampLabel} plugins={plugins} huri={huri}>
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
17
|
+
<ValidatePayloadProvider enabled={validateSchema}>
|
|
18
|
+
<ListModeProvider>
|
|
19
|
+
<ValidatePlugins>
|
|
20
|
+
<ValidatePayload>
|
|
21
|
+
<EmbedPluginContainer {...props} />
|
|
22
|
+
</ValidatePayload>
|
|
23
|
+
</ValidatePlugins>
|
|
24
|
+
</ListModeProvider>
|
|
25
|
+
</ValidatePayloadProvider>
|
|
15
26
|
</XyoEmbedPluginProvider>
|
|
16
27
|
)
|
|
17
28
|
}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import RefreshIcon from '@mui/icons-material/Refresh'
|
|
2
|
-
import { Avatar, Card, CardContent, CardHeader, CardProps,
|
|
3
|
-
import { FlexGrowRow } from '@xylabs/react-flexbox'
|
|
4
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
5
|
-
import { Fragment } from 'react'
|
|
2
|
+
import { Avatar, Card, CardContent, CardHeader, CardProps, Chip, Theme } from '@mui/material'
|
|
3
|
+
import { FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
|
|
6
4
|
|
|
7
5
|
import { useXyoEmbedPluginState } from '../../contexts'
|
|
8
6
|
import { EmbedRenderSelect, ListModeSelectFormControl } from '../controls'
|
|
9
7
|
import { RenderComponent } from '../RenderComponent'
|
|
8
|
+
import { EmbedMenu } from './menu'
|
|
10
9
|
|
|
11
|
-
export
|
|
12
|
-
|
|
10
|
+
export interface EmbedPluginContainerProps extends CardProps {
|
|
11
|
+
hideEmbedMenu?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const EmbedPluginContainer: React.FC<EmbedPluginContainerProps> = ({ hideEmbedMenu, ...props }) => {
|
|
15
|
+
const { activePlugin, payload, timestampLabel, refreshHuri, plugins } = useXyoEmbedPluginState()
|
|
13
16
|
return (
|
|
14
17
|
<Card elevation={3} variant="elevation" {...props}>
|
|
15
18
|
<CardHeader
|
|
@@ -20,18 +23,17 @@ export const EmbedPluginContainer: React.FC<CardProps> = (props) => {
|
|
|
20
23
|
</Avatar>
|
|
21
24
|
}
|
|
22
25
|
action={
|
|
23
|
-
<
|
|
26
|
+
<FlexRow>
|
|
24
27
|
{payload?.timestamp ? (
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
) :
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</Fragment>
|
|
28
|
+
<Chip
|
|
29
|
+
avatar={<RefreshIcon />}
|
|
30
|
+
clickable
|
|
31
|
+
onClick={refreshHuri}
|
|
32
|
+
label={`${timestampLabel} ${new Date(payload.timestamp).toLocaleString()}`}
|
|
33
|
+
/>
|
|
34
|
+
) : null}
|
|
35
|
+
{hideEmbedMenu ? null : <EmbedMenu />}
|
|
36
|
+
</FlexRow>
|
|
35
37
|
}
|
|
36
38
|
title={activePlugin?.name}
|
|
37
39
|
/>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Alert, AlertProps, AlertTitle } from '@mui/material'
|
|
2
|
+
import { WithChildren } from '@xylabs/react-shared'
|
|
3
|
+
|
|
4
|
+
import { useValidatePayload } from '../../contexts'
|
|
5
|
+
|
|
6
|
+
export const ValidatePayload: React.FC<WithChildren<AlertProps>> = ({ children, ...props }) => {
|
|
7
|
+
const { validPayload, enabled, schema } = useValidatePayload()
|
|
8
|
+
|
|
9
|
+
if (enabled && validPayload === false) {
|
|
10
|
+
return (
|
|
11
|
+
<Alert severity="error" {...props}>
|
|
12
|
+
<AlertTitle>Invalid Payload!</AlertTitle>Payload schema claimed to be {schema} but failed to validate.
|
|
13
|
+
</Alert>
|
|
14
|
+
)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return <>{children}</>
|
|
18
|
+
}
|
|
@@ -5,13 +5,14 @@ import { useXyoEmbedPluginState } from '../../contexts'
|
|
|
5
5
|
|
|
6
6
|
export const ValidatePlugins: React.FC<WithChildren> = ({ children }) => {
|
|
7
7
|
const { payload, plugins } = useXyoEmbedPluginState()
|
|
8
|
+
|
|
8
9
|
if (payload && plugins?.length === 0) {
|
|
9
10
|
return (
|
|
10
11
|
<Alert severity="warning">
|
|
11
12
|
<AlertTitle>Missing plugins!</AlertTitle>Payload found but no plugins were present.
|
|
12
13
|
</Alert>
|
|
13
14
|
)
|
|
14
|
-
} else {
|
|
15
|
-
return <>{children}</>
|
|
16
15
|
}
|
|
16
|
+
|
|
17
|
+
return <>{children}</>
|
|
17
18
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import MoreVertIcon from '@mui/icons-material/MoreVert'
|
|
2
|
+
import { IconButton, IconButtonProps, Menu } from '@mui/material'
|
|
3
|
+
import { useState } from 'react'
|
|
4
|
+
|
|
5
|
+
import { JsonMenuItem } from './JsonMenuItem'
|
|
6
|
+
|
|
7
|
+
export const EmbedMenu: React.FC<IconButtonProps> = (props) => {
|
|
8
|
+
// TODO - link to explore website
|
|
9
|
+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
|
10
|
+
const open = Boolean(anchorEl)
|
|
11
|
+
|
|
12
|
+
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
13
|
+
setAnchorEl(event.currentTarget)
|
|
14
|
+
}
|
|
15
|
+
const handleClose = () => {
|
|
16
|
+
setAnchorEl(null)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<IconButton onClick={handleClick} {...props}>
|
|
22
|
+
<MoreVertIcon />
|
|
23
|
+
</IconButton>
|
|
24
|
+
<Menu
|
|
25
|
+
anchorEl={anchorEl}
|
|
26
|
+
open={open}
|
|
27
|
+
onClose={handleClose}
|
|
28
|
+
marginThreshold={33}
|
|
29
|
+
PaperProps={{ variant: 'elevation' }}
|
|
30
|
+
MenuListProps={{ dense: true }}
|
|
31
|
+
>
|
|
32
|
+
<JsonMenuItem />
|
|
33
|
+
</Menu>
|
|
34
|
+
</>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
|
|
2
|
+
import { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'
|
|
3
|
+
|
|
4
|
+
import { useXyoEmbedPluginState } from '../../../contexts'
|
|
5
|
+
|
|
6
|
+
export const JsonMenuItem: React.FC<MenuItemProps> = (props) => {
|
|
7
|
+
const { huri } = useXyoEmbedPluginState()
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
{huri ? (
|
|
12
|
+
<MenuItem title="Source Payload JSON" onClick={() => window.open(huri, '_blank')} {...props}>
|
|
13
|
+
<ListItemText sx={{ mr: 1 }}>JSON</ListItemText>
|
|
14
|
+
<ListItemIcon sx={{ justifyContent: 'end' }}>
|
|
15
|
+
<OpenInNewIcon fontSize="small" />
|
|
16
|
+
</ListItemIcon>
|
|
17
|
+
</MenuItem>
|
|
18
|
+
) : null}
|
|
19
|
+
</>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './EmbedMenu'
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Typography } from '@mui/material'
|
|
2
|
+
import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
|
|
3
|
+
|
|
4
|
+
import { XyoEmbedPluginContext, XyoEmbedPluginState } from '../XyoEmbedPluginContext'
|
|
5
|
+
import { ValidatePayloadProvider, ValidatePayloadProviderProps } from './Provider'
|
|
6
|
+
import { useValidatePayload } from './use'
|
|
7
|
+
|
|
8
|
+
const EmbedDecorator: DecoratorFn = (Story, { args }) => {
|
|
9
|
+
const { xyoEmbedPluginContext, ...props } = args
|
|
10
|
+
return (
|
|
11
|
+
<XyoEmbedPluginContext.Provider value={xyoEmbedPluginContext}>
|
|
12
|
+
<Story {...props} />
|
|
13
|
+
</XyoEmbedPluginContext.Provider>
|
|
14
|
+
)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const StorybookEntry: Meta = {
|
|
18
|
+
component: ValidatePayloadProvider,
|
|
19
|
+
decorators: [EmbedDecorator],
|
|
20
|
+
title: 'embed/ValidatePayloadProvider',
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const ValidatePayloadState = () => {
|
|
24
|
+
const state = useValidatePayload()
|
|
25
|
+
return <pre>{JSON.stringify(state, null, 2)}</pre>
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
interface ValidatePayloadProviderPropsEx extends ValidatePayloadProviderProps {
|
|
29
|
+
xyoEmbedPluginContext: XyoEmbedPluginState
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const Template: ComponentStory<React.FC<ValidatePayloadProviderPropsEx>> = (props) => {
|
|
33
|
+
return (
|
|
34
|
+
<ValidatePayloadProvider {...props}>
|
|
35
|
+
<Typography>State:</Typography>
|
|
36
|
+
<ValidatePayloadState />
|
|
37
|
+
<Typography>Children</Typography>
|
|
38
|
+
</ValidatePayloadProvider>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const InvalidPayload = { schema: 'network.xyo.schema' }
|
|
43
|
+
const ValidPayload = { definition: { $id: 'test.schema' }, schema: 'network.xyo.schema' }
|
|
44
|
+
const XyoEmbedPluginProviderDefaultValue = { provided: true }
|
|
45
|
+
|
|
46
|
+
const Default = Template.bind({})
|
|
47
|
+
Default.args = { xyoEmbedPluginContext: XyoEmbedPluginProviderDefaultValue }
|
|
48
|
+
|
|
49
|
+
const ValidationSucceeded = Template.bind({})
|
|
50
|
+
ValidationSucceeded.args = { enabled: true, xyoEmbedPluginContext: { payload: ValidPayload, ...XyoEmbedPluginProviderDefaultValue } }
|
|
51
|
+
|
|
52
|
+
const ValidationFailed = Template.bind({})
|
|
53
|
+
ValidationFailed.args = { enabled: true, xyoEmbedPluginContext: { payload: InvalidPayload, ...XyoEmbedPluginProviderDefaultValue } }
|
|
54
|
+
|
|
55
|
+
export { Default, ValidationFailed, ValidationSucceeded }
|
|
56
|
+
|
|
57
|
+
// eslint-disable-next-line import/no-default-export
|
|
58
|
+
export default StorybookEntry
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Chip } from '@mui/material'
|
|
2
|
+
import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
|
|
3
|
+
import { XyoSchemaCache, XyoSchemaNameToValidatorMap } from '@xyo-network/utils'
|
|
4
|
+
import { useState } from 'react'
|
|
5
|
+
|
|
6
|
+
import { useXyoEmbedPluginState } from '../XyoEmbedPluginContext'
|
|
7
|
+
import { ValidatePayloadContext } from './Context'
|
|
8
|
+
|
|
9
|
+
export interface ValidatePayloadProviderProps {
|
|
10
|
+
// Opt-in flag to validate payloads for the plugin(s)
|
|
11
|
+
enabled?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const ValidatePayloadProvider: React.FC<WithChildren<ValidatePayloadProviderProps>> = ({ children, enabled = false }) => {
|
|
15
|
+
const { payload } = useXyoEmbedPluginState()
|
|
16
|
+
const [initialized, setInitialized] = useState(false)
|
|
17
|
+
const [valid, setValid] = useState<boolean>()
|
|
18
|
+
|
|
19
|
+
useAsyncEffect(
|
|
20
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
21
|
+
async () => {
|
|
22
|
+
if (payload && enabled) {
|
|
23
|
+
await XyoSchemaCache.instance.get(payload.schema)
|
|
24
|
+
|
|
25
|
+
const possibleKnownSchema = payload.schema as keyof XyoSchemaNameToValidatorMap
|
|
26
|
+
|
|
27
|
+
if (XyoSchemaCache.instance.validators[possibleKnownSchema]) {
|
|
28
|
+
const validator = XyoSchemaCache.instance.validators[possibleKnownSchema]
|
|
29
|
+
setValid(validator?.(payload))
|
|
30
|
+
}
|
|
31
|
+
setInitialized(true)
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
[payload, enabled],
|
|
35
|
+
)
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<ValidatePayloadContext.Provider value={{ enabled, provided: true, schema: payload?.schema, validPayload: valid }}>
|
|
39
|
+
{enabled ? <>{initialized ? children : <Chip label="Validating Payload..." />}</> : children}
|
|
40
|
+
</ValidatePayloadContext.Provider>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createContextEx } from '@xyo-network/react-shared'
|
|
2
2
|
|
|
3
3
|
import { XyoEmbedPluginState } from './State'
|
|
4
4
|
|
|
5
|
-
export const XyoEmbedPluginContext =
|
|
5
|
+
export const XyoEmbedPluginContext = createContextEx<XyoEmbedPluginState>()
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
|
|
2
2
|
import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
|
|
3
|
+
import { delay } from '@xylabs/sdk-js'
|
|
3
4
|
import { XyoApiError } from '@xyo-network/api'
|
|
4
5
|
import { Huri, XyoPayload } from '@xyo-network/payload'
|
|
5
6
|
import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
|
|
@@ -37,6 +38,8 @@ export const XyoEmbedPluginProvider: React.FC<WithChildren<XyoEmbedPluginProvide
|
|
|
37
38
|
try {
|
|
38
39
|
const huriInstance = new Huri(huri)
|
|
39
40
|
const result = await huriInstance.fetch()
|
|
41
|
+
// ensure the busy state can stay for a moment to avoid flashing too quickly
|
|
42
|
+
await delay(500)
|
|
40
43
|
|
|
41
44
|
if (mounted()) {
|
|
42
45
|
setNotFound(result === null)
|
|
@@ -56,7 +59,9 @@ export const XyoEmbedPluginProvider: React.FC<WithChildren<XyoEmbedPluginProvide
|
|
|
56
59
|
}
|
|
57
60
|
|
|
58
61
|
return (
|
|
59
|
-
<XyoEmbedPluginContext.Provider
|
|
62
|
+
<XyoEmbedPluginContext.Provider
|
|
63
|
+
value={{ activePlugin, huri, payload, provided: true, refreshHuri, refreshTitle, setActivePlugin, timestampLabel }}
|
|
64
|
+
>
|
|
60
65
|
<ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
|
|
61
66
|
<XyoApiErrorRender apiError={huriApiError} busy={Boolean(!refreshPayload && payload)} {...props}>
|
|
62
67
|
<FlexCol>{children}</FlexCol>
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { XyoPayload } from '@xyo-network/payload'
|
|
2
2
|
import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
|
|
3
|
+
import { ContextExState } from '@xyo-network/react-shared'
|
|
3
4
|
import { Dispatch, SetStateAction } from 'react'
|
|
4
5
|
|
|
5
|
-
export interface XyoEmbedPluginState {
|
|
6
|
+
export interface XyoEmbedPluginState extends ContextExState {
|
|
6
7
|
activePlugin?: XyoPayloadRenderPlugin
|
|
7
8
|
setActivePlugin?: Dispatch<SetStateAction<XyoPayloadRenderPlugin | undefined>>
|
|
8
9
|
payload?: XyoPayload
|
|
9
10
|
plugins?: XyoPayloadRenderPlugin[]
|
|
10
11
|
refreshHuri?: () => void
|
|
12
|
+
huri?: string
|
|
11
13
|
refreshTitle?: string
|
|
12
14
|
timestampLabel?: string
|
|
13
15
|
}
|
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useContextEx } from '@xyo-network/react-shared'
|
|
2
2
|
|
|
3
3
|
import { XyoEmbedPluginContext } from './Context'
|
|
4
4
|
|
|
5
|
-
export const useXyoEmbedPluginState = () =>
|
|
6
|
-
const context = useContext(XyoEmbedPluginContext)
|
|
7
|
-
|
|
8
|
-
if (context === undefined) {
|
|
9
|
-
console.warn('useXyoEmbedPluginState must be used within an XyoEmbedPluginContext')
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
return context
|
|
13
|
-
}
|
|
5
|
+
export const useXyoEmbedPluginState = () => useContextEx(XyoEmbedPluginContext, 'XyoEmbedPlugin', true)
|
package/src/contexts/index.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedCardEx.d.ts","sourceRoot":"","sources":["../../../../src/components/embed-card/EmbedCardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAkB,MAAM,eAAe,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAmBzD,CAAA"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.EmbedCardEx = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const material_1 = require("@mui/material");
|
|
7
|
-
const react_app_settings_1 = require("@xyo-network/react-app-settings");
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const EmbedCardEx = (_a) => {
|
|
10
|
-
var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
|
|
11
|
-
const { darkMode } = (0, react_app_settings_1.useAppSettings)();
|
|
12
|
-
const cardProps = (0, react_1.useCallback)(() => {
|
|
13
|
-
if (darkMode) {
|
|
14
|
-
return props;
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
const lightModeOverrides = {
|
|
18
|
-
sx: {
|
|
19
|
-
bgcolor: props.elevation ? '#F6F5FA' : 'inherit',
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
return Object.assign(Object.assign({}, props), lightModeOverrides);
|
|
23
|
-
}
|
|
24
|
-
}, [darkMode, props]);
|
|
25
|
-
return (0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({}, cardProps(), { children: children }));
|
|
26
|
-
};
|
|
27
|
-
exports.EmbedCardEx = EmbedCardEx;
|
|
28
|
-
//# sourceMappingURL=EmbedCardEx.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedCardEx.js","sourceRoot":"","sources":["../../../../src/components/embed-card/EmbedCardEx.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA+D;AAE/D,wEAAgE;AAChE,iCAAmC;AAE5B,MAAM,WAAW,GAAsC,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IACjF,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,mCAAc,GAAE,CAAA;IACrC,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACjC,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAK,CAAA;SACb;aAAM;YACL,MAAM,kBAAkB,GAA2B;gBACjD,EAAE,EAAE;oBACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBACjD;aACF,CAAA;YACD,uCACK,KAAK,GACL,kBAAkB,EACtB;SACF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAErB,OAAO,uBAAC,eAAI,oBAAK,SAAS,EAAE,cAAG,QAAQ,IAAQ,CAAA;AACjD,CAAC,CAAA;AAnBY,QAAA,WAAW,eAmBvB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedCardEx.d.ts","sourceRoot":"","sources":["../../../../src/components/embed-card/EmbedCardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAkB,MAAM,eAAe,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAmBzD,CAAA"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Card } from '@mui/material';
|
|
3
|
-
import { useAppSettings } from '@xyo-network/react-app-settings';
|
|
4
|
-
import { useCallback } from 'react';
|
|
5
|
-
export const EmbedCardEx = ({ children, ...props }) => {
|
|
6
|
-
const { darkMode } = useAppSettings();
|
|
7
|
-
const cardProps = useCallback(() => {
|
|
8
|
-
if (darkMode) {
|
|
9
|
-
return props;
|
|
10
|
-
}
|
|
11
|
-
else {
|
|
12
|
-
const lightModeOverrides = {
|
|
13
|
-
sx: {
|
|
14
|
-
bgcolor: props.elevation ? '#F6F5FA' : 'inherit',
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
return {
|
|
18
|
-
...props,
|
|
19
|
-
...lightModeOverrides,
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
}, [darkMode, props]);
|
|
23
|
-
return _jsx(Card, { ...cardProps(), children: children });
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=EmbedCardEx.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedCardEx.js","sourceRoot":"","sources":["../../../../src/components/embed-card/EmbedCardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAA6B,MAAM,eAAe,CAAA;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAsC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvF,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAA;IACrC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAK,CAAA;SACb;aAAM;YACL,MAAM,kBAAkB,GAA2B;gBACjD,EAAE,EAAE;oBACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBACjD;aACF,CAAA;YACD,OAAO;gBACL,GAAG,KAAK;gBACR,GAAG,kBAAkB;aACtB,CAAA;SACF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAErB,OAAO,KAAC,IAAI,OAAK,SAAS,EAAE,YAAG,QAAQ,GAAQ,CAAA;AACjD,CAAC,CAAA"}
|