@xyo-network/react-node-renderer 2.81.10 → 2.83.0

package/src/components/module/graph/Popper.tsx

@@ -2,6 +2,7 @@ import { CancelRounded } from '@mui/icons-material'
 import { Button, Card, CardActions, CardHeader, IconButton, Paper, Popper, PopperProps, styled } from '@mui/material'
 import { Identicon } from '@xylabs/react-identicon'
 import { NodeSingular } from 'cytoscape'
+import React from 'react'
 
 export interface ModuleHoverPopperProps extends PopperProps {
   node?: NodeSingular
@@ -14,40 +15,48 @@ export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl,
   const { address, name } = node?.data() ?? {}
   return (
     <>
-      {anchorEl ?
-        <Popper anchorEl={anchorEl} {...props}>
-          <Card elevation={3}>
-            <CardHeader
-              action={
-                onClose ?
-                  <IconButton size="small" onClick={onClose}>
-                    <CancelRounded />
-                  </IconButton>
-                : null
-              }
-              avatar={
-                <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>
-                  <Identicon value={address} size={24} />
-                </Paper>
-              }
-              title={name}
-              subheader={address}
-            />
-            <StyledCardActions>
-              {onModuleDetails ?
-                <Button onClick={() => onModuleDetails?.(address)} size="small" variant="contained">
-                  Details
-                </Button>
-              : null}
-              {onModuleExplore ?
-                <Button onClick={() => onModuleExplore?.(address)} size="small" variant="contained">
-                  Explore
-                </Button>
-              : null}
-            </StyledCardActions>
-          </Card>
-        </Popper>
-      : null}
+      {anchorEl
+        ? (
+            <Popper anchorEl={anchorEl} {...props}>
+              <Card elevation={3}>
+                <CardHeader
+                  action={
+                    onClose
+                      ? (
+                          <IconButton size="small" onClick={onClose}>
+                            <CancelRounded />
+                          </IconButton>
+                        )
+                      : null
+                  }
+                  avatar={(
+                    <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>
+                      <Identicon value={address} size={24} />
+                    </Paper>
+                  )}
+                  title={name}
+                  subheader={address}
+                />
+                <StyledCardActions>
+                  {onModuleDetails
+                    ? (
+                        <Button onClick={() => onModuleDetails?.(address)} size="small" variant="contained">
+                          Details
+                        </Button>
+                      )
+                    : null}
+                  {onModuleExplore
+                    ? (
+                        <Button onClick={() => onModuleExplore?.(address)} size="small" variant="contained">
+                          Explore
+                        </Button>
+                      )
+                    : null}
+                </StyledCardActions>
+              </Card>
+            </Popper>
+          )
+        : null}
     </>
   )
 }

package/src/components/module/graph/index.ts

@@ -1 +1 @@
-export * from './GraphFlexBox.js'
+export * from './GraphFlexBox.tsx'

package/src/components/module/graph/node/Hover.tsx

@@ -1,9 +1,9 @@
 import { PopperProps, styled } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { NodeSingular } from 'cytoscape'
