Update frontend linting

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",
-    },
-  },
-};

app/frontend/.prettierignore

@@ -1,9 +0,0 @@
-/node_modules
-# Ignore artifacts:
-/build
-/dist
-/coverage
-
-# generated code
-/src/api/naming
-/src/preview

app/frontend/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "importOrder": ["^[./]"],
-  "importOrderSeparation": true
-}

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",
+      },
+    },
+  }
+];

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": "eslint",
-    "lint:fix": "eslint --fix src --ext ts,tsx",
+    "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": "prettier --check 'src/**/*.{js,ts,tsx}'",
-    "prettier:format": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,tsx}'",
+    "prettier:format": "prettier --write 'src/**/*.{js,ts,tsx}'",
-    "prettier:format:changed": "prettier --config ./.prettierrc --write $(npm run --silent list:changed)",
+    "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": "^9.13.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-formatjs": "^5.1.5",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-import-x": "^4.3.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-refresh": "^0.3.4",
+    "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"
   }
 }

app/frontend/prettier.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  importOrder: ["^[./]"],
+  importOrderSeparation: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+};

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")) {

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>

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>

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>

app/frontend/src/components/CV/Summary.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-import { Paragraph } from "../common/Text";
+import { Paragraph, Caption } from "../common/Text";
-import { Caption } from "../common/Text";
 
 const Summary: React.FC = () => {
   return (

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 (

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>

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>

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
+    : "",
 );

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>,
 );

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 />

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>

app/frontend/src/views/Router.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { lazy } from "react";
-import { Outlet, RouterProvider } from "react-router-dom";
+import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
-import { 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([
   {