style: reformat all files properly

.eslintignore

@@ -31,6 +31,3 @@ node_modules
 # package files
 package.json
 pnpm-lock.yaml
-
-# Json
-*.json

.prettierrc.js

@@ -1,3 +1,4 @@
+/** @type {import("prettier").Options} */
 module.exports = {
   singleQuote: true,
   arrowParens: 'avoid',

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = { extends: ['@commitlint/config-conventional'] };

jest.config.js

@@ -1,8 +1,8 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
 /*
  * For a detailed explanation regarding each configuration property and type check, visit:
  * https://jestjs.io/docs/configuration
  */
+/** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
   // Automatically clear mock calls, instances and results before every test
   clearMocks: true,
@@ -31,8 +31,8 @@ module.exports = {
     '/src/internal-server',
   ],
 
-  "transform": {
-    "^.+\\.tsx?$": "esbuild-runner/jest",
-    "^.+\\.ts?$": "esbuild-runner/jest"
-  }
+  transform: {
+    '^.+\\.tsx?$': 'esbuild-runner/jest',
+    '^.+\\.ts?$': 'esbuild-runner/jest',
+  },
 };

package.json

@@ -30,15 +30,16 @@
     "dev": "node esbuild.mjs --watch",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "tsc --noEmit && eslint \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
     "lint:fix": "eslint --fix \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
     "extract": "formatjs extract \"src/**/*.{js,jsx,mjs,ts,tsx}\" --ignore=\"**/*.d.ts\" --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' --preserve-whitespace",
     "compile": "formatjs compile \"temp.json\" --out-file src/i18n/locales/en-US.json",
     "manage-translations": "pnpm extract && pnpm compile && rimraf temp.json",
     "build": "preval-build-info-cli && node esbuild.mjs && electron-builder",
     "contributors": "all-contributors",
-    "reformat-files": "prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,mjs,ts,tsx,scss}\"",
-    "prepare-code": "pnpm lint:fix && pnpm reformat-files && pnpm manage-translations",
+    "reformat-files": "prettier --ignore-path .eslintignore --write \"**/*.{js,jsx,mjs,ts,tsx,scss}\"",
+    "prepare-code": "pnpm typecheck && pnpm lint:fix && pnpm reformat-files && pnpm manage-translations",
     "link-readme": "ts-node scripts/link-readme.ts",
     "minify-images": "./scripts/minify-images.sh",
     "start:server": "ts-node src/internal-server/test.ts",
@@ -133,15 +134,18 @@
     "@commitlint/config-conventional": "17.6.7",
     "@electron/notarize": "1.2.3",
     "@formatjs/cli": "6.1.3",
+    "@jest/types": "29.6.1",
     "@types/color": "3.0.3",
     "@types/expect.js": "0.3.29",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.5.3",
     "@types/lodash": "4.14.195",
     "@types/ms": "0.7.31",
     "@types/node": "18.15.3",
+    "@types/prop-types": "15.7.5",
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
+    "@types/react-loader": "2.4.5",
     "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
     "@types/tar": "6.1.5",

src/components/ui/InfoBar.tsx

@@ -72,6 +72,7 @@ class InfoBar extends Component<IProps> {
                 lines={10}
                 scale={0.3}
                 color="#FFF"
+                // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
                 component="span"
               />
               {ctaLabel}

src/components/ui/Infobox.tsx

@@ -85,6 +85,7 @@ class Infobox extends Component<IProps, IState> {
               lines={10}
               scale={0.3}
               color="#FFF"
+              // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
               component="span"
             />
             {ctaLabel}

src/components/ui/Loader.tsx

@@ -28,6 +28,7 @@ class LoaderComponent extends Component<IProps> {
       color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color;
 
     return (
+      // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>'
       <Loader
         loaded={loaded}
         width={4}

src/components/ui/button/index.tsx

@@ -206,6 +206,7 @@ class ButtonComponent extends Component<IProps, IState> {
               width={4}
               scale={0.45}
               // color={theme.buttonLoaderColor[buttonType!]}
+              // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
               parentClassName={classes.loader}
             />
           )}

src/components/ui/loader/index.tsx

@@ -34,6 +34,7 @@ class LoaderComponent extends Component<IProps> {
           width={4}
           scale={0.75}
           color={color || classes.color}
+          // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps>
           parentClassName={classes.loader}
         />
       </div>

src/styles/animations.scss

@@ -1,43 +1,51 @@
-@import "./globals.scss";
+@import './globals.scss';
 
 // FadeIn
-.fadeIn-appear { opacity: .01; }
+.fadeIn-appear {
+  opacity: 0.01;
+}
 
 .fadeIn-appear.fadeIn-appear-active {
   opacity: 1;
-  transition: opacity .5s ease-out;
+  transition: opacity 0.5s ease-out;
 }
 
 .fadeIn-enter {
-  opacity: .01;
-  transition: opacity .5s ease-out;
+  opacity: 0.01;
+  transition: opacity 0.5s ease-out;
 }
 
-.fadeIn-leave { opacity: 1; }
+.fadeIn-leave {
+  opacity: 1;
+}
 
 .fadeIn-leave.fadeIn-leave-active {
-  opacity: .01;
+  opacity: 0.01;
   transition: opacity 300ms ease-in;
 }
 
 // FadeIn Fast
-.fadeIn-fast-appear { opacity: .01; }
+.fadeIn-fast-appear {
+  opacity: 0.01;
+}
 
 .fadeIn-fast-appear.fadeIn-fast-appear-active {
   opacity: 1;
-  transition: opacity .25s ease-out;
+  transition: opacity 0.25s ease-out;
 }
 
 .fadeIn-fast-enter {
-  opacity: .01;
-  transition: opacity .25s ease-out;
+  opacity: 0.01;
+  transition: opacity 0.25s ease-out;
 }
 
-.fadeIn-fast-leave { opacity: 1; }
+.fadeIn-fast-leave {
+  opacity: 1;
+}
 
 .fadeIn-fast-leave.fadeIn-fast-leave-active {
-  opacity: .01;
-  transition: opacity .25s ease-in;
+  opacity: 0.01;
+  transition: opacity 0.25s ease-in;
 }
 
 // Slide down
@@ -48,12 +56,12 @@
 
 .slideDown-appear.slideDown-appear-active {
   max-height: 500px;
-  transition: max-height .5s ease-out;
+  transition: max-height 0.5s ease-out;
 }
 
 .slideDown-enter {
   max-height: 0;
-  transition: max-height .5s ease-out;
+  transition: max-height 0.5s ease-out;
 }
 
 // Slide up
@@ -65,18 +73,20 @@
 .slideUp-appear.slideUp-appear-active {
   opacity: 1;
   transform: translateY(0px);
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 .slideUp-enter {
   opacity: 0;
   transform: translateY(20px);
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
-.slideUp-leave { opacity: 1; }
+.slideUp-leave {
+  opacity: 1;
+}
 
 .slideUp-leave.slideUp-leave-active {
-  opacity: .01;
+  opacity: 0.01;
   transition: opacity 300ms ease-in;
 }