Fix lot of eslint problems

.eslintignore

@@ -0,0 +1,3 @@
+/dist
+/public
+/src/dts

.eslintrc.cjs

@@ -1,4 +1,9 @@
 module.exports = {
+  settings: {
+    react: {
+      version: "detect"
+    }
+  },
   env: {
     browser: true,
     es2021: true
@@ -43,40 +48,6 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'error',
     '@typescript-eslint/ban-types': ['error'],
     '@typescript-eslint/no-floating-promises': 'off', // disabled cuz troublesome for SweetAlert since they never reject
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        "selector": "default",
-        "format": ["camelCase"]
-      },
-      {
-        'selector': 'function',
-        'format': ['PascalCase']
-      },
-      {
-        "selector": "variable",
-        "format": ["camelCase", "UPPER_CASE"]
-      },
-      {
-        "selector": "parameter",
-        "format": ["camelCase"],
-        "leadingUnderscore": "allow"
-      },
-      {
-        'selector': ['enumMember', 'enum'],
-        'format': ['PascalCase']
-      },
-      {
-        "selector": "memberLike",
-        "modifiers": ["private"],
-        "format": ["camelCase"],
-        "leadingUnderscore": "require"
-      },
-      {
-        "selector": ['typeLike'],
-        "format": ["PascalCase"],
-      }
-    ],
 
     // React
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks

src/Components/App/App.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { loadEnv } from 'vite';
+import { beforeEach, describe, it } from 'vitest';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { AppState } from '../../Enums/AppState';
 import { FAST_BOOT } from '../../utils/default';
