feat(linting): add eslint

packages/core/src/components/A11yDescriptions/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const style = { display: 'none' };
 
 export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';

packages/core/src/components/Attribution/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Panel from '../Panel';
 import { PanelPosition, ProOptions } from '../../types';
 

packages/core/src/components/ConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useCallback } from 'react';
+import { CSSProperties, useCallback } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
@@ -24,7 +24,7 @@ const oppositePosition = {
   [Position.Bottom]: Position.Top,
 };
 
-export default ({
+const ConnectionLine = ({
   connectionNodeId,
   connectionHandleType,
   connectionLineStyle,
@@ -63,7 +63,7 @@ export default ({
     return null;
   }
 
-  let toPosition: Position = oppositePosition[fromPosition];
+  const toPosition: Position = oppositePosition[fromPosition];
 
   if (CustomConnectionLineComponent) {
     return (
@@ -84,7 +84,7 @@ export default ({
     );
   }
 
-  let dAttr: string = '';
+  let dAttr = '';
 
   const pathParams = {
     sourceX: fromX,
@@ -117,3 +117,7 @@ export default ({
     </g>
   );
 };
+
+ConnectionLine.displayName = 'ConnectionLine';
+
+export default ConnectionLine;

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);

packages/core/src/components/Handle/handler.ts

@@ -1,5 +1,5 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { getHostForElement } from '../../utils';
 import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types';
@@ -91,8 +91,8 @@ export function handleMouseDown({
   nodeId: string;
   onConnect: OnConnect;
   isTarget: boolean;
-  getState: GetState<ReactFlowState>;
-  setState: SetState<ReactFlowState>;
+  getState: StoreApi<ReactFlowState>['getState'];
+  setState: StoreApi<ReactFlowState>['setState'];
   isValidConnection: ValidConnectionFunc;
   elementEdgeUpdaterType?: HandleType;
   onEdgeUpdateEnd?: (evt: MouseEvent) => void;

packages/core/src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react';
+import { memo, useContext, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -57,7 +57,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onConnect?.(edgeParams);
     };
 
-    const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    const onMouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
       if (event.button === 0) {
         handleMouseDown({
           event,
@@ -73,7 +73,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onMouseDown?.(event);
     };
 
-    const onClick = (event: React.MouseEvent) => {
+    const onClick = (event: ReactMouseEvent) => {
       const { onClickConnectStart, onClickConnectEnd, connectionMode } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });

packages/core/src/components/Nodes/DefaultNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

packages/core/src/components/Nodes/InputNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

packages/core/src/components/Nodes/OutputNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { HandleElement, Node, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
@@ -33,7 +33,7 @@ export const getHandleBounds = (
 
 export function getMouseHandler(
   id: string,
-  getState: GetState<ReactFlowState>,
+  getState: StoreApi<ReactFlowState>['getState'],
   handler?: (event: MouseEvent, node: Node) => void
 ) {
   return handler === undefined
@@ -55,8 +55,8 @@ export function handleNodeClick({
 }: {
   id: string;
   store: {
-    getState: GetState<ReactFlowState>;
-    setState: SetState<ReactFlowState>;
+    getState: StoreApi<ReactFlowState>['getState'];
+    setState: StoreApi<ReactFlowState>['setState'];
   };
   unselect?: boolean;
 }) {

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
+import { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -90,7 +90,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           store,
           unselect,
         });
-      } else if (selected && arrowKeyDiffs.hasOwnProperty(event.key)) {
+      } else if (selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
         updatePositions(arrowKeyDiffs[event.key]);
       }
     };

packages/core/src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selection with on or several nodes
  */
 
-import React, { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react';
+import { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -61,7 +61,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (arrowKeyDiffs.hasOwnProperty(event.key)) {
+    if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
       updatePositions(arrowKeyDiffs[event.key]);
     }
   };

packages/core/src/components/Panel/index.tsx

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

packages/core/src/components/ReactFlowProvider/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, PropsWithChildren, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { StoreApi } from 'zustand';
 
 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
 import { ReactFlowState } from '../../types';
 
-const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+const ReactFlowProvider: FC<PropsWithChildren> = ({ children }) => {
   const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);
 
   if (!storeRef.current) {

packages/core/src/components/SelectionListener/index.tsx

@@ -13,7 +13,9 @@ const selector = (s: ReactFlowState) => ({
   selectedEdges: s.edges.filter((e) => e.selected),
 });
 
-const areEqual = (objA: any, objB: any) => {
+type SelectorSlice = ReturnType<typeof selector>;
+
+function areEqual(objA: SelectorSlice, objB: SelectorSlice) {
   const selectedNodeIdsA = objA.selectedNodes.map((n: Node) => n.id);
   const selectedNodeIdsB = objB.selectedNodes.map((n: Node) => n.id);
 
@@ -21,7 +23,7 @@ const areEqual = (objA: any, objB: any) => {
   const selectedEdgeIdsB = objB.selectedEdges.map((e: Edge) => e.id);
 
   return shallow(selectedNodeIdsA, selectedNodeIdsB) && shallow(selectedEdgeIdsA, selectedEdgeIdsB);
-};
+}
 
 // This is just a helper component for calling the onSelectionChange listener.
 // @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?

packages/core/src/components/UserSelection/index.tsx

@@ -2,7 +2,7 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import React, { memo, useState, useRef } from 'react';
+import { memo, useState, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -42,7 +42,7 @@ const initialRect: SelectionRect = {
   draw: false,
 };
 
-export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
+const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
   const store = useStoreApi();
   const prevSelectedNodesCount = useRef<number>(0);
   const prevSelectedEdgesCount = useRef<number>(0);
@@ -157,3 +157,7 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
     </div>
   );
 });
+
+UserSelection.displayName = 'UserSelection';
+
+export default UserSelection;