chore: upgrade typescript to version 5

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.js

@@ -0,0 +1,75 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+        jest: true,
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "prettier",
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: "latest",
+        sourceType: "module",
+        impliedStrict: true,
+    },
+    plugins: [
+        "@typescript-eslint",
+        "react",
+        "import",
+        // Not strictly needed but fixes un-used imports via --fix
+        "unused-imports",
+    ],
+    rules: {
+        "import/order": "error",
+        "no-unused-vars": "off",
+        "unused-imports/no-unused-imports": "error",
+        /**
+         * ignore if the variable starts with an underscore
+         */
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
+        ],
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "react/prop-types": 0,
+        "react/display-name": 0,
+        "no-console": "error",
+        "func-names": ["error", "always"],
+        strict: ["error", "global"],
+        "prefer-const": "error",
+        "react/no-unknown-property": [
+            "error",
+            {
+                ignore: [
+                    "css",
+                    "vertexColors",
+                    "args",
+                    "attach",
+                    "transparent",
+                    "geometry",
+                    "visible",
+                    "wireframe",
+                ],
+            },
+        ],
+    },
+    settings: {
+        react: {
+            createClass: "createReactClass", // Regex for Component Factory to use,
+            // default to "createReactClass"
+            pragma: "React", // Pragma to use, default to "React"
+            version: "detect", // React version. "detect" automatically picks the version you have installed.
+        },
+    },
+};

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .cache
 dist
 .vscode
+storybook-static

package.json

@@ -15,7 +15,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "eslint ./src/**/*",
+    "lint": "eslint ./src",
     "lint:ts:fix": "eslint --fix ./src",
     "prettier": "prettier --write './src/**/*'",
     "prettier:check": "prettier --check './src/**/*'",
@@ -79,7 +79,7 @@
     "babel-loader": "^8.2.5",
     "chromatic": "^6.5.4",
     "d3-scale-chromatic": "^3.0.0",
-    "eslint": "^9.1.1",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.1",
@@ -94,7 +94,7 @@
     "three": "^0.153.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.3"
+    "typescript": "^5.4.5"
   },
   "description": "A point cloud library for visualizing point clouds using 2D and 3D canvases.",
   "directories": {

src/Cluster.tsx

@@ -40,7 +40,7 @@ export function Cluster({
     wireframe = false,
 }: ClusterProps) {
     const singleGeometry = useMemo(() => {
-        let geometries: THREE.SphereGeometry[] = [];
+        const geometries: THREE.SphereGeometry[] = [];
         // Keep track of the points added so that we can remove duplicates
         const pointSet = new Set();
         data.forEach((point) => {

src/LassoSelect.tsx

@@ -260,8 +260,8 @@ function updateSelection({
     camera: THREE.Camera;
     selectionPoints: number[];
 }) {
-    let selection: PointBaseProps[] = [];
-    let lassoPolygon: TwoDimensionalPoint[] = [];
+    const selection: PointBaseProps[] = [];
+    const lassoPolygon: TwoDimensionalPoint[] = [];
     for (let i = 0; i < selectionPoints.length; i += 3) {
         lassoPolygon.push([selectionPoints[i], selectionPoints[i + 1]]);
     }

src/ThreeDimensionalBounds.tsx

@@ -1,11 +1,11 @@
 import React, { createContext, useContext, useEffect } from "react";
+import { useThree } from "@react-three/fiber";
 import { ThreeDimensionalBoundsType, ThreeDimensionalPoint } from "./types";
 import {
     getCenterFromThreeDimensionalBounds,
     getMaxDimensionFromThreeDimensionalBounds,
     isOrthographicCamera,
 } from "./utils";
-import { useThree } from "@react-three/fiber";
 
 export type ThreeDimensionalBoundsContextType = {
     bounds: ThreeDimensionalBoundsType;

src/TwoDimensionalBounds.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect } from "react";
+import { useThree } from "@react-three/fiber";
 import { TwoDimensionalBoundsType, TwoDimensionalPoint } from "./types";
 import { getCenterFromTwoDimensionalBounds } from "./utils";
-import { useThree } from "@react-three/fiber";
 
 /**
  * The amount to reduce the zoom by to fit the content when bounds are provided.

src/utils/twoDimensionalUtils.ts

@@ -68,7 +68,7 @@ export function isPointInsidePolygon(
     point: TwoDimensionalPoint,
     polygonPoints: TwoDimensionalPoint[],
 ) {
-    var x = point[0],
+    const x = point[0],
         y = point[1];
 
     let inside = false;