feat(linting): add eslint

packages/core/src/components/Edges/BaseEdge.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import EdgeText from './EdgeText';
 import { BaseEdgeProps } from '../../types';
 
-export default ({
+const BaseEdge = ({
   path,
   centerX,
   centerY,
@@ -44,3 +42,7 @@ export default ({
     </>
   );
 };
+
+BaseEdge.displayName = 'BaseEdge';
+
+export default BaseEdge;

packages/core/src/components/Edges/BezierEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { EdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
@@ -126,7 +126,7 @@ export function getBezierCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-export default memo(
+const BezierEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -175,3 +175,7 @@ export default memo(
     );
   }
 );
+
+BezierEdge.displayName = 'BezierEdge';
+
+export default BezierEdge;

packages/core/src/components/Edges/EdgeAnchor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { Position } from '../../types';

packages/core/src/components/Edges/EdgeText.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
+import { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
 import { EdgeTextProps, Rect } from '../../types';

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { EdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
@@ -100,7 +100,7 @@ export function getSimpleBezierCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-export default memo(
+const SimpleBezierEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -147,3 +147,7 @@ export default memo(
     );
   }
 );
+
+SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+
+export default SimpleBezierEdge;

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { getCenter } from './utils';
 import { EdgeSmoothStepProps, Position } from '../../types';
@@ -115,7 +115,7 @@ export function getSmoothStepPath({
   return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
 }
 
-export default memo(
+const SmoothStepEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -164,3 +164,7 @@ export default memo(
     );
   }
 );
+
+SmoothStepEdge.displayName = 'SmoothStepEdge';
+
+export default SmoothStepEdge;

packages/core/src/components/Edges/StepEdge.tsx

@@ -1,8 +1,10 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
 
-export default memo((props: EdgeSmoothStepProps) => {
-  return <SmoothStepEdge {...props} borderRadius={0} />;
-});
+const StepEdge = memo((props: EdgeSmoothStepProps) => <SmoothStepEdge {...props} borderRadius={0} />);
+
+StepEdge.displayName = 'StepEdge';
+
+export default StepEdge;

packages/core/src/components/Edges/StraightEdge.tsx

@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import BaseEdge from './BaseEdge';
 import { EdgeProps } from '../../types';
 
-export default memo(
+const StraightEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -44,3 +44,7 @@ export default memo(
     );
   }
 );
+
+StraightEdge.displayName = 'StraightEdge';
+
+export default StraightEdge;

packages/core/src/components/Edges/utils.ts

@@ -1,5 +1,5 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { GetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { Edge, MarkerType, Position, ReactFlowState } from '../../types';
 
@@ -58,13 +58,16 @@ export const getCenter = ({
 
 export function getMouseHandler(
   id: string,
-  getState: GetState<ReactFlowState>,
+  getState: StoreApi<ReactFlowState>['getState'],
   handler?: (event: ReactMouseEvent<SVGGElement, MouseEvent>, edge: Edge) => void
 ) {
   return handler === undefined
     ? handler
     : (event: ReactMouseEvent<SVGGElement, MouseEvent>) => {
-        const edge = getState().edges.find((e) => e.id === id)!;
-        handler(event, { ...edge });
+        const edge = getState().edges.find((e) => e.id === id);
+
+        if (edge) {
+          handler(event, { ...edge });
+        }
       };
 }

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
+import { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -66,14 +66,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
       const { edges, addSelectedEdges } = store.getState();
-      const edge = edges.find((e) => e.id === id)!;
 
       if (elementsSelectable) {
         store.setState({ nodesSelectionActive: false });
         addSelectedEdges([id]);
       }
 
-      onClick?.(event, edge);
+      if (onClick) {
+        const edge = edges.find((e) => e.id === id)!;
+        onClick(event, edge);
+      }
     };
 
     const onEdgeDoubleClickHandler = getMouseHandler(id, store.getState, onEdgeDoubleClick);