@pplancq/react-template 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -37,16 +37,16 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@tanstack/react-query": "^5.60.2",
-    "@tanstack/react-query-devtools": "^5.60.2",
+    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.5.0",
+    "@commitlint/cli": "^19.6.0",
     "@pplancq/commitlint-config": "*",
     "@pplancq/eslint-config": "*",
     "@pplancq/postcss-config": "*",
@@ -61,19 +61,19 @@
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.5",
     "concurrently": "^9.1.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.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",
+    "msw": "^2.6.5",
     "prettier": "^3.3.3",
     "stylelint": "^16.10.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",
+    "vite-tsconfig-paths": "^5.1.3",
     "vitest": "^2.1.5",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-sonar-reporter": "^2.0.0",
@@ -86,7 +86,7 @@
   },
   "volta": {
     "node": "22.11.0",
-    "npm": "10.9.0"
+    "npm": "10.9.1"
   },
   "browserslist": {
     "production": [

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.5'
+const PACKAGE_VERSION = '2.6.6'
 const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

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'] },
   //     },
   //   }),
   // ],