Release 3.22.0

.github/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}/geotrek-rando-builder
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: frontend
           file: ./frontend/Dockerfile
@@ -45,7 +45,7 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
 
       - name: Build and push Docker image builder
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: frontend
           file: ./frontend/Dockerfile

docs/changelog.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 3.22.0 (2024-09-17)
+
+**✨ Improvements**
+
+- Add annotation category (label and picto) to HD viewpoint map tooltip (#1229)
+- Add "Display in HD pictures" button at the map bottom if the details page contains at least one HD viewpoint (#1229)
+- Refacto to use the leaflet locate.control in a more “react” way (#1227 #1219)
+- Refacto Leaflet CustomControl wrapper (#1237 #1219)
+- Refacto sheet component (#1238 #1219)
+- Prevent map zooming when scrolling on the elevation profile (#1228)
+- Remove styled-component and handle styling only with tailwindCSS (#1147)
+
+**🔧 Maintenance**
+
+- Bump node from 18 to 20 (#1021)
+- Bump @types/node from 16.9.4 to 22.5.4 in /frontend (#1244)
+- Bump @next/eslint-plugin-next and eslint-config-next packages to 14.2.10 (#1217)
+- Bump @testing-libray packages(#1218)
+- Bump leaflet.locatecontrol from 0.74.0 to 0.81.1 (#1227)
+- Install @radix-ui/react-dialog package
+- Install class-variance-authority package
+- Install tailwindcss-animate package
+- Bump tailwind-merge from 2.2.2 to 2.5.2
+- Bump docker/build-push-action from 5 to 6
+- Remove react-burger-menu package
+
+**🐛 Fixes**
+
+- Fix display of mobile menu sub-filters (#1006 #1235)
+
 ## 3.21.1 (2024-07-29)
 
 **🐛 Fixes**

docs/development.md

@@ -4,7 +4,7 @@ Installation in development:
 
 ## Prerequisite
 
-- You need to use a node version equal or above 18
+- You need to use a node version equal or above 20
 - Use nvm and then:
 
 ```bash

docs/installation.md

@@ -11,13 +11,14 @@ If you follow the [Install without Docker (not recommended)](#install-without-do
 ### Sentry
 
 To report application crashes and any errors encountered by users, you can use [Sentry](https://sentry.io/).
-In the Sentry backoffice, create your project and copy the DSN key which you can paste into the `SENTRY_DSN` environment variable. 
+In the Sentry backoffice, create your project and copy the DSN key which you can paste into the `SENTRY_DSN` environment variable.
 
 # Install with Docker (recommended)
 
 ## Global process
 
 Before starting the technical installation, here is an overview of the global process:
+
 - Developers are working on code source of this repository where you will also find the documentation, issues and releases
 - Once they have a new version of the application ready, they will release it, build a Docker image of this new version and push it in the [packages repository](https://github.com/orgs/GeotrekCE/packages/container/package/geotrek-rando-v3%2Fgeotrek-rando)
 - If required, they will also make changes to the docker-compose file and customization template in the [installer dedicated repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) and release a new version of it
@@ -103,6 +104,7 @@ sudo certbot --nginx
 ## Upgrade Geotrek-rando version
 
 To find out the current Geotrek-rando version of your running container, you can execute (by renaming `rando-nodeserver-1` with the name of your container):
+
 ```
 docker exec -t -i rando-nodeserver-1 node -p "require('./package.json').version"
 ```
@@ -147,7 +149,7 @@ Install nodejs:
 sudo apt update
 sudo apt -y upgrade
 sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates
-curl -sL https://deb.nodesource.com/setup_17.x | sudo -E bash -
+curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
 sudo apt -y install nodejs
 ```
 
@@ -164,6 +166,7 @@ cd Geotrek-rando-v3/frontend/
 ```
 
 Install dependencies
+
 ```sh
 yarn
 ```

frontend/.nvmrc

@@ -1 +1 @@
-v18.12.0
+v20.17.0

frontend/Dockerfile

@@ -1,27 +1,27 @@
 # Install dependencies only when needed
-FROM node:18-alpine AS deps
+FROM node:20-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat g++ gcc libgcc libstdc++ linux-headers make python3
 WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile
 
 # Rebuild the source code only when needed
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
 RUN yarn build
 
-FROM node:18-alpine AS builder_optim
+FROM node:20-alpine AS builder_optim
 WORKDIR /app
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/yarn.lock ./yarn.lock
 RUN yarn install --production --ignore-scripts --prefer-offline
 
 # Production image, copy all the files and run next
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

frontend/docs/design.md

@@ -1,31 +1,21 @@
 ## 🏞 Design
 
-### Styled Components 💅
-
-Follow the code principles when using styled-components
-
-- [Do not use className and classes](https://github.com/theodo/theodo-code-principles/pull/18/files)
-
 ### 💠 CSS
 
-#### 🌀 Reset
-
-There is a [`reset.css`](../public/reset.css) file that removes basic style attached to tags. The file is based on [meyerweb's example](https://meyerweb.com/eric/tools/css/reset/) and enriched by experience.
-
-#### 🌈 Stylesheet
+#### 🌈 Tailwind
 
-[`stylesheet.ts`](../src/stylesheet.ts) is where you should declare all style properties used on this app.
+[`tailwind.config.js`](../../tailwind.config.js) is where you should declare all style properties used on this app.
 
 - colors
-- font properties (size, font-faimly, boldness, line height)
-- spacing measurement unit (ex: all margin, padding must be multiple of 8px)
+- font properties (size, font-family, boldness, line height)
+- spacing measurement unit (ex: all margin, padding must be multiple of 4px)
 - screen size breakpoints
 - shades
 - ...
 
 This way, you can manage the app look and feel from one file instead of several, and preserve consistency.
 
-Import the style variables from the stylesheet to use them in your components.
+Import the style variables from the `tailwind.config.js` to use them in your components.
 
 #### 🔍 Linter
 

frontend/docs/quick-start.md

@@ -2,33 +2,35 @@
 
 Useful commands:
 
-- `npm install` to install dependencies
+- `yarn` to install dependencies
 
-- `npm run start` to start a local dev-server
+- `yarn start` to start a local dev-server
 
-- `npm run build` to build a minified version of the code, for production use!
+- `yarn build` to build a minified version of the code, for production use!
 
-- `npm run dev` to use a development server which will take care of live-reloading and browser sync.
+- `yarn dev` to use a development server which will take care of live-reloading and browser sync.
 
-- `npm run test` to launch tests in watch mode
+- `yarn lint` to analyse source code to flag programming errors
 
-- `npm run e2e` to launch cypress end-to-end tests (after ```npm run dev```)
+- `yarn tsc` to compile the project defined by `tsconfig.json`
 
-- * `npm run generate` to generate a new component or a new page. You will be prompted the following questions:
+- `yarn test` to launch tests in watch mode
 
-  * Do you want a page or a component?
-  * What is the name of the component?
-  * What is the type of the component? _Choose between [PureComponents](https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81), Components and stateless functions for your React component._
-  * Do you want to connect your component to the Redux store? _Use Redux to handle your global state._
-  * Do you want to use react-intl? _Use [react-intl](https://github.com/yahoo/react-intl/wiki/Components) to handle the translations within your application._
-  * Do you want to use styled-components? _Use [styled-components](https://github.com/styled-components/styled-components) to easily style your components using a CSS syntax._
-  * Do you want snapshot tests? _Snapshot tests allow you to easily lock the comportment of a component.
+- `yarn e2e` to launch cypress end-to-end tests (after `yarn dev`)
 
+- - `yarn generate` to generate a new component or a new page. You will be prompted the following questions:
+
+  - Do you want a page or a component?
+  - What is the name of the component?
+  - What is the type of the component? _Choose between [PureComponents](https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81), Components and stateless functions for your React component._
+  - Do you want to connect your component to the Redux store? _Use Redux to handle your global state._
+  - Do you want to use react-intl? _Use [react-intl](https://github.com/yahoo/react-intl/wiki/Components) to handle the translations within your application._
+  - Do you want snapshot tests? \_Snapshot tests allow you to easily lock the comportment of a component.
 
 Other useful commands:
 
-- `npm run lint:fix` to automatically fix linting errors
+- `yarn lint:fix` to automatically fix linting errors
 
-- `npm run test:coverage` to generate the coverage
+- `yarn test:coverage` to generate the coverage
 
-For more see [create-react-app documentation](https://github.com/facebookincubator/create-react-app)
+- `yarn prepush` is a shortcut of `yarn lint && yarn tsc && yarn test`

frontend/docs/typescript.md

@@ -23,7 +23,6 @@ npm install --save-dev
     @types/react-router
     @types/react-router-dom
     @types/react-test-renderer
-    @types/styled-components
     @types/superagent
     @types/webpack-env
 ```

frontend/next.config.js

@@ -59,9 +59,6 @@ const nextConfig = {
     disableClientWebpackPlugin: true, //process.env.SENTRY_DSN === undefined,
   },
   publicRuntimeConfig: getAllConfigs,
-  compiler: {
-    styledComponents: true,
-  },
   images: {
     remotePatterns: [
       {
@@ -71,6 +68,5 @@ const nextConfig = {
   },
 };
 
-module.exports = async (phase, { defaultConfig }) => (
-  withPlugins(plugins, nextConfig)(phase, { ...defaultConfig, ...nextConfig })
-);
+module.exports = async (phase, { defaultConfig }) =>
+  withPlugins(plugins, nextConfig)(phase, { ...defaultConfig, ...nextConfig });

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.21.1",
+  "version": "3.22.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -37,6 +37,7 @@
     "@20tab/react-leaflet-resetview": "^1.0.1",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@makina-corpus/rando3d": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@raruto/leaflet-elevation": "1.7.0",
     "@react-hook/resize-observer": "^1.2.6",
     "@sentry/nextjs": "^7.12.1",
@@ -45,6 +46,7 @@
     "@zeit/next-source-maps": "^0.0.4-canary.1",
     "autoprefixer": "^10.4.14",
     "axios": "0.25.0",
+    "class-variance-authority": "^0.7.0",
     "compression": "^1.7.4",
     "cypress": "^13.6.3",
     "debounce": "^1.2.1",
@@ -56,7 +58,7 @@
     "leaflet": "^1.7.1",
     "leaflet-boundary-canvas": "^1.0.0",
     "leaflet-rastercoords": "^1.0.5",
-    "leaflet.locatecontrol": "0.74.0",
+    "leaflet.locatecontrol": "^0.81.1",
     "leaflet.offline": "^3.0.1",
     "next": "^13.1.6",
     "next-compose-plugins": "^2.2.1",
@@ -65,7 +67,6 @@
     "postcss": "8.3.6",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",
-    "react-burger-menu": "^3.0.9",
     "react-country-flag": "^3.0.2",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "6.1.0",
@@ -82,52 +83,50 @@
     "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "striptags": "^3.2.0",
-    "styled-components": "^5.3.6",
     "svgo": "^3.0.2",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.1",
     "typesafe-actions": "^5.1.0",
     "wait-on": "6.0.0"
   },
   "devDependencies": {
     "@accessible/accordion": "^2.0.0",
     "@next/bundle-analyzer": "^12.2.5",
-    "@next/eslint-plugin-next": "^14.1.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@next/eslint-plugin-next": "^14.2.10",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@types/debounce": "^1.2.1",
     "@types/jest": "27.0.2",
     "@types/leaflet": "1.7.5",
-    "@types/node": "16.9.4",
+    "@types/node": "22.5.4",
     "@types/react": "^18.0.25",
-    "@types/react-burger-menu": "2.8.7",
     "@types/react-dom": "^18.0.9",
     "@types/react-leaflet": "2.8.2",
     "@types/react-leaflet-markercluster": "^2.0.0",
     "@types/react-loader": "2.4.5",
     "@types/react-slick": "^0.23.10",
     "@types/screenfull": "^4.1.0",
     "@types/store": "^2.0.2",
-    "@types/styled-components": "5.1.14",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.1",
+    "eslint-config-next": "^14.2.10",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "isomorphic-fetch": "^3.0.0",
     "jest": "28",
     "jest-environment-jsdom": "28",
+    "next-router-mock": "^0.9.13",
     "next-server": "^9.0.5",
     "nock": "13.1.3",
     "prettier": "^3.2.5",
     "react-addons-test-utils": "^15.6.2",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "22.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
     "stylelint-declaration-strict-value": "1.7.12",
-    "stylelint-processor-styled-components": "^1.10.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^7.1.0"
   },

frontend/scripts/generators/component/component.pure.tsx.hbs

@@ -1,15 +1,8 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 {{#if wantMessages}}
 import { intlShape, FormattedMessage } from 'react-intl';
 {{/if}}
 
-{{#unless wantStyledComponents}}
-import './{{ properCase name }}.style.css';
-{{/unless}}
-{{#if wantStyledComponents}}
-import Styled{{ properCase name }} from './{{ properCase name }}.style';
-{{/if}}
-
 interface IProps {
   {{#if wantMessages}}
   intl: intlShape,
@@ -19,21 +12,11 @@ interface IProps {
 class {{ properCase name }} extends PureComponent<IProps> {
   render() {
     return (
-      {{#unless wantStyledComponents}}
-      <div className="{{ dashCase name }}-container">
-      {{/unless}}
-      {{#if wantStyledComponents}}
-      <Styled{{ properCase name }}>
-      {{/if}}
+      <div className="custo-{{ dashCase name }}">
         {{#if wantMessages}}
         <FormattedMessage id="please.change.me" />
         {{/if}}
-      {{#unless wantStyledComponents}}
       </div>
-      {{/unless}}
-      {{#if wantStyledComponents}}
-      </Styled{{ properCase name }}>
-      {{/if}}
     );
   }
 }