-import { ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 
-import { useNodeElement } from './hooks/index.js'
+import { useNodeElement } from './hooks/index.ts'
 
 export interface ModuleHoverProps {
   children?: (anchorElement?: PopperProps['anchorEl'], container?: PopperProps['container']) => ReactElement
@@ -16,9 +16,9 @@ export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ children, nod
   return (
     <>
       <StyledNodeGhostElementFlexCol ref={ref} left={boundingBox?.x1} height={boundingBox?.h} top={boundingBox?.y1} width={boundingBox?.w} />
-      {node ?
-        <>{children?.(currentElement)}</>
-      : null}
+      {node
+        ? <>{children?.(currentElement)}</>
+        : null}
     </>
   )
 }
@@ -28,7 +28,6 @@ const StyledNodeGhostElementFlexCol = styled(FlexCol, { name: 'StyledNodeGhostEl
   // backgroundColor: '#fff',
   // opacity: 0.25,
 
-  // eslint-disable-next-line sort-keys-fix/sort-keys-fix
   cursor: 'pointer',
   pointerEvents: 'none',
   position: 'absolute',

package/src/components/module/graph/node/hooks/index.ts

@@ -1 +1 @@
-export * from './useNodeElement.js'
+export * from './useNodeElement.tsx'

package/src/components/module/graph/node/index.ts

@@ -1 +1 @@
-export * from './Hover.js'
+export * from './Hover.tsx'

package/src/components/module/index.ts

@@ -1,2 +1,2 @@
-export * from './CardParser.js'
-export * from './graph/index.js'
+export * from './CardParser.tsx'
+export * from './graph/index.ts'

package/src/components/relational/graph/Graph.stories.tsx

@@ -10,13 +10,13 @@ import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-net
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.js'
-import { options } from './story/index.js'
+import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
+import { options } from './story/index.ts'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -24,7 +24,6 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       try {
         const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
@@ -73,13 +72,12 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakProvidedNode()
@@ -119,7 +117,6 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
       setIdWitness(witnessModule)

package/src/components/relational/graph/Graph.tsx

@@ -8,9 +8,9 @@ import cola from 'cytoscape-cola'
 import coseBilkentLayout from 'cytoscape-cose-bilkent'
 import dagre from 'cytoscape-dagre'
 import eulerLayout from 'cytoscape-euler'
-import { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 
-import { NodeRelationalGraphProps } from '../../lib/index.js'
+import { NodeRelationalGraphProps } from '../../lib/index.ts'
 
 const applyLayout = (cy?: cytoscape.Core, name = 'cola', options?: object) => {
   cy?.layout({ name, ...options }).run()
@@ -46,11 +46,11 @@ const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({ name, address,
   return (
     <Card elevation={3} {...props}>
       <CardHeader
-        avatar={
+        avatar={(
           <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>
             <Identicon value={address} size={24} />
           </Paper>
-        }
+        )}
         title={name}
         subheader={address}
       />
@@ -116,32 +116,39 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
 
     return (
       <FlexCol id="relational-graph-wrapper" ref={ref} {...props}>
-        {hoverAddress && hoverPosition ?
-          <Box position="absolute" top={hoverPosition.y1} left={hoverPosition.x1} zIndex={100}>
-            <ModuleHoverDetails address={hoverAddress} name={moduleInstance?.deref()?.id ?? 'Unknown'} />
-          </Box>
-        : null}
+        {hoverAddress && hoverPosition
+          ? (
+              <Box position="absolute" top={hoverPosition.y1} left={hoverPosition.x1} zIndex={100}>
+                <ModuleHoverDetails address={hoverAddress} name={moduleInstance?.deref()?.id ?? 'Unknown'} />
+              </Box>
+            )
+          : null}
         <FlexRow justifyContent="start" width="100%">
-          {actions === null ?
-            null
-          : actions ?
-            <ButtonGroup>
-              {actions}
-              <Button size={'small'} variant={'contained'} onClick={handleReset}>
-                Reset View
-              </Button>
-            </ButtonGroup>
-          : <Button size={'small'} variant={'contained'} onClick={handleReset}>
-              Reset
-            </Button>
-          }
+          {actions === null
+            ? null
+            : actions
+              ? (
+                  <ButtonGroup>
+                    {actions}
+                    <Button size="small" variant="contained" onClick={handleReset}>
+                      Reset View
+                    </Button>
+                  </ButtonGroup>
+                )
+              : (
+                  <Button size="small" variant="contained" onClick={handleReset}>
+                    Reset
+                  </Button>
+                )}
         </FlexRow>
         <FlexGrowRow width="100%" alignItems="start">
-          {showDetails ?
-            <FlexCol height="100%" width={'85%'}>
-              {detail}
-            </FlexCol>
-          : null}
+          {showDetails
+            ? (
+                <FlexCol height="100%" width="85%">
+                  {detail}
+                </FlexCol>
+              )
+            : null}
           <FlexCol
             justifyContent="start"
             classes="cytoscape-wrap"

package/src/components/relational/graph/GraphCola.stories.tsx

@@ -10,14 +10,14 @@ import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-net
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { WithExtensions } from '../../cytoscape-extensions/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.js'
-import { options } from './story/index.js'
+import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { WithExtensions } from '../../cytoscape-extensions/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
+import { options } from './story/index.ts'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -25,7 +25,6 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       try {
         const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
@@ -74,13 +73,12 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/cola/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="cola" {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox layout="cola" {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakProvidedNode()
@@ -96,7 +94,7 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
   return <NodeRelationalGraphFlexBox layout="cola" options={options} {...props} />
 }
 
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="cola" {...props} />
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = props => <ProvidedNodeRenderer layout="cola" {...props} />
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakNodeFromNode('ChildNode')
@@ -105,7 +103,7 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   const [idWitness, setIdWitness] = useState<IdWitness>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     async () => {
       const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
       setIdWitness(witnessModule)

package/src/components/relational/graph/GraphCoseBilkent.stories.tsx

@@ -10,14 +10,14 @@ import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-net
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { WithExtensions } from '../../cytoscape-extensions/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.js'
-import { options } from './story/index.js'
+import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { WithExtensions } from '../../cytoscape-extensions/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
+import { options } from './story/index.ts'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -25,7 +25,6 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       try {
         const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
@@ -74,13 +73,12 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/coseBilkent/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="cose-bilkent" {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox layout="cose-bilkent" {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakProvidedNode()
@@ -96,7 +94,7 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
   return <NodeRelationalGraphFlexBox layout="cose-bilkent" options={options} {...props} />
 }
 
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="cose-bilkent" {...props} />
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = props => <ProvidedNodeRenderer layout="cose-bilkent" {...props} />
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakNodeFromNode('ChildNode')
@@ -105,7 +103,6 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   const [idWitness, setIdWitness] = useState<IdWitness>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
       setIdWitness(witnessModule)

package/src/components/relational/graph/GraphDagre.stories.tsx

@@ -10,14 +10,14 @@ import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-net
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { WithExtensions } from '../../cytoscape-extensions/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.js'
-import { options } from './story/index.js'
+import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { WithExtensions } from '../../cytoscape-extensions/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
+import { options } from './story/index.ts'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -25,7 +25,6 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       try {
         const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
@@ -74,13 +73,12 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/dagre/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="dagre" {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox layout="dagre" {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakProvidedNode()
@@ -96,7 +94,7 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
   return <NodeRelationalGraphFlexBox layout="dagre" options={options} {...props} />
 }
 
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="dagre" {...props} />
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = props => <ProvidedNodeRenderer layout="dagre" {...props} />
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakNodeFromNode('ChildNode')
@@ -105,7 +103,7 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   const [idWitness, setIdWitness] = useState<IdWitness>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     async () => {
       const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
       setIdWitness(witnessModule)

package/src/components/relational/graph/GraphEuler.stories.tsx

@@ -10,14 +10,14 @@ import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-net
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { WithExtensions } from '../../cytoscape-extensions/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.js'
-import { options } from './story/index.js'
+import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { WithExtensions } from '../../cytoscape-extensions/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
+import { options } from './story/index.ts'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -25,7 +25,7 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     async () => {
       try {
         const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
@@ -74,13 +74,12 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/euler/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="euler" {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox layout="euler" {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakProvidedNode()
@@ -96,7 +95,7 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
   return <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
 }
 
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="euler" {...props} />
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = props => <ProvidedNodeRenderer layout="euler" {...props} />
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useWeakNodeFromNode('ChildNode')
@@ -105,7 +104,6 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   const [idWitness, setIdWitness] = useState<IdWitness>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
       setIdWitness(witnessModule)

package/src/components/relational/graph/GraphEvents.stories.tsx

@@ -7,17 +7,16 @@ import { NodeProvider, useWeakProvidedNode } from '@xyo-network/react-node'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { EventObject } from 'cytoscape'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../../../contexts/index.js'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
+import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../../../contexts/index.ts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
 
 const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
 
@@ -43,7 +42,6 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/NodeRelationalGraphEvents',

package/src/components/relational/graph/ProvidedNodeRenderer.tsx

@@ -1,10 +1,11 @@
 import { AccountInstance } from '@xyo-network/account-model'
 import { NodeInstance } from '@xyo-network/node-model'
 import { useWeakProvidedNode } from '@xyo-network/react-node'
+import React from 'react'
 
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.js'
-import { NodeRelationalGraphProps } from '../../lib/index.js'
-import { NodeRelationalGraphFlexBox } from './Graph.js'
+import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
+import { NodeRelationalGraphProps } from '../../lib/index.ts'
+import { NodeRelationalGraphFlexBox } from './Graph.tsx'
 
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
   account?: AccountInstance

package/src/components/relational/graph/index.ts

@@ -1,2 +1,2 @@
-export * from './Graph.js'
-export * from './ProvidedNodeRenderer.js'
+export * from './Graph.tsx'
+export * from './ProvidedNodeRenderer.tsx'

package/src/components/relational/graph/story/TestData.tsx

@@ -38,7 +38,7 @@ const style: CytoscapeOptions['style'] = [
       'line-color': '#ccc',
       'target-arrow-color': '#ccc',
       'target-arrow-shape': 'triangle',
-      width: 3,
+      'width': 3,
     },
   },
 ]

package/src/components/relational/graph/story/index.ts

@@ -1 +1 @@
-export * from './TestData.js'
+export * from './TestData.tsx'

package/src/components/relational/index.ts

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

package/src/contexts/CytoscapeInstance/Context.ts

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

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -1,8 +1,8 @@
 import type { WithChildren } from '@xylabs/react-shared'
 import { Core } from 'cytoscape'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { CytoscapeInstanceContext } from './Context.js'
+import { CytoscapeInstanceContext } from './Context.ts'
 
 export interface CytoscapeInstanceProviderProps extends WithChildren {
   defaultInstance?: WeakRef<Core>
@@ -14,5 +14,6 @@ export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps>
     setCy(defaultInstance)
   }, [defaultInstance])
 
+  // eslint-disable-next-line @eslint-react/no-unstable-context-value
   return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>
 }