@xyo-network/react-schema 2.25.18 → 2.25.21

package/dist/esm/components/Property/SchemaProperty.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PropertyProps } from '@xyo-network/react-property';
+export interface SchemaPropertyProps extends PropertyProps {
+    value?: string;
+    viewSchemaUrl?: string;
+}
+export declare const SchemaProperty: React.FC<SchemaPropertyProps>;

package/dist/esm/components/Property/SchemaProperty.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NewReleasesIcon from '@mui/icons-material/NewReleases';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import { IconButton } from '@mui/material';
+import { LinkEx, useAsyncEffect } from '@xylabs/sdk-react';
+import { Property, PropertyValue } from '@xyo-network/react-property';
+import { XyoSchemaCache } from '@xyo-network/utils';
+import { useState } from 'react';
+const useResolveSchema = (schema) => {
+    const [entry, setEntry] = useState();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+        if (schema) {
+            const entry = await XyoSchemaCache.instance.get(schema);
+            if (mounted()) {
+                setEntry(entry);
+            }
+        }
+    }, [schema]);
+    return entry;
+};
+export const SchemaProperty = ({ value, viewSchemaUrl = 'https://explore.xyo.network/' }) => {
+    const resolvedSchema = useResolveSchema(value);
+    return (_jsxs(Property, { flexGrow: 1, title: "Schema", value: value, tip: "Schema sent with the payload", children: [value ? (resolvedSchema === null ? (_jsx(IconButton, { rel: "noopener noreferrer", size: "small", target: "_blank", href: `${viewSchemaUrl}${value}`, children: _jsx(NewReleasesIcon, { color: "error", fontSize: "inherit" }) })) : resolvedSchema === undefined ? (_jsx(IconButton, { rel: "noopener noreferrer", size: "small", target: "_blank", href: `${viewSchemaUrl}${value}`, children: _jsx(NewReleasesIcon, { color: "disabled", fontSize: "inherit" }) })) : (_jsx(IconButton, { rel: "noopener noreferrer", size: "small", target: "_blank", href: resolvedSchema?.huri?.href ?? '', children: _jsx(VerifiedIcon, { color: "success", fontSize: "inherit" }) }))) : null, value ? (_jsx(LinkEx, { marginX: 1, flexGrow: 1, alignItems: "center", href: `${viewSchemaUrl}${value}`, rel: "noopener noreferrer", display: "flex", children: _jsx(PropertyValue, { value: value, title: "view schema in new window" }) })) : null, value ? (_jsx(LinkEx, { marginX: 1, alignItems: "center", href: `${viewSchemaUrl}${value}`, target: "_blank", rel: "noopener noreferrer", display: "flex", children: _jsx(OpenInNewIcon, { fontSize: "inherit" }) })) : null] }));
+};
+//# sourceMappingURL=SchemaProperty.js.map

package/dist/esm/components/Property/SchemaProperty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaProperty.js","sourceRoot":"","sources":["../../../../src/components/Property/SchemaProperty.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Property/index.d.ts

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

package/dist/esm/components/Property/index.js

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

package/dist/esm/components/Property/index.js.map

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

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

@@ -1 +1,2 @@
+export * from './Property';
 export * from './SelectEx';

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
+export * from './Property';
 export * from './SelectEx';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -16,10 +16,10 @@
     "@xylabs/sdk-react": "^2.12.8",
     "@xyo-network/api": "^2.20.33",
     "@xyo-network/core": "^2.20.33",
-    "@xyo-network/react-archive": "^2.25.18",
-    "@xyo-network/react-archivist-api": "^2.25.18",
-    "@xyo-network/react-shared": "^2.25.18",
-    "@xyo-network/react-theme": "^2.25.18",
+    "@xyo-network/react-archive": "^2.25.21",
+    "@xyo-network/react-archivist-api": "^2.25.21",
+    "@xyo-network/react-shared": "^2.25.21",
+    "@xyo-network/react-theme": "^2.25.21",
     "@xyo-network/utils": "^2.20.33",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
@@ -104,6 +104,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.18",
+  "version": "2.25.21",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Property/SchemaProperty.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, Meta } from '@storybook/react'
+
+import { appThemeDecorator } from '../../.storybook'
+import { SchemaProperty } from './SchemaProperty'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  args: {},
+  component: SchemaProperty,
+  decorators: [appThemeDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Schema/SchemaProperty',
+}
+
+const Template: ComponentStory<typeof SchemaProperty> = (args) => <SchemaProperty {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithVerfiedValue = Template.bind({})
+WithVerfiedValue.args = { value: 'network.xyo.schema' }
+
+const WithUnverfiedValue = Template.bind({})
+WithUnverfiedValue.args = { value: 'network.xyo.blahblah' }
+
+export { Default, WithUnverfiedValue, WithVerfiedValue }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Property/SchemaProperty.tsx

@@ -0,0 +1,63 @@
+import NewReleasesIcon from '@mui/icons-material/NewReleases'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import VerifiedIcon from '@mui/icons-material/Verified'
+import { IconButton } from '@mui/material'
+import { LinkEx, useAsyncEffect } from '@xylabs/sdk-react'
+import { Property, PropertyProps, PropertyValue } from '@xyo-network/react-property'
+import { XyoSchemaCache, XyoSchemaCacheEntry } from '@xyo-network/utils'
+import { useState } from 'react'
+
+export interface SchemaPropertyProps extends PropertyProps {
+  value?: string
+  viewSchemaUrl?: string
+}
+
+const useResolveSchema = (schema?: string) => {
+  const [entry, setEntry] = useState<XyoSchemaCacheEntry | null>()
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (schema) {
+        const entry = await XyoSchemaCache.instance.get(schema)
+        if (mounted()) {
+          setEntry(entry)
+        }
+      }
+    },
+    [schema]
+  )
+  return entry
+}
+
+export const SchemaProperty: React.FC<SchemaPropertyProps> = ({ value, viewSchemaUrl = 'https://explore.xyo.network/' }) => {
+  const resolvedSchema = useResolveSchema(value)
+  return (
+    <Property flexGrow={1} title="Schema" value={value} tip="Schema sent with the payload">
+      {value ? (
+        resolvedSchema === null ? (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={`${viewSchemaUrl}${value}`}>
+            <NewReleasesIcon color="error" fontSize="inherit" />
+          </IconButton>
+        ) : resolvedSchema === undefined ? (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={`${viewSchemaUrl}${value}`}>
+            <NewReleasesIcon color="disabled" fontSize="inherit" />
+          </IconButton>
+        ) : (
+          <IconButton rel="noopener noreferrer" size="small" target="_blank" href={resolvedSchema?.huri?.href ?? ''}>
+            <VerifiedIcon color="success" fontSize="inherit" />
+          </IconButton>
+        )
+      ) : null}
+      {value ? (
+        <LinkEx marginX={1} flexGrow={1} alignItems="center" href={`${viewSchemaUrl}${value}`} rel="noopener noreferrer" display="flex">
+          <PropertyValue value={value} title="view schema in new window" />
+        </LinkEx>
+      ) : null}
+      {value ? (
+        <LinkEx marginX={1} alignItems="center" href={`${viewSchemaUrl}${value}`} target="_blank" rel="noopener noreferrer" display="flex">
+          <OpenInNewIcon fontSize="inherit" />
+        </LinkEx>
+      ) : null}
+    </Property>
+  )
+}

package/src/components/Property/index.ts

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

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './Property'
 export * from './SelectEx'