@xyo-network/react-node 2.40.21 → 2.40.23

package/dist/esm/components/Node.js

@@ -4,6 +4,6 @@ import { FlexCol } from '@xylabs/react-flexbox';
 import { useNode } from '../contexts';
 export const NodeBox = (props) => {
     const [node] = useNode();
-    return (_jsx(FlexCol, { ...props, children: _jsx(Typography, { children: JSON.stringify(node?.registered()) }) }));
+    return (_jsx(FlexCol, { ...props, children: _jsx(Typography, { children: JSON.stringify(node?.description(), null, 2) }) }));
 };
 //# sourceMappingURL=Node.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../src/components/Node.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,EAAE,CAAA;IACxB,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,UAAU,cAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,GAAc,GACrD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../src/components/Node.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,EAAE,CAAA;IACxB,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,UAAU,cAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,GAAc,GAC/D,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DrawerProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+export interface NodeDrawerProps extends WithChildren, Omit<DrawerProps, 'open'> {
+}
+export declare const NodeDrawer: React.FC<NodeDrawerProps>;
+//# sourceMappingURL=NodeDrawer.d.ts.map

package/dist/esm/components/NodeDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/NodeDrawer.tsx"],"names":[],"mappings":";AACA,OAAO,EAA6B,WAAW,EAAc,MAAM,eAAe,CAAA;AAElF,OAAO,EAAkB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAOnE,MAAM,WAAW,eAAgB,SAAQ,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;CAAG;AAEnF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BhD,CAAA"}

package/dist/esm/components/NodeDrawer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/Close';
+import { ClickAwayListener, Drawer, IconButton } from '@mui/material';
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox';
+import { useAsyncEffect } from '@xylabs/react-shared';
+import { useState } from 'react';
+import { useNode, useNodeDrawer } from '../contexts';
+import { ModuleDescriptionBox } from './render';
+export const NodeDrawer = ({ children, ...props }) => {
+    const { open, setOpen } = useNodeDrawer();
+    const [node] = useNode();
+    const [moduleDescription, setModuleDescription] = useState();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+        if (node) {
+            const nodeDescription = await node.description();
+            setModuleDescription(nodeDescription);
+        }
+    }, [node]);
+    return (_jsx(Drawer, { open: open ?? false, anchor: "right", ...props, children: _jsx(ClickAwayListener, { onClickAway: () => setOpen?.(false), children: _jsxs(FlexGrowCol, { role: "presentation", justifyContent: "start", p: 2, rowGap: 2, minWidth: "33vw", children: [_jsx(FlexRow, { alignContent: "start", justifyContent: "start", width: "100%", children: _jsx(IconButton, { onClick: () => setOpen?.(false), children: _jsx(CloseIcon, {}) }) }), _jsx(ModuleDescriptionBox, { moduleDescription: moduleDescription }), children] }) }) }));
+};
+//# sourceMappingURL=NodeDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDrawer.js","sourceRoot":"","sources":["../../../src/components/NodeDrawer.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAe,UAAU,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAgB,MAAM,sBAAsB,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAI/C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9E,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,EAAE,CAAA;IACxB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAE/E,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,IAAI,EAAE;YACR,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;YAChD,oBAAoB,CAAC,eAAe,CAAC,CAAA;SACtC;IACH,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,MAAM,EAAC,OAAO,KAAK,KAAK,YACnD,KAAC,iBAAiB,IAAC,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,YACpD,MAAC,WAAW,IAAC,IAAI,EAAC,cAAc,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,aACtF,KAAC,OAAO,IAAC,YAAY,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,YAC/D,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,YACzC,KAAC,SAAS,KAAG,GACF,GACL,EACV,KAAC,oBAAoB,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,EAC7D,QAAQ,IACG,GACI,GACb,CACV,CAAA;AACH,CAAC,CAAA"}

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

