@xyo-network/react-node-renderer 3.0.1 → 3.0.3

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

@@ -1,4 +1,6 @@
-import { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { MemoryNode } from '@xyo-network/node-memory'
@@ -6,7 +8,7 @@ import { NodeConfigSchema } from '@xyo-network/node-model'
 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 type { EventObject } from 'cytoscape'
 import React, { useEffect, useState } from 'react'
 
 import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../../../contexts/index.ts'

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

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

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

@@ -1,4 +1,4 @@
-import { CytoscapeOptions } from 'cytoscape'
+import type { CytoscapeOptions } from 'cytoscape'
 
 const elements: CytoscapeOptions['elements'] = [
   {
@@ -15,20 +15,22 @@ const elements: CytoscapeOptions['elements'] = [
   },
   {
     // edge ab
-    data: { id: 'ab', source: 'a', target: 'b' },
+    data: {
+      id: 'ab', source: 'a', target: 'b',
+    },
   },
   {
     // edge ac
-    data: { id: 'ac', source: 'a', target: 'c' },
+    data: {
+      id: 'ac', source: 'a', target: 'c',
+    },
   },
 ]
 
 const style: CytoscapeOptions['style'] = [
   {
     selector: 'node',
-    style: {
-      label: 'data(id)',
-    },
+    style: { label: 'data(id)' },
   },
 
   {

package/src/contexts/CytoscapeInstance/Context.ts

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

package/src/contexts/CytoscapeInstance/Provider.tsx

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

package/src/contexts/CytoscapeInstance/State.ts

@@ -1,6 +1,6 @@
-import { ContextExState } from '@xyo-network/react-shared'
-import { Core } from 'cytoscape'
-import { Dispatch, SetStateAction } from 'react'
+import type { ContextExState } from '@xyo-network/react-shared'
+import type { Core } from 'cytoscape'
+import type { Dispatch, SetStateAction } from 'react'
 
 export interface CytoscapeInstanceState extends ContextExState {
   cy?: WeakRef<Core>

package/src/hooks/cytoscape/elements/useCytoscapeElements.ts

@@ -1,8 +1,8 @@
 import { useAsyncEffect } from '@xylabs/react-async-effect'
-import { EventUnsubscribeFunction } from '@xyo-network/module-events'
-import { ModuleInstance } from '@xyo-network/module-model'
+import type { EventUnsubscribeFunction } from '@xyo-network/module-events'
+import type { ModuleInstance } from '@xyo-network/module-model'
 import { isNodeInstance } from '@xyo-network/node-model'
-import { ElementDefinition } from 'cytoscape'
+import type { ElementDefinition } from 'cytoscape'
 import { useEffect, useState } from 'react'
 
 import { CytoscapeElements } from '../../../Cytoscape/index.ts'

package/src/hooks/cytoscape/elements/useElements.tsx

@@ -9,5 +9,7 @@ export const useElements = (hideLabels: boolean) => {
   const renderedElements = useRenderNewElements(newElements, hideLabels)
   const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)
 
-  return { hoveredNode, setHoveredNode, toggleSelectedElement }
+  return {
+    hoveredNode, setHoveredNode, toggleSelectedElement,
+  }
 }

package/src/hooks/cytoscape/elements/useHoveredNode.tsx

@@ -1,5 +1,8 @@
-import { NodeCollection, NodeSingular } from 'cytoscape'
-import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'
+import type { NodeCollection, NodeSingular } from 'cytoscape'
+import type { Dispatch, SetStateAction } from 'react'
+import {
+  useCallback, useEffect, useState,
+} from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts/index.ts'
 

package/src/hooks/cytoscape/elements/useNewElements.tsx

@@ -1,5 +1,5 @@
 import { useWeakModuleFromNode } from '@xyo-network/react-node'
-import { NodeSingular } from 'cytoscape'
+import type { NodeSingular } from 'cytoscape'
 import { useMemo } from 'react'
 
 import { useCytoscapeElements } from './useCytoscapeElements.ts'

package/src/hooks/cytoscape/elements/useRenderNewElements.tsx

@@ -1,4 +1,4 @@
-import { CollectionReturnValue, ElementDefinition } from 'cytoscape'
+import type { CollectionReturnValue, ElementDefinition } from 'cytoscape'
 import { useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts/index.ts'

package/src/hooks/cytoscape/elements/useSelectedElement.tsx

@@ -1,4 +1,4 @@
-import { NodeSingular } from 'cytoscape'
+import type { NodeSingular } from 'cytoscape'
 import { useState } from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts/index.ts'

package/src/hooks/cytoscape/useCytoscapeOptions.ts

@@ -1,4 +1,4 @@
-import { CytoscapeOptions } from 'cytoscape'
+import type { CytoscapeOptions } from 'cytoscape'
 import { useMemo } from 'react'
 
 import { ConcentricLayout } from '../../Cytoscape/index.ts'

package/src/hooks/cytoscape/useCytoscapeStyle.tsx

@@ -1,8 +1,10 @@
 import { useTheme } from '@mui/material'
-import { CytoscapeOptions } from 'cytoscape'
+import type { CytoscapeOptions } from 'cytoscape'
 import { useMemo } from 'react'
 
-import { EdgeStyled, Node, NodeAsRoot, NodeWithName } from '../../Cytoscape/index.ts'
+import {
+  EdgeStyled, Node, NodeAsRoot, NodeWithName,
+} from '../../Cytoscape/index.ts'
 import { useIcons } from './useIcons.tsx'
 
 export const useCytoscapeStyle = (hideLabels = false) => {

package/src/hooks/cytoscape/useIcons.tsx

@@ -1,7 +1,10 @@
 import { useTheme } from '@mui/material'
 import React, { useMemo } from 'react'
 
-import { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape/index.ts'
+import type { CyNodeModuleTypes } from '../../Cytoscape/index.ts'
+import {
+  CyIconSet, encodeSvg, generateIconMap,
+} from '../../Cytoscape/index.ts'
 
 export const useIcons = () => {
   const theme = useTheme()

package/src/hooks/cytoscape/useModuleDetails.tsx

@@ -1,5 +1,5 @@
 import { usePromise } from '@xylabs/react-promise'
-import { ModuleInstance } from '@xyo-network/module-model'
+import type { ModuleInstance } from '@xyo-network/module-model'
 import { useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../contexts/index.ts'

package/src/hooks/cytoscape/useRelationalGraphOptions.tsx

@@ -1,4 +1,4 @@
-import { ModuleInstance } from '@xyo-network/module-model'
+import type { ModuleInstance } from '@xyo-network/module-model'
 import { useState } from 'react'
 
 import { ConcentricLayout } from '../../Cytoscape/index.ts'
@@ -17,5 +17,7 @@ export const useRelationalGraphOptions = (mod?: WeakRef<ModuleInstance>) => {
   const style = useCytoscapeStyle(hideLabels)
   const options = useCytoscapeOptions(elements, style, ConcentricLayout)
 
-  return { handleToggleLabels, hideLabels, options }
+  return {
+    handleToggleLabels, hideLabels, options,
+  }
 }

package/xy.config.ts

@@ -1,9 +1,7 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },