chore: format web base code consistently (#1460)

## Problem For whatever reason, the code web frontend code does not have a consistent format. ## Solution _Prettify_ the code by running `npx prettier . -w` after adapting the configuration we had in `.prettierrc` and updating the list of directories/files it should ignore via `.prettierignore` file. What we have decided it to use as much defaults as possible, ending up with just one override: `printWidth`. Having lines up to 100 characters length looks a good compromise for us in terms of code readability. To make the change possible, conflicts between ESLint and Prettier has been solved by making use of https://github.com/prettier/eslint-config-prettier. Something similar with Stylelint, for which https://github.com/prettier/stylelint-prettier has been used.
agama-project · Jul 12, 2024 · ef05fe8 · ef05fe8
1 parent 2b7a16e
commit ef05fe8
Show file tree

Hide file tree

Showing 246 changed files with 4,975 additions and 4,543 deletions.
diff --git a/web/.babelrc.json b/web/.babelrc.json
@@ -1,14 +1,17 @@
 {
-    "presets": [
-        ["@babel/env", {
-            "targets": {
-                "chrome": "57",
-                "firefox": "52",
-                "safari": "10.3",
-                "edge": "16",
-                "opera": "44"
-            }
-        }],
-        "@babel/preset-react"
-    ]
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "chrome": "57",
+          "firefox": "52",
+          "safari": "10.3",
+          "edge": "16",
+          "opera": "44"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
 }
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -1,83 +1,94 @@
 {
-    "root": true,
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jest": true
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "standard",
+    "standard-jsx",
+    "standard-react",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-      "eslint:recommended",
-      "standard",
-      "standard-jsx",
-      "standard-react",
-      "plugin:@typescript-eslint/recommended"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": 7,
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "sourceType": "module"
-    },
-    "plugins": ["agama-i18n", "flowtype", "i18next", "react", "react-hooks", "@typescript-eslint"],
-    "rules": {
-        "agama-i18n/string-literals": "error",
-        "i18next/no-literal-string": "error",
-        "indent": ["error", 2,
-            {
-                "ObjectExpression": "first",
-                "CallExpression": {"arguments": "first"},
-                "MemberExpression": 1,
-                "ignoredNodes": [ "JSXAttribute" ],
-                "SwitchCase": 1
-            }],
-        "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
-        "no-var": "error",
-        "no-multi-str": "off",
-        "no-use-before-define": "off",
-        "@typescript-eslint/no-unused-vars": "off",
-        "@typescript-eslint/no-use-before-define": "warn",
-        "@typescript-eslint/ban-ts-comment": "off",
-        "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-        "prefer-promise-reject-errors": ["error", { "allowEmptyReject": true }],
-        "react/jsx-indent": ["error", 2],
-        "semi": ["error", "always", { "omitLastInOneLineBlock": true }],
-
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "error",
-
-        "camelcase": "off",
-        "comma-dangle": "off",
-        "curly": "off",
-        "jsx-quotes": "off",
-        "key-spacing": "off",
-        "no-console": "off",
-        "quotes": "off",
-        "react/jsx-curly-spacing": "off",
-        "react/jsx-indent-props": "off",
-        "react/prop-types": "off",
-        "space-before-function-paren": "off",
-        "n/no-callback-literal": "off"
-    },
-    "overrides": [
+    "sourceType": "module"
+  },
+  "plugins": [
+    "agama-i18n",
+    "flowtype",
+    "i18next",
+    "react",
+    "react-hooks",
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "agama-i18n/string-literals": "error",
+    "i18next/no-literal-string": "error",
+    "no-var": "error",
+    "no-multi-str": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-use-before-define": "warn",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "lines-between-class-members": [
+      "error",
+      "always",
       {
-        // do not check translations in the testing or development files
-        "files": ["*.test.*", "test-utils.js"],
-        "rules": {
-          "i18next/no-literal-string": "off"
-        }
-      },
+        "exceptAfterSingleLine": true
+      }
+    ],
+    "prefer-promise-reject-errors": [
+      "error",
       {
-        // do not check translation arguments in the test, it checks some internals by passing variables
-        "files": ["i18n.test.js"],
-        "rules": {
-          "agama-i18n/string-literals": "off"
-        }
+        "allowEmptyReject": true
       }
     ],
-    "globals": {
-        "require": false,
-        "module": false
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "camelcase": "off",
+    "comma-dangle": "off",
+    "curly": "off",
+    "jsx-quotes": "off",
+    "key-spacing": "off",
+    "no-console": "off",
+    "quotes": "off",
+    "react/jsx-curly-spacing": "off",
+    "react/jsx-indent-props": "off",
+    "react/prop-types": "off",
+    "space-before-function-paren": "off",
+    "n/no-callback-literal": "off"
+  },
+  "overrides": [
+    {
+      // do not check translations in the testing or development files
+      "files": [
+        "*.test.*",
+        "test-utils.js"
+      ],
+      "rules": {
+        "i18next/no-literal-string": "off"
+      }
+    },
+    {
+      // do not check translation arguments in the test, it checks some internals by passing variables
+      "files": [
+        "i18n.test.js"
+      ],
+      "rules": {
+        "agama-i18n/string-literals": "off"
+      }
     }
+  ],
+  "globals": {
+    "require": false,
+    "module": false
+  }
 }
