feat(linting): add eslint

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-non-null-assertion": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

examples/nextjs/package.json

@@ -25,6 +25,7 @@
     "@types/dagre": "^0.7.47",
     "eslint": "8.19.0",
     "eslint-config-next": "12.2.2",
+    "postcss": "^8.4.16",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.7.2"

package.json

@@ -30,7 +30,17 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@preconstruct/cli": "^2.1.8",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "autoprefixer": "^10.4.8",
     "cypress": "^10.3.1",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "latest",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6",
+    "prettier": "^2.7.1",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.7.4"
   },

packages/background/src/Background.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useId } from 'react';
+import { memo, useRef, useId } from 'react';
 import cc from 'classcat';
 import { useStore, ReactFlowState } from '@react-flow/core';
 

packages/controls/src/ControlButton.tsx

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

packages/controls/src/Controls.tsx

@@ -1,4 +1,4 @@
-import React, { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
+import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
 import {
   useStore,

packages/controls/src/Icons/FitView.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function FitViewIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">

packages/controls/src/Icons/Lock.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function LockIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">

packages/controls/src/Icons/Minus.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function MinusIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">

packages/controls/src/Icons/Plus.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function PlusIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">

packages/controls/src/Icons/Unlock.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function UnlockIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">

packages/controls/src/types.ts

@@ -13,5 +13,4 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   position?: PanelPosition;
 }
 
-export interface ControlButtonProps
+export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-  extends ButtonHTMLAttributes<HTMLButtonElement> {}

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) => {
+const StepEdge = memo((props: EdgeSmoothStepProps) => <SmoothStepEdge {...props} borderRadius={0} />);
-  return <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)!;
+        const edge = getState().edges.find((e) => e.id === id);
-        handler(event, { ...edge });
+
+        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>;
+  getState: StoreApi<ReactFlowState>['getState'];
-  setState: SetState<ReactFlowState>;
+  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>;
+    getState: StoreApi<ReactFlowState>['getState'];
-    setState: SetState<ReactFlowState>;
+    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;

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
 import { useStore } from '../../hooks/useStore';
 import { EdgeMarker, ReactFlowState } from '../../types';
