feat(frontend): add theming to next

Author: fichtnerma

.development.docker-compose.yml

@@ -1,14 +1,14 @@
 version: "3"
 services:
-  app:
-    container_name: app
+  web:
+    container_name: web
     environment:
       - CMS_API=http://cms:1337/api
     build:
-      context: ./app
+      context: ./web
       dockerfile: Dockerfile
     volumes:
-      - ./app/src/app:/opt/app/src/app
+      - ./web/src/web:/opt/web/src/web
     ports:
       - 3000:3000
     networks:

web/.eslintrc.json

@@ -1,3 +1,39 @@
 {
-  "extends": "next/core-web-vitals"
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "eslint-plugin-import-helpers"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "react/no-unescaped-entities": "off",
+    "no-console": "warn",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import-helpers/order-imports": [
+      "error",
+      {
+        "newlinesBetween": "never",
+        "groups": [
+          "/^react$/",
+          "/next/",
+          "module",
+          "/@components/",
+          "/@helpers/",
+          "/@hooks/",
+          "/types/",
+          "/module.scss/",
+          "/public/",
+          ["parent", "sibling", "index"]
+        ],
+        "alphabetize": { "order": "desc", "ignoreCase": true }
+      }
+    ]
+  }
 }

web/.prettierrc

@@ -1,6 +1,8 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 4,
+  "printWidth": 120,
+  "useTabs": false
 }

web/package-lock.json

@@ -9,19 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import-helpers": "^1.3.1",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "typescript": "^5"
   }
 }

web/package.json

@@ -6,6 +6,11 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --color-primary: #3498db;
+  --color-secondary: #2ecc71;
+  --color-tertiary: #e74c3c;
+  --primary-text: #333;
+  --secondary-text: #555;
 }
 
 @media (prefers-color-scheme: dark) {