diff --git a/web/.prettierignore b/web/.prettierignore
@@ -1 +1,5 @@
-src/lib/cockpit.js
+dist
+po
+public
+share
+src/lib
diff --git a/web/.prettierrc b/web/.prettierrc
@@ -1,7 +1,3 @@
 {
-  "arrowParens": "avoid",
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": false,
-  "trailingComma": "none"
+  "printWidth": 100
 }
diff --git a/web/.stylelintrc.json b/web/.stylelintrc.json
@@ -1,7 +1,11 @@
 {
+  "plugins": [
+    "stylelint-prettier"
+  ],
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-standard-scss"
+    "stylelint-config-standard-scss",
+    "stylelint-prettier/recommended"
   ],
   "rules": {
     "at-rule-empty-line-before": null,

diff --git a/web/README.md b/web/README.md
@@ -30,7 +30,7 @@ machine (a virtual machine as well). In that case run
     AGAMA_SERVER=https://<IP>:<port> npm run server -- --open
 ```
 
-Where  `AGAMA_SERVER` is the IP address, the hostname or the full URL of the
+Where `AGAMA_SERVER` is the IP address, the hostname or the full URL of the
 running Agama server instance. This is especially useful if you use the Live ISO
 which does not contain any development tools, you can develop the web frontend
 easily from your workstation.

diff --git a/web/__mocks__/svg.js b/web/__mocks__/svg.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-export default ({...props}) => (
+export default ({ ...props }) => (
   // Simple SVG square based on a wikimedia example https://commons.wikimedia.org/wiki/SVG_examples
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="28" height="28" {...props}>
     <rect x="0" y="0" width="28" height="28" />

diff --git a/web/babel.config.js b/web/babel.config.js
@@ -1,16 +1,13 @@
 const { NODE_ENV } = process.env;
 
-const presets = [
-  '@babel/preset-react',
-  ['@babel/preset-env', { targets: { node: 'current' } }]
-];
+const presets = ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "current" } }]];
 const plugins = [];
 
-if (!['production', 'test'].includes(NODE_ENV)) {
-  plugins.push('react-refresh/babel');
+if (!["production", "test"].includes(NODE_ENV)) {
+  plugins.push("react-refresh/babel");
 }
 
 module.exports = {
   presets,
-  plugins
+  plugins,
 };
diff --git a/web/cspell.json b/web/cspell.json
@@ -84,11 +84,5 @@
       ]
     }
   ],
-  "dictionaries": [
-    "custom",
-    "css",
-    "en-common-misspelling",
-    "fullstack",
-    "html"
-  ]
+  "dictionaries": ["custom", "css", "en-common-misspelling", "fullstack", "html"]
 }
diff --git a/web/jest.config.js b/web/jest.config.js
@@ -3,8 +3,8 @@
  * https://jestjs.io/docs/configuration
  */
 
-const { pathsToModuleNameMapper } = require('ts-jest');
-const { compilerOptions } = require('./tsconfig');
+const { pathsToModuleNameMapper } = require("ts-jest");
+const { compilerOptions } = require("./tsconfig");
 
 module.exports = {
   // All imported modules in your tests should be mocked automatically
@@ -23,18 +23,13 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: [
-    "src/**/*.{js,jsx}",
-    "!src/lib/*.js"
-  ],
+  collectCoverageFrom: ["src/**/*.{js,jsx}", "!src/lib/*.js"],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: [
-    "/node_modules/"
-  ],
+  coveragePathIgnorePatterns: ["/node_modules/"],
 
   // Indicates which provider should be used to instrument code for coverage
   // coverageProvider: "babel",
@@ -66,8 +61,7 @@ module.exports = {
   // globalTeardown: undefined,
 
   // A set of global variables that need to be available in all test environments
-  globals: {
-  },
+  globals: {},
 
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
   // maxWorkers: "50%",
@@ -141,9 +135,7 @@ module.exports = {
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
-  setupFilesAfterEnv: [
-    "<rootDir>/src/setupTests.js"
-  ],
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,
@@ -190,7 +182,7 @@ module.exports = {
   // transform: undefined,
   transform: {
     "\\.m?jsx?$": "babel-jest",
-    "\\.(css|svg)$": "jest-transform-stub"
+    "\\.(css|svg)$": "jest-transform-stub",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation