@pplancq/react-template 1.6.0 → 1.8.0

package/.lintstagedrc.js

@@ -2,5 +2,6 @@ module.exports = {
   '*.{js,jsx,ts,tsx}': 'eslint --fix',
   '*.{ts,tsx}': 'tsc-files --noEmit',
   '*.{scss,css}': 'stylelint --fix',
+  '*.!(js|jsx|ts|tsx|scss|css)': 'prettier --write --ignore-unknown',
   '(package|package-lock).json': 'npm run package:check',
 };

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## @pplancq/react-template [1.8.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@1.7.0...@pplancq/react-template@1.8.0) (2024-08-27)
+
+### Features
+
+* **react-template:** bump jsdom 24.1.1 to 25.0.0 ([c3c8993](https://github.com/pplancq/dev-tools/commit/c3c8993e852a01ba0366d78e6597fc01b00aa7f9))
+* **react-template:** update scripts command for lint code ([50b50f8](https://github.com/pplancq/dev-tools/commit/50b50f88b427c4eef11b81142aad8fb09a908ce3))
+
+## @pplancq/react-template [1.7.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@1.6.0...@pplancq/react-template@1.7.0) (2024-08-16)
+
+### Features
+
+* **react-template:** bump vitest from 1.6.0 to 2.0.5 ([4c129d3](https://github.com/pplancq/dev-tools/commit/4c129d303cc27d5b73dbbdb9710f2ad64745c1cf))
+
+
+### Dependencies
+
+* **@pplancq/postcss-config:** upgraded to 2.0.0
+* **@pplancq/webpack-config:** upgraded to 1.5.0
+
 ## @pplancq/react-template [1.6.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@1.5.1...@pplancq/react-template@1.6.0) (2024-06-05)
 
 ### Features

package/_README.md

@@ -36,6 +36,10 @@ You will also see lint errors in the console.
 
 ### `npm test`
 
+Launches the test runner.
+
+### `npm run test:watch`
+
 Launches the test runner in interactive mode.
 
 ### `npm run build`
@@ -51,14 +55,18 @@ Your application is ready to be deployed!
 
 Allows you to see lint errors without fixing them. This command initiates the linting process with three linters: **eslint**, **stylelint**, and **tsc** (TypeScript Compiler).
 
-### `npm run eslint:fix`
+### `npm run lint:eslint:fix`
 
 Allows you to fix eslint errors.
 
-### `npm run stylelint:fix`
+### `npm run lint:stylelint:fix`
 
 Allows you to fix style lint errors.
 
+### `npm run lint:prettier:fix`
+
+Allows you to fix prettier lint errors.
+
 ### `npm run remove:demo`
 
 To remove the demo application.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -13,14 +13,16 @@
     "start": "webpack serve",
     "start:mock": "webpack serve --env FRONT_MOCK_ENABLE=true",
     "build": "webpack --mode production",
-    "test": "vitest",
-    "test:ci": "vitest run --coverage",
-    "lint": "concurrently --prefix-colors auto \"npm:eslint\" \"npm:tsc\" \"npm:stylelint\"",
-    "eslint": "eslint src --ext js,jsx,ts,tsx",
-    "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
-    "stylelint": "stylelint \"src/**/*.{scss,css}\"",
-    "stylelint:fix": "stylelint \"src**/*.{scss,css}\" --fix",
-    "tsc": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "node scripts/lint.js",
+    "lint:eslint": "eslint \"{mocks,public,src}/**/*.{js,jsx,ts,tsx}\"",
+    "lint:eslint:fix": "eslint \"{mocks,public,src}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:stylelint": "stylelint \"src/**/*.{scss,css}\"",
+    "lint:stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
+    "lint:prettier": "prettier \"{mocks,public,src}/**/*.!(js|jsx|ts|tsx|scss|css)\" --check --ignore-unknown",
+    "lint:prettier:fix": "prettier \"{mocks,public,src}/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown",
+    "lint:tsc": "tsc --noEmit",
     "package:check": "npm exec --yes package-lock-utd@1.1.3",
     "remove:demo": "node ./scripts/removeDemo.js",
     "migrate:vite": "node ./scripts/migrateToVite.js",
@@ -34,17 +36,17 @@
     "template"
   ],
   "dependencies": {
-    "@hookform/resolvers": "^3.4.2",
-    "@tanstack/react-query": "^5.40.0",
-    "@tanstack/react-query-devtools": "^5.40.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@tanstack/react-query": "^5.51.23",
+    "@tanstack/react-query-devtools": "^5.52.1",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.5",
-    "react-router-dom": "^6.23.1",
+    "react-hook-form": "^7.53.0",
+    "react-router-dom": "^6.26.1",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@pplancq/babel-config": "*",
     "@pplancq/commitlint-config": "*",
     "@pplancq/eslint-config": "*",
@@ -52,31 +54,31 @@
     "@pplancq/prettier-config": "*",
     "@pplancq/stylelint-config": "*",
     "@pplancq/webpack-config": "*",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.5",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
-    "lint-staged": "^15.2.5",
-    "msw": "^2.3.1",
-    "prettier": "^3.3.0",
-    "stylelint": "^16.6.1",
-    "stylelint-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^9.1.5",
+    "jsdom": "^25.0.0",
+    "lint-staged": "^15.2.9",
+    "msw": "^2.3.5",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.8.2",
+    "stylelint-prettier": "^5.0.2",
     "tsc-files": "^1.1.4",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.4",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.0.4",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.0.5",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-sonar-reporter": "^2.0.0",
-    "webpack": "^5.91.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },

package/public/index.html

@@ -1,13 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Web site created using react-template"
-    />
+    <meta name="description" content="Web site created using react-template" />
     <title>React App</title>
   </head>
   <body>

package/scripts/lint.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const concurrently = require('concurrently');
+
+const { result } = concurrently(['npm:lint:eslint', 'npm:lint:tsc', 'npm:lint:stylelint', 'npm:lint:prettier'], {
+  prefixColors: 'auto',
+  maxProcesses: process.env.CI ? 1 : undefined,
+});
+
+result.then(
+  () => process.exit(0),
+  () => process.exit(1),
+);

package/src/api/README.md

@@ -1,21 +1,22 @@
 # 📁 api
 
 The "api" folder is designed to handle calls to native APIs using the fetch function. These calls are essential for retrieving real-time data from external sources, such as remote servers or web services.
+
 ## 📑 Table of Contents
-  - [Folder Organization](#folder-organization)
-  - [Usage](#usage)
-  - [Error Handling](#error-handling)
-  - [Security](#security)
-  - [Documentation](#documentation)
-  - [Testing](#testing)
-  - [Best Practice](#best-practice)
 
+- [Folder Organization](#folder-organization)
+- [Usage](#usage)
+- [Error Handling](#error-handling)
+- [Security](#security)
+- [Documentation](#documentation)
+- [Testing](#testing)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Folder Organization</span>
 
 The "api" folder can be organized as follows :
 
-1. **API Endpoints** : Create a separate file for each API you are calling. For example, if you have a user management API and a data retrieval API, you can have the files `users.ts`  and `data.ts`  to handle these respective calls.
+1. **API Endpoints** : Create a separate file for each API you are calling. For example, if you have a user management API and a data retrieval API, you can have the files `users.ts` and `data.ts` to handle these respective calls.
 
 2. **Call Functions** : Inside each API file, define dedicated functions to make `fetch` requests to the corresponding endpoints. These functions can also include handling responses and errors.
 
@@ -61,4 +62,4 @@ export const fetchApi = (uri, options) => {
 };
 ```
 
-In this example, the fetchApi function extends the default fetch function by automatically including an API token in the request header. This practice helps centralize common configurations and promotes consistency across your application.
+In this example, the fetchApi function extends the default fetch function by automatically including an API token in the request header. This practice helps centralize common configurations and promotes consistency across your application.

package/src/assets/README.md

@@ -3,9 +3,10 @@
 The "assets" folder is a commonly used directory in a React application to store static resources such as images, CSS files, fonts, JSON data files, icons, and other non-JavaScript files used in your application. These resources are typically needed to style and customize the user interface of your application.
 
 ## 📑 Table of Contents
-  - [Why Use an "assets" Folder](#folder-organization)
-  - [Usage Example](#usage)
-  - [Best Practice](#best-practice)
+
+- [Why Use an "assets" Folder](#folder-organization)
+- [Usage Example](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Why Use an "assets" Folder?</span>
 
@@ -20,7 +21,7 @@ The "assets" folder is a commonly used directory in a React application to store
 To use an image stored in the "assets" folder, you can reference its relative path in your JavaScript or JSX code like this:
 
 ```javascript
-import logo from '@Front/assets/images/logo.png'
+import logo from '@Front/assets/images/logo.png';
 
 export const App = () => {
   return (
@@ -29,7 +30,7 @@ export const App = () => {
       {/* ... other elements of the application */}
     </div>
   );
-}
+};
 ```
 
 ## <span id="best-practice">🎖️ Best Practice</span>
@@ -37,15 +38,17 @@ export const App = () => {
 When it comes to styling and managing assets, adopting the following practices can enhance maintainability and structure in your project:
 
 ### - Global CSS Rules
-Define all global CSS rules, such as resets, fonts, and general styling, in a centralized stylesheet (in the css folder under the assets ). 
+
+Define all global CSS rules, such as resets, fonts, and general styling, in a centralized stylesheet (in the css folder under the assets ).
 
 This ensures consistency across your entire application.
 
 ### - CSS Modules
+
 For component-specific styles, leverage CSS Modules to encapsulate styles within the component scope.
 
- This helps prevent unintentional styling conflicts and promotes a modular approach to styling.
+This helps prevent unintentional styling conflicts and promotes a modular approach to styling.
 
-----------
-***By adhering to these practices, you create a clear separation between global styles and component-specific styles, making your codebase more maintainable and scalable.***
+---
 
+**_By adhering to these practices, you create a clear separation between global styles and component-specific styles, making your codebase more maintainable and scalable._**

package/src/components/README.md

@@ -3,9 +3,9 @@
 The "components" folder is a crucial element of any React application. It is used to organize and store reusable components that make up the user interface of your application. React components are self-contained pieces of the user interface, each having its own logic and rendering.
 
 ## 📑 Table of Contents
-  - [Why Use a "components" Folder](#folder-organization)
-  - [Usage](#usage)
 
+- [Why Use a "components" Folder](#folder-organization)
+- [Usage](#usage)
 
 ## <span id="folder-organization">Why Use a "components" Folder?</span>
 
@@ -15,7 +15,6 @@ The "components" folder is a crucial element of any React application. It is use
 
 3. **Better Organization** : Organizing components in a dedicated folder helps clearly distinguish components from other elements of the application, such as styles, images, or configuration files.
 
-
 ## <span id="usage">🧑🏻‍💻 Usage Example </span>
 
 Suppose you have a "Header.js" component in the "components" folder. You can import and use it in other parts of your application like this:
@@ -30,5 +29,5 @@ export const App = () => {
       {/* ... other elements of the application */}
     </div>
   );
-}
+};
 ```

package/src/config/README.md

@@ -3,16 +3,17 @@
 The "config" folder is intended to store all important configurations and utilities needed for our React project. Bringing together this information in one place makes managing configuration settings easier and ensures better code organization.
 
 ## 📑 Table of Contents
-  - [Folder Organization](#folder-organization)
-  - [Content Example](#content-example)
-  - [Usage](#usage)
-  - [Best Practice](#best-practice)
+
+- [Folder Organization](#folder-organization)
+- [Content Example](#content-example)
+- [Usage](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Folder Organization</span>
 
 Within the "config" folder, you can find the following elements:
 
-1. **Configuration Files** : Files containing variables and configuration parameters, such as `apiConfig.ts`  for configurations related to API calls, `appConfig.ts` for general application settings, `queryClientConfig.ts` for react-query-related configuration, etc.
+1. **Configuration Files** : Files containing variables and configuration parameters, such as `apiConfig.ts` for configurations related to API calls, `appConfig.ts` for general application settings, `queryClientConfig.ts` for react-query-related configuration, etc.
 
 2. **Configuration Scripts** : Scripts or utilities that facilitate dynamic configuration of the application, such as theme configuration, language management, etc.
 
@@ -28,12 +29,10 @@ Here is an example folder structure for "config":
 ├── 📄 translationConfig.ts
 ```
 
-
 ## <span id="usage">🧑🏻‍💻Usage in the Project</span>
 
 When you need to access a specific configuration in your code, import the appropriate file from the "config" folder. For example:
 
-
 ```javascript
 // Example of using an API configuration
 import { apiEndpoint } from '@Front/config/apiConfig';
@@ -46,16 +45,19 @@ import { appName } from '@Front/config/appConfig';
 ```
 
 ## <span id="best-practice">🎖️ Best Practice</span>
+
 Efficient configuration management is crucial for maintaining a clear and organized codebase. Follow these best practices for managing configuration files:
 
 #### - Context-Specific Configuration
-Separate configuration files based on different contexts, such as API configurations, QueryClient configurations, translations, etc. 
+
+Separate configuration files based on different contexts, such as API configurations, QueryClient configurations, translations, etc.
 
 This helps in better organization and ease of maintenance.
 
 #### - File Naming Convention
-Suffix configuration files with `Config` to enhance visibility and make it easier to identify configuration files at a glance.
 
+Suffix configuration files with `Config` to enhance visibility and make it easier to identify configuration files at a glance.
 
 ---
-***By adopting these practices, you create a modular and organized approach to configuration management, making it simpler to locate and manage context-specific settings.***
+
+**_By adopting these practices, you create a modular and organized approach to configuration management, making it simpler to locate and manage context-specific settings._**

package/src/forms/README.md

@@ -3,11 +3,12 @@
 The "forms" folder is designed to organize and manage all the necessary forms in our application. Whether it's for managing vehicle-related risks, contact forms, or any other type of form, this folder is intended to centralize the logic and presentation of forms.
 
 ## 📑 Table of Contents
-  - [Why Use a "forms" Folder](#folder-organization)
-  - [Typical Structure of a "forms" Folder](#structure)
-  - [Usage](#usage)
-  - [Using React Hook Form](#react-hook-form)
-  - [Best Practice](#best-practice)
+
+- [Why Use a "forms" Folder](#folder-organization)
+- [Typical Structure of a "forms" Folder](#structure)
+- [Usage](#usage)
+- [Using React Hook Form](#react-hook-form)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Why Use a "forms" Folder?</span>
 
@@ -32,6 +33,7 @@ The structure of a "forms" folder can vary based on our project's needs, but her
 │   ├── 📄 ContactForm.tsx
 │   ├── 📄 ContactForm.module.css
 ```
+
 In this structure, each form, such as "VehicleRiskForm" or "ContactForm," has its own sub-folder containing associated TypeScript and CSS files. This helps maintain a clear organization of our code.
 
 ## <span id="usage">🧑🏻‍💻Usage Example</span>
@@ -45,12 +47,14 @@ export const App = () => {
   return (
     <div>
       <VehicleRiskForm />
-     {/* ... other elements of the application */}
+      {/* ... other elements of the application */}
     </div>
   );
 };
 ```
+
 ## <span id="react-hook-form">💡 Using React Hook Form</span>
+
 This project utilizes [React Hook Form](https://react-hook-form.com/) for handling forms. React Hook Form is a powerful library for managing forms in React applications with a simple and intuitive API.
 
 ### React Hook Form Overview
@@ -81,7 +85,7 @@ import { useForm } from 'react-hook-form';
 const MyForm = () => {
   const { register, handleSubmit, formState } = useForm();
 
-  const onSubmit = (data) => {
+  const onSubmit = data => {
     // Handle form submission
     console.log(data);
   };
@@ -102,30 +106,37 @@ const MyForm = () => {
   );
 };
 ```
+
 In the above example, we use the useForm hook to initialize the form and get the necessary methods (register, handleSubmit, and formState). The onSubmit function is called when the form is submitted, and you can access the form data from the data parameter.
 
-***By using React Hook Form in this way, we've streamlined the form management process and created a more maintainable and efficient solution for handling forms in our project.***
+**_By using React Hook Form in this way, we've streamlined the form management process and created a more maintainable and efficient solution for handling forms in our project._**
 
 ## <span id="best-practice">🎖️ Best Practice</span>
+
 When working with `React-hook-form`, consider the following best practices to enhance maintainability and organization:
 
 #### - Use FormProvider
 
-Always use the `FormProvider` provided by `react-hook-form` to manage the form state. 
+Always use the `FormProvider` provided by `react-hook-form` to manage the form state.
 
 This ensures a centralized state management approach and simplifies form-related operations.
 
 #### - Separate Yup Validation Rules
+
 If validation rules become extensive, consider separating them into a dedicated file for better organization. This enhances readability and simplifies updates to validation logic.
 
 #### - Separate useForm Logic
+
 Separate the logic related to `useForm` into a custom hook file, especially if the form logic is complex or if it is shared across multiple components.
 
 #### - Separate onSubmit Function
+
 If the `onSubmit` function logic is substantial, consider separating it into a dedicated file. This promotes a clean separation of concerns and makes the codebase more modular.
 
 #### - Separate Submit Button
+
 If needed, separate the submit button into its own file to facilitate easy customization or relocation from the main form component.
 
 ---
-***By adhering to these best practices, you create a structured and modular approach to form management, ensuring clarity and maintainability in your codebase.***
+
+**_By adhering to these best practices, you create a structured and modular approach to form management, ensuring clarity and maintainability in your codebase._**

package/src/hooks/README.md

@@ -1,12 +1,12 @@
-# 📁 hooks 
+# 📁 hooks
 
 The "hooks" folder is a directory you can create in your React project to group custom hooks you develop. Hooks are special functions introduced in React 16.8, allowing the management of state and lifecycle in functional components.
 
-
 ## 📑 Table of Contents
-  - [Why Use a "hooks" Folder](#folder-organization)
-  - [Usage Example](#usage)
-  - [React-Query-Folder](#folder-react-query)
+
+- [Why Use a "hooks" Folder](#folder-organization)
+- [Usage Example](#usage)
+- [React-Query-Folder](#folder-react-query)
 
 ## <span id="folder-organization">Why Use a "hooks" Folder?</span>
 
@@ -16,7 +16,6 @@ The "hooks" folder is a directory you can create in your React project to group
 
 3. **Code Clarity** : Grouping custom hooks in a "hooks" folder simplifies code maintenance and readability, making it easier to locate and understand specific logic.
 
-
 ## <span id="usage">🧑🏻‍💻 Usage Example</span>
 
 Suppose you have a custom hook "useCustomHook1.js" in the "hooks" folder. You can import it and use it in a functional component like this :
@@ -27,13 +26,10 @@ import { useCustomHook1 } from './hooks/useCustomHook1';
 export const MyComponent = () => {
   const customData = useCustomHook1();
 
-  return (
-    <div>
-      {/* Use customData in your component */}
-    </div>
-  );
-}
+  return <div>{/* Use customData in your component */}</div>;
+};
 ```
+
 ## <span id="folder-react-query">"api" Folder for React Query Requests</span>
 
 Under the "hooks" folder, we have included a sub-folder "api" specifically designed to handle requests using React Query. This allows for more efficient organization of API requests, isolating them from component logic and leveraging the power of React Query for state and data caching.
@@ -51,7 +47,6 @@ Each file, such as "useUsers.ts" or "usePosts.ts," contains logic to perform req
 
 Using React Query for API request management makes data retrieval, caching, and updating easier while reducing code complexity.
 
-
 ### What is React Query?
 
 React Query is an open-source JavaScript library that simplifies data management in a React application. It provides a simple and powerful way to handle network requests, data caching, error handling, and more. With React Query, you can significantly improve the development experience of your React applications by managing data efficiently.
@@ -83,5 +78,6 @@ React Query is an open-source JavaScript library that simplifies data management
 - Mutations are easy to define and manage.
 
 ---
-***For more information and details, refer to the 
-[official React Query documentation.](https://tanstack.com/query/v3/)***
+
+**_For more information and details, refer to the
+[official React Query documentation.](https://tanstack.com/query/v3/)_**

package/src/pages/README.md

@@ -1,13 +1,13 @@
-# 📁 pages 
+# 📁 pages
 
 The "pages" folder is designed to contain all the pages of our application. This structure facilitates organization, management, and navigation between the different views of our application. Additionally, if a page contains components related to its structure, we can create sub-folders to maintain order.
 
 ## 📑 Table of Contents
-  - [Why Use a "pages" Folder](#folder-organization)
-  - [Typical Structure of a "pages" Folder](#structure)
-  - [Usage Example](#usage)
-  - [Best Practice](#best-practice)
 
+- [Why Use a "pages" Folder](#folder-organization)
+- [Typical Structure of a "pages" Folder](#structure)
+- [Usage Example](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Why Use a "pages" Folder?</span>
 
@@ -20,6 +20,7 @@ The "pages" folder is designed to contain all the pages of our application. This
 ## <span id="structure">Typical Structure of a "pages" Folder</span>
 
 The structure of a "pages" folder can vary depending on the size of your application, but here is a typical structure you might adopt:
+
 ```
 📁 Pages
 ├── 📁 Home
@@ -42,6 +43,7 @@ Suppose we have a "UserProfile" page with a complex structure:
 ├── 📄 UserProfile.tsx
 ├── 📄 routes.tsx
 ```
+
 ```javascript
 // index.ts
 export { userProfileRoutes } from './routes';
@@ -68,21 +70,22 @@ export const UserProfile = () => {
 
 By using a "pages" folder and the ability to create sub-folders, we effectively organize our pages and their related components for better management of our application.
 
-
 ## <span id="best-practice">🎖️ Best Practice</span>
+
 When working with page components, it is advisable to follow these best practices to maintain a clean and organized code structure:
 
 #### - Minimize Business Logic
 
-Limit the inclusion of business logic within page components. 
+Limit the inclusion of business logic within page components.
 
 Instead, delegate complex business logic to separate utility functions, services, or hooks. This keeps your page components focused on rendering and layout.
 
 #### - Data Presence Control
 
-Keep the logic within page components to a minimum, focusing primarily on controlling the presence of data. 
+Keep the logic within page components to a minimum, focusing primarily on controlling the presence of data.
 
 If data is not available or meets certain conditions, consider redirecting to a dedicated error or not-found page.
 
 ---
-***By adopting these practices, you create page components that are focused on their primary responsibilities, leading to cleaner and more maintainable code.***
+
+**_By adopting these practices, you create page components that are focused on their primary responsibilities, leading to cleaner and more maintainable code._**

package/src/providers/README.md

@@ -1,12 +1,13 @@
-# 📁 providers 
+# 📁 providers
 
 The "providers" folder is designed to expose service handlers and custom contexts that provide shared functionality across our entire application. It serves as a centralized way to manage services such as authentication, authorization, translation management, and many others.
 
 ## 📑 Table of Contents
-  - [Why Use a "providers" Folder?](#folder-organization)
-  - [Structure of a "providers" Folder](#structure)
-  - [Usage Example](#usage)
-  - [Best Practice](#best-practice)
+
+- [Why Use a "providers" Folder?](#folder-organization)
+- [Structure of a "providers" Folder](#structure)
+- [Usage Example](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Why Use a "providers" Folder?</span>
 
@@ -53,31 +54,27 @@ export const AuthProvider = ({ children }) => {
     setIsAuthenticated(false);
   };
 
-  return (
-    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
+  return <AuthContext.Provider value={{ isAuthenticated, login, logout }}>{children}</AuthContext.Provider>;
+};
 ```
+
 We can then use this authentication service provider in our components by wrapping our components in the provided context:
+
 ```javascript
 import { AuthProvider } from '@Front/Providers/AuthProvider';
 
 export const App = () => {
-  return (
-    <AuthProvider>
-      {/* Vos composants React ici */}
-    </AuthProvider>
-  );
-}
+  return <AuthProvider>{/* Vos composants React ici */}</AuthProvider>;
+};
 ```
+
 ## <span id="best-practice">🎖️ Best Practice</span>
 
-A good practice is to set up a Higher Order Component (HOC) "withProvider" that allows injecting all providers at 
+A good practice is to set up a Higher Order Component (HOC) "withProvider" that allows injecting all providers at
 once.
 
 Example:
+
 ```typescript
 import { ComponentType } from 'react';
 import { QueryClient } from '@tanstack/react-query';
@@ -110,6 +107,6 @@ import { App } from '@Front/components/App';
 const Root = withProvider(App);
 ```
 
-----------
+---
 
-***By using a "providers" folder, we centralize the management of services and custom contexts, enhancing code reuse and ease of maintenance.***
+**_By using a "providers" folder, we centralize the management of services and custom contexts, enhancing code reuse and ease of maintenance._**

package/src/routing/README.md

@@ -3,10 +3,11 @@
 The "routing" folder is responsible for managing navigation within the application. We use the `react-router-dom` library to facilitate route creation and navigation between different views of our application.
 
 ## 📑 Table of Contents
-  - [Folder Organization](#folder-organization)
-  - [Using `react-router-dom`](#react-router-dom)
-  - [Using `appRoutes.ts`](#using-appRoutes)
-  - [Learn More](#learn-more)
+
+- [Folder Organization](#folder-organization)
+- [Using `react-router-dom`](#react-router-dom)
+- [Using `appRoutes.ts`](#using-appRoutes)
+- [Learn More](#learn-more)
 
 ## <span id="folder-organization">Folder Organization</span>
 
@@ -23,15 +24,12 @@ In the "routing" folder, you can find the following files and components:
 `react-router-dom` is a library that makes it easy to create routes in a React application. You can import it into the appropriate files to define routes and manage navigation between views. Here's a simple example of its usage:
 
 ```javascript
-import { createRoot } from "react-dom/client";
-import {
-  createBrowserRouter,
-  RouterProvider,
- } from "react-router-dom";
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: '/',
     element: (
       <div>
         <h1>Hello World</h1>
@@ -40,18 +38,17 @@ const router = createBrowserRouter([
     ),
   },
   {
-    path: "about",
+    path: 'about',
     element: <div>About</div>,
   },
 ]);
 
-createRoot(document.getElementById("root")).render(
-  <RouterProvider router={router} />
-);
+createRoot(document.getElementById('root')).render(<RouterProvider router={router} />);
 ```
 
 ## <span id="using-appRoutes">Using `appRoutes.ts`</span>
-How to define a router with parameters ? 
+
+How to define a router with parameters ?
 
 The simplest way is to write it with the parameters as `react-router` requires, and when using it in a `NavLink` call the `generatPath` function from `react-router`.
 
@@ -63,18 +60,17 @@ export const appRoutes = {
   home: '/',
   post: '/post',
   article: '/post/:id',
-}
+};
 // component.tsx
 import { NavLink, generatePath } from 'react-router-dom';
-import { appRoutes  } from '@Front/routing/appRoutes';
+import { appRoutes } from '@Front/routing/appRoutes';
 export const ComponentName = () => {
-  return (
-    <NavLink to={generatePath(appRoutes .article, { id: 1 })}>link to article 1</NavLink>
- );
+  return <NavLink to={generatePath(appRoutes.article, { id: 1 })}>link to article 1</NavLink>;
 };
 ```
+
 With the `generatePath` function, it is possible to generate URIs with dynamic parameters.
 
-  
 ## <span id="learn-more">🙇 Learn More</span>
-- [React Router](https://reactrouter.com/en/main/start/overview)
+
+- [React Router](https://reactrouter.com/en/main/start/overview)

package/src/types/README.md

@@ -1,11 +1,12 @@
-# 📁 types 
+# 📁 types
 
 The "types" folder: since we are using TypeScript, this folder is intended to contain custom type definition files that enhance type checking and auto-completion in your code.
 
 ## 📑 Table of Contents
-  - [Why use a "types" folder?](#folder-organization)
-  - [Structure of a "types" folder](#structure)
-  - [Example of usage](#usage)
+
+- [Why use a "types" folder?](#folder-organization)
+- [Structure of a "types" folder](#structure)
+- [Example of usage](#usage)
 
 ## <span id="folder-organization">Why use a "types" folder?</span>
 

package/src/ui/README.md

@@ -1,14 +1,15 @@
-# 📁 ui 
-The "ui" folder is a directory designed to group and organize reusable components. 
+# 📁 ui
+
+The "ui" folder is a directory designed to group and organize reusable components.
 
 We follow the concept of Atomic design to structure our components into "atoms," "molecules," "organisms," and "templates," ensuring consistent design and maximum reusability.
 
 ## 📑 Table of Contents
-  - [Why use a "ui" folder with Atomic Design](#folder-organization)
-  - [Structure of a "ui" folder according to Atomic Design](#structure)
-  - [Usage Example](#usage)
-  - [Best Practice](#best-practice)
 
+- [Why use a "ui" folder with Atomic Design](#folder-organization)
+- [Structure of a "ui" folder according to Atomic Design](#structure)
+- [Usage Example](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="folder-organization">Why use a "ui" folder with Atomic Design?</span>
 
@@ -63,12 +64,12 @@ export const MyComponent = () => {
       {/* ... other elements of the application */}
     </div>
   );
-}
+};
 ```
 
 ### Molecule - "SearchBar" Component
-"Molecules" are more complex components that group atoms to form a functional set. In our "ui/molecules" folder, we have the "SearchBar" component that uses the atomic "Button":
 
+"Molecules" are more complex components that group atoms to form a functional set. In our "ui/molecules" folder, we have the "SearchBar" component that uses the atomic "Button":
 
 ```javascript
 import { SearchBar } from '@Front/ui/molecules/SearchBar';
@@ -77,14 +78,16 @@ export const MyComponent = () => {
   return (
     <div>
       <SearchBar placeholder="Rechercher..." />
-        {/* ... other elements of the application */}
+      {/* ... other elements of the application */}
     </div>
   );
-}
+};
 ```
+
 The "SearchBar" component is a molecule because it combines the "Button" atom with other atoms.
 
 ### Organism - "Header" Component
+
 "Organisms" are even more complex components that combine molecules and atoms to create self-contained parts of the UI. In our "ui/organisms" folder, we have the "Header" component that might include the molecular "SearchBar":
 
 ```javascript
@@ -94,14 +97,16 @@ export const MyComponent = () => {
   return (
     <div>
       <Header />
-       {/* ... other elements of the application */}
+      {/* ... other elements of the application */}
     </div>
   );
-}
+};
 ```
+
 The "Header" component is an organism because it combines the molecular "SearchBar" with other elements to form a self-contained part of the interface.
 
 ### Templates - "PageTemplate" Component
+
 "Templates" are "skeleton" components that define the placement of elements using React's composition ability.
 
 In our "ui/templates" folder, we have the "PageTemplate" component that defines the placement of the "topBar," "body," and "footer" to create a complete page:
@@ -110,32 +115,30 @@ In our "ui/templates" folder, we have the "PageTemplate" component that defines
 import PageTemplate from '@Front/ui/templates/PageTemplate';
 
 export const MyComponent = () => {
-  return (
-    <PageTemplate
-      topBar={<div>TopBar</div>}
-      body={<div>Boby</div>}
-      footer={<div>Footer</div>}
-    />
-  );
-}
+  return <PageTemplate topBar={<div>TopBar</div>} body={<div>Boby</div>} footer={<div>Footer</div>} />;
+};
 ```
+
 The "PageTemplate" component is a template because it incorporates the "Header" organism and other elements to create a complete page.
 
 ## <span id="best-practice">🎖️ Best Practice</span>
+
 When incorporating external component libraries, it is recommended to adhere to the following best practices for the organization of UI components:
 
 #### - Export Components via the `ui` Directory
 
-Always export UI components from the `ui` directory, even if they are sourced from an external component library. 
+Always export UI components from the `ui` directory, even if they are sourced from an external component library.
 
 This practice serves as a central point for managing component exports and facilitates handling bugs or breaking changes.
 
 #### - Centralized Component Management
-By exporting components through the ui directory, you establish a centralized location for managing changes or addressing issues related to external components. 
+
+By exporting components through the ui directory, you establish a centralized location for managing changes or addressing issues related to external components.
 
 In the event of a bug or breaking change, modifications can be made at a single location, preventing the need to update multiple parts of the codebase.
 
 This approach contributes to better maintainability and ensures that updates to external components are efficiently managed.
 
 ---
-***By adopting this practice, you create a clear separation between your custom components and external components, simplifying maintenance and reducing the impact of changes from external dependencies.***
+
+**_By adopting this practice, you create a clear separation between your custom components and external components, simplifying maintenance and reducing the impact of changes from external dependencies._**

package/src/utils/README.md

@@ -1,15 +1,17 @@
-# 📁 utils 
+# 📁 utils
+
 The `utils` folder contains reusable utilities and functionalities used across different parts of the application. These utilities are designed to simplify the code, promote reusability, and enhance the maintainability of the project.
 
 ## 📑 Table of Contents
-  - [Usage Example](#usage)
-  - [Best Practice](#best-practice)
+
+- [Usage Example](#usage)
+- [Best Practice](#best-practice)
 
 ## <span id="usage">🧑🏻‍💻 Example of usage</span>
 
-###  `formatDate.ts`
+### `formatDate.ts`
 
-The  `formatDate.ts` file contains a utility function to consistently format dates throughout the application. You can use it to display dates in various components.
+The `formatDate.ts` file contains a utility function to consistently format dates throughout the application. You can use it to display dates in various components.
 
 Example of usage:
 
@@ -19,7 +21,7 @@ import { formatDate } from '@Front/utils/formatDate';
 const formattedDate = formatDate(new Date());
 ```
 
-###  `apiUtils.ts`
+### `apiUtils.ts`
 
 The `apiUtils.ts` file contains utility functions to simplify API calls. You can find functions to handle HTTP requests, manipulate responses, and manage errors.
 
@@ -32,25 +34,23 @@ async function fetchDataAndHandleError() {
   try {
     const data = await fetchData('https://api.example.com/data');
     const processedData = handleResponse(data);
-    
   } catch (error) {
     console.error('An error occurred while fetching data:', error);
   }
 }
 ```
 
-
 ```typescript
 import { formatDate, fetchData, handleResponse } from '@Front/utils';
 // Use the utilities as needed
 ```
 
-----------
-***By using the "utils" folder, we organize our utilities efficiently for better reuse and simplified management.***
+---
+
+**_By using the "utils" folder, we organize our utilities efficiently for better reuse and simplified management._**
 
 ## <span id="best-practice">🎖️ Best Practice</span>
 
-
 When dealing with utility functions, especially those sourced from external libraries like `date-fns`, it is advisable to follow these best practices for maintaining a structured codebase:
 
 #### - Export Libraries from the `utils` Directory
@@ -58,11 +58,13 @@ When dealing with utility functions, especially those sourced from external libr
 Always export utility libraries, such as `date-fns` or others, from the `utils` directory. This practice provides a central location for managing library imports and ensures consistent usage throughout the codebase.
 
 #### - Centralized Library Management
-Exporting libraries through the `utils` directory establishes a centralized point for managing changes or updates to external libraries. 
+
+Exporting libraries through the `utils` directory establishes a centralized point for managing changes or updates to external libraries.
 
 In case of updates, bug fixes, or changes in functionality, modifications can be made at a single location, preventing the need to update multiple parts of the codebase.
 
 This approach contributes to better maintainability and ensures that updates to external libraries are efficiently handled.
 
 ---
-***By adhering to this practice, you create a clear separation between custom utility functions and external libraries, making your codebase more organized and reducing the impact of changes from external dependencies.***
+
+**_By adhering to this practice, you create a clear separation between custom utility functions and external libraries, making your codebase more organized and reducing the impact of changes from external dependencies._**

package/vitest.config.mts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import { loadEnv } from 'vite';
@@ -5,6 +6,7 @@ import svgr from 'vite-plugin-svgr';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
 
+// eslint-disable-next-line import/no-default-export
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
 
@@ -14,7 +16,7 @@ export default defineConfig(({ mode }) => {
       viteTsconfigPaths({
         projects: [resolve(__dirname, './tsconfig.test.json')],
       }),
-      svgr()
+      svgr(),
     ],
     envPrefix: env.ENV_PREFIX ?? 'FRONT_',
     test: {
@@ -26,7 +28,7 @@ export default defineConfig(({ mode }) => {
       reporters: ['basic', 'junit', 'vitest-sonar-reporter'],
       outputFile: {
         'vitest-sonar-reporter': 'sonar-report.xml',
-        'junit': 'junit-report.xml',
+        junit: 'junit-report.xml',
       },
       include: ['src/**/*.(spec|test|steps).[jt]s?(x)'],
       poolOptions: {
@@ -36,6 +38,7 @@ export default defineConfig(({ mode }) => {
         },
       },
       coverage: {
+        enabled: env.CI,
         reporter: ['lcov', 'json', 'html', 'text', 'cobertura'],
         provider: 'v8',
         lines: 80,