Update frontend linting

2024-10-25 23:48:08 +02:00 · 2024-10-25 23:48:08 +02:00 · 08a45037fa
commit 08a45037fa
parent 31eebd8dab
21 changed files with 2035 additions and 3823 deletions
--- a/app/frontend/.eslintignore
+++ b/app/frontend/.eslintignore
--- a/app/frontend/.eslintrc.cjs
+++ b/app/frontend/.eslintrc.cjs
@ -1,46 +0,0 @@
-module.exports = {
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "react-app",
-    "airbnb-typescript",
-    "airbnb/hooks",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier", // Help to cooperate ESLint and Prettier
-    "plugin:prettier/recommended",
-  ],
-  ignorePatterns: [
-    "/build",
-    "/dist",
-    "/node_modules",
-    "/.eslintrc.cjs",
-    "/vite.config.ts",
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: "latest",
-    project: "./tsconfig.json",
-    sourceType: "module",
-    tsconfigRootDir: __dirname,
-  },
-  plugins: ["react-refresh"],
-  rules: {
-    // Run prettier separately but use its configuration
-    // This speeds up on-the-fly linting during development
-    "prettier/prettier": "off",
-    "react-refresh/only-export-components": "warn",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: true,
-      },
-    ],
-  },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-};
--- a/app/frontend/.prettierignore
+++ b/app/frontend/.prettierignore
@ -1,9 +0,0 @@
-/node_modules
-# Ignore artifacts:
-/build
-/dist
-/coverage
-
-# generated code
-/src/api/naming
-/src/preview
--- a/app/frontend/.prettierrc
+++ b/app/frontend/.prettierrc
@ -1,4 +0,0 @@
-{
-  "importOrder": ["^[./]"],
-  "importOrderSeparation": true
-}
--- a/app/frontend/eslint.config.mjs
+++ b/app/frontend/eslint.config.mjs
@ -0,0 +1,20 @@
+import sharedConfig from "./eslint.shared.mjs";
+
+export default [
+  {
+    ignores: [
+      "eslint.shared.mjs",
+      "prettier.config.mjs",
+      "vite.config.ts"
+    ],
+  },
+  ...sharedConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        project: "./tsconfig.app.json",
+      },
+    },
+  }
+];
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@ -8,13 +8,13 @@
    "check": "npm run typecheck && echo \"Checking files with prettier\" && npm run prettier > /dev/null && npm run lint",
    "dev": "vite",
    "fix": "npm run prettier:format && npm run lint:fix",
-    "lint": "eslint src --ext ts,tsx",
-    "lint:fix": "eslint --fix src --ext ts,tsx",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
    "lint:fix:changed": "eslint --fix $(npm run --silent list:changed)",
    "list:changed": "git diff HEAD --name-only --diff-filter=ACM --relative=app/console/src \"*.tsx\" \"*.ts\" \"*.js\" | sed 's#^#./src/#' ; git ls-files \"./src/*.tsx\" \"./src/*.ts\" -o --exclude-standard",
-    "prettier": "prettier --config ./.prettierrc --check 'src/**/*.{js,ts,tsx}'",
-    "prettier:format": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,tsx}'",
-    "prettier:format:changed": "prettier --config ./.prettierrc --write $(npm run --silent list:changed)",
+    "prettier": "prettier --check 'src/**/*.{js,ts,tsx}'",
+    "prettier:format": "prettier --write 'src/**/*.{js,ts,tsx}'",
+    "prettier:format:changed": "prettier --write $(npm run --silent list:changed)",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
@ -25,27 +25,28 @@
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@eslint/js": "^9.13.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/stylis": "^4.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react-swc": "^3.0.0",
-    "eslint": "^8.38.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint": "^9.13.0",
    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-formatjs": "^5.1.5",
+    "eslint-plugin-import-x": "^4.3.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
    "normalize.css": "^8.0.1",
+    "prettier": "^3.3.3",
    "react-intl": "^6.4.2",
    "react-router-dom": "^6.11.2",
    "stylis": "^4.2.0",
-    "typescript": "^5.0.2",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
    "vite": "^4.3.9"
  }
 }
--- a/app/frontend/prettier.config.mjs
+++ b/app/frontend/prettier.config.mjs
@ -0,0 +1,5 @@
+export default {
+  importOrder: ["^[./]"],
+  importOrderSeparation: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+};
--- a/app/frontend/src/App.tsx
+++ b/app/frontend/src/App.tsx
@ -1,4 +1,4 @@
-import createCache from "@emotion/cache";
+import createCache, { EmotionCache } from "@emotion/cache";
 import { CacheProvider, Global, ThemeProvider, css } from "@emotion/react";
 import styled from "@emotion/styled";
 import normalizeCss from "normalize.css/normalize.css?inline";
