chore/COMPASS-9493 export typed diagram hook

Author: mabaasit

src/components/controls/controls.tsx

@@ -1,9 +1,11 @@
 import Icon from '@leafygreen-ui/icon';
-import { ControlButton, Controls as ReactFlowControls, useReactFlow, useViewport } from '@xyflow/react';
+import { ControlButton, Controls as ReactFlowControls, useViewport } from '@xyflow/react';
 import { palette } from '@leafygreen-ui/palette';
 import { fontFamilies, spacing } from '@leafygreen-ui/tokens';
 import styled from '@emotion/styled';
 
+import { useDiagram } from '@/hooks/use-diagram';
+
 const zoomTransitionOption = { duration: 500 };
 
 const ControlsWrapper = styled(ReactFlowControls)`
@@ -43,7 +45,7 @@ interface DiagramControlsProps {
 }
 
 export const Controls = ({ title }: DiagramControlsProps) => {
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const { zoomIn, zoomOut, fitView } = useDiagram();
   const { zoom } = useViewport();
 
   return (

src/hooks/use-diagram.ts

@@ -0,0 +1,8 @@
+import { useReactFlow, type ReactFlowInstance } from '@xyflow/react';
+
+import type { InternalEdge, InternalNode } from '@/types/internal';
+
+export type DiagramInstance = ReactFlowInstance<InternalNode, InternalEdge>;
+export function useDiagram() {
+  return useReactFlow<InternalNode, InternalEdge>();
+}

src/index.ts

@@ -4,11 +4,10 @@ export { convertToExternalEdge as mapEdgeToDiagramEdge } from '@/utilities/conve
 export { convertToExternalNode as mapNodeToDiagramNode } from '@/utilities/convert-nodes';
 export * from '@/utilities/add-nodes-within-bounds';
 export * from '@/types';
+export { useDiagram, type DiagramInstance } from '@/hooks/use-diagram';
 export {
   ReactFlowProvider as DiagramProvider,
-  useReactFlow as useDiagram,
   useOnSelectionChange,
   getNodesBounds,
   getViewportForBounds,
-  type ReactFlowInstance as DiagramInstance,
 } from '@xyflow/react';