Switch to airbnb eslint

.eslintrc.json

@@ -1,15 +1,28 @@
 {
   "root": true,
   "extends": [
-    "react-app",
+    "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
     "plugin:prettier/recommended"
   ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
   "ignorePatterns": [
     // node_modules is implicitly always ignored
-    "dist"
+    "dist",
+    "vite.config.mts",
+    "jest.config.ts",
+    "jest.setup.ts"
   ],
   "rules": {
     "prettier/prettier": "warn",
-    "curly": "error"
+    "curly": "error",
+    "no-console": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": "error"
   }
 }

babel.config.json

@@ -1,8 +1,12 @@
 {
     "presets": [
+        "airbnb",
         "@babel/preset-env",
         ["@babel/preset-react", { "runtime": "automatic" }],
         "@babel/preset-typescript",
         "babel-preset-vite"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-runtime"
     ]
 }

demo/data/EquipmentSearchBar.js

@@ -148,7 +148,7 @@ const EQUIPMENTS = [
     },
 ];
 
-export const searchEquipments = (searchTerm, equipmentLabelling) => {
+const searchEquipments = (searchTerm, equipmentLabelling) => {
     if (searchTerm) {
         return getEquipmentsInfosForSearchBar(
             equipmentLabelling
@@ -160,7 +160,8 @@ export const searchEquipments = (searchTerm, equipmentLabelling) => {
                   ),
             equipmentLabelling ? (e) => e.name || e.id : (e) => e.id
         );
-    } else {
-        return [];
     }
+    return [];
 };
+
+export default searchEquipments;

demo/data/ReportViewer.js

@@ -6,7 +6,7 @@
  */
 /* eslint-disable no-template-curly-in-string */
 
-export const LOGS_JSON = {
+const LOGS_JSON = {
     taskKey: 'Test',
     defaultName: 'Test',
     taskValues: {},
@@ -230,3 +230,5 @@ export const LOGS_JSON = {
     ],
     reports: [],
 };
+
+export default LOGS_JSON;

demo/data/TreeViewFinder.jsx

@@ -15,7 +15,8 @@ import {
     Whatshot as WhatshotIcon,
 } from '@mui/icons-material';
 
-var PokemonTree = [
+// eslint-disable-next-line import/no-mutable-exports
+let PokemonTree = [
     {
         id: 'D1',
         name: 'Team',
@@ -116,7 +117,8 @@ var PokemonTree = [
     },
 ];
 
-var PokemonList = [
+// eslint-disable-next-line import/no-mutable-exports
+let PokemonList = [
     {
         id: '1',
         name: 'Pikachu',
@@ -137,14 +139,14 @@ var PokemonList = [
     { id: '6', name: 'Machoc', type: 'Combat', power: '64' },
 ];
 
-var IDCounter = 100; // Start at 100 to avoid conflicts for demo
+let IDCounter = 100; // Start at 100 to avoid conflicts for demo
 function fetchInfinitePokemonList() {
-    IDCounter++;
+    IDCounter += 1;
     PokemonList = [
         ...PokemonList,
         {
             id: IDCounter.toString(),
-            name: 'Métamorph_' + new Date().getTime(),
+            name: `Métamorph_${new Date().getTime()}`,
             type: 'Normal',
             power: '1',
             icon: <FiberNewIcon />,
@@ -154,20 +156,20 @@ function fetchInfinitePokemonList() {
 }
 
 function fetchInfinitePokemonTree(nodeId) {
-    IDCounter++;
+    IDCounter += 1;
 
-    let PokemonTreeCopy = [...PokemonTree];
+    const PokemonTreeCopy = [...PokemonTree];
     const dirFound = PokemonTreeCopy.find((element) => element.id === nodeId);
 
     if (dirFound) {
         dirFound.children.push({
             id: IDCounter.toString(),
-            name: 'Métamorph_' + new Date().getTime(),
+            name: `Métamorph_${new Date().getTime()}`,
             type: 'Normal',
             power: '1',
             icon: <FiberNewIcon />,
         });
-        dirFound.childrenCount++;
+        dirFound.childrenCount += 1;
     }
 
     PokemonTree = PokemonTreeCopy;

demo/src/FlatParametersTab.jsx

@@ -7,7 +7,7 @@
 
 import { useCallback, useState } from 'react';
 import RightResizableBox from './right-resizable-box';
-import FlatParameters from '../../src/components/FlatParameters/FlatParameters';
+import { FlatParameters } from '../../src/components/FlatParameters/FlatParameters';
 
 const EXAMPLE_PARAMETERS = [
     {
@@ -198,7 +198,7 @@ const EXAMPLE_PARAMETERS = [
     },
 ];
 
-export const FlatParametersTab = () => {
+function FlatParametersTab() {
     const [currentParameters, setCurrentParameters] = useState({});
     const onChange = useCallback((paramName, value, isEdit) => {
         if (!isEdit) {
@@ -217,7 +217,7 @@ export const FlatParametersTab = () => {
                     paramsAsArray={EXAMPLE_PARAMETERS}
                     initValues={currentParameters}
                     onChange={onChange}
-                    variant={'standard'}
+                    variant="standard"
                     showSeparator
                     selectionWithDialog={(param) =>
                         param?.possibleValues?.length > 10
@@ -226,4 +226,6 @@ export const FlatParametersTab = () => {
             </RightResizableBox>
         </div>
     );
-};
+}
+
+export default FlatParametersTab;

demo/src/InputsTab.jsx

@@ -9,6 +9,7 @@ import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import { Box, Grid } from '@mui/material';
+import { useState } from 'react';
 import AutocompleteInput from '../../src/components/inputs/react-hook-form/autocomplete-inputs/autocomplete-input';
 import TextInput from '../../src/components/inputs/react-hook-form/text-input';
 import RadioInput from '../../src/components/inputs/react-hook-form/radio-input';
@@ -22,7 +23,6 @@ import SubmitButton from '../../src/components/inputs/react-hook-form/utils/subm
 import ExpandingTextField from '../../src/components/inputs/react-hook-form/ExpandingTextField';
 import CustomFormProvider from '../../src/components/inputs/react-hook-form/provider/custom-form-provider';
 import SelectClearable from '../../src/components/inputs/select-clearable';
-import { useState } from 'react';
 
 const AUTOCOMPLETE_INPUT = 'autocomplete';
 const TEXT_INPUT = 'text';
@@ -84,7 +84,7 @@ const areIdsEqual = (val1, val2) => {
 const logWhenValuesChange = false;
 const logWhenValidate = true;
 
-export function InputsTab() {
+function InputsTab() {
     const formMethods = useForm({
         defaultValues: emptyFormData,
         resolver: yupResolver(formSchema),
@@ -124,26 +124,26 @@ export function InputsTab() {
                         <AutocompleteInput
                             name={AUTOCOMPLETE_INPUT}
                             options={basicOptions}
-                            label={'inputs/autocomplete'}
+                            label="inputs/autocomplete"
                             isOptionEqualToValue={areIdsEqual}
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
-                        <TextInput name={TEXT_INPUT} label={'inputs/text'} />
+                        <TextInput name={TEXT_INPUT} label="inputs/text" />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <ExpandingTextField
                             name={DESCRIPTION_INPUT}
-                            label={'inputs/description'}
+                            label="inputs/description"
                             maxCharactersNumber={300}
                             minRows={2}
                             rows={4}
-                        ></ExpandingTextField>
+                        />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <SliderInput
                             name={SLIDER_INPUT}
-                            label={'inputs/slider'}
+                            label="inputs/slider"
                             min={0.0}
                             max={100.0}
                             step={0.1}
@@ -152,44 +152,44 @@ export function InputsTab() {
                     <Grid item xs={gridSize}>
                         <SelectInput
                             name={SELECT_INPUT}
-                            label={'inputs/select'}
+                            label="inputs/select"
                             options={options}
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <SelectClearable
                             value={selectValue}
                             onChange={setSelectValue}
-                            label={'inputs/select'}
+                            label="inputs/select"
                             options={options}
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <RadioInput
                             name={RADIO_INPUT}
-                            label={'inputs/radio'}
+                            label="inputs/radio"
                             options={options}
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <IntegerInput
                             name={INTEGER_INPUT}
-                            label={'inputs/integer'}
+                            label="inputs/integer"
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
-                        <FloatInput name={FLOAT_INPUT} label={'inputs/float'} />
+                        <FloatInput name={FLOAT_INPUT} label="inputs/float" />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <CheckboxInput
                             name={CHECKBOX_INPUT}
-                            label={'inputs/checkbox'}
+                            label="inputs/checkbox"
                         />
                     </Grid>
                     <Grid item xs={gridSize}>
                         <SwitchInput
                             name={SWITCH_INPUT}
-                            label={'inputs/switch'}
+                            label="inputs/switch"
                         />
                     </Grid>
                 </Grid>
@@ -206,3 +206,5 @@ export function InputsTab() {
         </CustomFormProvider>
     );
 }
+
+export default InputsTab;