Project configuration updates

- Add *.tsbuildinfo to gitignore
- Add Lingui ESLint plugin
- Lock @tabler/icons-react to ~3.18.0, ignore with Dependabot
- Use stable version (5.0.0) of eslint-plugin-react-hooks
- Use em instead of px in PostCSS configuration
- Format code to Prettier style
- Update dependencies

.github/dependabot.yml

@@ -11,3 +11,5 @@ updates:
     ignore:
       - dependency-name: "*"
         update-types: ["version-update:semver-major"]
+
+      - dependency-name: "@tabler/icons-react"

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

eslint.config.js

@@ -4,6 +4,7 @@ import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
 import tseslint from "typescript-eslint";
+import pluginLingui from "eslint-plugin-lingui";
 
 export default tseslint.config(
   { ignores: ["dist", "src/locales"] },
@@ -25,6 +26,7 @@ export default tseslint.config(
     plugins: {
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
+      lingui: pluginLingui,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
@@ -40,6 +42,19 @@ export default tseslint.config(
           },
         },
       ],
+      "lingui/no-unlocalized-strings": [
+        "error",
+        {
+          ignore: ["(Reac)|(Tally)"],
+          ignoreAttribute: ["download", "query"],
+          ignoreFunction: ["useMediaQuery"],
+        },
+      ],
+      "lingui/t-call-in-function": "error",
+      "lingui/no-single-variables-to-translate": "error",
+      "lingui/no-expression-in-message": "error",
+      "lingui/no-single-tag-to-translate": "error",
+      "lingui/no-trans-inside-trans": "error",
     },
   },
   eslintConfigPrettier,

package.json

@@ -21,7 +21,7 @@
     "@mantine/hooks": "^7.13.3",
     "@mantine/notifications": "^7.13.3",
     "@reduxjs/toolkit": "^2.3.0",
-    "@tabler/icons-react": "^3.19.0",
+    "@tabler/icons-react": "~3.18.0",
     "@types/uuid": "^10.0.0",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
@@ -39,7 +39,8 @@
     "babel-plugin-macros": "^3.1.0",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-lingui": "^0.6.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",

postcss.config.js

@@ -3,11 +3,11 @@ export default {
     "postcss-preset-mantine": {},
     "postcss-simple-vars": {
       variables: {
-        "mantine-breakpoint-xs": "680px",
-        "mantine-breakpoint-sm": "980px",
-        "mantine-breakpoint-md": "1300px",
-        "mantine-breakpoint-lg": "1620px",
-        "mantine-breakpoint-xl": "1940px",
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
       },
     },
   },

src/types/Counters.ts

@@ -1,6 +1,6 @@
-interface Counter {
-  name: string;
-  count: number;
-}
-
-export type Counters = Record<string, Counter>;
+interface Counter {
+  name: string;
+  count: number;
+}
+
+export type Counters = Record<string, Counter>;