@@ -24,6 +24,10 @@ const Marker = ({
 }: MarkerProps) => {
   const Symbol = useMarkerSymbol(type);
 
+  if (!Symbol) {
+    return null;
+  }
+
   return (
     <marker
       className="react-flow__arrowhead"

packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { MarkerType, EdgeMarker } from '../../types';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
@@ -36,14 +36,14 @@ export const MarkerSymbols = {
 
 export function useMarkerSymbol(type: MarkerType) {
   const symbol = useMemo(() => {
-    const symbolExists = MarkerSymbols.hasOwnProperty(type);
+    const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
     if (!symbolExists) {
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         console.warn(`[React Flow]: Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`);
       }
-      return () => null;
+
+      return null;
     }
 
     return MarkerSymbols[type];

packages/core/src/container/EdgeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, CSSProperties } from 'react';
+import { memo, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';
 import cc from 'classcat';
 
@@ -114,7 +114,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               const targetPosition = targetHandle?.position || Position.Top;
 
               if (!sourceHandle) {
-                // @ts-ignore
                 if (process.env.NODE_ENV === 'development') {
                   console.warn(
                     `[React Flow]: Couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
@@ -124,7 +123,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               }
 
               if (!targetHandle) {
-                // @ts-ignore
                 if (process.env.NODE_ENV === 'development') {
                   console.warn(
                     `[React Flow]: Couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`

packages/core/src/container/EdgeRenderer/utils.ts

@@ -41,7 +41,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   };
 }
 
-export function getHandlePosition(position: Position, nodeRect: Rect, handle: any | null = null): XYPosition {
+export function getHandlePosition(position: Position, nodeRect: Rect, handle: HandleElement | null = null): XYPosition {
   const x = (handle?.x || 0) + nodeRect.x;
   const y = (handle?.y || 0) + nodeRect.y;
   const width = handle?.width || nodeRect.width;
@@ -97,10 +97,10 @@ interface EdgePositions {
 
 export const getEdgePositions = (
   sourceNodeRect: Rect,
-  sourceHandle: HandleElement | unknown,
+  sourceHandle: HandleElement,
   sourcePosition: Position,
   targetNodeRect: Rect,
-  targetHandle: HandleElement | unknown,
+  targetHandle: HandleElement,
   targetPosition: Position
 ): EdgePositions => {
   const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';

packages/core/src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';

packages/core/src/container/NodeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
+import { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
@@ -66,7 +66,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
         let nodeType = node.type || 'default';
 
         if (!props.nodeTypes[nodeType]) {
-          // @ts-ignore
           if (process.env.NODE_ENV === 'development') {
             console.warn(
               `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`

packages/core/src/container/ReactFlow/Wrapper.tsx

@@ -1,9 +1,9 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 import { useStoreApi } from '../../hooks/useStore';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
 
-const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+const Wrapper: FC<PropsWithChildren> = ({ children }) => {
   let isWrapped = true;
 
   try {

packages/core/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, forwardRef, useId } from 'react';
+import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
 import { injectStyle } from '@react-flow/css-utils';
 

packages/core/src/container/ReactFlow/utils.ts

@@ -7,11 +7,11 @@ import { CreateNodeTypes } from '../NodeRenderer/utils';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
   const typesKeysRef = useRef<string[] | null>(null);
 
   const typesParsed = useMemo(() => {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {

packages/core/src/container/Viewport/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { useStore } from '../../hooks/useStore';
 import { ReactFlowState } from '../../types';
@@ -13,7 +13,7 @@ function Viewport({ children }: ViewportProps) {
   const transform = useStore(selector);
 
   return (
-    <div className="react-flow__viewport react-flow__container" style={{ transform: transform }}>
+    <div className="react-flow__viewport react-flow__container" style={{ transform }}>
       {children}
     </div>
   );

packages/core/src/container/ZoomPane/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef } from 'react';
 import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';

packages/core/src/custom.d.ts

@@ -3,7 +3,7 @@ declare module '*.css' {
   export default content;
 }
 
-interface SvgrComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {}
+type SvgrComponent = React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 
 declare module '*.svg' {
   const svgUrl: string;
@@ -12,6 +12,6 @@ declare module '*.svg' {
   export { svgComponent as ReactComponent };
 }
 
-declare var __REACT_FLOW_VERSION__: string;
+declare const __REACT_FLOW_VERSION__: string;
-declare var __ENV__: string;
+declare const __ENV__: string;
-declare var __INJECT_STYLES__: boolean;
+declare const __INJECT_STYLES__: boolean;

packages/core/src/hooks/useDrag/utils.ts

@@ -78,7 +78,6 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         console.warn('[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
       }

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useCallback, SetStateAction, Dispatch } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';

packages/core/src/hooks/useOnInitHandler.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import useReactFlow from './useReactFlow';
 import { OnInit } from '../types';
 
-function useOnInitHandler(onInit: OnInit<any> | undefined) {
+function useOnInitHandler(onInit: OnInit | undefined) {
   const ReactFlowInstance = useReactFlow();
   const isInitialized = useRef<boolean>(false);
 

packages/core/src/hooks/useReactFlow.ts

@@ -13,6 +13,7 @@ import {
   EdgeRemoveChange,
 } from '../types';
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
   const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
   const store = useStoreApi();

packages/core/src/hooks/useResizeHandler.ts

@@ -16,7 +16,6 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
 
       const size = getDimensions(rendererNode.current);
 
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         if (size.height === 0 || size.width === 0) {
           console.warn(

packages/core/src/hooks/useViewportHelper.ts

@@ -4,21 +4,22 @@ import shallow from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { FitViewOptions, Viewport, ViewportHelperFunctions, ReactFlowState, Rect, XYPosition } from '../types';
+import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 import { fitView as fitViewStore } from '../store/utils';
 
-const DEFAULT_PADDING = 0.1;
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
 
 const initialViewportHelper: ViewportHelperFunctions = {
-  zoomIn: () => {},
+  zoomIn: noop,
-  zoomOut: () => {},
+  zoomOut: noop,
-  zoomTo: (_: number) => {},
+  zoomTo: noop,
   getZoom: () => 1,
-  setViewport: (_: Viewport) => {},
+  setViewport: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  fitView: (_: FitViewOptions = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {},
+  fitView: noop,
-  setCenter: (_: number, __: number) => {},
+  setCenter: noop,
-  fitBounds: (_: Rect) => {},
+  fitBounds: noop,
   project: (position: XYPosition) => position,
   initialized: false,
 };

packages/core/src/hooks/useVisibleEdges.ts

@@ -7,7 +7,7 @@ import { internalsSymbol, isNumeric } from '../utils';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 
-function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean = false) {
+function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevateEdgesOnSelect = false) {
   let maxLevel = -1;
 
   const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {

packages/core/src/store/utils.ts

@@ -1,5 +1,5 @@
 import { zoomIdentity } from 'd3-zoom';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { internalsSymbol, isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
@@ -99,8 +99,9 @@ type InternalFitViewOptions = {
   initial?: boolean;
 } & FitViewOptions;
 
-export function fitView(get: GetState<ReactFlowState>, options: InternalFitViewOptions = {}) {
+export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
-  let { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } = get();
+  const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } =
+    get();
 
   if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
     if (d3Zoom && d3Selection) {
@@ -165,8 +166,8 @@ export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionCh
 type UpdateNodesAndEdgesParams = {
   changedNodes: NodeSelectionChange[] | null;
   changedEdges: EdgeSelectionChange[] | null;
-  get: GetState<ReactFlowState>;
+  get: StoreApi<ReactFlowState>['getState'];
-  set: SetState<ReactFlowState>;
+  set: StoreApi<ReactFlowState>['setState'];
 };
 
 export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams) {

packages/core/src/types/changes.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { XYPosition, Dimensions } from './utils';
 import { Node } from './nodes';
 import { Edge } from './edges';

packages/core/src/types/component-props.ts

@@ -18,7 +18,7 @@ import {
   OnEdgeUpdateFunc,
   OnInit,
   ProOptions,
-  AttributionPosition,
+  PanelPosition,
   DefaultEdgeOptions,
   FitViewOptions,
   OnNodesDelete,
@@ -122,7 +122,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   fitView?: boolean;
   fitViewOptions?: FitViewOptions;
   connectOnClick?: boolean;
-  attributionPosition?: AttributionPosition;
+  attributionPosition?: PanelPosition;
   proOptions?: ProOptions;
   elevateEdgesOnSelect?: boolean;
   disableKeyboardA11y?: boolean;

packages/core/src/types/edges.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
 import { HandleElement, HandleType } from './handles';

packages/core/src/types/general.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 

packages/core/src/types/instance.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-namespace */
 import { ViewportHelperFunctions, Viewport } from './general';
 import { Node } from './nodes';
 import { Edge } from './edges';

packages/core/src/types/nodes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 
 import { XYPosition, Position, CoordinateExtent } from './utils';

packages/core/src/utils/changes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Node, Edge, EdgeChange, NodeChange } from '../types';
 
 function handleParentExpand(res: any[], updateItem: any) {

packages/core/src/utils/graph.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
@@ -59,7 +60,6 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         "[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
@@ -87,7 +87,6 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         "[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
@@ -99,7 +98,6 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
   const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         `[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`
@@ -168,9 +166,9 @@ export const getNodesInside = (
   nodeInternals: NodeInternals,
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
-  partially: boolean = false,
+  partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes: boolean = false
+  excludeNonSelectableNodes = false
 ): Node[] => {
   const rBox = rectToBox({
     x: (rect.x - tx) / tScale,
@@ -219,7 +217,7 @@ export const getTransformForBounds = (
   height: number,
   minZoom: number,
   maxZoom: number,
-  padding: number = 0.1
+  padding = 0.1
 ): Transform => {
   const xZoom = width / (bounds.width * (1 + padding));
   const yZoom = height / (bounds.height * (1 + padding));
@@ -233,6 +231,6 @@ export const getTransformForBounds = (
   return [x, y, clampedZoom];
 };
 
-export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration: number = 0) => {
+export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };

packages/core/src/utils/index.ts

@@ -5,7 +5,7 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   height: node.offsetHeight,
 });
 
-export const clamp = (val: number, min: number = 0, max: number = 1): number => Math.min(Math.max(val, min), max);
+export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 
 export const clampPosition = (position: XYPosition, extent: CoordinateExtent) => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
@@ -39,6 +39,7 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
 export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect =>
   boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
 
 export const internalsSymbol = Symbol('internals');

packages/minimap/src/MiniMap.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useId } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 import {

packages/minimap/src/MiniMapNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, CSSProperties } from 'react';
+import { memo, CSSProperties } from 'react';
 import cc from 'classcat';
 
 interface MiniMapNodeProps {

packages/minimap/src/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { HTMLAttributes } from 'react';
 import { Node, PanelPosition } from '@react-flow/core';
 

tsconfig.json

@@ -3,7 +3,7 @@
     "module": "esnext",
     "target": "esnext",
     "lib": ["dom", "esnext"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "declaration": true,
     "strict": true,

yarn.lock

@@ -1596,6 +1596,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@humanwhocodes/config-array@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "@humanwhocodes/config-array@npm:0.10.4"
+  dependencies:
+    "@humanwhocodes/object-schema": ^1.2.1
+    debug: ^4.1.1
+    minimatch: ^3.0.4
+  checksum: d480e5d57e6d787565b6cff78e27c3d1b380692d4ffb0ada7d7f5957a56c9032f034da05a3e443065dbd0671ebf4d859036ced34e96b325bbc1badbae3c05300
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.9.2":
   version: 0.9.5
   resolution: "@humanwhocodes/config-array@npm:0.9.5"
@@ -1607,6 +1618,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@humanwhocodes/gitignore-to-minimatch@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@humanwhocodes/gitignore-to-minimatch@npm:1.0.2"
+  checksum: aba5c40c9e3770ed73a558b0bfb53323842abfc2ce58c91d7e8b1073995598e6374456d38767be24ab6176915f0a8d8b23eaae5c85e2b488c0dccca6d795e2ad
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/object-schema@npm:^1.2.1":
   version: 1.2.1
   resolution: "@humanwhocodes/object-schema@npm:1.2.1"
@@ -2410,6 +2428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/json-schema@npm:^7.0.9":
+  version: 7.0.11
+  resolution: "@types/json-schema@npm:7.0.11"
+  checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
+  languageName: node
+  linkType: hard
+
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -2502,6 +2527,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:latest":
+  version: 5.32.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": 5.32.0
+    "@typescript-eslint/type-utils": 5.32.0
+    "@typescript-eslint/utils": 5.32.0
+    debug: ^4.3.4
+    functional-red-black-tree: ^1.0.1
+    ignore: ^5.2.0
+    regexpp: ^3.2.0
+    semver: ^7.3.7
+    tsutils: ^3.21.0
+  peerDependencies:
+    "@typescript-eslint/parser": ^5.0.0
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 9785c34d9742b51130237bfe244924ca6dfd529bdcc5932a5cf81558f0235099c963a11125df393037db51ce451f7ab9442aba3c3a8bb2e0607569a0e31480c8
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/parser@npm:^5.21.0":
   version: 5.31.0
   resolution: "@typescript-eslint/parser@npm:5.31.0"
@@ -2519,6 +2567,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/parser@npm:latest":
+  version: 5.32.0
+  resolution: "@typescript-eslint/parser@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": 5.32.0
+    "@typescript-eslint/types": 5.32.0
+    "@typescript-eslint/typescript-estree": 5.32.0
+    debug: ^4.3.4
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 3fcfa183cad125c3198fd63701c6e13dad1cc984d309e8cd40ec9a2eb857902abfd7e9ee3f030b18eb1c18c795a61ea289ef147a7f9dfac38df905e7514316af
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:5.31.0":
   version: 5.31.0
   resolution: "@typescript-eslint/scope-manager@npm:5.31.0"
@@ -2529,6 +2594,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/types": 5.32.0
+    "@typescript-eslint/visitor-keys": 5.32.0
+  checksum: 69bdeb029f39d1112299dc0cb0ddef30e51bdb782fdb79cc4e72fa448e00d71e39938d3bff3fa4ee43b3416c2e3b4564de2c37252914772b07eeedafb14412d6
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/type-utils@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/utils": 5.32.0
+    debug: ^4.3.4
+    tsutils: ^3.21.0
+  peerDependencies:
+    eslint: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 4063808ca054789bebc6adb376d15c13e38f8ea14fa2842c38ae616d77fb77681b67a04b77887cf9ceb6f801ab3fc5eddfb6325779ab821404c62f36c56310bb
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/types@npm:5.31.0":
   version: 5.31.0
   resolution: "@typescript-eslint/types@npm:5.31.0"
@@ -2536,6 +2627,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/types@npm:5.32.0"
+  checksum: 6758f54d8d7763893cd7c1753f525ef1777eee8b558bf3d54fd2a2ce691ca0cf813c68a26e4db83a1deae4e4a62b247f1195e15a1f3577f1293849f9e55a232c
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.31.0":
   version: 5.31.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.31.0"
@@ -2554,6 +2652,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/types": 5.32.0
+    "@typescript-eslint/visitor-keys": 5.32.0
+    debug: ^4.3.4
+    globby: ^11.1.0
+    is-glob: ^4.0.3
+    semver: ^7.3.7
+    tsutils: ^3.21.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 6aee08be5d36603d038fb8340f324f5cb38519150c9b37c012f0c1ff2a4d8cf22fbc6835de31d069949c2b3d8ed3e729076a724ef29db4289d9fe73b97c9d310
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/utils@npm:5.32.0"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    "@typescript-eslint/scope-manager": 5.32.0
+    "@typescript-eslint/types": 5.32.0
+    "@typescript-eslint/typescript-estree": 5.32.0
+    eslint-scope: ^5.1.1
+    eslint-utils: ^3.0.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: cfd88d93508c8fb0db17d2726691e1383db390357fa0637bd8111558fbe72da5130d995294001d71b1d929d620fbce3f20a70b277a77ca21a4241b3b470dc758
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:5.31.0":
   version: 5.31.0
   resolution: "@typescript-eslint/visitor-keys@npm:5.31.0"
@@ -2564,6 +2696,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:5.32.0":
+  version: 5.32.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.32.0"
+  dependencies:
+    "@typescript-eslint/types": 5.32.0
+    eslint-visitor-keys: ^3.3.0
+  checksum: 1f9b756d648c2346a6e8538ffde729d3d9ce6621fded3d9f15c96aa0ebf8f511daf8232470423fb36359c2113538a4daaf3336181be78a0cfbfd297af91ce9ba
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -2580,7 +2722,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.5.0, acorn@npm:^8.7.1":
+"acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0":
   version: 8.8.0
   resolution: "acorn@npm:8.8.0"
   bin:
@@ -3979,6 +4121,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-config-prettier@npm:^8.5.0":
+  version: 8.5.0
+  resolution: "eslint-config-prettier@npm:8.5.0"
+  peerDependencies:
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 0d0f5c32e7a0ad91249467ce71ca92394ccd343178277d318baf32063b79ea90216f4c81d1065d60f96366fdc60f151d4d68ae7811a58bd37228b84c2083f893
+  languageName: node
+  linkType: hard
+
 "eslint-import-resolver-node@npm:^0.3.6":
   version: 0.3.6
   resolution: "eslint-import-resolver-node@npm:0.3.6"
@@ -4061,6 +4214,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-prettier@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "eslint-plugin-prettier@npm:4.2.1"
+  dependencies:
+    prettier-linter-helpers: ^1.0.0
+  peerDependencies:
+    eslint: ">=7.28.0"
+    prettier: ">=2.0.0"
+  peerDependenciesMeta:
+    eslint-config-prettier:
+      optional: true
+  checksum: b9e839d2334ad8ec7a5589c5cb0f219bded260839a857d7a486997f9870e95106aa59b8756ff3f37202085ebab658de382b0267cae44c3a7f0eb0bcc03a4f6d6
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react-hooks@npm:^4.5.0":
   version: 4.6.0
   resolution: "eslint-plugin-react-hooks@npm:4.6.0"
@@ -4070,7 +4238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.29.4":
+"eslint-plugin-react@npm:^7.29.4, eslint-plugin-react@npm:latest":
   version: 7.30.1
   resolution: "eslint-plugin-react@npm:7.30.1"
   dependencies:
@@ -4094,6 +4262,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-scope@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "eslint-scope@npm:5.1.1"
+  dependencies:
+    esrecurse: ^4.3.0
+    estraverse: ^4.1.1
+  checksum: 47e4b6a3f0cc29c7feedee6c67b225a2da7e155802c6ea13bbef4ac6b9e10c66cd2dcb987867ef176292bf4e64eccc680a49e35e9e9c669f4a02bac17e86abdb
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^7.1.1":
   version: 7.1.1
   resolution: "eslint-scope@npm:7.1.1"
@@ -4174,6 +4352,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint@npm:^8.21.0":
+  version: 8.21.0
+  resolution: "eslint@npm:8.21.0"
+  dependencies:
+    "@eslint/eslintrc": ^1.3.0
+    "@humanwhocodes/config-array": ^0.10.4
+    "@humanwhocodes/gitignore-to-minimatch": ^1.0.2
+    ajv: ^6.10.0
+    chalk: ^4.0.0
+    cross-spawn: ^7.0.2
+    debug: ^4.3.2
+    doctrine: ^3.0.0
+    escape-string-regexp: ^4.0.0
+    eslint-scope: ^7.1.1
+    eslint-utils: ^3.0.0
+    eslint-visitor-keys: ^3.3.0
+    espree: ^9.3.3
+    esquery: ^1.4.0
+    esutils: ^2.0.2
+    fast-deep-equal: ^3.1.3
+    file-entry-cache: ^6.0.1
+    find-up: ^5.0.0
+    functional-red-black-tree: ^1.0.1
+    glob-parent: ^6.0.1
+    globals: ^13.15.0
+    globby: ^11.1.0
+    grapheme-splitter: ^1.0.4
+    ignore: ^5.2.0
+    import-fresh: ^3.0.0
+    imurmurhash: ^0.1.4
+    is-glob: ^4.0.0
+    js-yaml: ^4.1.0
+    json-stable-stringify-without-jsonify: ^1.0.1
+    levn: ^0.4.1
+    lodash.merge: ^4.6.2
+    minimatch: ^3.1.2
+    natural-compare: ^1.4.0
+    optionator: ^0.9.1
+    regexpp: ^3.2.0
+    strip-ansi: ^6.0.1
+    strip-json-comments: ^3.1.0
+    text-table: ^0.2.0
+    v8-compile-cache: ^2.0.3
+  bin:
+    eslint: bin/eslint.js
+  checksum: 1d39ddb08772ea230cb7d74f7f81f85b9d46965d3600725c7eb39a27bcdaf28cb2a780dacf6cfa1cfbf2da606b57a5e7e3ab373ab474cbcf0ba042076821f501
+  languageName: node
+  linkType: hard
+
 "espree@npm:^9.3.2":
   version: 9.3.2
   resolution: "espree@npm:9.3.2"
@@ -4185,6 +4412,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"espree@npm:^9.3.3":
+  version: 9.3.3
+  resolution: "espree@npm:9.3.3"
+  dependencies:
+    acorn: ^8.8.0
+    acorn-jsx: ^5.3.2
+    eslint-visitor-keys: ^3.3.0
+  checksum: 33e8a36fc15d082e68672e322e22a53856b564d60aad8f291a667bfc21b2c900c42412d37dd3c7a0f18b9d0d8f8858dabe8776dbd4b4c2f72c5cf4d6afeabf65
+  languageName: node
+  linkType: hard
+
 "esquery@npm:^1.4.0":
   version: 1.4.0
   resolution: "esquery@npm:1.4.0"
@@ -4203,6 +4441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estraverse@npm:^4.1.1":
+  version: 4.3.0
+  resolution: "estraverse@npm:4.3.0"
+  checksum: a6299491f9940bb246124a8d44b7b7a413a8336f5436f9837aaa9330209bd9ee8af7e91a654a3545aee9c54b3308e78ee360cef1d777d37cfef77d2fa33b5827
+  languageName: node
+  linkType: hard
+
 "estraverse@npm:^5.1.0, estraverse@npm:^5.2.0, estraverse@npm:^5.3.0":
   version: 5.3.0
   resolution: "estraverse@npm:5.3.0"
@@ -4348,6 +4593,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-diff@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "fast-diff@npm:1.2.0"
+  checksum: 1b5306eaa9e826564d9e5ffcd6ebd881eb5f770b3f977fcbf38f05c824e42172b53c79920e8429c54eb742ce15a0caf268b0fdd5b38f6de52234c4a8368131ae
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.4, fast-glob@npm:^3.2.9":
   version: 3.2.11
   resolution: "fast-glob@npm:3.2.11"
@@ -4439,6 +4691,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "find-up@npm:5.0.0"
+  dependencies:
+    locate-path: ^6.0.0
+    path-exists: ^4.0.0
+  checksum: 07955e357348f34660bde7920783204ff5a26ac2cafcaa28bace494027158a97b9f56faaf2d89a6106211a8174db650dd9f503f9c0d526b1202d5554a00b9095
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^3.0.4":
   version: 3.0.4
   resolution: "flat-cache@npm:3.0.4"
@@ -4818,6 +5080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"grapheme-splitter@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "grapheme-splitter@npm:1.0.4"
+  checksum: 0c22ec54dee1b05cd480f78cf14f732cb5b108edc073572c4ec205df4cd63f30f8db8025afc5debc8835a8ddeacf648a1c7992fe3dcd6ad38f9a476d84906620
+  languageName: node
+  linkType: hard
+
 "graphlib@npm:^2.1.8":
   version: 2.1.8
   resolution: "graphlib@npm:2.1.8"
@@ -5625,6 +5894,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "locate-path@npm:6.0.0"
+  dependencies:
+    p-locate: ^5.0.0
+  checksum: 72eb661788a0368c099a184c59d2fee760b3831c9c1c33955e8a19ae4a21b4116e53fa736dc086cdeb9fce9f7cc508f2f92d2d3aae516f133e16a2bb59a39f5a
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -6332,6 +6610,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-locate@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "p-locate@npm:5.0.0"
+  dependencies:
+    p-limit: ^3.0.2
+  checksum: 1623088f36cf1cbca58e9b61c4e62bf0c60a07af5ae1ca99a720837356b5b6c5ba3eb1b2127e47a06865fee59dd0453cad7cc844cda9d5a62ac1a5a51b7c86d3
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -6957,6 +7244,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.16":
+  version: 8.4.16
+  resolution: "postcss@npm:8.4.16"
+  dependencies:
+    nanoid: ^3.3.4
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 10eee25efd77868036403858577da0cefaf2e0905feeaba5770d5438ccdddba3d01cba8063e96b8aac4c6daa0ed413dd5ae0554a433a3c4db38df1d134cffc1f
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -6964,6 +7262,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-linter-helpers@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "prettier-linter-helpers@npm:1.0.0"
+  dependencies:
+    fast-diff: ^1.1.2
+  checksum: 00ce8011cf6430158d27f9c92cfea0a7699405633f7f1d4a45f07e21bf78e99895911cbcdc3853db3a824201a7c745bd49bfea8abd5fb9883e765a90f74f8392
+  languageName: node
+  linkType: hard
+
+"prettier@npm:^2.7.1":
+  version: 2.7.1
+  resolution: "prettier@npm:2.7.1"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 55a4409182260866ab31284d929b3cb961e5fdb91fe0d2e099dac92eaecec890f36e524b4c19e6ceae839c99c6d7195817579cdffc8e2c80da0cb794463a748b
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^5.6.0":
   version: 5.6.0
   resolution: "pretty-bytes@npm:5.6.0"
@@ -7103,6 +7419,7 @@ __metadata:
     eslint-config-next: 12.2.2
     localforage: ^1.10.0
     next: 12.2.2
+    postcss: ^8.4.16
     postcss-flexbugs-fixes: ^5.0.2
     postcss-nested: ^5.0.6
     postcss-preset-env: ^7.7.2
@@ -7120,7 +7437,17 @@ __metadata:
     "@babel/preset-react": ^7.17.12
     "@babel/preset-typescript": ^7.17.12
     "@preconstruct/cli": ^2.1.8
+    "@typescript-eslint/eslint-plugin": latest
+    "@typescript-eslint/parser": latest
+    autoprefixer: ^10.4.8
     cypress: ^10.3.1
+    eslint: ^8.21.0
+    eslint-config-prettier: ^8.5.0
+    eslint-plugin-prettier: ^4.2.1
+    eslint-plugin-react: latest
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
+    prettier: ^2.7.1
     react: ^18.1.0
     react-dom: ^18.1.0
     start-server-and-test: ^1.14.0