Update ESLint rules (#2342)

.eslintrc.json

@@ -1,9 +1,10 @@
 {
-  "extends": ["prettier", "react-app", "react-app/jest"],
+  "extends": ["prettier", "react-app"],
   "plugins": ["prettier"],
   "rules": {
-    "import/no-anonymous-default-export": "off",
     "curly": "warn",
+    "dot-notation": "warn",
+    "import/no-anonymous-default-export": "off",
     "no-console": [
       "warn",
       {
@@ -11,7 +12,20 @@
       }
     ],
     "no-else-return": "warn",
+    "no-lonely-if": "warn",
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "message": "Use 't(...)' instead of literal text in JSX",
+        "selector": "JSXText[value=/\\w/]"
+      }
+    ],
+    "no-unneeded-ternary": "warn",
+    "no-unused-expressions": "warn",
+    "no-unused-vars": "warn",
     "no-useless-return": "warn",
+    "one-var": ["warn", "never"],
+    "prefer-arrow-callback": "warn",
     "prefer-const": [
       "warn",
       {
@@ -19,13 +33,6 @@
       }
     ],
     "prefer-template": "warn",
-    "prettier/prettier": "warn",
+    "prettier/prettier": "warn"
-    "no-restricted-syntax": [
-      "warn",
-      {
-        "selector": "JSXText[value=/\\w/]",
-        "message": "Use 't(...)' instead of literal text in JSX"
-      }
-    ]
   }
 }

src/actions/actionDuplicateSelection.tsx

@@ -105,9 +105,9 @@ const duplicateElements = (
 
   const finalElements: ExcalidrawElement[] = [];
 
-  let i = 0;
+  let index = 0;
-  while (i < elements.length) {
+  while (index < elements.length) {
-    const element = elements[i];
+    const element = elements[index];
     if (appState.selectedElementIds[element.id]) {
       if (element.groupIds.length) {
         const groupId = getSelectedGroupForElement(appState, element);
@@ -120,7 +120,7 @@ const duplicateElements = (
               duplicateAndOffsetElement(element),
             ),
           );
-          i = i + groupElements.length;
+          index = index + groupElements.length;
           continue;
         }
       }
@@ -128,7 +128,7 @@ const duplicateElements = (
     } else {
       finalElements.push(element);
     }
-    i++;
+    index++;
   }
 
   fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);

src/actions/actionFinalize.tsx