@@ -1 +1,3 @@
+export * from './Node';
+export * from './NodeDrawer';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
-"use strict";
+export * from './Node';
+export * from './NodeDrawer';
 //# 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":""}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA"}

package/dist/esm/components/render/ModuleDescriptionBox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { ModuleDescription } from '@xyo-network/module';
+export interface ModuleDescriptionProps extends FlexBoxProps {
+    moduleDescription?: ModuleDescription;
+}
+export declare const ModuleDescriptionBox: React.FC<ModuleDescriptionProps>;
+//# sourceMappingURL=ModuleDescriptionBox.d.ts.map

package/dist/esm/components/render/ModuleDescriptionBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleDescriptionBox.d.ts","sourceRoot":"","sources":["../../../../src/components/render/ModuleDescriptionBox.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAMvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAC1D,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACtC;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsBjE,CAAA"}

package/dist/esm/components/render/ModuleDescriptionBox.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { TreeView } from '@mui/lab';
+import { styled, Typography } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
+import { useRef } from 'react';
+import { RenderModule } from './RenderModule';
+export const ModuleDescriptionBox = ({ moduleDescription }) => {
+    const idRef = useRef({ idIncrementor: 0, ids: [] });
+    return (_jsxs(_Fragment, { children: [moduleDescription === undefined ? _jsx(Typography, { variant: "h4", children: "Node not found" }) : null, isEmpty(moduleDescription) ? _jsx(Typography, { children: "Node has no modules" }) : null, !isEmpty(moduleDescription) ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", children: "Node Configuration" }), _jsx(StyledTreeView, { "aria-label": "file system navigator", defaultCollapseIcon: _jsx(ExpandMoreIcon, {}), defaultExpandIcon: _jsx(ChevronRightIcon, {}), sx: { flexGrow: 1 }, children: _jsx(RenderModule, { module: moduleDescription, idRef: idRef }) })] })) : null] }));
+};
+const StyledTreeView = styled(TreeView, { name: 'StyledTreeView' })(() => ({
+    height: 'auto',
+    maxWidth: 'auto',
+}));
+//# sourceMappingURL=ModuleDescriptionBox.js.map

package/dist/esm/components/render/ModuleDescriptionBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleDescriptionBox.js","sourceRoot":"","sources":["../../../../src/components/render/ModuleDescriptionBox.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAC/D,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAGlD,OAAO,OAAO,MAAM,gBAAgB,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAK7C,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC9F,MAAM,KAAK,GAAG,MAAM,CAA2C,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAA;IAE7F,OAAO,CACL,8BACG,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,+BAA4B,CAAC,CAAC,CAAC,IAAI,EAC7F,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAC,UAAU,sCAAiC,CAAC,CAAC,CAAC,IAAI,EAChF,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAC7B,8BACE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,mCAAgC,EACxD,KAAC,cAAc,kBACF,uBAAuB,EAClC,mBAAmB,EAAE,KAAC,cAAc,KAAG,EACvC,iBAAiB,EAAE,KAAC,gBAAgB,KAAG,EACvC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,YAEnB,KAAC,YAAY,IAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,GAAI,GAC1C,IAChB,CACJ,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC,CAAA"}

package/dist/esm/components/render/RenderModule.d.ts

@@ -0,0 +1,12 @@
+import { ModuleDescription } from '@xyo-network/module';
+import { MutableRefObject } from 'react';
+interface RenderModuleProps {
+    module: ModuleDescription;
+    idRef: MutableRefObject<{
+        idIncrementor: number;
+        ids: string[];
+    }>;
+}
+export declare const RenderModule: React.FC<RenderModuleProps>;
+export {};
+//# sourceMappingURL=RenderModule.d.ts.map

package/dist/esm/components/render/RenderModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderModule.d.ts","sourceRoot":"","sources":["../../../../src/components/render/RenderModule.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAExC,UAAU,iBAAiB;IACzB,MAAM,EAAE,iBAAiB,CAAA;IACzB,KAAK,EAAE,gBAAgB,CAAC;QACtB,aAAa,EAAE,MAAM,CAAA;QACrB,GAAG,EAAE,MAAM,EAAE,CAAA;KACd,CAAC,CAAA;CACH;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuBpD,CAAA"}

package/dist/esm/components/render/RenderModule.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TreeItem } from '@mui/lab';
+import { styled } from '@mui/material';
+export const RenderModule = ({ module, idRef }) => {
+    const { address, queries, children: moduleChildren } = module;
+    const increment = () => {
+        const newId = (idRef.current.idIncrementor++).toString();
+        idRef.current.ids.push(newId);
+        return newId;
+    };
+    return (_jsxs(StyledAddressTreeItem, { nodeId: increment(), label: `address: ${address}`, children: [queries.map((query, index) => {
+                return _jsx(TreeItem, { nodeId: increment(), label: `query : ${query}`, sx: { mb: index === queries.length - 1 ? 1.5 : 0.5 } }, query);
+            }), moduleChildren && moduleChildren.length > 0 ? (_jsx(TreeItem, { nodeId: increment(), label: 'children', sx: { mb: 0.5 }, children: moduleChildren.map((module) => (_jsx(RenderModule, { module: module, idRef: idRef }, module.address))) })) : null] }));
+};
+const StyledAddressTreeItem = styled(TreeItem, { name: 'StyledAddressTreeItem' })(({ theme }) => ({
+    '& .MuiTreeItem-content': {
+        marginBottom: theme.spacing(0.25),
+    },
+}));
+//# sourceMappingURL=RenderModule.js.map

package/dist/esm/components/render/RenderModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderModule.js","sourceRoot":"","sources":["../../../../src/components/render/RenderModule.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAYtC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,CAAA;IAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAA;QACxD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC7B,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,OAAO,CACL,MAAC,qBAAqB,IAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,YAAY,OAAO,EAAE,aACrE,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC5B,OAAO,KAAC,QAAQ,IAAa,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAA3G,KAAK,CAA0G,CAAA;YACvI,CAAC,CAAC,EACD,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7C,KAAC,QAAQ,IAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAC9D,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,KAAC,YAAY,IAAsB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAA5C,MAAM,CAAC,OAAO,CAAkC,CACpE,CAAC,GACO,CACZ,CAAC,CAAC,CAAC,IAAI,IACc,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChG,wBAAwB,EAAE;QACxB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;KAClC;CACF,CAAC,CAAC,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/render/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,gBAAgB,CAAA"}

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

@@ -0,0 +1,3 @@
+export * from './ModuleDescriptionBox';
+export * from './RenderModule';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/contexts/NodeDrawerContext/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NodeDrawerState } from './State';
+export declare const NodeDrawerContext: import("react").Context<NodeDrawerState & import("@xyo-network/react-shared").ContextExState>;
+//# sourceMappingURL=Context.d.ts.map

package/dist/esm/contexts/NodeDrawerContext/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/Context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,eAAO,MAAM,iBAAiB,+FAAqC,CAAA"}

package/dist/esm/contexts/NodeDrawerContext/Context.js

@@ -0,0 +1,3 @@
+import { createContextEx } from '@xyo-network/react-shared';
+export const NodeDrawerContext = createContextEx();
+//# sourceMappingURL=Context.js.map

package/dist/esm/contexts/NodeDrawerContext/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,EAAmB,CAAA"}

package/dist/esm/contexts/NodeDrawerContext/Provider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WithChildren } from '@xylabs/react-shared';
+export interface NodeDrawerProviderProps extends WithChildren {
+    defaultOpen?: boolean;
+}
+export declare const NodeDrawerProvider: React.FC<NodeDrawerProviderProps>;
+//# sourceMappingURL=Provider.d.ts.map

package/dist/esm/contexts/NodeDrawerContext/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQhE,CAAA"}

package/dist/esm/contexts/NodeDrawerContext/Provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { NodeDrawerContext } from './Context';
+export const NodeDrawerProvider = ({ children, defaultOpen = false }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    return _jsx(NodeDrawerContext.Provider, { value: { open, provided: true, setOpen }, children: children });
+};
+//# sourceMappingURL=Provider.js.map

package/dist/esm/contexts/NodeDrawerContext/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/Provider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAM7C,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,EAAE,EAAE;IACzG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,WAAW,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAG,QAAQ,GAA8B,CAAA;AACtH,CAAC,CAAA"}

package/dist/esm/contexts/NodeDrawerContext/State.d.ts

@@ -0,0 +1,7 @@
+import { ContextExState } from '@xyo-network/react-shared';
+import { Dispatch, SetStateAction } from 'react';
+export interface NodeDrawerState extends ContextExState {
+    open?: boolean;
+    setOpen?: Dispatch<SetStateAction<boolean>>;
+}
+//# sourceMappingURL=State.d.ts.map

package/dist/esm/contexts/NodeDrawerContext/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/State.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CAC5C"}

package/dist/esm/contexts/NodeDrawerContext/State.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=State.js.map

package/dist/esm/contexts/NodeDrawerContext/State.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.js","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/State.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+export * from './Context';
+export * from './Provider';
+export * from './State';
+export * from './use';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+export * from './Context';
+export * from './Provider';
+export * from './State';
+export * from './use';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const useNodeDrawer: (required?: boolean) => Omit<import("./State").NodeDrawerState & import("@xyo-network/react-shared").ContextExState, "provided">;
+//# sourceMappingURL=use.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/use.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,kIAA+E,CAAA"}

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

@@ -0,0 +1,4 @@
+import { useContextEx } from '@xyo-network/react-shared';
+import { NodeDrawerContext } from './Context';
+export const useNodeDrawer = (required = true) => useContextEx(NodeDrawerContext, 'NodeDrawer', required);
+//# sourceMappingURL=use.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use.js","sourceRoot":"","sources":["../../../../src/contexts/NodeDrawerContext/use.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAQ,GAAG,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAA"}

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

@@ -1,5 +1,6 @@
 export * from './Context';
 export * from './MemoryProvider';
+export * from './NodeDrawerContext';
 export * from './Provider';
 export * from './State';
 export * from './useArchivistModule';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA"}

package/dist/esm/contexts/index.js

@@ -1,5 +1,6 @@
 export * from './Context';
 export * from './MemoryProvider';
+export * from './NodeDrawerContext';
 export * from './Provider';
 export * from './State';
 export * from './useArchivistModule';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA"}

package/dist/esm/index.d.ts

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

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

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

package/package.json

@@ -10,9 +10,11 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
+    "@mui/lab": "^5.0.0-alpha.108",
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/react-shared": "^2.40.21",
+    "@xyo-network/react-shared": "^2.40.23",
+    "lodash": "^4.17.21",
     "tslib": "^2.4.1"
   },
   "peerDependencies": {
@@ -72,5 +74,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.40.21"
+  "version": "2.40.23"
 }