-import { fireEvent, render, RenderResult, screen } from '../../utils/test-utils';
+import { fireEvent, render, RenderResult } from '../../utils/test-utils';
 import { App } from './App';
 
 describe.concurrent('App', () => {
@@ -15,7 +15,7 @@ describe.concurrent('App', () => {
   });
 
   it('New editor', async() => {
-    if (FAST_BOOT) {
+    if (FAST_BOOT !== AppState.MainMenu) {
       return;
     }
 
@@ -24,7 +24,7 @@ describe.concurrent('App', () => {
   }, 10000);
 
   it('Load editor by file', () => {
-    if (FAST_BOOT) {
+    if (FAST_BOOT !== AppState.MainMenu) {
       return;
     }
 
@@ -37,7 +37,7 @@ describe.concurrent('App', () => {
     const load2 = app.getByText(/Load a configuration file/i);
     fireEvent.click(load2);
 
-    const chooseFile = app.getByText(/Import Save/i);
+    app.getByText(/Import Save/i);
-    const inputFile: HTMLInputElement = document.querySelector('input[type="file"]') as HTMLInputElement;
+    document.querySelector('input[type="file"]') as HTMLInputElement;
   });
 });

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -297,46 +297,3 @@ function HandleReplace(
 
   return newHistoryBeforeDelete;
 }
-
-function HandleInsert(
-  containers: Map<string, IContainerModel>,
-  selectedContainer: IContainerModel,
-  response: ISetContainerListResponse,
-  configuration: IConfiguration,
-  history: IHistoryState[],
-  historyCurrentStep: number
-): IHistoryState[] {
-  const parent = FindContainerById(containers, selectedContainer.properties.id);
-  if (parent === undefined || parent === null) {
-    throw new Error('[InsertContainer] Cannot insert in a container that does not exists');
-  }
-
-  const index = parent.children.indexOf(selectedContainer.properties.id);
-
-  const newHistoryAfterDelete = DeleteContainer(
-    selectedContainer.properties.id,
-    history,
-    historyCurrentStep
-  );
-
-  const { history: newHistoryBeforeDelete } = AddContainers(
-    index,
-    response.Containers,
-    selectedContainer.properties.parentId,
-    configuration,
-    newHistoryAfterDelete,
-    newHistoryAfterDelete.length - 1
-  );
-
-  // Remove AddContainers from history
-  if (import.meta.env.PROD) {
-    newHistoryBeforeDelete.splice(newHistoryBeforeDelete.length - 2, 1);
-  }
-
-  // Rename the last action by Replace
-  const types = response.Containers.map(container => container.Type);
-  newHistoryBeforeDelete[newHistoryBeforeDelete.length - 1].lastAction =
-    `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`;
-
-  return newHistoryBeforeDelete;
-}

src/Components/Loader/Loader.tsx

@@ -2,10 +2,7 @@ import './Loader.scss';
 
 import * as React from 'react';
 
-export interface ILoaderProps {
+export function Loader(): JSX.Element {
-}
-
-export function Loader(props: ILoaderProps): JSX.Element {
   return (
     <div className='loader'>
         Loading...

src/Components/Messages/Messages.tsx

@@ -4,8 +4,6 @@ import { FixedSizeList as List } from 'react-window';
 import { MessageType } from '../../Enums/MessageType';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IMessage } from '../../Interfaces/IMessage';
-import { DISABLE_API } from '../../utils/default';
-import { GetCircularReplacer } from '../../utils/saveload';
 import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
 import { Text } from '../Text/Text';
 

src/Components/SVG/Elements/Container.tsx

@@ -95,17 +95,17 @@ export function Container(props: IContainerProps): JSX.Element {
   );
 }
 
-function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): React.ReactNode {
+function CreateReactCustomSVG(customSVG: string, properties: IContainerProperties): React.ReactNode {
   return <Interweave
     tagName='g'
     disableLineBreaks={true}
     content={customSVG}
     allowElements={true}
-    transform={(node, children) => Transform(node, children, props)}
+    transform={(node, children) => Transform(node, children, properties)}
   />;
 }
 
-function Transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode {
+function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode {
   const supportedTags = ['line', 'path', 'rect'];
   if (supportedTags.includes(node.tagName.toLowerCase())) {
     const attributes: { [att: string]: string | object | null } = {};
@@ -118,13 +118,14 @@ function Transform(node: HTMLElement, children: Node[], props: IContainerPropert
 
       if (attributeValue.startsWith('{userData.') && attributeValue.endsWith('}')) {
         // support for userData
-        if (props.userData === undefined) {
+        const userData = properties.userData;
+        if (userData === undefined) {
           return undefined;
         }
 
         const userDataKey = attributeValue.replace(/userData\./, '');
 
-        const prop = Object.entries(props.userData).find(([key]) => `{${key}}` === userDataKey);
+        const prop = Object.entries(userData).find(([key]) => `{${key}}` === userDataKey);
         if (prop !== undefined) {
           attributes[Camelize(attName)] = prop[1];
           return;
@@ -139,7 +140,7 @@ function Transform(node: HTMLElement, children: Node[], props: IContainerPropert
         return;
       }
 
-      const prop = Object.entries(props).find(([key]) => `{${key}}` === attributeValue);
+      const prop = Object.entries(properties).find(([key]) => `{${key}}` === attributeValue);
       if (prop !== undefined) {
         attributes[Camelize(attName)] = prop[1];
         return;

src/Components/SVG/SVG.tsx

@@ -26,6 +26,7 @@ export const ID = 'svg';
 
 export function SVG(props: ISVGProps): JSX.Element {
   const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const [value, setValue] = React.useState<Value>({} as Value);
   const [scale, setScale] = React.useState<number>(value.a ?? 1);
 

src/Components/SymbolProperties/SymbolForm.tsx

@@ -3,7 +3,6 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
-import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
 import { Text } from '../Text/Text';
 
 interface ISymbolFormProps {

src/Components/SymbolsList/SymbolsList.tsx

@@ -14,7 +14,7 @@ interface ISymbolsSidebarProps {
 export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
   // States
   const divRef = React.useRef<HTMLDivElement>(null);
-  const [width, height] = useSize(divRef);
+  const height = useSize(divRef)[1];
   // Render
   const containers = [...props.symbols.values()];
   function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {

src/Components/UI/UseWorker.tsx

@@ -21,7 +21,7 @@ export function UseWorker(
 
     return () => {
     };
-  }, [state]);
+  }, [state, configurationUrl]);
 
   React.useEffect(() => {
     myWorker.onmessage = (event) => {
@@ -53,5 +53,5 @@ export function UseAsync(
       .then(async(json: IGetFeedbackResponse) => {
         setMessages(json.messages);
       });
-  }, [state]);
+  }, [state, configurationUrl, setMessages]);
 }

src/Events/AppEvents.ts

@@ -40,6 +40,12 @@ export function UseCustomEvents(
   setAppState: (appState: AppState) => void
 ): void {
   useEffect(() => {
+    const current = appRef.current;
+
+    if (current === null) {
+      return;
+    }
+
     const funcs = new Map<string, () => void>();
     for (const event of events) {
       function Func(eventInitDict?: CustomEventInit): void {
@@ -51,7 +57,7 @@ export function UseCustomEvents(
           eventInitDict
         });
       }
-      appRef.current?.addEventListener(event.name, Func);
+      current.addEventListener(event.name, Func);
       funcs.set(event.name, Func);
     }
     return () => {
@@ -60,7 +66,7 @@ export function UseCustomEvents(
         if (func === undefined) {
           continue;
         }
-        appRef.current?.removeEventListener(event.name, func);
+        current.removeEventListener(event.name, func);
       }
     };
   });

src/Events/EditorEvents.ts

@@ -51,8 +51,14 @@ export function UseCustomEvents(
       historyCurrentStep,
       configuration
     };
+    const current = editorRef.current;
+
+    if (current === null) {
+      return;
+    }
 
     const funcs = new Map<string, () => void>();
+
     for (const event of events) {
       function Func(eventInitDict?: CustomEventInit): void {
         return event.func({
@@ -62,7 +68,7 @@ export function UseCustomEvents(
           eventInitDict
         });
       }
-      editorRef.current?.addEventListener(event.name, Func);
+      current?.addEventListener(event.name, Func);
       funcs.set(event.name, Func);
     }
     return () => {
@@ -71,7 +77,7 @@ export function UseCustomEvents(
         if (func === undefined) {
           continue;
         }
-        editorRef.current?.removeEventListener(event.name, func);
+        current?.removeEventListener(event.name, func);
       }
     };
   });

src/utils/default.ts

@@ -8,11 +8,12 @@ import { IEditorState } from '../Interfaces/IEditorState';
 import { ISymbolModel } from '../Interfaces/ISymbolModel';
 import { Orientation } from '../Enums/Orientation';
 import { Position } from '../Enums/Position';
+import { AppState } from '../Enums/AppState';
 
 /// EDITOR DEFAULTS ///
 
 /** Enable fast boot and disable main menu (0 = disabled, 1 = loading, 2 = loaded) */
-export const FAST_BOOT = import.meta.env.PROD ? 2 : 0;
+export const FAST_BOOT = import.meta.env.PROD ? AppState.Loaded : AppState.MainMenu;
 
 /** Disable any call to the API (default = false) */
 export const DISABLE_API = false;
@@ -184,7 +185,7 @@ const DEFAULT_CONTAINER_STYLE = {
   fillOpacity: 1,
   fill: 'white',
   strokeWidth: 2
-}
+};
 
 /**
  * Default Main container properties

src/utils/itertools.ts

@@ -12,7 +12,6 @@ export function * MakeChildrenIterator(containers: Map<string, IContainerModel>,
   };
 }
 
-
 /**
  * Returns a Generator iterating of over the children depth-first
  */

src/vite-env.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {

tsconfig.json

@@ -17,6 +17,10 @@
     "jsx": "react-jsx"
   },
   "include": ["src"],
-  "exclude": ["test-server"],
+  "exclude": [
+    "test-server",
+    "public/**/*",
+    "src/dts/**/*"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }