Merge branch 'develop'

Vizzuality · Nov 14, 2024 · af01342 · af01342
2 parents 465a2a8 + 1176c31
commit af01342
Show file tree

Hide file tree

Showing 99 changed files with 2,999 additions and 1,403 deletions.
diff --git a/frontend/.env.default b/frontend/.env.default
@@ -3,6 +3,7 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS=
 
 NEXT_PUBLIC_MAPBOX_API_TOKEN=
 HUBSPOT_TOKEN=
+NEXT_PUBLIC_GLOBAL_FISHING_WATCH_TOKEN=
 
 LOCALAZY_CDN=
 

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -0,0 +1,143 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "import"],
+  "ignorePatterns": ["src/types/generated/*"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": ["warn"],
+    "no-console": [1, { "allow": ["info", "error"] }],
+    "react/jsx-props-no-spreading": [
+      "error",
+      {
+        "html": "ignore",
+        "custom": "ignore",
+        "exceptions": [""]
+      }
+    ],
+    "import/no-named-as-default": 0,
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [{ "group": ["lodash", "!lodash-es"], "message": "Use lodash-es instead" }]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "caughtErrors": "none"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        "import/order": [
+          "warn",
+          {
+            "groups": ["builtin", "external", "internal", "parent", "sibling"],
+            "newlines-between": "always",
+            "alphabetize": {
+              "order": "asc",
+              "caseInsensitive": true
+            },
+            "pathGroups": [
+              {
+                "pattern": "react",
+                "group": "builtin",
+                "position": "before"
+              },
+              {
+                "pattern": "react**",
+                "group": "builtin"
+              },
+              {
+                "pattern": "@react**",
+                "group": "builtin"
+              },
+              {
+                "pattern": "clsx",
+                "group": "builtin",
+                "position": "after"
+              },
+              {
+                "pattern": "lodash-es/**",
+                "group": "builtin",
+                "position": "after"
+              },
+              {
+                "pattern": "next/**",
+                "group": "builtin",
+                "position": "after"
+              },
+              {
+                "pattern": "node_modules/**",
+                "group": "builtin"
+              },
+              {
+                "pattern": "lib/**",
+                "group": "external",
+                "position": "before"
+              },
+              {
+                "pattern": "store/**",
+                "group": "external",
+                "position": "before"
+              },
+              {
+                "pattern": "hooks/**",
+                "group": "internal",
+                "position": "before"
+              },
+              {
+                "pattern": "layouts/**",
+                "group": "internal",
+                "position": "before"
+              },
+              {
+                "pattern": "containers/**",
+                "group": "internal",
+                "position": "before"
+              },
+              {
+                "pattern": "components/**",
+                "group": "internal"
+              },
+              {
+                "pattern": "services/**",
+                "group": "internal",
+                "position": "after"
+              },
+              {
+                "pattern": "images/**",
+                "group": "internal",
+                "position": "after"
+              },
+              {
+                "pattern": "svgs/**",
+                "group": "internal",
+                "position": "after"
+              }
+            ],
+            "pathGroupsExcludedImportTypes": ["react"]
+          }
+        ]
+      }
+    }
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    }
+  }
+}
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
@@ -1,11 +1,10 @@
-const tailwindPlugin = require('prettier-plugin-tailwindcss');
-
 const config = {
   semi: true,
   tabWidth: 2,
   printWidth: 100,
   singleQuote: true,
-  plugins: [tailwindPlugin],
+  trailingComma: 'es5',
+  plugins: ['prettier-plugin-tailwindcss'],
 };
 
 module.exports = config;
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "@artsy/fresnel": "7.1.4",
     "@deck.gl/json": "8.9.31",
     "@deck.gl/layers": "8.9.31",
     "@deck.gl/mapbox": "8.9.31",
@@ -74,9 +75,10 @@
     "react-map-gl": "7.1.6",
     "recharts": "^2.9.0",
     "rooks": "7.14.1",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "3.2.7",
+    "tailwind-merge": "2.5.4",
+    "tailwindcss": "3.4.14",
     "tailwindcss-animate": "1.0.7",
+    "typescript-eslint": "8.9.0",
     "zod": "3.22.4"
   },
   "devDependencies": {
@@ -86,21 +88,23 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@types/recharts": "^1.8.26",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0",
     "autoprefixer": "10.4.14",
-    "eslint": "8.32.0",
-    "eslint-config-next": "13.2.4",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.2.15",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "5.2.1",
     "husky": "6.0.0",
-    "prettier": "2.8.3",
-    "prettier-plugin-tailwindcss": "0.2.1",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
     "start-server-and-test": "1.12.1",
     "svg-sprite-loader": "6.0.11",
     "svgo": "3.0.2",
     "svgo-loader": "3.0.3",
-    "typescript": "5.2.2"
+    "typescript": "5.6.3"
   },
   "husky": {
     "pre-commit": "yarn lint"

diff --git a/frontend/src/components/charts/conservation-chart/legend/index.tsx b/frontend/src/components/charts/conservation-chart/legend/index.tsx
@@ -36,7 +36,7 @@ const ChartLegend: FCWithMessages<ChartLegendProps> = ({
   );
 
   return (
-    <div className="mt-2 ml-8 flex flex-wrap justify-between gap-3">
+    <div className="ml-8 mt-2 flex flex-wrap justify-between gap-3">
       <span className="inline-flex items-center gap-3">
         <span className="block w-10 border-b border-violet"></span>
         <span>{t('historical-trend')}</span>
@@ -47,7 +47,7 @@ const ChartLegend: FCWithMessages<ChartLegendProps> = ({
       </span>
       {displayTarget && (
         <span className="inline-flex w-full items-center gap-3">
-          <span className="block w-10 border-b border-orange"></span>
+          <span className="block w-10 border-b border-dashed border-orange"></span>
           <span>
             {t.rich('target-xx-by', {
               target,

diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx
@@ -82,15 +82,15 @@ const HorizontalBarChart: FCWithMessages<HorizontalBarChartProps> = ({
       <div className="relative mb-2 flex h-3.5">
         <span className="absolute top-1/2 h-px w-full border-b border-dashed border-black"></span>
         <span
-          className="absolute top-0 bottom-0 left-0 border border-black !bg-cover"
+          className="absolute bottom-0 left-0 top-0 border border-black !bg-cover"
           style={{
             background,
             width: `${barFillPercentage}%`,
           }}
         />
         {showTarget && (
           <span
-            className="absolute top-0 bottom-0 w-1 border-x border-white bg-orange"
+            className="absolute bottom-0 top-0 w-1 border-x border-white bg-orange"
             style={{
               left: `${targetPositionPercentage}%`,
             }}