@pplancq/react-template 2.5.0 → 2.6.1

package/.env

@@ -27,12 +27,6 @@
 # Default is false
 #DISABLE_ESLINT_PLUGIN=false
 
-# Specify the type of configuration to use with ESLint.
-# - 'eslintrc' is the classic configuration format available in most ESLint versions.
-# - 'flat'  is the new format introduced in ESLint 8.21.0.
-# Default is 'eslintrc'
-ESLINT_CONFIG_TYPE='flat'
-
 # Allows you to deactivate the sourcemap
 # Default is false
 #DISABLE_SOURCE_MAP=false

package/.env.mock

@@ -0,0 +1 @@
+FRONT_MOCK_ENABLE=true

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## @pplancq/react-template [2.6.1](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.6.0...@pplancq/react-template@2.6.1) (2025-06-23)
+
+### Bug Fixes
+
+* **deps:** update dependency react-hook-form to ^7.58.1 ([3a603b7](https://github.com/pplancq/dev-tools/commit/3a603b749ced280c9318682a1b51b902e933505d))
+* **deps:** update react-query mono repo to ^5.80.10 ([fa604a4](https://github.com/pplancq/dev-tools/commit/fa604a4003a6cf8a561c6566edb1b8c5b7773ca3))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.2.1
+
+## @pplancq/react-template [2.6.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.5.0...@pplancq/react-template@2.6.0) (2025-06-16)
+
+### Features
+
+* **react-template:** migrate to rsbuild and update configuration ([16c9362](https://github.com/pplancq/dev-tools/commit/16c9362d5478a6efd50ff4ea3dedee733807becb))
+* **create-react-app:** remove Vite support and update documentation ([6702c40](https://github.com/pplancq/dev-tools/commit/6702c407da239438e6767b06eaa96aac70645996))
+
+### Bug Fixes
+
+* **deps:** update dependency @hookform/resolvers to ^5.1.1 ([7822d53](https://github.com/pplancq/dev-tools/commit/7822d53ab18348e0b66ae1f17ec800d0587b8cea))
+* **deps:** update react-query mono repo to ^5.80.7 ([3fd7b8c](https://github.com/pplancq/dev-tools/commit/3fd7b8cb3a7f30aebec0c87ac5cc8dbad0610fc3))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.2.0
+* **@pplancq/postcss-config:** upgraded to 2.1.13
+
 ## @pplancq/react-template [2.5.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.4.5...@pplancq/react-template@2.5.0) (2025-06-09)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -11,9 +11,10 @@
   },
   "type": "module",
   "scripts": {
-    "start": "webpack serve",
-    "start:mock": "webpack serve --env FRONT_MOCK_ENABLE=true",
-    "build": "webpack --mode production",
+    "start": "rsbuild dev",
+    "start:mock": "rsbuild dev --env-mode mock",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview",
     "test": "node scripts/test.js",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest",
@@ -33,7 +34,6 @@
     "playwright:codegen": "playwright codegen",
     "package:check": "npm exec --yes package-lock-utd@1.1.3",
     "remove:demo": "node ./scripts/removeDemo.cjs",
-    "migrate:vite": "node ./scripts/migrateToVite.cjs",
     "_prepare": "husky",
     "_postinstall": "msw init"
   },
@@ -45,61 +45,62 @@
     "template"
   ],
   "dependencies": {
-    "@hookform/resolvers": "^5.0.1",
-    "@tanstack/react-query": "^5.80.6",
-    "@tanstack/react-query-devtools": "^5.80.6",
+    "@hookform/resolvers": "^5.1.1",
+    "@tanstack/react-query": "^5.80.10",
+    "@tanstack/react-query-devtools": "^5.80.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.57.0",
+    "react-hook-form": "^7.58.1",
     "react-router": "^7.6.2",
     "yup": "^1.6.1"
   },
   "devDependencies": {
     "@bdellegrazie/playwright-sonar-reporter": "^0.4.0",
     "@commitlint/cli": "^19.8.1",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.1",
     "@pplancq/commitlint-config": "*",
     "@pplancq/eslint-config": "*",
     "@pplancq/postcss-config": "*",
     "@pplancq/prettier-config": "*",
     "@pplancq/stylelint-config": "*",
-    "@pplancq/webpack-config": "*",
+    "@rsbuild/core": "^1.3.22",
+    "@rsbuild/plugin-eslint": "^1.1.1",
+    "@rsbuild/plugin-react": "^1.3.2",
+    "@rsbuild/plugin-sass": "^1.3.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react-swc": "^3.10.1",
-    "@vitest/coverage-v8": "^3.2.2",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitest/coverage-v8": "^3.2.4",
     "concurrently": "^9.1.2",
-    "eslint": "^9.28.0",
-    "eslint-plugin-prettier": "^5.4.1",
+    "eslint": "^9.29.0",
+    "eslint-plugin-prettier": "^5.5.0",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
-    "lint-staged": "^16.1.0",
+    "lint-staged": "^16.1.2",
     "monocart-coverage-reports": "^2.12.6",
-    "msw": "^2.9.0",
+    "msw": "^2.10.2",
     "nodemon": "^3.1.10",
     "prettier": "^3.5.3",
-    "stylelint": "^16.20.0",
+    "stylelint": "^16.21.0",
     "stylelint-prettier": "^5.0.3",
+    "stylelint-webpack-plugin": "^5.0.1",
     "tsc-files": "^1.1.4",
     "typescript": "^5.8.3",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.2",
+    "vitest": "^3.2.4",
     "vitest-axe": "^1.0.0-pre.5",
-    "vitest-sonar-reporter": "^2.0.1",
-    "webpack": "^5.99.9",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "vitest-sonar-reporter": "^2.0.1"
   },
   "engines": {
     "node": ">=20.12.2"
   },
   "volta": {
     "node": "22.16.0",
-    "npm": "11.4.1"
+    "npm": "11.4.2"
   },
   "browserslist": {
     "production": [

package/rsbuild.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, loadEnv } from '@rsbuild/core';
+import { pluginEslint } from '@rsbuild/plugin-eslint';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import StylelintPlugin from 'stylelint-webpack-plugin';
+import packageJson from './package.json';
+
+const resolveModule = (module: string) => {
+  try {
+    require.resolve(module);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const { publicVars } = loadEnv({ prefixes: [process.env.ENV_PREFIX ?? 'FRONT_'] });
+
+const publicUrl = process.env.PUBLIC_URL ?? (packageJson as { homepage?: string }).homepage ?? '/';
+const publicPath = new URL(publicUrl.endsWith('/') ? publicUrl : `${publicUrl}/`, 'http://localhost').pathname;
+const disableSourceMap = (process.env.DISABLE_SOURCE_MAP ?? 'false') === 'true' ? false : 'source-map';
+const disableStyleLintPlugin =
+  (process.env.DISABLE_STYLELINT_PLUGIN ?? 'false') === 'true' || !resolveModule('stylelint');
+
+export default defineConfig(({ env }) => {
+  const isProduction = env === 'production';
+
+  return {
+    plugins: [
+      pluginReact(),
+      pluginSass(),
+      !isProduction &&
+        pluginEslint({
+          enable: (process.env.DISABLE_ESLINT_PLUGIN ?? 'false') === 'true' || !resolveModule('eslint'),
+        }),
+    ].filter(Boolean),
+    source: {
+      entry: {
+        index: 'src/main.ts',
+      },
+      define: publicVars,
+    },
+    output: {
+      assetPrefix: publicPath,
+      sourceMap: {
+        js: isProduction ? disableSourceMap : 'cheap-module-source-map',
+        css: (process.env.DISABLE_SOURCE_MAP ?? 'false') !== 'true',
+      },
+      distPath: {
+        root: 'build',
+      },
+      copy: [
+        {
+          from: 'public',
+          to: '.',
+        },
+      ],
+    },
+    server: {
+      port: parseInt(process.env.PORT ?? '3000', 10),
+      open: (process.env.BROWSER ?? 'false') === 'true',
+    },
+    tools: {
+      rspack: {
+        plugins: [
+          !disableStyleLintPlugin &&
+            new StylelintPlugin({
+              extensions: ['css', 'scss', 'sass'],
+              stylelintPath: require.resolve('stylelint'),
+              failOnError: isProduction,
+              context: 'src',
+            }),
+        ].filter(Boolean),
+      },
+    },
+    html: {
+      template: './index.html',
+    },
+  };
+});

package/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Footer Component > should render the Footer component correctly 1`] = `
 <div>
   <div
-    class="_container_eb428f"
+    class="_container_acfd2c"
   >
     <hr />
     <a
@@ -12,7 +12,7 @@ exports[`Footer Component > should render the Footer component correctly 1`] = `
     >
       <img
         alt="logo"
-        class="_logoStyle_a0661f"
+        class="_logoStyle_9e86a7"
         src="/src/assets/images/logo.png"
         style="width: 50px;"
       />

package/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header Component > should render the Header component correctly 1`] = `
 <div>
   <div
-    class="_container_63c2ea"
+    class="_container_a5b977"
   >
     <a
       data-discover="true"
@@ -11,19 +11,19 @@ exports[`Header Component > should render the Header component correctly 1`] = `
     >
       <img
         alt="logo"
-        class="_logoStyle_a0661f"
+        class="_logoStyle_9e86a7"
         src="/src/assets/images/logo.png"
         style="width: 50px;"
       />
     </a>
     <nav>
       <ul
-        class="_navList_75d6d6"
+        class="_navList_eee024"
       >
         <li>
           <a
             aria-current="page"
-            class="_a_75d6d6 active"
+            class="_a_eee024 active"
             data-discover="true"
             href="/"
           >

package/src/pages/Demo/__tests__/__snapshots__/Demo.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Demo Component > should render the Demo component correctly 1`] = `
 <div>
   <div
-    class="_container_85a2c3"
+    class="_container_af1029"
   >
     <div
-      class="_bigTitleStyle_85a2c3"
+      class="_bigTitleStyle_af1029"
     >
       Welcome to Your React Starter Kit 
       <span>
@@ -14,43 +14,43 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
       </span>
     </div>
     <div
-      class="_foo_85a2c3"
+      class="_foo_af1029"
     >
       FlexBlug
     </div>
     <div
-      class="_paragraphContainer_85a2c3"
+      class="_paragraphContainer_af1029"
     >
       <h1
-        class="_titleStyle_85a2c3"
+        class="_titleStyle_af1029"
       >
         Overview
       </h1>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <span
-          class="_centredText_85a2c3"
+          class="_centredText_af1029"
         >
           <p
-            class="_paragraphStyle_85a2c3"
+            class="_paragraphStyle_af1029"
           >
             <span
-              class="_highlight_85a2c3"
+              class="_highlight_af1029"
             >
               Congratulations
             </span>
              on starting your project with our
              
             <span
-              class="_highlight_85a2c3"
+              class="_highlight_af1029"
             >
               React Starter Kit!
             </span>
              This kit is designed to jumpstart your development with a well-organized project structure and pre-configured tools.
           </p>
           <p
-            class="_paragraphStyle_85a2c3"
+            class="_paragraphStyle_af1029"
           >
             Below, you'll find an overview of the key features, tools, and architecture used in this starter kit.
           </p>
@@ -59,61 +59,61 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
     </div>
     <img
       alt="template"
-      class="_imagePlace_85a2c3"
+      class="_imagePlace_af1029"
       src="/src/assets/images/templatePlugins.png"
     />
     <div
-      class="_paragraphContainer_85a2c3"
+      class="_paragraphContainer_af1029"
     >
       <h1
-        class="_titleStyle_85a2c3"
+        class="_titleStyle_af1029"
       >
         Objective
       </h1>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           The goal of this 
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             starter kit
           </span>
            is to enable you to quickly start a new project with all the necessary tools.
         </p>
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           Additionally, this 
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             starter kit
           </span>
            offers a robust set of options for structuring your 
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             React application
           </span>
           , providing flexibility to adapt to various project architectures.
         </p>
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           It has been thoughtfully designed not only to expedite the initial setup but also to streamline the implementation of 
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             Micro-Frontends
           </span>
           , making it a versatile solution for projects of different scales. (for more details check the
            
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             README.md
           </span>
@@ -122,21 +122,21 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
       </div>
     </div>
     <div
-      class="_paragraphContainer_85a2c3"
+      class="_paragraphContainer_af1029"
     >
       <h1
-        class="_titleStyle_85a2c3"
+        class="_titleStyle_af1029"
       >
         Features
       </h1>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             React: 
           </span>
@@ -144,13 +144,13 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </p>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             TypeScript: 
           </span>
@@ -158,37 +158,37 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </p>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             React Query: 
           </span>
           A library for managing, caching, and updating server state in React applications. (for more details check the
            
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             README.md
           </span>
            file under the
            
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             hooks
           </span>
            folder)
         </p>
         <div
-          class="_demoStyle_85a2c3"
+          class="_demoStyle_af1029"
         >
           <a
-            class="_a_85a2c3"
+            class="_a_af1029"
             data-discover="true"
             href="/reactQueryDemo"
           >
@@ -197,36 +197,36 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </div>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             React Hook Form: 
           </span>
           A library for managing forms with React hooks. (for more details check the 
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             README.md
           </span>
            file under the
            
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             forms
           </span>
            folder)
         </p>
         <div
-          class="_demoStyle_85a2c3"
+          class="_demoStyle_af1029"
         >
           <a
-            class="_a_85a2c3"
+            class="_a_af1029"
             data-discover="true"
             href="/reactHookFormDemo"
           >
@@ -235,26 +235,26 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </div>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             React Router: 
           </span>
           A declarative routing solution for React. (for more details check the 
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             README.md
           </span>
            file under the
            
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             routing
           </span>
@@ -262,20 +262,20 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </p>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <p
-          class="_paragraphStyle_85a2c3"
+          class="_paragraphStyle_af1029"
         >
           <span
-            class="_boldText_85a2c3"
+            class="_boldText_af1029"
           >
             ...and more: 
           </span>
           Explore the
            
           <span
-            class="_highlight_85a2c3"
+            class="_highlight_af1029"
           >
             Package.json
           </span>
@@ -284,18 +284,18 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
       </div>
     </div>
     <div
-      class="_paragraphContainer_85a2c3"
+      class="_paragraphContainer_af1029"
     >
       <h1
-        class="_titleStyle_85a2c3"
+        class="_titleStyle_af1029"
       >
         Project Structure
       </h1>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <div
-          class="_tableWrapper_85a2c3"
+          class="_tableWrapper_af1029"
         >
           <table>
             <thead>
@@ -312,7 +312,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     api
                   </span>
@@ -324,7 +324,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     assets
                   </span>
@@ -336,7 +336,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     components
                   </span>
@@ -348,7 +348,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     config
                   </span>
@@ -360,7 +360,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     forms
                   </span>
@@ -372,7 +372,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     hooks
                   </span>
@@ -384,7 +384,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     pages
                   </span>
@@ -396,7 +396,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     providers
                   </span>
@@ -408,7 +408,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     routing
                   </span>
@@ -420,7 +420,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     types
                   </span>
@@ -432,7 +432,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     ui
                   </span>
@@ -444,7 +444,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
               <tr>
                 <td>
                   <span
-                    class="_boldText_85a2c3"
+                    class="_boldText_af1029"
                   >
                     utils
                   </span>
@@ -459,15 +459,15 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
       </div>
     </div>
     <div
-      class="_paragraphContainer_85a2c3"
+      class="_paragraphContainer_af1029"
     >
       <h1
-        class="_titleStyle_85a2c3"
+        class="_titleStyle_af1029"
       >
         Additional Information
       </h1>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <ul>
           <li>
@@ -500,31 +500,31 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </ul>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <span
-          class="_centredText_85a2c3"
+          class="_centredText_af1029"
         >
           <p
-            class="_paragraphStyle_85a2c3"
+            class="_paragraphStyle_af1029"
           >
             Our project is organized into various folders, each containing its own
              
             <span
-              class="_highlight_85a2c3"
+              class="_highlight_af1029"
             >
               README.md
             </span>
              file with specific details, instructions, and additional information. This documentation will guide you through setting up the environment, understanding the project structure, and using the available components and features. For more details, check the 
             <span
-              class="_highlight_85a2c3"
+              class="_highlight_af1029"
             >
               README.md
             </span>
              file in
              
             <span
-              class="_boldText_85a2c3"
+              class="_boldText_af1029"
             >
               each folder of the project
             </span>
@@ -533,18 +533,18 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         </span>
       </div>
       <div
-        class="_infoSection_85a2c3"
+        class="_infoSection_af1029"
       >
         <span
-          class="_centredText_85a2c3"
+          class="_centredText_af1029"
         >
           <p
-            class="_paragraphStyle_85a2c3"
+            class="_paragraphStyle_af1029"
           >
             Feel free to explore and modify the structure to suit your project's needs.
              
             <span
-              class="_boldText_85a2c3"
+              class="_boldText_af1029"
             >
               Happy coding!
             </span>

package/tsconfig.json

@@ -1,14 +1,10 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "types": [
       "./src/react-app-env.d.ts",
-      "@pplancq/webpack-config",
+      "@rsbuild/core/types",
       "vitest/globals",
       "@testing-library/jest-dom/vitest",
       "vitest-axe/extend-expect"
@@ -29,11 +25,9 @@
     "baseUrl": ".",
     "paths": {
       "@Front/*": ["src/*"],
-      "@Mocks/*": ["mocks/*"],
+      "@Mocks/*": ["mocks/*"]
     }
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src", "rsbuild.config.ts"],
   "exclude": ["node_modules"]
 }

package/scripts/migrateToVite.cjs

@@ -1,143 +0,0 @@
-#!/usr/bin/env node
-const { execSync } = require('child_process');
-const { rmSync, writeFileSync, readFileSync } = require('fs');
-const { resolve } = require('path');
-
-const NPM = 'npm';
-const YARN = 'yarn';
-const PNPM = 'pnpm';
-
-const runCommand = (command, options = { stdio: 'inherit' }) => {
-  try {
-    execSync(command, options);
-  } catch (e) {
-    console.error(`Failed to execute ${command}`, e);
-    process.exit(-1);
-  }
-};
-
-const getPackageManager = () => {
-  switch (true) {
-    case process.env.npm_config_user_agent.includes(YARN):
-      return YARN;
-    case process.env.npm_config_user_agent.includes(PNPM):
-      return PNPM;
-    default:
-      return NPM;
-  }
-};
-
-const packageManager = getPackageManager();
-
-console.info('\nremove webpack ...');
-runCommand(`${packageManager} remove @pplancq/webpack-config webpack webpack-cli webpack-dev-server`);
-rmSync(resolve(__dirname, '../webpack.config.cjs'));
-console.info('\ninstall vite package ...');
-runCommand(
-  `${packageManager} ${packageManager === YARN ? 'add --dev' : 'install --save-dev'} vite vite-plugin-eslint2 vite-plugin-stylelint sass`,
-);
-
-writeFileSync(
-  resolve(__dirname, '../vite.config.mts'),
-  `import react from '@vitejs/plugin-react-swc'
-import { defineConfig, loadEnv } from 'vite'
-import eslintPlugin from 'vite-plugin-eslint2'
-import stylelintPlugin from 'vite-plugin-stylelint'
-import svgr from 'vite-plugin-svgr'
-import viteTsconfigPaths from 'vite-tsconfig-paths'
-import packageJson from './package.json'
-
-const resolveModule = (module: string) => {
-  try {
-    require.resolve(module);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '')
-
-  const disableStyleLintPlugin =
-    (env.DISABLE_STYLELINT_PLUGIN ?? 'false') === 'true' || !resolveModule('stylelint');
-  const disableEsLintPlugin =
-   (env.DISABLE_ESLINT_PLUGIN ?? 'false') === 'true' || !resolveModule('eslint');
-  const publicUrl = env.PUBLIC_URL ?? packageJson.homepage ?? '/';
-  const publicPath = mode === 'development'
-    ? '/'
-    : new URL(publicUrl.endsWith('/') ? publicUrl : \`\${publicUrl}/\`, 'http://localhost').pathname;
-
-  return {
-    plugins: [
-      react(),
-      viteTsconfigPaths(),
-      svgr(),
-      !disableEsLintPlugin && eslintPlugin({
-        emitErrorAsWarning: true,
-        cache: false
-      }),
-      !disableStyleLintPlugin && stylelintPlugin({
-        emitErrorAsWarning: true,
-        cache: false
-      })
-    ].filter(Boolean),
-    envPrefix: env.ENV_PREFIX ?? 'FRONT_',
-    base: publicPath,
-    server: {
-      port: parseInt(env.PORT ?? '3000', 10),
-      open: (env.BROWSER ?? 'false') === 'true'
-    },
-    build: {
-      sourcemap: (env.DISABLE_SOURCE_MAP ?? 'false') !== 'true',
-      outDir: 'build',
-    },
-  }
-})
-`,
-  { encoding: 'utf-8' },
-);
-
-let tsconfig = readFileSync(resolve(__dirname, '../tsconfig.json'), { encoding: 'utf-8' });
-tsconfig = tsconfig.replace('@pplancq/webpack-config', 'vite/client');
-writeFileSync(resolve(__dirname, '../tsconfig.json'), tsconfig, { encoding: 'utf-8' });
-
-const packagesJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), { encoding: 'utf-8' }));
-const { start, build, 'migrate:vite': a, 'start:mock': b, ...scripts } = packagesJson.scripts;
-packagesJson.scripts = {
-  start: 'vite',
-  build: 'vite build',
-  preview: 'vite preview',
-  'start:mock': 'vite --mode mock',
-  ...scripts,
-};
-writeFileSync(resolve(__dirname, '../package.json'), JSON.stringify(packagesJson, null, 2), { encoding: 'utf-8' });
-
-let indexHTML = readFileSync(resolve(__dirname, '../public/index.html'), { encoding: 'utf-8' });
-indexHTML = indexHTML.replace('  </body>', '    <script type="module" src="/src/main.ts"></script>\n  </body>');
-writeFileSync(resolve(__dirname, '../index.html'), indexHTML, { encoding: 'utf-8' });
-rmSync(resolve(__dirname, '../public/index.html'));
-
-let envFile = readFileSync(resolve(__dirname, '../.env'), { encoding: 'utf-8' });
-envFile = envFile.replace(
-  `
-
-# Specify the type of configuration to use with ESLint.
-# - 'eslintrc' is the classic configuration format available in most ESLint versions.
-# - 'flat'  is the new format introduced in ESLint 8.21.0.
-# Default is 'eslintrc'
-ESLINT_CONFIG_TYPE='flat'`,
-  '',
-);
-writeFileSync(resolve(__dirname, '../.env'), envFile, { encoding: 'utf-8' });
-
-writeFileSync(
-  resolve(__dirname, '../.env.mock'),
-  `FRONT_MOCK_ENABLE=true
-`,
-  { encoding: 'utf-8' },
-);
-
-rmSync(resolve(__dirname, '../scripts/migrateToVite.cjs'));
-
-console.info('\nThe application has been migrate to vite');

package/webpack.config.cjs

@@ -1,22 +0,0 @@
-// const { ModuleFederationPlugin } = require('webpack').container;
-
-// const deps = require('./package.json').dependencies;
-
-module.exports = {
-  extends: [require.resolve('@pplancq/webpack-config')],
-  // plugins: [
-  //   new ModuleFederationPlugin({
-  //     name: 'reactTemplate',
-  //     filename: 'js/remoteEntry.js',
-  //     remotes: {},
-  //     exposes: {
-  //       './App': './src/bootstrap.tsx',
-  //     },
-  //     shared: {
-  //       react: { singleton: true, requiredVersion: deps.react },
-  //       'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
-  //       'react-router': { singleton: true, requiredVersion: deps['react-router'] },
-  //     },
-  //   }),
-  // ],
-};