@pplancq/react-template 1.0.0 → 1.1.0

package/.eslintrc.js

@@ -1 +1 @@
-module.exports = { extends: ['@pplancq/eslint-config/react', '@pplancq/eslint-config/vitest'] };
+module.exports = { extends: ['@pplancq/eslint-config/react', '@pplancq/eslint-config/vitest', '@pplancq/eslint-config/prettier'] };

package/.lintstagedrc.js

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

package/.stylelintrc.js

@@ -1 +1 @@
-module.exports = { extends: ['@pplancq/stylelint-config'] };
+module.exports = { extends: ['@pplancq/stylelint-config/prettier'] };

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## @pplancq/react-template [1.1.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@1.0.0...@pplancq/react-template@1.1.0) (2024-03-12)
+
+
+### Features
+
+* **react-template:** add fetchApi example ([c2318c3](https://github.com/pplancq/dev-tools/commit/c2318c36097b9d4e3d1c33a15045dafd1a45c8d5))
+* **webpack-config:** add note about the inclusion of environment variable ([e6e4e31](https://github.com/pplancq/dev-tools/commit/e6e4e310aa1a631a4e6013939c52a025f548b31d))
+* **react-template:** add peerDependencies of commitLint and webpack config ([d501781](https://github.com/pplancq/dev-tools/commit/d501781810aae970db0553fd14935e549a0385fc))
+* **react-template:** add script for migrate to vite ([d5d3337](https://github.com/pplancq/dev-tools/commit/d5d333786677f14b846298eba0739c9f55872949))
+* **react-template:** add script for remove Demo ([355d887](https://github.com/pplancq/dev-tools/commit/355d887afdbe09a4b63073ebed6718846eaf717b))
+* **react-template:** add support for yarn and pnpm to script migrate to vite ([b4b9d6b](https://github.com/pplancq/dev-tools/commit/b4b9d6ba9b95f3810b2cfcb03a861a02caf8af8a))
+* **create-react-app:** add support for yarn and pnpm ([eafc39d](https://github.com/pplancq/dev-tools/commit/eafc39d972b178ca21ed307166a9ba394161803f))
+* **react-template:** add test report on .gitignore ([072a240](https://github.com/pplancq/dev-tools/commit/072a2405ed421d22b9ba1b9b11f524a9aa7d0889))
+* **react-template:** rename Error page to UnexpectedError ([c6eea7b](https://github.com/pplancq/dev-tools/commit/c6eea7b1d3e7dd6589945949d03c25485d22fc6c))
+* **react-template:** update eslint un stylelint config ([82a4df3](https://github.com/pplancq/dev-tools/commit/82a4df3e8a3ce1932f915f11ca3495aa43d2aca5))
+* **react-template:** update react-query@3 to @tanstack/react-query@5 ([f79e642](https://github.com/pplancq/dev-tools/commit/f79e6425668bd22b2e278e85a68fc1c214ed8586))
+* **react-template:** update readme ([3aa2543](https://github.com/pplancq/dev-tools/commit/3aa2543948a697f6604f4984884184d3f285d297))
+
+
+### Bug Fixes
+
+* **react-template:** ambiguous Spacing before <span> ([56c9a8e](https://github.com/pplancq/dev-tools/commit/56c9a8e558a8e0c7e62faba4bf7db85278eb7f80))
+* **react-template:** fix peerDependencies of commitlint-config ([fe0dd7c](https://github.com/pplancq/dev-tools/commit/fe0dd7ca706e4287b36e2ed861a509a8dc7742e2))
+
+
+
+### Dependencies
+
+* **@pplancq/commitlint-config:** upgraded to 2.0.0
+* **@pplancq/eslint-config:** upgraded to 2.0.0
+* **@pplancq/stylelint-config:** upgraded to 2.0.0
+* **@pplancq/webpack-config:** upgraded to 1.1.0
+
 ## @pplancq/react-template 1.0.0 (2024-02-05)
 
 

package/README.md

@@ -1,221 +1,17 @@
-## 🚀 <span id="getting-started">Getting Started</span>
+# @pplancq/react-template
 
-This project was bootstrapped with [@pplancq/create-react-app](https://github.com/pplancq/dev-tools/tree/main/packages/create-react-app).
+This package is a ready-to-use template for starting up a new React application. It has been designed for easy use via the `@pplancq/create-react-app` script.
 
-### 🧾 Prerequisites
+## Usage
 
-- Node.js : [Download here](https://nodejs.org/) (Preferably, use [Volta](https://volta.sh/))
-- npm (Node Package Manager)
+To create a new React project, use the following command:
 
-### 🛠️ Installation
-
-1. Clone this repository to your computer.
-
-```bash
-git clone https://github.com/votre-utilisateur/mon-projet-awesome.git mon-projet
-cd mon-projet
-```
-
-2. Install dependencies.
-
-```bash
-npm install 
-```
-
-
-In the project directory, you can run the following commands:
-
-### `npm start`
-
-Launches the application in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload automatically if you make edits.
-
-You will also see lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in interactive mode.
-
-### `npm run build`
-
-Builds the application for production in the `build` folder.
-
-It correctly bundles React in production mode and optimizes the build for better performance.
-
-The build is minified, and the filenames include hashes.
-Your application is ready to be deployed!
-
-### `npm run lint`
-
-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`
-
-Allows you to fix eslint errors.
-
-### `npm run stylelint:fix`
-
-Allows you to fix style lint errors.
-
-## 🏗 <span id="project-structure">Project Structure</span>
-
-```
-📁 my-projet
-├── 📁 src
-│   ├── 📁 ui
-│   │   ├── 📁 Atoms
-│   │   ├── 📁 Molecules
-│   │   ├── 📁 Organisms
-│   │   ├── 📁 Templates
-│   ├── 📁 components
-│   │   ├── 📁 formFields
-│   ├── 📁 providers
-│   ├── 📁 pages
-│   │   ├── 📁 homePage
-│   │   ├── 📁 page1
-│   │   │   ├── 📁 sousPage1
-│   ├── 📁 forms
-│   │   ├── 📁 hooks
-│   │   ├── 📁 risk
-│   │   ├── 📁 contact
-│   ├── 📁 hooks
-│   │   ├── 📁 api
-│   │   ├── 📁 useCustom1
-│   │   ├── 📁 useCustom2
-│   ├── 📁 utils
-│   │   ├── 📁 services
-│   │   ├── 📁 tests
-│   │   ├── 📁 helpers
-│   ├── 📁 routing
-│   ├── 📁 api
-│   ├── 📁 types
-│   ├── 📁 assets
-│   ├── 📁 config
-```
-
-### 📚 Folder Definitions
-
-Here is the project folder structure, with a brief description of each folder:
-
-| Folder | Description|
-| -------- | -------- |
-| **📁 src**  | ***The root directory of the application source code.***
-| [**📁 ui**](./src/ui/README.md) | Contains reusable components designed to be used across projects. Components can be basic (Atoms), more complex (Molecules), higher-level components (Organisms), or page templates (Templates).    |
-| [**📁&#160;components**](./src/components/README.md)     | Contains project-specific reusable components, for example, form components using React Hook Form.   |
-| [**📁 providers**](./src/providers/README.md)   | This folder contains context providers or custom hooks that provide data to the entire application.   |
-| [**📁 pages**](./src/pages/README.md)    | Contains the pages of the application. Each subfolder represents a distinct page or view of the application.    |
-| [**📁 forms**](./src/forms/README.md)   | Contains the forms of the application, grouping hooks related to forms.    |
-| [**📁 hooks**](./src/hooks/README.md)    | Includes custom hooks for various application features, such as API calls with React Query.    |
-| [**📁 utils**](./src/utils/README.md)    | Contains utilities and services such as test files, utility functions, etc.    |
-| [**📁 routing**](./src/routing/README.md)    | This folder is intended for native API calls using the `fetch`. function. These calls are essential for fetching real-time data from external sources, such as remote servers or web services.    |
-| [**📁 types**](./src/types/README.md)     | Provides TypeScript type definitions to enhance the robustness of your code.   |
-| [**📁 assets**](./src/assets/README.md)    | Contains static files such as images, fonts, etc., used in the application.    |
-| [**📁 config**](./src/config/README.md)   | Contains all the important configurations and utilities needed for our project.    |
-
-## 🏗 <span id="component-structure">React Component Structure</span>
-
-```
-📁 ComponentName
-├── 📁 __tests__
-│   ├── 📄 ComponentName.feature
-│   ├── 📄 ComponantName.steps.tsx
-│   ├── 📄 ComponentName.test.tsx
-├── 📄 index.ts
-├── 📄 ComponentName.tsx
-├── 📄 ComponentName.hook.ts
-├── 📄 ComponentName.module.scss
-```
-
-### 📚 Files Definitions
-
-#### 📁 **tests**
-
-The tests folder may contain unit tests specific to the package. The idea is to mainly test through functional tests. However, in some cases, it may be useful to test a component in isolation (for example, when developing a package reused between multiple projects).
-
-#### 📄 index.ts
-
-This file allows exposing the component and avoids having to redo imports if the file implementing the component changes its name.
-
-```typescript
-export { ComponentName } from './ComponentName';
-```
-
-This will allow importing a component like this:
-
-```typescript
-import { ComponentName } from '@Front/ComponentName';
-```
-
-#### 📄 ComponentName.tsx
-
-Each file contains a single exported component. It will essentially contain the view and very little logic. If the component needs more logic, it is advisable to use a custom hook.
-
-```typescript
-type ComponentNameProps = {
-  foo: string;
-}
-
-export const ComponentName = ({ foo }) => {
-  return (
-    <div>{foo}</div>
- );
-};
-```
-
-#### 📄 ComponentName.hook.ts
-
-A custom hook allows moving the logic specific to a component outside of its view.
-
-```typescript
-export type UseComponentNameProps = {
-  foo: string;
-};
-
-export type UseComponentNameReturn = {
-  bar: string;
-};
-
-export const useComponentName = ({ foo }: UseComponentNameProps): UseComponentNameReturn => {
-  return {
-    bar: foo,
-  };
-};
-
-```
-
-#### 📄 ComponentName.module.scss
-
-The style specific to the component will be written in module form. This allows scoping the style of the component without overriding global style.
-
-```css
-.root {
-  background-color: red;
-}
-
-```
-
-```typescript
-import classes from './ComponentName.module.scss'
-
-export const ComponentName = () => {
-  return (
-    <div className={classes.root}>Foo</div>
- );
-};
+```shell
+npm create @pplancq/react-app@latest <project_name>
 ```
-### ❗ Naming Conventions
 
-==> Component names, file names, and folder names should follow the **PascalCase** convention.
+Replace <project_name> with the name of your new project.
 
-## 🙇 <span id="learnmore">Learn More</span>
+## License
 
-- React & co
-  - [React Documentation.](https://react.dev/).
-  - [React Router Documentation.](https://reactrouter.com/en/main).
-  - [React Query Documentation.](https://tanstack.com/query/v3/).
-  - [React Hook Form Documentation.](https://react-hook-form.com/).
-- Test
-  - [Vitest Documentation.](https://vitest.dev/).
-  - [Testing Library Documentation.](https://testing-library.com/).
+This project is under the MIT license.

package/_README.md

@@ -0,0 +1,239 @@
+## 🚀 <span id="getting-started">Getting Started</span>
+
+This project was bootstrapped with [@pplancq/create-react-app](https://github.com/pplancq/dev-tools/tree/main/packages/create-react-app).
+
+### 🧾 Prerequisites
+
+- Node.js : [Download here](https://nodejs.org/) (Preferably, use [Volta](https://volta.sh/))
+- npm (Node Package Manager)
+
+### 🛠️ Installation
+
+1. Clone this repository to your computer.
+
+```bash
+git clone https://github.com/votre-utilisateur/mon-projet-awesome.git mon-projet
+cd mon-projet
+```
+
+2. Install dependencies.
+
+```bash
+npm install 
+```
+
+
+In the project directory, you can run the following commands:
+
+### `npm start`
+
+Launches the application in development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload automatically if you make edits.
+
+You will also see lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in interactive mode.
+
+### `npm run build`
+
+Builds the application for production in the `build` folder.
+
+It correctly bundles React in production mode and optimizes the build for better performance.
+
+The build is minified, and the filenames include hashes.
+Your application is ready to be deployed!
+
+### `npm run lint`
+
+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`
+
+Allows you to fix eslint errors.
+
+### `npm run stylelint:fix`
+
+Allows you to fix style lint errors.
+
+### `npm run remove:demo`
+
+To remove the demo application.
+
+### `npm run migrate:vite`
+
+To migrate from webpack to vite.
+
+## 🏗 <span id="project-structure">Project Structure</span>
+
+```
+📁 my-projet
+├── 📁 src
+│   ├── 📁 ui
+│   │   ├── 📁 Atoms
+│   │   ├── 📁 Molecules
+│   │   ├── 📁 Organisms
+│   │   ├── 📁 Templates
+│   ├── 📁 components
+│   │   ├── 📁 formFields
+│   ├── 📁 providers
+│   ├── 📁 pages
+│   │   ├── 📁 homePage
+│   │   ├── 📁 page1
+│   │   │   ├── 📁 sousPage1
+│   ├── 📁 forms
+│   │   ├── 📁 hooks
+│   │   ├── 📁 risk
+│   │   ├── 📁 contact
+│   ├── 📁 hooks
+│   │   ├── 📁 api
+│   │   ├── 📁 useCustom1
+│   │   ├── 📁 useCustom2
+│   ├── 📁 utils
+│   │   ├── 📁 services
+│   │   ├── 📁 tests
+│   │   ├── 📁 helpers
+│   ├── 📁 routing
+│   ├── 📁 api
+│   ├── 📁 types
+│   ├── 📁 assets
+│   ├── 📁 config
+```
+
+### 📚 Folder Definitions
+
+Here is the project folder structure, with a brief description of each folder:
+
+| Folder | Description|
+| -------- | -------- |
+| **📁 src**  | ***The root directory of the application source code.***
+| [**📁 ui**](./src/ui/README.md) | Contains reusable components designed to be used across projects. Components can be basic (Atoms), more complex (Molecules), higher-level components (Organisms), or page templates (Templates).    |
+| [**📁&#160;components**](./src/components/README.md)     | Contains project-specific reusable components, for example, form components using React Hook Form.   |
+| [**📁 providers**](./src/providers/README.md)   | This folder contains context providers or custom hooks that provide data to the entire application.   |
+| [**📁 pages**](./src/pages/README.md)    | Contains the pages of the application. Each subfolder represents a distinct page or view of the application.    |
+| [**📁 forms**](./src/forms/README.md)   | Contains the forms of the application, grouping hooks related to forms.    |
+| [**📁 hooks**](./src/hooks/README.md)    | Includes custom hooks for various application features, such as API calls with React Query.    |
+| [**📁 utils**](./src/utils/README.md)    | Contains utilities and services such as test files, utility functions, etc.    |
+| [**📁 routing**](./src/routing/README.md)    | This folder is intended for native API calls using the `fetch`. function. These calls are essential for fetching real-time data from external sources, such as remote servers or web services.    |
+| [**📁 types**](./src/types/README.md)     | Provides TypeScript type definitions to enhance the robustness of your code.   |
+| [**📁 assets**](./src/assets/README.md)    | Contains static files such as images, fonts, etc., used in the application.    |
+| [**📁 config**](./src/config/README.md)   | Contains all the important configurations and utilities needed for our project.    |
+
+## 🏗 <span id="component-structure">React Component Structure</span>
+
+```
+📁 ComponentName
+├── 📁 __tests__
+│   ├── 📄 ComponentName.feature
+│   ├── 📄 ComponantName.steps.tsx
+│   ├── 📄 ComponentName.test.tsx
+├── 📄 index.ts
+├── 📄 ComponentName.tsx
+├── 📄 ComponentName.hook.ts
+├── 📄 ComponentName.module.scss
+```
+
+### 📚 Files Definitions
+
+#### 📁 **tests**
+
+The tests folder may contain unit tests specific to the package. The idea is to mainly test through functional tests. However, in some cases, it may be useful to test a component in isolation (for example, when developing a package reused between multiple projects).
+
+#### 📄 index.ts
+
+This file allows exposing the component and avoids having to redo imports if the file implementing the component changes its name.
+
+```typescript
+export { ComponentName } from './ComponentName';
+```
+
+This will allow importing a component like this:
+
+```typescript
+import { ComponentName } from '@Front/ComponentName';
+```
+
+#### 📄 ComponentName.tsx
+
+Each file contains a single exported component. It will essentially contain the view and very little logic. If the component needs more logic, it is advisable to use a custom hook.
+
+```typescript
+type ComponentNameProps = {
+  foo: string;
+}
+
+export const ComponentName = ({ foo }) => {
+  return (
+    <div>{foo}</div>
+ );
+};
+```
+
+#### 📄 ComponentName.hook.ts
+
+A custom hook allows moving the logic specific to a component outside of its view.
+
+```typescript
+export type UseComponentNameProps = {
+  foo: string;
+};
+
+export type UseComponentNameReturn = {
+  bar: string;
+};
+
+export const useComponentName = ({ foo }: UseComponentNameProps): UseComponentNameReturn => {
+  return {
+    bar: foo,
+  };
+};
+
+```
+
+#### 📄 ComponentName.module.scss
+
+The style specific to the component will be written in module form. This allows scoping the style of the component without overriding global style.
+
+```css
+.root {
+  background-color: red;
+}
+
+```
+
+```typescript
+import classes from './ComponentName.module.scss'
+
+export const ComponentName = () => {
+  return (
+    <div className={classes.root}>Foo</div>
+ );
+};
+```
+### ❗ Naming Conventions
+
+==> Component names, file names, and folder names should follow the **PascalCase** convention.
+
+## ⚠️ Caution with Environment Variables
+
+The webpack configuration of this project allows for environment variables to be included in the application bundle. This could potentially expose sensitive information if the bundle is publicly accessible.
+
+It is recommended to only include non-sensitive environment variables in the application bundle. Sensitive information should not be exposed even if the bundle is publicly accessible.
+
+Ensure you understand the security implications before including environment variables in your bundle.
+
+Please note that the web configuration pre-filters environment variables via the default prefix ‘FRONT_’. This means that only environment variables starting with ‘FRONT_’ will be included in the bundle. This is an additional layer of security to prevent the accidental exposure of sensitive environment variables.
+
+## 🙇 <span id="learnmore">Learn More</span>
+
+- React & co
+  - [React Documentation.](https://react.dev/).
+  - [React Router Documentation.](https://reactrouter.com/en/main).
+  - [React Query Documentation.](https://tanstack.com/query/v3/).
+  - [React Hook Form Documentation.](https://react-hook-form.com/).
+- Test
+  - [Vitest Documentation.](https://vitest.dev/).
+  - [Testing Library Documentation.](https://testing-library.com/).

package/_gitignore

@@ -4,13 +4,15 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage
 
 # production
 /build
-/test-report.xml
+/junit-report.xml
+/sonar-report.xml
 
 # misc
 .DS_Store

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/react-template",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -20,6 +20,9 @@
     "stylelint": "stylelint \"src/**/*.{scss,css}\"",
     "stylelint:fix": "stylelint \"src**/*.{scss,css}\" --fix",
     "tsc": "tsc --noEmit",
+    "package:check": "npm exec --yes package-lock-utd@1.1.3",
+    "remove:demo": "./scripts/removeDemo.js",
+    "migrate:vite": "./scripts/migrateToVite.js",
     "_prepare": "husky"
   },
   "bugs": {
@@ -31,39 +34,48 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@tanstack/react-query": "^5.25.0",
+    "@tanstack/react-query-devtools": "^5.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.49.2",
-    "react-query": "^3.39.3",
-    "react-router-dom": "^6.21.0",
-    "yup": "^1.3.3"
+    "react-hook-form": "^7.51.0",
+    "react-router-dom": "^6.22.3",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@pplancq/babel-config": "1.0.0",
-    "@pplancq/commitlint-config": "1.0.0",
-    "@pplancq/eslint-config": "1.0.0",
-    "@pplancq/postcss-config": "1.0.0",
-    "@pplancq/prettier-config": "1.0.0",
-    "@pplancq/stylelint-config": "1.0.0",
-    "@pplancq/webpack-config": "1.0.0",
-    "@svgr/webpack": "^8.1.0",
+    "@commitlint/cli": "^19.0.3",
+    "@pplancq/babel-config": "^1.0.0",
+    "@pplancq/commitlint-config": "*",
+    "@pplancq/eslint-config": "2.0.0",
+    "@pplancq/postcss-config": "^1.0.0",
+    "@pplancq/prettier-config": "^1.0.0",
+    "@pplancq/stylelint-config": "2.0.0",
+    "@pplancq/webpack-config": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/coverage-v8": "^1.3.1",
     "concurrently": "^8.2.2",
-    "husky": "^9.0.7",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.0",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.2.1",
+    "stylelint-prettier": "^5.0.0",
     "tsc-files": "^1.1.4",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^1.0.4",
-    "vitest-sonar-reporter": "^1.0.0"
+    "vitest-sonar-reporter": "^2.0.0",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.2"
   },
   "volta": {
     "node": "20.10.0",

package/scripts/migrateToVite.js

@@ -0,0 +1,98 @@
+#!/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.js'));
+console.info('\ninstall vite package ...');
+runCommand(
+  `${packageManager} ${packageManager === YARN ? 'add' : 'install'} --save-dev vite vite-plugin-eslint2 vite-plugin-stylelint`,
+);
+
+writeFileSync(
+  resolve(__dirname, '../vite.config.mts'),
+  `import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+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'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [
+      react(),
+      viteTsconfigPaths(),
+      svgr(),
+      eslintPlugin({
+        useEslintrc: true,
+        emitErrorAsWarning: true,
+        cache: false
+      }),
+      stylelintPlugin({
+        emitErrorAsWarning: true,
+        cache: false
+      })
+    ],
+    envPrefix: env.ENV_PREFIX ?? 'FRONT_',
+    server: {
+      port: parseInt(process.env.PORT ?? '3000', 10),
+      open: (process.env.BROWSER ?? 'false') === 'true'
+    },
+    root: resolve(__dirname, 'public'),
+    publicDir: resolve(__dirname, 'public'),
+    resolve: {
+      alias: { '/src': resolve(__dirname, 'src') }
+    },
+    build: {
+      outDir: resolve(__dirname, 'build')
+    }
+  }
+})
+`,
+  { encoding: 'utf-8' },
+);
+
+const packagesJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), { encoding: 'utf-8' }));
+const { start, build, 'migrate:vite': _, ...scripts } = packagesJson.scripts;
+packagesJson.scripts = { start: 'vite', build: 'vite build', preview: 'vite preview', ...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, '../public/index.html'), indexHTML, { encoding: 'utf-8' });
+
+rmSync(resolve(__dirname, '../scripts/migrateToVite.js'));
+
+console.info('\nThe application has been migrate to vite');

package/scripts/removeDemo.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+const { rmSync, readFileSync, writeFileSync } = require('fs');
+const { resolve } = require('path');
+
+const resolveSrc = path => resolve(__dirname, `../src${path}`);
+
+rmSync(resolveSrc('/api/demoApi.ts'));
+
+rmSync(resolveSrc('/assets/css/mainBody.css'));
+rmSync(resolveSrc('/assets/css/reset.css'));
+writeFileSync(resolveSrc('/assets/css/global.css'), ':root {\n  --white-color: #fff;\n}\n', { encoding: 'utf-8' });
+let assetsIndex = readFileSync(resolveSrc('/assets/css/index.ts'), { encoding: 'utf-8' });
+assetsIndex = assetsIndex.replaceAll("import './reset.css';\nimport './mainBody.css';\n", "import './global.css';\n");
+writeFileSync(resolveSrc('/assets/css/index.ts'), assetsIndex, { encoding: 'utf-8' });
+
+rmSync(resolveSrc('/assets/images/logo.png'));
+rmSync(resolveSrc('/assets/images/templatePlugins.png'));
+
+rmSync(resolveSrc('/components/Footer'), { recursive: true });
+rmSync(resolveSrc('/components/Header'), { recursive: true });
+rmSync(resolveSrc('/components/TextInput'), { recursive: true });
+
+rmSync(resolveSrc('/forms/ProfileForm'), { recursive: true });
+
+rmSync(resolveSrc('/hooks/api/useDemoApi.ts'));
+let queryKey = readFileSync(resolveSrc('/hooks/api/queryKey.ts'), { encoding: 'utf-8' });
+queryKey = queryKey.replaceAll("export const demoQuery = () => ['dataWithDelay'];\n", '');
+writeFileSync(resolveSrc('/hooks/api/queryKey.ts'), queryKey, { encoding: 'utf-8' });
+
+rmSync(resolveSrc('/pages/Demo'), { recursive: true });
+rmSync(resolveSrc('/pages/Layout'), { recursive: true });
+rmSync(resolveSrc('/pages/UnexpectedError'), { recursive: true });
+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 { Home } from './Home';\n" +
+    '\n' +
+    'export const homeRoutes: RouteObject = {\n' +
+    '  index: true,\n' +
+    '  element: <Home />,\n' +
+    '};\n',
+  { encoding: 'utf-8' },
+);
+writeFileSync(resolveSrc('/pages/Home/Home.tsx'), 'export const Home = () => {\n  return <div>HomePage</div>;\n};\n', {
+  encoding: 'utf-8',
+});
+
+let appRoutes = readFileSync(resolveSrc('/routing/appRoutes.ts'), { encoding: 'utf-8' });
+appRoutes = appRoutes.replaceAll(
+  "\n  reactQueryDemo: '/reactQueryDemo',\n  reactHookFormDemo: '/reactHookFormDemo',",
+  '',
+);
+writeFileSync(resolveSrc('/routing/appRoutes.ts'), appRoutes, { encoding: 'utf-8' });
+let routes = readFileSync(resolveSrc('/routing/routes.tsx'), { encoding: 'utf-8' });
+routes = routes.replaceAll(
+  "import { demoRoutes } from '@Front/pages/Demo';",
+  "import { homeRoutes } from '@Front/pages/Home';",
+);
+routes = routes.replaceAll("\nimport { Layout } from '@Front/pages/Layout';", '');
+routes = routes.replaceAll("\nimport { UnexpectedError } from 'src/pages/UnexpectedError';", '');
+routes = routes.replaceAll(
+  'element: <Layout />,\n    children: [demoRoutes],\n    errorElement: <UnexpectedError />,',
+  'children: [homeRoutes],',
+);
+writeFileSync(resolveSrc('/routing/routes.tsx'), routes, { encoding: 'utf-8' });
+
+rmSync(resolveSrc('/types/demoApi.ts'));
+rmSync(resolveSrc('/types/profileTypes.ts'));
+
+rmSync(resolveSrc('/ui/atoms/Input'), { recursive: true });
+rmSync(resolveSrc('/ui/atoms/Logo'), { recursive: true });
+rmSync(resolveSrc('/ui/atoms/NavLink'), { recursive: true });
+rmSync(resolveSrc('/ui/molecules/Navigation'), { recursive: true });
+rmSync(resolveSrc('/ui/organisms/Footer'), { recursive: true });
+rmSync(resolveSrc('/ui/organisms/Header'), { recursive: true });
+rmSync(resolveSrc('/ui/organisms/MainContent'), { recursive: true });
+rmSync(resolveSrc('/ui/templates/MainTemplate'), { recursive: true });
+
+const packagesJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), { encoding: 'utf-8' }));
+const { 'remove:demo': _, ...scripts } = packagesJson.scripts;
+packagesJson.scripts = { ...scripts };
+writeFileSync(resolve(__dirname, '../package.json'), JSON.stringify(packagesJson, null, 2), { encoding: 'utf-8' });
+
+rmSync(resolve(__dirname, '../scripts/removeDemo.js'));
+
+console.info('\nThe demo application has been removed\n');

package/src/api/constant.ts

@@ -0,0 +1,16 @@
+export enum METHODS {
+  get = 'GET',
+  post = 'POST',
+  put = 'PUT',
+  patch = 'PATCH',
+  delete = 'DELETE',
+}
+
+export enum HEADERS {
+  contentType = 'content-type',
+}
+
+export enum MINE_TYPES {
+  json = 'application/json',
+  text = 'plain/text',
+}

package/src/api/demoApi.ts

@@ -1,44 +1,10 @@
+import { fetchApi } from '@Front/api/fetchApi';
 import type { Users } from '@Front/types/demoApi';
 
-const data: Users = [
-  {
-    id: 1,
-    firstName: 'John',
-    lastName: 'Doe',
-    age: 30,
-    email: 'john.doe@example.com',
-  },
-  {
-    id: 2,
-    firstName: 'Jane',
-    lastName: 'Smith',
-    age: 25,
-    email: 'jane.smith@example.com',
-  },
-  {
-    id: 3,
-    firstName: 'Alice',
-    lastName: 'Johnson',
-    age: 28,
-    email: 'alice.johnson@example.com',
-  },
-  {
-    id: 4,
-    firstName: 'Bob',
-    lastName: 'Brown',
-    age: 35,
-    email: 'bob.brown@example.com',
-  },
-];
-
-export const fetchDemoApi = async (): Promise<Users> => {
-  return new Promise<Users>((resolve, reject) => {
-    try {
-      setTimeout(() => {
-        resolve(data);
-      }, 3000);
-    } catch (error) {
-      reject(error);
-    }
+export const fetchDemoApi = async () => {
+  const users = await fetchApi<Users>({
+    path: 'https://jsonplaceholder.typicode.com/users',
   });
+
+  return users.map(user => ({ ...user, username: user.username.toUpperCase(), email: user.email.toLowerCase() }));
 };

package/src/api/fetchApi.ts

@@ -0,0 +1,49 @@
+import type { Json } from '@Front/types/api';
+import { HEADERS, METHODS, MINE_TYPES } from './constant';
+
+export type FetchApiError = Error & {
+  code?: number;
+  contentType?: MINE_TYPES;
+};
+
+type FetchApiProps = {
+  path: string;
+  method?: METHODS;
+  data?: Json;
+  headers?: HeadersInit;
+};
+
+export const fetchApi = async <T extends Json | string>({
+  path,
+  method = METHODS.get,
+  data,
+  headers = [],
+}: FetchApiProps): Promise<T> => {
+  const mergeHeaders = new Headers(headers);
+
+  if (data) {
+    mergeHeaders.append(HEADERS.contentType, MINE_TYPES.json);
+  }
+
+  const response = await fetch(path, {
+    method,
+    ...(data && { body: JSON.stringify(data) }),
+    headers: mergeHeaders,
+  });
+
+  const content = await response.text();
+
+  if (!response.ok) {
+    const error: FetchApiError = new Error(content);
+    error.code = response.status;
+    error.contentType = (response.headers.get(HEADERS.contentType) as MINE_TYPES) ?? MINE_TYPES.text;
+
+    throw error;
+  }
+
+  if ((response.headers.get(HEADERS.contentType) ?? '').includes('json')) {
+    return JSON.parse(content) as T;
+  }
+
+  return content as T;
+};

package/src/config/queryClientConfig.ts

@@ -1,3 +1,3 @@
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 
 export const queryClient = new QueryClient();

package/src/hooks/api/useDemoApi.ts

@@ -1,6 +1,6 @@
 import { fetchDemoApi } from '@Front/api/demoApi';
 import type { Users } from '@Front/types/demoApi';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { demoQuery } from './queryKey';
 
 type UseDemoApiReturn = {
@@ -10,7 +10,7 @@ type UseDemoApiReturn = {
 };
 
 export const useDemoApi = (): UseDemoApiReturn => {
-  const { data = [], isLoading, isError } = useQuery<Users>(demoQuery(), fetchDemoApi);
+  const { data = [], isLoading, isError } = useQuery<Users>({ queryKey: demoQuery(), queryFn: fetchDemoApi });
 
   return { result: data, isLoading, isError };
 };

package/src/pages/Demo/Demo.tsx

@@ -7,8 +7,7 @@ export const Demo = () => {
   return (
     <div className={classes.container}>
       <div className={classes.bigTitleStyle}>
-        Welcome to Your React Starter Kit
-        <span>Welcome</span>
+        Welcome to Your React Starter Kit <span>Welcome</span>
       </div>
 
       <div className={classes.foo}>FlexBlug</div>

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

@@ -28,20 +28,20 @@ export const ReactQueryDemo = () => {
                 <thead>
                   <tr>
                     <th>ID</th>
-                    <th>First Name</th>
-                    <th>Last Name</th>
-                    <th>Age</th>
+                    <th>Name</th>
+                    <th>Username</th>
                     <th>Email</th>
+                    <th>Website</th>
                   </tr>
                 </thead>
                 <tbody>
                   {result?.map(eachResult => (
                     <tr key={eachResult.id}>
                       <td>{eachResult.id}</td>
-                      <td>{eachResult.firstName}</td>
-                      <td>{eachResult.lastName}</td>
-                      <td>{eachResult.age}</td>
+                      <td>{eachResult.name}</td>
+                      <td>{eachResult.username}</td>
                       <td>{eachResult.email}</td>
+                      <td>{eachResult.website}</td>
                     </tr>
                   ))}
                 </tbody>

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

@@ -8,7 +8,7 @@ exports[`Demo Component > should render the Demo component correctly 1`] = `
     <div
       class="_bigTitleStyle_85a2c3"
     >
-      Welcome to Your React Starter Kit
+      Welcome to Your React Starter Kit 
       <span>
         Welcome
       </span>

package/src/pages/{Error/Error.module.css → UnexpectedError/UnexpectedError.module.css}

@@ -1,4 +1,4 @@
-.errorPageStyle {
+.root {
   display: flex;
   width: 100%;
   padding-top: 15%;

package/src/pages/{Error/Error.tsx → UnexpectedError/UnexpectedError.tsx}

@@ -2,13 +2,13 @@ import logo from '@Front/assets/images/logo.png';
 import { Logo } from '@Front/ui/atoms/Logo';
 import { Link, useRouteError } from 'react-router-dom';
 
-import classes from './Error.module.css';
+import classes from './UnexpectedError.module.css';
 
-export const Error = () => {
+export const UnexpectedError = () => {
   const error: unknown = useRouteError();
 
   return (
-    <div className={classes.errorPageStyle}>
+    <div className={classes.root}>
       <Link to="/">
         <Logo src={logo} alt="logo" />
       </Link>

package/src/pages/UnexpectedError/index.ts

@@ -0,0 +1 @@
+export { UnexpectedError } from './UnexpectedError';

package/src/providers/QueryClientProvider/QueryClientProvider.tsx

@@ -1,6 +1,6 @@
+import { type QueryClient, QueryClientProvider as ReactQueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { PropsWithChildren } from 'react';
-import { type QueryClient, QueryClientProvider as ReactQueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
 
 type ClientProviderProps = {
   client: QueryClient;

package/src/routing/routes.tsx

@@ -1,13 +1,13 @@
 import { demoRoutes } from '@Front/pages/Demo';
-import { Error } from '@Front/pages/Error';
 import { Layout } from '@Front/pages/Layout';
 import type { RouteObject } from 'react-router-dom';
+import { UnexpectedError } from 'src/pages/UnexpectedError';
 
 export const routeObject: RouteObject[] = [
   {
     path: '/',
     element: <Layout />,
     children: [demoRoutes],
-    errorElement: <Error />,
+    errorElement: <UnexpectedError />,
   },
 ];

package/src/types/api.ts

@@ -0,0 +1,6 @@
+export type JsonValue = JsonObject | JsonArray | string | number | boolean | null;
+export type JsonArray = Array<JsonValue>;
+export type JsonObject = {
+  [key: string]: JsonValue;
+};
+export type Json = JsonObject | JsonArray;

package/src/types/demoApi.ts

@@ -1,9 +1,25 @@
+export type Address = {
+  street: string;
+  suite: string;
+  city: string;
+  zipcode: string;
+};
+
+export type Company = {
+  name: string;
+  catchPhrase: string;
+  bs: string;
+};
+
 export type User = {
   id: number;
-  firstName: string;
-  lastName: string;
-  age: number;
+  name: string;
+  username: string;
   email: string;
+  address: Address;
+  phone: string;
+  website: string;
+  company: Company;
 };
 
 export type Users = User[];

package/src/pages/Error/index.ts

@@ -1 +0,0 @@
-export { Error } from './Error';