@ -13,7 +13,7 @@ const themeCache = createCache({
  key: "cv",
 });

-const i = themeCache.insert;
+const i: EmotionCache["insert"] = (...args) => themeCache.insert(...args);
 themeCache.insert = (...args) => {
  args[2].tags.forEach((t) => {
    if (!t.getAttribute("media")) {
--- a/app/frontend/src/components/CV/Experience.tsx
+++ b/app/frontend/src/components/CV/Experience.tsx
@ -9,19 +9,19 @@ import { Paragraph } from "../common/Text";
 const messages = defineMessages({
  skills: {
    defaultMessage: "Skills",
-    id: "Experience.skills",
+    id: "4JISx9",
  },
 });

 const approxCurrentYears = {
  InvestBay: Math.round(
-    (Date.now() - new Date("2024-02-01").getTime()) / 1000 / 60 / 60 / 24 / 365
+    (Date.now() - new Date("2024-02-01").getTime()) / 1000 / 60 / 60 / 24 / 365,
  ),
  YourPass: Math.round(
-    (Date.now() - new Date("2021-06-01").getTime()) / 1000 / 60 / 60 / 24 / 365
+    (Date.now() - new Date("2021-06-01").getTime()) / 1000 / 60 / 60 / 24 / 365,
  ),
  YourSystemSysOps: Math.round(
-    (Date.now() - new Date("2022-01-01").getTime()) / 1000 / 60 / 60 / 24 / 365
+    (Date.now() - new Date("2022-01-01").getTime()) / 1000 / 60 / 60 / 24 / 365,
  ),
 };

@ -103,12 +103,12 @@ const Experience: React.FC = () => {
            {intl.formatMessage(
              {
                defaultMessage: "February 2024 - Present",
-                id: "Experience.investbay",
+                id: "w2Pn7j",
              },
              {
                // not used atm
                count: approxCurrentYears.InvestBay,
-              }
+              },
            )}
          </Paragraph>
          <Paragraph>
@ -126,11 +126,11 @@ const Experience: React.FC = () => {
            {intl.formatMessage(
              {
                defaultMessage: "July 2021 - Present ({count} years)",
-                id: "Experience.yourpass",
+                id: "6T3Cls",
              },
              {
                count: approxCurrentYears.YourPass,
-              }
+              },
            )}
          </Paragraph>
          <Paragraph>
@ -149,11 +149,11 @@ const Experience: React.FC = () => {
            {intl.formatMessage(
              {
                defaultMessage: "January 2022 - Present ({count} years)",
-                id: "Experience.yoursystem",
+                id: "nqa9U0",
              },
              {
                count: approxCurrentYears.YourSystemSysOps,
-              }
+              },
            )}
          </Paragraph>
          <Paragraph>
@ -168,7 +168,7 @@ const Experience: React.FC = () => {
          <Paragraph>
            {intl.formatMessage({
              defaultMessage: "February 2016 - December 2021 (5 years)",
-              id: "Experience.yoursystem",
+              id: "96SwL8",
            })}
          </Paragraph>
          <Paragraph>
@ -186,14 +186,14 @@ const Experience: React.FC = () => {
          <Paragraph>
            {intl.formatMessage({
              defaultMessage: "Birth - February 2016",
-              id: "Experience.past",
+              id: "KtILZ7",
            })}
          </Paragraph>
          <Paragraph>
            {intl.formatMessage({
              defaultMessage:
                "Working on smaller projects such as chats, forum based websites, web based presentations, most notably a system for handling the driver training center and driving school agenda... Tinkering...",
-              id: "Experience.pastDescription",
+              id: "obpLg6",
            })}
          </Paragraph>
        </Content>
--- a/app/frontend/src/components/CV/Skill.tsx
+++ b/app/frontend/src/components/CV/Skill.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React, { Children } from "react";

 import PageBreakAvoid from "../common/PageBreakAvoid";
 import { Spacer } from "../common/Spacer";
@ -15,7 +15,7 @@ const Skill: React.FC<React.PropsWithChildren<SkillProps>> = (props) => {
    <PageBreakAvoid>
      <strong>{title}</strong>
      <Spacer />
-      {React.Children.map(children, (c) => (
+      {Children.map(children, (c) => (
        <Paragraph>{c}</Paragraph>
      ))}
    </PageBreakAvoid>
--- a/app/frontend/src/components/CV/Skills.tsx
+++ b/app/frontend/src/components/CV/Skills.tsx
@ -56,45 +56,45 @@ const Skills: React.FC = () => {
        {intl.formatMessage({
          defaultMessage:
            "Several years of experience developing, maintaining and adhering to the DevOps practices to streamline organization's processes across both backend and frontend development.",
-          id: "Skills.devops",
+          id: "BOZ+do",
        })}
      </Skill>
      <Skill title="Front-End Development">
        {intl.formatMessage({
          defaultMessage:
            "Extensive experience in frontend development spanning back to the early 2000s.",
-          id: "Skills.frontendDevelopment",
+          id: "AjT8sf",
        })}
      </Skill>
      <Skill title="Back-End Development">
        {intl.formatMessage({
          defaultMessage:
            "Deep knowledge of backend operations, mostly supporting web based applications using various technologies, programming languages and frameworks.",
-          id: "Skills.backendDevelopmentSum1",
+          id: "h4cHqQ",
        })}
        {intl.formatMessage({
          defaultMessage:
            "In recent years, the main focus was on Go to write tooling and backend services.",
-          id: "Skills.backendDevelopmentSum2",
+          id: "FxkFRP",
        })}
      </Skill>
      <Skill title="Infrastructure operations">
        {intl.formatMessage({
          defaultMessage:
            "Throughout my career, I have gained valuable experience in developing and maintaining high-load infrastructures over several years.",
-          id: "Skills.infrastructureOperations",
+          id: "YBTD7C",
        })}
        {intl.formatMessage({
          defaultMessage:
            "Following the OCI (Open Container Initiative) and leveraging Docker and Kubernetes to create highly available deployments, primarily on the AWS platform, was a challenging and enjoyable experience, that has greatly enhanced my skills in this area.",
-          id: "Skills.infrastructureOperationsAdditional",
+          id: "VRhCte",
        })}
      </Skill>
      <Spacer withDivider />
      <SubHeadline level={4}>
        {intl.formatMessage({
          defaultMessage: "Other notable skills",
-          id: "Skills.otherNotableSkills",
+          id: "8NqNwY",
        })}
      </SubHeadline>
      <List>
--- a/app/frontend/src/components/CV/Summary.tsx
+++ b/app/frontend/src/components/CV/Summary.tsx
@ -1,7 +1,6 @@
 import React from "react";

-import { Paragraph } from "../common/Text";
-import { Caption } from "../common/Text";
+import { Paragraph, Caption } from "../common/Text";

 const Summary: React.FC = () => {
  return (
--- a/app/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/app/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
@ -1,22 +1,22 @@
-import React from "react";
+import React, { Component } from "react";

 type ErrorHandler = (error: Error, info: React.ErrorInfo) => void;
 type ErrorHandlingComponent<Props> = (
  props: Props,
-  error?: Error
+  error?: Error,
 ) => React.ReactNode;

 type ErrorState = { error?: Error };

 function Catch<Props extends object>(
  component: ErrorHandlingComponent<Props>,
-  errorHandler?: ErrorHandler
+  errorHandler?: ErrorHandler,
 ): React.ComponentType<Props> {
  function Inner({ error, props }: { error?: Error; props: Props }) {
    return <React.Fragment>{component(props, error)}</React.Fragment>;
  }

-  return class CatchClass extends React.Component<Props, ErrorState> {
+  return class CatchClass extends Component<Props, ErrorState> {
    state: ErrorState = {
      error: undefined,
    };
@ -46,7 +46,7 @@ const divStyles: React.CSSProperties = {

 const ErrorBoundary = Catch(function (
  props: React.PropsWithChildren,
-  error?: Error
+  error?: Error,
 ) {
  if (error) {
    return (
--- a/app/frontend/src/components/Navigation/MainNavigation.tsx
+++ b/app/frontend/src/components/Navigation/MainNavigation.tsx
@ -78,7 +78,7 @@ const MainNavigation: React.FC = () => {
      <NavigationHeadline>
        {intl.formatMessage({
          defaultMessage: "Contact",
-          id: "Navigation.contact",
+          id: "s3RWxF",
        })}
      </NavigationHeadline>

@ -89,14 +89,14 @@ const MainNavigation: React.FC = () => {
      <NavigationHeadline href="#objective">
        {intl.formatMessage({
          defaultMessage: "Objective",
-          id: "Navigation.objective",
+          id: "UMiSC4",
        })}
      </NavigationHeadline>

      <NavigationHeadline href="#skills">
        {intl.formatMessage({
          defaultMessage: "Top Skills",
-          id: "Navigation.topSkills",
+          id: "JUWjX4",
        })}
      </NavigationHeadline>

@ -119,7 +119,7 @@ const MainNavigation: React.FC = () => {
      <NavigationHeadline>
        {intl.formatMessage({
          defaultMessage: "Certifications",
-          id: "Navigation.certifications",
+          id: "tl429z",
        })}
      </NavigationHeadline>

@ -135,7 +135,7 @@ const MainNavigation: React.FC = () => {
      <NavigationHeadline href="#experience">
        {intl.formatMessage({
          defaultMessage: "Experience",
-          id: "Navigation.experience",
+          id: "W1qv5r",
        })}
      </NavigationHeadline>
    </StickyWrapper>
--- a/app/frontend/src/components/common/Spacer/Spacer.tsx
+++ b/app/frontend/src/components/common/Spacer/Spacer.tsx
@ -25,18 +25,18 @@ const Space = styled("div", { shouldForwardProp })<SpaceProps>(
  ({ spacing, theme }) => ({
    width: "100%",
    height: theme.spacing(spacing === undefined ? 1 : spacing),
-  })
+  }),
 );

 const Spacer: React.FC<SpacerProps> = (props) => {
  const { spacing, withDivider } = props;

  if (!withDivider) {
-    const spaceSize = typeof spacing === undefined ? 2 : spacing;
+    const spaceSize = spacing === undefined ? 2 : spacing;
    return <Space spacing={spaceSize} />;
  }

-  const spaceSize = typeof spacing === undefined ? 1 : spacing;
+  const spaceSize = spacing === undefined ? 1 : spacing;

  return (
    <Root>
--- a/app/frontend/src/config/environment.ts
+++ b/app/frontend/src/config/environment.ts
@ -28,15 +28,21 @@ export const BUILD_TIMESTAMP: Date = window.APP_CONFIG?.commitTime

 export const CONTACT_EMAIL = confString(
  window.APP_CONFIG?.contactEmail,
-  import.meta.env.VITE_CONTACT_EMAIL || ""
+  typeof import.meta.env.VITE_CONTACT_EMAIL === "string"
+    ? import.meta.env.VITE_CONTACT_EMAIL
+    : "",
 );

 export const CONTACT_PHONE = confString(
  window.APP_CONFIG?.contactPhone,
-  import.meta.env.VITE_CONTACT_PHONE || ""
+  typeof import.meta.env.VITE_CONTACT_PHONE === "string"
+    ? import.meta.env.VITE_CONTACT_PHONE
+    : "",
 );

 export const POSITION = confString(
  window.APP_CONFIG?.position,
-  import.meta.env.VITE_POSITION || ""
+  typeof import.meta.env.VITE_POSITION === "string"
+    ? import.meta.env.VITE_POSITION
+    : "",
 );
--- a/app/frontend/src/main.tsx
+++ b/app/frontend/src/main.tsx
@ -1,10 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
+import { createRoot } from "react-dom/client";

 import App from "./App";

-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
--- a/app/frontend/src/views/Dashboard.tsx
+++ b/app/frontend/src/views/Dashboard.tsx
@ -28,7 +28,7 @@ const Dashboard: React.FC = () => {
      <SubHeadline level={4}>
        {intl.formatMessage({
          defaultMessage: "Central Bohemia, Czechia",
-          id: "Dashboard.location",
+          id: "Lkk994",
        })}
      </SubHeadline>

@ -49,7 +49,7 @@ const Dashboard: React.FC = () => {
      <Headline level={2}>
        {intl.formatMessage({
          defaultMessage: "Skills",
-          id: "Dashboard.skillsTitle",
+          id: "4JISx9",
        })}
      </Headline>
      <Spacer />
@ -63,7 +63,7 @@ const Dashboard: React.FC = () => {
      <Headline level={2}>
        {intl.formatMessage({
          defaultMessage: "Experience",
-          id: "Dashboard.experienceTitle",
+          id: "W1qv5r",
        })}
      </Headline>
      <Spacer />
--- a/app/frontend/src/views/NotFound.tsx
+++ b/app/frontend/src/views/NotFound.tsx
@ -21,7 +21,7 @@ const NotFound = () => {
      <p>
        {intl.formatMessage({
          defaultMessage: "Nothing to see here",
-          id: "Router.NotFound",
+          id: "ywIjM0",
        })}
      </p>
      <Link to="/">Go home</Link>
--- a/app/frontend/src/views/Router.tsx
+++ b/app/frontend/src/views/Router.tsx
@ -1,6 +1,5 @@
-import React from "react";
-import { Outlet, RouterProvider } from "react-router-dom";
-import { createBrowserRouter } from "react-router-dom";
+import React, { lazy } from "react";
+import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";

 import { ErrorBoundary } from "../components/ErrorBoundary";
 import Dashboard from "./Dashboard";
@ -13,7 +12,7 @@ const Layout: React.FC = () => {
  );
 };

-const NotFound = React.lazy(() => import("./NotFound"));
+const NotFound = lazy(() => import("./NotFound"));

 const router = createBrowserRouter([
  {