@pplancq/react-template 2.1.0 → 2.3.0

package/.env

@@ -37,6 +37,10 @@ ESLINT_CONFIG_TYPE='flat'
 # Default is false
 #DISABLE_SOURCE_MAP=false
 
+# Sets the public URL or path for production environment.
+# Default is 'http://localhost'
+#PUBLIC_URL='http://localhost'
+
 # Sets the prefix for environment variables that will be passed to the frontend.
 # Access environment variables using import.meta.env.FRONT_FOO in the code.
 # Default is FRONT_

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## @pplancq/react-template [2.3.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.2.0...@pplancq/react-template@2.3.0) (2024-12-09)
+
+### Features
+
+* **webpack-config:** add PUBLIC_URL for sets the public URL or path for production environment ([e13e338](https://github.com/pplancq/dev-tools/commit/e13e33832953c44e9048ff68603f1865fcc01efd))
+* **deps:** update react to v19 ([8ee050e](https://github.com/pplancq/dev-tools/commit/8ee050ed8d3ef2125bcf7e661239c4796bc9a4a4))
+
+### Bug Fixes
+
+* **deps:** update dependency react-router to ^7.0.2 ([d47859e](https://github.com/pplancq/dev-tools/commit/d47859e67fa72c228d1483921f594ffc58d8f470))
+* **deps:** update dependency yup to ^1.5.0 ([2ff356e](https://github.com/pplancq/dev-tools/commit/2ff356e6c823bc7fe9fee32f27c2a06057cbddd9))
+* **deps:** update react-query mono repo to ^5.62.0 ([75cd49b](https://github.com/pplancq/dev-tools/commit/75cd49be2678b1a0b64cb076c051fb8b88d18c84))
+* **deps:** update react-query mono repo to ^5.62.2 ([de08f42](https://github.com/pplancq/dev-tools/commit/de08f42859b3a0262642cfcd0a8ab69f32573095))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.0.4
+* **@pplancq/webpack-config:** upgraded to 1.8.0
+
+## @pplancq/react-template [2.2.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.1.0...@pplancq/react-template@2.2.0) (2024-11-26)
+
+### Features
+
+* **react-template:** migrate to react-router v7 ([fe86866](https://github.com/pplancq/dev-tools/commit/fe868665f1e028d844c2c55a99e856a043baa70c))
+
+### Bug Fixes
+
+* **deps:** update react-query mono repo to ^5.61.0 ([ab3e03e](https://github.com/pplancq/dev-tools/commit/ab3e03e0309e9ffc48f405c328410fb81e6325d3))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.0.3
+* **@pplancq/postcss-config:** upgraded to 2.1.5
+* **@pplancq/webpack-config:** upgraded to 1.7.1
+
 ## @pplancq/react-template [2.1.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.0.1...@pplancq/react-template@2.1.0) (2024-11-18)
 
 ### Features

package/_gitignore

@@ -26,3 +26,4 @@ yarn-debug.log*
 yarn-error.log*
 
 /.idea
+/public/mockServiceWorker.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -26,7 +26,8 @@
     "package:check": "npm exec --yes package-lock-utd@1.1.3",
     "remove:demo": "node ./scripts/removeDemo.js",
     "migrate:vite": "node ./scripts/migrateToVite.js",
-    "_prepare": "husky"
+    "_prepare": "husky",
+    "postinstall": "msw init"
   },
   "bugs": {
     "url": "https://github.com/pplancq/dev-tools/issues"
@@ -37,16 +38,16 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@tanstack/react-query": "^5.60.2",
-    "@tanstack/react-query-devtools": "^5.60.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@tanstack/react-query": "^5.62.2",
+    "@tanstack/react-query-devtools": "^5.62.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.53.2",
-    "react-router-dom": "^6.28.0",
-    "yup": "^1.4.0"
+    "react-router": "^7.0.2",
+    "yup": "^1.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.5.0",
+    "@commitlint/cli": "^19.6.0",
     "@pplancq/commitlint-config": "*",
     "@pplancq/eslint-config": "*",
     "@pplancq/postcss-config": "*",
@@ -54,30 +55,30 @@
     "@pplancq/stylelint-config": "*",
     "@pplancq/webpack-config": "*",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitest/coverage-v8": "^2.1.8",
     "concurrently": "^9.1.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.16.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
-    "msw": "^2.6.4",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.10.0",
+    "msw": "^2.6.7",
+    "prettier": "^3.4.2",
+    "stylelint": "^16.11.0",
     "stylelint-prettier": "^5.0.2",
     "tsc-files": "^1.1.4",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.2",
-    "vitest": "^2.1.5",
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitest": "^2.1.8",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-sonar-reporter": "^2.0.0",
-    "webpack": "^5.96.1",
+    "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   },
@@ -85,8 +86,8 @@
     "node": ">=20.12.2"
   },
   "volta": {
-    "node": "22.11.0",
-    "npm": "10.9.0"
+    "node": "22.12.0",
+    "npm": "10.9.2"
   },
   "browserslist": {
     "production": [

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.5'
-const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -199,7 +199,19 @@ async function getResponse(event, client, requestId) {
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
     // user-defined CORS policies.
-    headers.delete('accept', 'msw/passthrough')
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

package/scripts/removeDemo.js

@@ -34,7 +34,7 @@ mkdirSync(resolveSrc('/pages/Home'));
 writeFileSync(resolveSrc('/pages/Home/index.ts'), "export { homeRoutes } from './routes';\n", { encoding: 'utf-8' });
 writeFileSync(
   resolveSrc('/pages/Home/routes.tsx'),
-  "import type { RouteObject } from 'react-router-dom';\n" +
+  "import type { RouteObject } from 'react-router';\n" +
     "import { Home } from './Home';\n" +
     '\n' +
     'export const homeRoutes: RouteObject = {\n' +

package/src/components/App/App.tsx

@@ -1,7 +1,7 @@
 import { queryClient } from '@Front/config';
 import { withProvider } from '@Front/providers';
 import { createRouter } from '@Front/routing/routerFactory';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
 
 import '@Front/assets/css';
 

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import logo from '@Front/assets/images/logo.png';
 import { Logo } from '@Front/ui/atoms/Logo';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import classes from './Footer.module.css';
 

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

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { Footer } from '../Footer';
 
 describe('Footer Component', () => {
   it('should render the Footer component correctly', () => {
     const { container } = render(
-      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <Router>
         <Footer />
       </Router>,
     );

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

@@ -7,6 +7,7 @@ exports[`Footer Component > should render the Footer component correctly 1`] = `
   >
     <hr />
     <a
+      data-discover="true"
       href="/"
     >
       <img

package/src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import logo from '@Front/assets/images/logo.png';
 import { Logo } from '@Front/ui/atoms/Logo';
 import { Navigation } from '@Front/ui/molecules/Navigation';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import classes from './Header.module.css';
 

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

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { Header } from '../Header';
 
 describe('Header Component', () => {
   it('should render the Header component correctly', () => {
     const { container } = render(
-      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <Router>
         <Header />
       </Router>,
     );

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

@@ -6,6 +6,7 @@ exports[`Header Component > should render the Header component correctly 1`] = `
     class="_container_63c2ea"
   >
     <a
+      data-discover="true"
       href="/"
     >
       <img
@@ -23,6 +24,7 @@ exports[`Header Component > should render the Header component correctly 1`] = `
           <a
             aria-current="page"
             class="_a_75d6d6 active"
+            data-discover="true"
             href="/"
           >
             Demo

package/src/pages/Demo/ReactHookFormDemo/routes.tsx

@@ -1,4 +1,4 @@
-import { RouteObject } from 'react-router-dom';
+import { RouteObject } from 'react-router';
 import { ReactHookFormDemo } from './ReactHookFormDemo';
 
 export const reactHookFormDemoRoutes: RouteObject = {

package/src/pages/Demo/ReactQueryDemo/routes.tsx

@@ -1,4 +1,4 @@
-import { RouteObject } from 'react-router-dom';
+import { RouteObject } from 'react-router';
 import { ReactQueryDemo } from './ReactQueryDemo';
 
 export const reactQueryDemoRoutes: RouteObject = {

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

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { Demo } from '../Demo';
 
 describe('Demo Component', () => {
   it('should render the Demo component correctly', () => {
     const { container } = render(
-      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <Router>
         <Demo />
       </Router>,
     );

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

@@ -189,6 +189,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         >
           <a
             class="_a_85a2c3"
+            data-discover="true"
             href="/reactQueryDemo"
           >
             Run Demo
@@ -226,6 +227,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
         >
           <a
             class="_a_85a2c3"
+            data-discover="true"
             href="/reactHookFormDemo"
           >
             Run Demo

package/src/pages/Demo/routes.tsx

@@ -1,5 +1,5 @@
 import { reactHookFormDemoRoutes } from '@Front/pages/Demo/ReactHookFormDemo';
-import { RouteObject } from 'react-router-dom';
+import { RouteObject } from 'react-router';
 import { Demo } from './Demo';
 import { reactQueryDemoRoutes } from './ReactQueryDemo';
 

package/src/pages/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { Footer } from '@Front/components/Footer';
 import { Header } from '@Front/components/Header';
 import { MainTemplate } from '@Front/ui/templates/MainTemplate';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 export const Layout = () => {
   return (

package/src/pages/README.md

@@ -48,8 +48,8 @@ Suppose we have a "UserProfile" page with a complex structure:
 // index.ts
 export { userProfileRoutes } from './routes';
 
-// routes.tsx (react-router-dom v6)
-import { RouteObject } from 'react-router-dom';
+// routes.tsx (react-router v7)
+import { RouteObject } from 'react-router';
 import { UserProfile } from './UserProfile';
 
 export const userProfileRoutes: RouteObject = {

package/src/pages/UnexpectedError/UnexpectedError.tsx

@@ -1,6 +1,6 @@
 import logo from '@Front/assets/images/logo.png';
 import { Logo } from '@Front/ui/atoms/Logo';
-import { Link, useRouteError } from 'react-router-dom';
+import { Link, useRouteError } from 'react-router';
 
 import classes from './UnexpectedError.module.css';
 

package/src/routing/README.md

@@ -1,11 +1,11 @@
 # 📁routing
 
-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.
+The "routing" folder is responsible for managing navigation within the application. We use the `react-router` 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 `react-router`](#react-router)
 - [Using `appRoutes.ts`](#using-appRoutes)
 - [Learn More](#learn-more)
 
@@ -19,13 +19,13 @@ In the "routing" folder, you can find the following files and components:
 
 3. **`appRoutes.ts`** It contains a simple structure to define the paths of our application.
 
-## <span id="react-router-dom">🧑🏻‍💻 Using `react-router-dom` </span>
+## <span id="react-router">🧑🏻‍💻 Using `react-router` </span>
 
-`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:
+`react-router` 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 { createBrowserRouter, RouterProvider } from 'react-router/dom';
 
 const router = createBrowserRouter([
   {
@@ -62,7 +62,7 @@ export const appRoutes = {
   article: '/post/:id',
 };
 // component.tsx
-import { NavLink, generatePath } from 'react-router-dom';
+import { NavLink, generatePath } from 'react-router/dom';
 import { appRoutes } from '@Front/routing/appRoutes';
 export const ComponentName = () => {
   return <NavLink to={generatePath(appRoutes.article, { id: 1 })}>link to article 1</NavLink>;

package/src/routing/routerFactory.ts

@@ -1,4 +1,4 @@
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router';
 import { routeObject } from './routes';
 
 interface CreateRouterProps {
@@ -8,11 +8,5 @@ interface CreateRouterProps {
 export const createRouter = ({ basename }: CreateRouterProps = {}) => {
   return createBrowserRouter(routeObject, {
     basename,
-    future: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      v7_startTransition: true,
-      v7_relativeSplatPath: true,
-    },
   });
 };

package/src/routing/routes.tsx

@@ -1,6 +1,6 @@
 import { demoRoutes } from '@Front/pages/Demo';
 import { Layout } from '@Front/pages/Layout';
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 import { UnexpectedError } from 'src/pages/UnexpectedError';
 
 export const routeObject: RouteObject[] = [

package/src/ui/atoms/NavLink/NavLink.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink as RouterNavLink } from 'react-router';
 
 type NavLinkProps = ComponentProps<typeof RouterNavLink>;
 

package/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
   //     shared: {
   //       react: { singleton: true, requiredVersion: deps.react },
   //       'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
-  //       'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'] },
+  //       'react-router': { singleton: true, requiredVersion: deps['react-router'] },
   //     },
   //   }),
   // ],