package/src/components/Node.tsx

@@ -7,7 +7,7 @@ export const NodeBox: React.FC<FlexBoxProps> = (props) => {
   const [node] = useNode()
   return (
     <FlexCol {...props}>
-      <Typography>{JSON.stringify(node?.registered())}</Typography>
+      <Typography>{JSON.stringify(node?.description(), null, 2)}</Typography>
     </FlexCol>
   )
 }

package/src/components/NodeDrawer.stories.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@mui/material'
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { NodeConfigSchema } from '@xyo-network/node'
+
+import { MemoryNodeProvider, NodeDrawerProvider, useNodeDrawer } from '../contexts'
+import { NodeDrawer } from './NodeDrawer'
+
+const ProviderDecorator: DecoratorFn = (Story, args) => (
+  <MemoryNodeProvider config={{ schema: NodeConfigSchema }}>
+    <NodeDrawerProvider defaultOpen>
+      <Story {...args} />
+    </NodeDrawerProvider>
+  </MemoryNodeProvider>
+)
+
+const StorybookEntry = {
+  component: NodeDrawer,
+  decorators: [ProviderDecorator],
+  title: 'node/NodeDrawer',
+} as ComponentMeta<typeof NodeDrawer>
+
+const Template: ComponentStory<typeof NodeDrawer> = (args) => {
+  const { setOpen } = useNodeDrawer()
+  return (
+    <FlexCol>
+      <Button onClick={() => setOpen?.((previous) => !previous)} variant="contained">
+        Toggle Drawer
+      </Button>
+      <NodeDrawer {...args}></NodeDrawer>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/NodeDrawer.tsx

@@ -0,0 +1,44 @@
+import CloseIcon from '@mui/icons-material/Close'
+import { ClickAwayListener, Drawer, DrawerProps, IconButton } from '@mui/material'
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
+import { ModuleDescription } from '@xyo-network/module'
+import { useState } from 'react'
+
+import { useNode, useNodeDrawer } from '../contexts'
+import { ModuleDescriptionBox } from './render'
+
+export interface NodeDrawerProps extends WithChildren, Omit<DrawerProps, 'open'> {}
+
+export const NodeDrawer: React.FC<NodeDrawerProps> = ({ children, ...props }) => {
+  const { open, setOpen } = useNodeDrawer()
+  const [node] = useNode()
+  const [moduleDescription, setModuleDescription] = useState<ModuleDescription>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (node) {
+        const nodeDescription = await node.description()
+        setModuleDescription(nodeDescription)
+      }
+    },
+    [node],
+  )
+
+  return (
+    <Drawer open={open ?? false} anchor="right" {...props}>
+      <ClickAwayListener onClickAway={() => setOpen?.(false)}>
+        <FlexGrowCol role="presentation" justifyContent="start" p={2} rowGap={2} minWidth="33vw">
+          <FlexRow alignContent="start" justifyContent="start" width="100%">
+            <IconButton onClick={() => setOpen?.(false)}>
+              <CloseIcon />
+            </IconButton>
+          </FlexRow>
+          <ModuleDescriptionBox moduleDescription={moduleDescription} />
+          {children}
+        </FlexGrowCol>
+      </ClickAwayListener>
+    </Drawer>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Node'
+export * from './NodeDrawer'

package/src/components/render/ModuleDescriptionBox.tsx

@@ -0,0 +1,42 @@
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { TreeView } from '@mui/lab'
+import { styled, Typography } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { ModuleDescription } from '@xyo-network/module'
+import isEmpty from 'lodash/isEmpty'
+import { useRef } from 'react'
+
+import { RenderModule } from './RenderModule'
+
+export interface ModuleDescriptionProps extends FlexBoxProps {
+  moduleDescription?: ModuleDescription
+}
+export const ModuleDescriptionBox: React.FC<ModuleDescriptionProps> = ({ moduleDescription }) => {
+  const idRef = useRef<{ ids: string[]; idIncrementor: number }>({ idIncrementor: 0, ids: [] })
+
+  return (
+    <>
+      {moduleDescription === undefined ? <Typography variant="h4">Node not found</Typography> : null}
+      {isEmpty(moduleDescription) ? <Typography>Node has no modules</Typography> : null}
+      {!isEmpty(moduleDescription) ? (
+        <>
+          <Typography variant="h4">Node Configuration</Typography>
+          <StyledTreeView
+            aria-label="file system navigator"
+            defaultCollapseIcon={<ExpandMoreIcon />}
+            defaultExpandIcon={<ChevronRightIcon />}
+            sx={{ flexGrow: 1 }}
+          >
+            <RenderModule module={moduleDescription} idRef={idRef} />
+          </StyledTreeView>
+        </>
+      ) : null}
+    </>
+  )
+}
+
+const StyledTreeView = styled(TreeView, { name: 'StyledTreeView' })(() => ({
+  height: 'auto',
+  maxWidth: 'auto',
+}))

package/src/components/render/RenderModule.tsx

@@ -0,0 +1,43 @@
+import { TreeItem } from '@mui/lab'
+import { styled } from '@mui/material'
+import { ModuleDescription } from '@xyo-network/module'
+import { MutableRefObject } from 'react'
+
+interface RenderModuleProps {
+  module: ModuleDescription
+  idRef: MutableRefObject<{
+    idIncrementor: number
+    ids: string[]
+  }>
+}
+
+export const RenderModule: React.FC<RenderModuleProps> = ({ module, idRef }) => {
+  const { address, queries, children: moduleChildren } = module
+
+  const increment = () => {
+    const newId = (idRef.current.idIncrementor++).toString()
+    idRef.current.ids.push(newId)
+    return newId
+  }
+
+  return (
+    <StyledAddressTreeItem nodeId={increment()} label={`address: ${address}`}>
+      {queries.map((query, index) => {
+        return <TreeItem key={query} nodeId={increment()} label={`query : ${query}`} sx={{ mb: index === queries.length - 1 ? 1.5 : 0.5 }} />
+      })}
+      {moduleChildren && moduleChildren.length > 0 ? (
+        <TreeItem nodeId={increment()} label={'children'} sx={{ mb: 0.5 }}>
+          {moduleChildren.map((module) => (
+            <RenderModule key={module.address} module={module} idRef={idRef} />
+          ))}
+        </TreeItem>
+      ) : null}
+    </StyledAddressTreeItem>
+  )
+}
+
+const StyledAddressTreeItem = styled(TreeItem, { name: 'StyledAddressTreeItem' })(({ theme }) => ({
+  '& .MuiTreeItem-content': {
+    marginBottom: theme.spacing(0.25),
+  },
+}))

package/src/components/render/index.ts

@@ -0,0 +1,2 @@
+export * from './ModuleDescriptionBox'
+export * from './RenderModule'

package/src/contexts/NodeDrawerContext/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { NodeDrawerState } from './State'
+
+export const NodeDrawerContext = createContextEx<NodeDrawerState>()

package/src/contexts/NodeDrawerContext/Provider.tsx

@@ -0,0 +1,18 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useEffect, useState } from 'react'
+
+import { NodeDrawerContext } from './Context'
+
+export interface NodeDrawerProviderProps extends WithChildren {
+  defaultOpen?: boolean
+}
+
+export const NodeDrawerProvider: React.FC<NodeDrawerProviderProps> = ({ children, defaultOpen = false }) => {
+  const [open, setOpen] = useState(defaultOpen)
+
+  useEffect(() => {
+    setOpen(defaultOpen)
+  }, [defaultOpen])
+
+  return <NodeDrawerContext.Provider value={{ open, provided: true, setOpen }}>{children}</NodeDrawerContext.Provider>
+}

package/src/contexts/NodeDrawerContext/State.ts

@@ -0,0 +1,7 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface NodeDrawerState extends ContextExState {
+  open?: boolean
+  setOpen?: Dispatch<SetStateAction<boolean>>
+}

package/src/contexts/NodeDrawerContext/index.ts

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

package/src/contexts/NodeDrawerContext/use.tsx

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { NodeDrawerContext } from './Context'
+
+export const useNodeDrawer = (required = true) => useContextEx(NodeDrawerContext, 'NodeDrawer', required)

package/src/contexts/index.ts

@@ -1,5 +1,6 @@
 export * from './Context'
 export * from './MemoryProvider'
+export * from './NodeDrawerContext'
 export * from './Provider'
 export * from './State'
 export * from './useArchivistModule'