add workaround for no-unknown-property errors

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
         "no-null",
         "import",
         "promise",
+        "@react-three",
     ],
     extends: [
         "eslint:recommended",
@@ -29,6 +30,7 @@ module.exports = {
         "plugin:import/errors",
         "plugin:import/warnings",
         "plugin:import/typescript",
+        "plugin:@react-three/recommended",
     ],
     settings: {
         react: {

frontend/settings/pin_bindings/model.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unknown-property */
 /* eslint-disable no-null/no-null */
 import React, { useRef } from "react";
 import * as THREE from "three";
@@ -15,6 +14,9 @@ import { debounce, some } from "lodash";
 import { t } from "../../i18next_wrapper";
 import { isExpress } from "../../settings/firmware/firmware_hardware_support";
 import { ButtonPin } from "./list_and_label_support";
+import {
+  AmbientLight, DirectionalLight, Group, Mesh, PointLight,
+} from "../../three_d_garden/components";
 
 const ASSETS = "/3D/";
 const LIB_DIR = `${ASSETS}lib/`;
@@ -265,27 +267,27 @@ export const Model = (props: BoxTopBaseProps) => {
     setZForAllInGroup(e, Z);
     document.body.style.cursor = "default";
   };
-  return <group dispose={null}
+  return <Group dispose={null}
     rotation={[0, 0, Math.PI / 2]}>
     <PerspectiveCamera makeDefault name="camera" fov={30} near={0.1} far={1000}
       position={[-150, 0, 300]}
       rotation={[0, -Math.PI / 6, -Math.PI / 2]} />
-    <pointLight intensity={2} position={[0, 0, 200]} rotation={[0, 0, 0]}
+    <PointLight intensity={2} position={[0, 0, 200]} rotation={[0, 0, 0]}
       distance={0} decay={0} />
-    <directionalLight intensity={0.1}
+    <DirectionalLight intensity={0.1}
       position={[-100, 0, 100]} rotation={[0, 0, 0]} />
-    <ambientLight intensity={0.5} />
-    <mesh name={"electronicsBox"}
+    <AmbientLight intensity={0.5} />
+    <Mesh name={"electronicsBox"}
       geometry={box.nodes.Electronics_Box.geometry}
       material={box.materials[Material.box]}
       scale={SCALE}
       material-color={0xffffff}
       material-emissive={0x999999} />
-    <mesh name={"electronicsBoxGasket"}
+    <Mesh name={"electronicsBoxGasket"}
       geometry={box.nodes.Electronics_Box_Gasket.geometry}
       material={box.materials[Material.gasket]}
       scale={SCALE} />
-    <mesh name={"electronicsBoxLid"}
+    <Mesh name={"electronicsBoxLid"}
       geometry={box.nodes.Electronics_Box_Lid.geometry}
       material={box.materials[Material.lid]}
       scale={SCALE} />
@@ -305,7 +307,7 @@ export const Model = (props: BoxTopBaseProps) => {
         };
         return <group key={btnPosition} name={"button-group"}
           onPointerUp={leave}>
-          <mesh name={"button-housing"}
+          <Mesh name={"button-housing"}
             geometry={btn.nodes["Push_Button_-_Red"].geometry}
             material={btn.materials[Material.button]}
             position={[-30, btnPosition, Z]}
@@ -363,7 +365,7 @@ export const Model = (props: BoxTopBaseProps) => {
       .map(ledIndicator => {
         const { position, color, ref } = ledIndicator;
         return <group key={position}>
-          <mesh name={"led-housing"}
+          <Mesh name={"led-housing"}
             geometry={led.nodes.LED.geometry}
             material={led.materials[Material.led]}
             position={[-50, position, Z]}
@@ -381,7 +383,7 @@ export const Model = (props: BoxTopBaseProps) => {
           </Html>
         </group>;
       })}
-  </group>;
+  </Group>;
 };
 
 export const ElectronicsBoxModel = (props: BoxTopBaseProps) => {

frontend/three_d_garden/components.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {
+  AmbientLightProps,
+  DirectionalLightProps,
+  GroupProps,
+  MeshProps,
+  PointLightProps,
+} from "@react-three/fiber";
+
+// Workaround to avoid disabling no-unknown-property rule
+// eslint is marking props for THREE components starting with lowercase as unknown
+
+export const AmbientLight = (props: AmbientLightProps) =>
+  <ambientLight {...props} />;
+
+export const DirectionalLight = (props: DirectionalLightProps) =>
+  <directionalLight {...props} />;
+
+export const Group = (props: GroupProps) =>
+  <group {...props} />;
+
+export const Mesh = (props: MeshProps) =>
+  <mesh {...props} />;
+
+export const PointLight = (props: PointLightProps) =>
+  <pointLight {...props} />;

frontend/three_d_garden/index.tsx

@@ -1,7 +1,7 @@
-/* eslint-disable react/no-unknown-property */
 import { Circle, PerspectiveCamera, OrbitControls, Box } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import React from "react";
+import { AmbientLight, DirectionalLight } from "./components";
 
 export interface ThreeDGardenProps {
 }
@@ -29,8 +29,8 @@ export const ThreeDGardenModel = (props: ThreeDGardenModelProps) => {
     <OrbitControls maxPolarAngle={Math.PI / 2} dampingFactor={0.2}
       target={[0, 0, 0]}
       minDistance={500} maxDistance={12000} />
-    <ambientLight intensity={1} />
-    <directionalLight intensity={0.5} position={[0, 0, 1000]} />
+    <AmbientLight intensity={1} />
+    <DirectionalLight intensity={0.5} position={[0, 0, 1000]} />
     <Circle name={"ground"}
       receiveShadow={true}
       args={[30000, 16]}

package.json

@@ -81,6 +81,7 @@
     "xterm": "5.3.0"
   },
   "devDependencies": {
+    "@react-three/eslint-plugin": "0.1.1",
     "@types/enzyme": "3.10.12",
     "@types/jest": "29.5.12",
     "@types/readable-stream": "4.0.14",