add prettier and eslint

.eslintignore

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

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['14.x']
+        node: ['18.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
@@ -24,6 +24,9 @@ jobs:
 
       - name: Lint
         run: yarn lint
+
+      - name: Prettier
+        run: yarn prettier:check
 
       - name: Test
         run: yarn test --ci --coverage --maxWorkers=2

.prettierignore

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

eslint.config.js

@@ -0,0 +1,66 @@
+module.exports = [
+  {
+    env: {
+      browser: true,
+      commonjs: true,
+      es6: true,
+      node: true,
+      mocha: 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: 2018,
+      sourceType: 'module',
+      impliedStrict: true,
+    },
+    plugins: [
+      '@typescript-eslint',
+      'react',
+      'import',
+      '@emotion',
+      // 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'] }],
+    },
+    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.
+      },
+    },
+  },
+];

package.json

@@ -15,7 +15,10 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint ./src/**/*",
+    "lint:ts:fix": "eslint --fix ./src",
+    "prettier": "prettier --write './src/**/*'",
+    "prettier:check": "prettier --check './src/**/*'",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -36,10 +39,10 @@
     }
   },
   "prettier": {
-    "printWidth": 80,
+    "tabWidth": 4,
     "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "singleQuote": false,
+    "trailingComma": "all"
   },
   "author": "Mikyo King <[email protected]>",
   "module": "dist/point-cloud.esm.js",
@@ -71,9 +74,17 @@
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.0",
     "@types/three": "^0.139.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.5.4",
     "d3-scale-chromatic": "^3.0.0",
+    "eslint": "^9.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "husky": "^7.0.4",
     "react": "18",
     "react-dom": "18",

src/Axes.tsx

@@ -1,26 +1,26 @@
-import React, { useEffect, useRef } from 'react';
-import { Color } from 'three';
+import React, { useEffect, useRef } from "react";
+import { Color } from "three";
 
 export const Axes = ({
-  size,
-  color = '#ffffff',
+    size,
+    color = "#ffffff",
 }: {
-  /**
-   * The size of the axes helper
-   */
-  size: number;
-  /**
-   * The color of the axes helper
-   * @default '#ffffff'
-   */
-  color?: string;
+    /**
+     * The size of the axes helper
+     */
+    size: number;
+    /**
+     * The color of the axes helper
+     * @default '#ffffff'
+     */
+    color?: string;
 }) => {
-  const ref = useRef<THREE.AxesHelper>(null);
-  useEffect(() => {
-    if (ref.current) {
-      const colorObj = new Color(color);
-      ref.current.setColors(colorObj, colorObj, colorObj);
-    }
-  }, [color]);
-  return <axesHelper ref={ref} args={[size]} />;
+    const ref = useRef<THREE.AxesHelper>(null);
+    useEffect(() => {
+        if (ref.current) {
+            const colorObj = new Color(color);
+            ref.current.setColors(colorObj, colorObj, colorObj);
+        }
+    }, [color]);
+    return <axesHelper ref={ref} args={[size]} />;
 };

src/Cluster.tsx

@@ -1,71 +1,71 @@
-import React, { useMemo } from 'react';
-import * as THREE from 'three';
-import { mergeBufferGeometries } from 'three-stdlib';
-import { PointCoordinates } from './types';
+import React, { useMemo } from "react";
+import * as THREE from "three";
+import { mergeBufferGeometries } from "three-stdlib";
+import { PointCoordinates } from "./types";
 
 const DEFAULT_RADIUS = 0.1;
 
 export type ClusterPoint = {
-  position: PointCoordinates;
+    position: PointCoordinates;
 };
 
 export type ClusterProps = {
-  data: Array<ClusterPoint>;
-  /**
-   * The radius of each cluster point
-   */
-  pointRadius?: number;
-  /**
-   * The color of the cluster
-   * @default '#999999'
-   */
-  color?: string;
-  /**
-   * The opacity of the cluster
-   * @default 0.1
-   */
-  opacity?: number;
-  /**
-   * Whether or not to render the mesh as a wire frame
-   * @default false
-   */
-  wireframe?: boolean;
+    data: Array<ClusterPoint>;
+    /**
+     * The radius of each cluster point
+     */
+    pointRadius?: number;
+    /**
+     * The color of the cluster
+     * @default '#999999'
+     */
+    color?: string;
+    /**
+     * The opacity of the cluster
+     * @default 0.1
+     */
+    opacity?: number;
+    /**
+     * Whether or not to render the mesh as a wire frame
+     * @default false
+     */
+    wireframe?: boolean;
 };
 
 export function Cluster({
-  data,
-  pointRadius = DEFAULT_RADIUS,
-  color = '#999999',
-  opacity = 0.2,
-  wireframe = false,
+    data,
+    pointRadius = DEFAULT_RADIUS,
+    color = "#999999",
+    opacity = 0.2,
+    wireframe = false,
 }: ClusterProps) {
-  const singleGeometry = useMemo(() => {
-    let geometries: THREE.SphereGeometry[] = [];
-    // Keep track of the points added so that we can remove duplicates
-    const pointSet = new Set();
-    data.forEach((point) => {
-      const { position } = point;
-      // Remove duplicates
-      if (!pointSet.has(position.join(','))) {
-        const geometry = new THREE.SphereGeometry(pointRadius, 12, 12);
-        geometry.translate(position[0], position[1], position[2] || 0);
-        geometries.push(geometry);
-        pointSet.add(position.join(','));
-      }
-    });
+    const singleGeometry = useMemo(() => {
+        let geometries: THREE.SphereGeometry[] = [];
+        // Keep track of the points added so that we can remove duplicates
+        const pointSet = new Set();
+        data.forEach((point) => {
+            const { position } = point;
+            // Remove duplicates
+            if (!pointSet.has(position.join(","))) {
+                const geometry = new THREE.SphereGeometry(pointRadius, 12, 12);
+                geometry.translate(position[0], position[1], position[2] || 0);
+                geometries.push(geometry);
+                pointSet.add(position.join(","));
+            }
+        });
 
-    const geometry = mergeBufferGeometries(geometries);
-    return geometry;
-  }, [data]);
+        const geometry = mergeBufferGeometries(geometries);
+        return geometry;
+    }, [data]);
 
-  return (
-    <mesh geometry={singleGeometry ?? undefined} visible={opacity > 0}>
-      <meshBasicMaterial
-        opacity={opacity}
-        transparent={opacity < 1}
-        color={color}
-        wireframe={wireframe}
-      />
-    </mesh>
-  );
+    return (
+        <mesh geometry={singleGeometry ?? undefined} visible={opacity > 0}>
+            <meshBasicMaterial
+                opacity={opacity}
+                transparent={opacity < 1}
+                color={color}
+                wireframe={wireframe}
+            />
+        </mesh>
+    );
 }