feat(Flow): re-exporting useReactFlow

apps/app/src/pages/Flow/Flow.tsx

@@ -1,5 +1,4 @@
 import { Suspense, useEffect, useMemo, useState } from "react";
-import { Edge, ReactFlowInstance, Node } from "reactflow";
 import {
   HvButton,
   HvGlobalActions,
@@ -13,6 +12,7 @@ import {
   HvFlow,
   HvFlowControls,
   HvFlowEmpty,
+  HvFlowInstance,
   HvFlowProps,
   HvFlowSidebar,
 } from "@hitachivantara/uikit-react-lab";
@@ -23,7 +23,6 @@ import {
   DashboardsStorage,
   LAYOUT_COLS,
 } from "./types";
-
 import { buildLayout, createDataset, useDatasets } from "./utils";
 import { baseNodeTypes, edges, nodeGroups, nodes } from "./config";
 
@@ -37,11 +36,13 @@ const layout = [
   { w: 12, h: 4, x: 0, y: 4, i: "7" },
 ] satisfies HvDashboardProps["layout"];
 
+type Node = NonNullable<ReturnType<HvFlowInstance["getNode"]>>;
+type Edge = NonNullable<ReturnType<HvFlowInstance["getEdge"]>>;
+
 const Content = () => {
   const { data } = useDatasets();
 
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance>();
+  const [reactFlowInstance, setReactFlowInstance] = useState<HvFlowInstance>();
   const [open, setOpen] = useState(false);
 
   const persistDashboards = (

apps/app/src/pages/Flow/types.ts

@@ -1,5 +1,7 @@
-import { Node } from "reactflow";
-import { HvDashboardProps } from "@hitachivantara/uikit-react-lab";
+import {
+  HvDashboardProps,
+  HvFlowInstance,
+} from "@hitachivantara/uikit-react-lab";
 
 export type NodeGroup = "dashboard" | "visualization" | "dataset";
 
@@ -8,9 +10,11 @@ export const DASHBOARDS_STORAGE_KEY = "dashboards";
 
 export const LAYOUT_COLS = 12;
 
+type Node = NonNullable<ReturnType<HvFlowInstance<NodeData>["getNode"]>>;
+
 export interface DashboardSpecs
   extends Pick<HvDashboardProps, "layout" | "cols"> {
-  items: Node<NodeData>[];
+  items: Node[];
 }
 
 export type DashboardsStorage = Record<string, DashboardSpecs | undefined>;

packages/lab/src/Flow/Controls/Controls.tsx

@@ -3,13 +3,10 @@ import {
   Panel,
   PanelPosition,
   ReactFlowState,
-  useReactFlow,
   useStore,
   useStoreApi,
 } from "reactflow";
-
 import { shallow } from "zustand/shallow";
-
 import {
   HvButton,
   HvMultiButton,
@@ -23,6 +20,8 @@ import {
   ZoomOut,
 } from "@hitachivantara/uikit-react-icons";
 
+import { useFlowInstance } from "../hooks";
+
 export type HvFlowControlsPosition = PanelPosition;
 
 export interface HvFlowControlsProps
@@ -83,7 +82,7 @@ export const HvFlowControls = ({
     shallow
   );
   const store = useStoreApi();
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const { zoomIn, zoomOut, fitView } = useFlowInstance();
 
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
 

packages/lab/src/Flow/DroppableFlow.tsx

@@ -7,7 +7,6 @@ import ReactFlow, {
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
-  useReactFlow,
   MarkerType,
   Edge,
   Node,
@@ -23,7 +22,7 @@ import {
   HvFlowNodeOutputGroup,
 } from "./types";
 import { staticClasses, useClasses } from "./Flow.styles";
-import { useFlowContext } from "./hooks";
+import { useFlowContext, useFlowInstance } from "./hooks";
 import { flowStyles } from "./base";
 import { useNodeMetaRegistry } from "./FlowContext/NodeMetaContext";
 
@@ -146,7 +145,7 @@ export const HvDroppableFlow = ({
 
   const elementId = useUniqueId(id, "hvFlow");
 
-  const reactFlowInstance = useReactFlow();
+  const reactFlowInstance = useFlowInstance();
 
   const { nodeTypes } = useFlowContext();
 

packages/lab/src/Flow/Node/BaseNode.tsx

@@ -5,13 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import {
-  Handle,
-  NodeProps,
-  NodeToolbar,
-  Position,
-  useReactFlow,
-} from "reactflow";
+import { Handle, NodeProps, NodeToolbar, Position } from "reactflow";
 import { uid } from "uid";
 import {
   ExtractNames,
@@ -45,6 +39,7 @@ import {
   isOutputGroup,
   renderedIcon,
 } from "./utils";
+import { useFlowInstance } from "../hooks";
 
 export { staticClasses as flowBaseNodeClasses };
 
@@ -128,7 +123,7 @@ export const HvFlowBaseNode = ({
   }, [id, title, inputs, outputs, registerNode, unregisterNode]);
 
   const [showActions, setShowActions] = useState(false);
-  const reactFlowInstance = useReactFlow();
+  const reactFlowInstance = useFlowInstance();
 
   const { classes, cx, css } = useClasses(classesProp);
 

packages/lab/src/Flow/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useFlowNode";
 export * from "./useFlowContext";
 export * from "./useFlowNodeMeta";
+export * from "./useFlowInstance";

packages/lab/src/Flow/hooks/useFlowInstance.ts

@@ -0,0 +1,11 @@
+import { useReactFlow } from "reactflow";
+
+import { HvFlowInstance } from "../types";
+
+/** Retrieves the React Flow instance */
+export function useFlowInstance<
+  NodeData = any,
+  EdgeData = any
+>(): HvFlowInstance<NodeData, EdgeData> {
+  return useReactFlow<NodeData, EdgeData>();
+}

packages/lab/src/Flow/hooks/useFlowNode.ts

@@ -6,10 +6,10 @@ import {
   useStore,
   useNodes,
   useEdges,
-  useReactFlow,
 } from "reactflow";
 import { shallow } from "zustand/shallow";
 
+import { useFlowInstance } from "./useFlowInstance";
 import { useNodeId } from "./useNodeId";
 
 /** Retrieves the node instance */
@@ -107,7 +107,7 @@ export function useFlowOutputNodes<T = any>(id?: string) {
 /** Utilities to manipulate a node in the flow */
 export function useFlowNodeUtils<NodeData = any>(id?: string) {
   const nodeId = useNodeId(id);
-  const reactFlowInstance = useReactFlow<NodeData>();
+  const reactFlowInstance = useFlowInstance<NodeData>();
 
   /** Mutate the node's `.data` object */
   const setNodeData = useCallback(

packages/lab/src/Flow/stories/Base/Asset.tsx

@@ -14,18 +14,20 @@ import {
   Search,
 } from "@hitachivantara/uikit-react-icons";
 import {
+  HvFlowInstance,
   HvFlowNode,
   HvFlowNodeFC,
   HvFlowNodeTypeMeta,
   useFlowNode,
 } from "@hitachivantara/uikit-react-lab";
-import { Node } from "reactflow";
 
 import type { NodeGroup } from ".";
 
+type Node = ReturnType<HvFlowInstance["getNode"]>;
+
 export const Asset: HvFlowNodeFC<NodeGroup> = (props) => {
   const [showDialog, setShowDialog] = useState(false);
-  const [details, setDetails] = useState<Node | undefined>();
+  const [details, setDetails] = useState<Node>();
   const node = useFlowNode();
 
   const classes = {
@@ -73,7 +75,6 @@ export const Asset: HvFlowNodeFC<NodeGroup> = (props) => {
           </HvButton>
         </HvDialogActions>
       </HvDialog>
-
       <HvFlowNode
         description="Asset description"
         expanded

packages/lab/src/Flow/stories/CustomDrop/index.tsx

@@ -23,8 +23,8 @@ import {
   HvFlow,
   HvFlowProps,
   HvFlowControls,
+  HvFlowInstance,
 } from "@hitachivantara/uikit-react-lab";
-import { Node, ReactFlowInstance } from "reactflow";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 
 // The code for these components and values are available here: https://github.com/lumada-design/hv-uikit-react/tree/master/packages/lab/src/components/Flow/stories/CustomDrop
@@ -75,11 +75,12 @@ const classes = {
   }),
 };
 
+type Node = ReturnType<HvFlowInstance["getNode"]>;
+
 export const CustomDrop = () => {
   const { rootId } = useTheme();
 
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance>();
+  const [reactFlowInstance, setReactFlowInstance] = useState<HvFlowInstance>();
 
   const [open, setOpen] = useState(false);
   const [precipitationConfig, setPrecipitationConfig] = useState<Node>();

packages/lab/src/Flow/stories/DynamicHandles/Asset.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useRef } from "react";
-import { useReactFlow } from "reactflow";
 import {
   HvFlowNodeFC,
   HvFlowNodeInput,
   HvFlowNodeOutput,
   HvFlowNode,
   HvFlowNodeTypeMeta,
   useFlowNodeUtils,
+  useFlowInstance,
 } from "@hitachivantara/uikit-react-lab";
 
 import type { NodeGroup } from ".";
@@ -63,7 +63,7 @@ export const Asset: HvFlowNodeFC<NodeGroup, NodeData> = (props) => {
 
   const curType = useRef(data.type);
 
-  const reactFlowInstance = useReactFlow();
+  const reactFlowInstance = useFlowInstance();
 
   const { setNodeData } = useFlowNodeUtils();
 

packages/lab/src/Flow/stories/DynamicHandles/index.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from "react";
 import { css } from "@emotion/css";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
-import { Node, ReactFlowInstance } from "reactflow";
 import {
   HvButton,
   HvDialog,
@@ -20,6 +19,7 @@ import {
   HvFlowProps,
   HvFlowSidebar,
   HvFlowControls,
+  HvFlowInstance,
 } from "@hitachivantara/uikit-react-lab";
 
 // The code for these utils are available here: https://github.com/lumada-design/hv-uikit-react/tree/master/packages/lab/src/components/Flow/stories/Base
@@ -93,14 +93,15 @@ const edges: HvFlowProps["edges"] = [
   },
 ];
 
+type Node = ReturnType<HvFlowInstance<NodeData>["getNode"]>;
+
 export const DynamicHandles = () => {
   const { rootId } = useTheme();
 
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance>();
+  const [reactFlowInstance, setReactFlowInstance] = useState<HvFlowInstance>();
 
   const [open, setOpen] = useState(false);
-  const [nodeConfig, setNodeConfig] = useState<Node<NodeData>>();
+  const [nodeConfig, setNodeConfig] = useState<Node>();
 
   const options = useMemo(
     () =>

packages/lab/src/Flow/types/flow.ts

@@ -1,7 +1,5 @@
 import { ComponentClass, FC } from "react";
-
-import { Node, NodeProps } from "reactflow";
-
+import { Node, NodeProps, ReactFlowInstance } from "reactflow";
 import {
   HvActionGeneric,
   HvSliderProps,
@@ -130,3 +128,8 @@ export type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callback"> & {
 };
 
 export type HvFlowNodeMetaRegistry = Record<string, HvFlowNodeMeta>;
+
+export type HvFlowInstance<NodeData = any, EdgeData = any> = ReactFlowInstance<
+  NodeData,
+  EdgeData
+>;