@@ -92,8 +92,8 @@ export const actionFinalize = register({
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
           mutateElement(multiPointElement, {
-            points: linePoints.map((point, i) =>
+            points: linePoints.map((point, index) =>
-              i === linePoints.length - 1
+              index === linePoints.length - 1
                 ? ([firstPoint[0], firstPoint[1]] as const)
                 : point,
             ),

src/colors.ts

@@ -1,18 +1,18 @@
 import oc from "open-color";
 
-const shades = (i: number) => [
+const shades = (index: number) => [
-  oc.red[i],
+  oc.red[index],
-  oc.pink[i],
+  oc.pink[index],
-  oc.grape[i],
+  oc.grape[index],
-  oc.violet[i],
+  oc.violet[index],
-  oc.indigo[i],
+  oc.indigo[index],
-  oc.blue[i],
+  oc.blue[index],
-  oc.cyan[i],
+  oc.cyan[index],
-  oc.teal[i],
+  oc.teal[index],
-  oc.green[i],
+  oc.green[index],
-  oc.lime[i],
+  oc.lime[index],
-  oc.yellow[i],
+  oc.yellow[index],
-  oc.orange[i],
+  oc.orange[index],
 ];
 
 export default {

src/components/App.tsx

@@ -2146,35 +2146,31 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           // in this branch, we're inside the commit zone, and no uncommitted
           // point exists. Thus do nothing (don't add/remove points).
         }
+      } else if (
+        points.length > 2 &&
+        lastCommittedPoint &&
+        distance2d(
+          scenePointerX - rx,
+          scenePointerY - ry,
+          lastCommittedPoint[0],
+          lastCommittedPoint[1],
+        ) < LINE_CONFIRM_THRESHOLD
+      ) {
+        document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
+        mutateElement(multiElement, {
+          points: points.slice(0, -1),
+        });
       } else {
-        // cursor moved inside commit zone, and there's uncommitted point,
+        if (isPathALoop(points)) {
-        // thus remove it
-        if (
-          points.length > 2 &&
-          lastCommittedPoint &&
-          distance2d(
-            scenePointerX - rx,
-            scenePointerY - ry,
-            lastCommittedPoint[0],
-            lastCommittedPoint[1],
-          ) < LINE_CONFIRM_THRESHOLD
-        ) {
           document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
-          mutateElement(multiElement, {
-            points: points.slice(0, -1),
-          });
-        } else {
-          if (isPathALoop(points)) {
-            document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
-          }
-          // update last uncommitted point
-          mutateElement(multiElement, {
-            points: [
-              ...points.slice(0, -1),
-              [scenePointerX - rx, scenePointerY - ry],
-            ],
-          });
         }
+        // update last uncommitted point
+        mutateElement(multiElement, {
+          points: [
+            ...points.slice(0, -1),
+            [scenePointerX - rx, scenePointerY - ry],
+          ],
+        });
       }
 
       return;

src/components/ButtonIconSelect.tsx

@@ -24,7 +24,7 @@ export const ButtonIconSelect = <T extends Object>({
           type="radio"
           name={group}
           onChange={() => onChange(option.value)}
-          checked={value === option.value ? true : false}
+          checked={value === option.value}
         />
         {option.icon}
       </label>

src/components/ButtonSelect.tsx

@@ -22,7 +22,7 @@ export const ButtonSelect = <T extends Object>({
           type="radio"
           name={group}
           onChange={() => onChange(option.value)}
-          checked={value === option.value ? true : false}
+          checked={value === option.value}
         />
         {option.text}
       </label>

src/components/ColorPicker.tsx

@@ -78,11 +78,9 @@ const Picker = ({
           colorInput.current?.focus();
           event.preventDefault();
         }
-      } else {
+      } else if (activeElement === colorInput.current) {
-        if (activeElement === colorInput.current) {
+        firstItem.current?.focus();
-          firstItem.current?.focus();
+        event.preventDefault();
-          event.preventDefault();
-        }
       }
     } else if (
       event.key === KEYS.ARROW_RIGHT ||

src/element/dragElements.ts

@@ -20,7 +20,8 @@ export const dragSelectedElements = (
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
   selectedElements.forEach((element) => {
-    let x, y;
+    let x: number;
+    let y: number;
     if (lockDirection) {
       const lockX = lockDirection && distanceX < distanceY;
       const lockY = lockDirection && distanceX > distanceY;

src/element/newElement.ts

@@ -150,7 +150,8 @@ const getAdjustedDimensions = (
   } = measureText(nextText, getFontString(element));
   const { textAlign, verticalAlign } = element;
 
-  let x, y;
+  let x: number;
+  let y: number;
 
   if (textAlign === "center" && verticalAlign === "middle") {
     const prevMetrics = measureText(element.text, getFontString(element));

src/element/resizeElements.ts

@@ -327,7 +327,7 @@ const resizeSingleTextElement = (
     cy,
     -element.angle,
   );
-  let scale;
+  let scale: number;
   switch (transformHandleType) {
     case "se":
       scale = Math.max(

src/element/transformHandles.ts

@@ -98,7 +98,7 @@ export const getTransformHandlesFromCoords = (
   const centeringOffset = (size - 8) / (2 * zoom.value);
 
   const transformHandles: TransformHandles = {
-    nw: omitSides["nw"]
+    nw: omitSides.nw
       ? undefined
       : generateTransformHandle(
           x1 - dashedLineMargin - handleMarginX + centeringOffset,
@@ -109,7 +109,7 @@ export const getTransformHandlesFromCoords = (
           cy,
           angle,
         ),
-    ne: omitSides["ne"]
+    ne: omitSides.ne
       ? undefined
       : generateTransformHandle(
           x2 + dashedLineMargin - centeringOffset,
@@ -120,7 +120,7 @@ export const getTransformHandlesFromCoords = (
           cy,
           angle,
         ),
-    sw: omitSides["sw"]
+    sw: omitSides.sw
       ? undefined
       : generateTransformHandle(
           x1 - dashedLineMargin - handleMarginX + centeringOffset,
@@ -131,7 +131,7 @@ export const getTransformHandlesFromCoords = (
           cy,
           angle,
         ),
-    se: omitSides["se"]
+    se: omitSides.se
       ? undefined
       : generateTransformHandle(
           x2 + dashedLineMargin - centeringOffset,
@@ -142,7 +142,7 @@ export const getTransformHandlesFromCoords = (
           cy,
           angle,
         ),
-    rotation: omitSides["rotation"]
+    rotation: omitSides.rotation
       ? undefined
       : generateTransformHandle(
           x1 + width / 2 - handleWidth / 2,
@@ -162,8 +162,8 @@ export const getTransformHandlesFromCoords = (
   // We only want to show height handles (all cardinal directions)  above a certain size
   const minimumSizeForEightHandles = (5 * size) / zoom.value;
   if (Math.abs(width) > minimumSizeForEightHandles) {
-    if (!omitSides["n"]) {
+    if (!omitSides.n) {
-      transformHandles["n"] = generateTransformHandle(
+      transformHandles.n = generateTransformHandle(
         x1 + width / 2 - handleWidth / 2,
         y1 - dashedLineMargin - handleMarginY + centeringOffset,
         handleWidth,
@@ -173,8 +173,8 @@ export const getTransformHandlesFromCoords = (
         angle,
       );
     }
-    if (!omitSides["s"]) {
+    if (!omitSides.s) {
-      transformHandles["s"] = generateTransformHandle(
+      transformHandles.s = generateTransformHandle(
         x1 + width / 2 - handleWidth / 2,
         y2 + dashedLineMargin - centeringOffset,
         handleWidth,
@@ -186,8 +186,8 @@ export const getTransformHandlesFromCoords = (
     }
   }
   if (Math.abs(height) > minimumSizeForEightHandles) {
-    if (!omitSides["w"]) {
+    if (!omitSides.w) {
-      transformHandles["w"] = generateTransformHandle(
+      transformHandles.w = generateTransformHandle(
         x1 - dashedLineMargin - handleMarginX + centeringOffset,
         y1 + height / 2 - handleHeight / 2,
         handleWidth,
@@ -197,8 +197,8 @@ export const getTransformHandlesFromCoords = (
         angle,
       );
     }
-    if (!omitSides["e"]) {
+    if (!omitSides.e) {
-      transformHandles["e"] = generateTransformHandle(
+      transformHandles.e = generateTransformHandle(
         x2 + dashedLineMargin - centeringOffset,
         y1 + height / 2 - handleHeight / 2,
         handleWidth,

src/packages/utils/README.md

@@ -2,11 +2,15 @@
 
 ## Install
 
-    npm i @excalidraw/utils
+```bash
+npm install @excalidraw/utils
+```
 
 If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
 
-    yarn add @excalidraw/utils
+```bashs
+yarn add @excalidraw/utils
+```
 
 ## API
 

src/utils.ts

@@ -240,9 +240,7 @@ const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);
  *  RTL.
  * See https://github.com/excalidraw/excalidraw/pull/1722#discussion_r436340171
  */
-export const isRTL = (text: string) => {
+export const isRTL = (text: string) => RE_RTL_CHECK.test(text);
-  return RE_RTL_CHECK.test(text);
-};
 
 export function tupleToCoors(
   xyTuple: readonly [number, number],
@@ -268,10 +266,10 @@ export const findIndex = <T>(
     fromIndex = array.length + fromIndex;
   }
   fromIndex = Math.min(array.length, Math.max(fromIndex, 0));
-  let i = fromIndex - 1;
+  let index = fromIndex - 1;
-  while (++i < array.length) {
+  while (++index < array.length) {
-    if (cb(array[i], i, array)) {
+    if (cb(array[index], index, array)) {
-      return i;
+      return index;
     }
   }
   return -1;
@@ -286,10 +284,10 @@ export const findLastIndex = <T>(
     fromIndex = array.length + fromIndex;
   }
   fromIndex = Math.min(array.length - 1, Math.max(fromIndex, 0));
-  let i = fromIndex + 1;
+  let index = fromIndex + 1;
-  while (--i > -1) {
+  while (--index > -1) {
-    if (cb(array[i], i, array)) {
+    if (cb(array[index], index, array)) {
-      return i;
+      return index;
     }
   }
   return -1;

src/zindex.ts

@@ -15,18 +15,18 @@ const getIndicesToMove = (
   let selectedIndices: number[] = [];
   let deletedIndices: number[] = [];
   let includeDeletedIndex = null;
-  let i = -1;
+  let index = -1;
-  while (++i < elements.length) {
+  while (++index < elements.length) {
-    if (appState.selectedElementIds[elements[i].id]) {
+    if (appState.selectedElementIds[elements[index].id]) {
       if (deletedIndices.length) {
         selectedIndices = selectedIndices.concat(deletedIndices);
         deletedIndices = [];
       }
-      selectedIndices.push(i);
+      selectedIndices.push(index);
-      includeDeletedIndex = i + 1;
+      includeDeletedIndex = index + 1;
-    } else if (elements[i].isDeleted && includeDeletedIndex === i) {
+    } else if (elements[index].isDeleted && includeDeletedIndex === index) {
-      includeDeletedIndex = i + 1;
+      includeDeletedIndex = index + 1;
-      deletedIndices.push(i);
+      deletedIndices.push(index);
     } else {
       deletedIndices = [];
     }
@@ -187,7 +187,8 @@ const shiftElementsToEnd = (
   const targetElements: ExcalidrawElement[] = [];
   const displacedElements: ExcalidrawElement[] = [];
 
-  let leadingIndex, trailingIndex;
+  let leadingIndex: number;
+  let trailingIndex: number;
   if (direction === "left") {
     if (appState.editingGroupId) {
       const groupElements = getElementsInGroup(