@pplancq/react-template 1.0.0

package/.babelrc.js

@@ -0,0 +1 @@
+module.exports = { extends: '@pplancq/babel-config' };

package/.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@pplancq/commitlint-config'] };

package/.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*]
+end_of_line = lf

package/.env

@@ -0,0 +1,36 @@
+# For all environments, the following files are loaded if they exist, with later ones taking precedence over earlier ones:
+
+#  * .env              contains default values for environment variables required by the application.
+#  * .env.local        allows overwriting environment variables (unversioned file).
+#  * .env.<MODE>       contains environment-specific variables.
+#  * .env.<MODE>.local overwrites environment-specific variables (unversioned file).
+
+# <MODE> available by default: development, production, or test.
+
+# Real system environment variables take precedence over .env files.
+
+# /!\ DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE OR ANY VERSIONED FILE. /!\
+
+# Enables/disables launching the browser when npm start is run.
+# Default is false.
+#BROWSER=false
+
+# Sets the port for the development web server.
+# Default is 3000.
+#PORT=3000
+
+# Allows you to deactivate the stylelint plugin
+# Default is false
+#DISABLE_STYLELINT_PLUGIN=false
+
+# Permet de désactiver le plugin eslint
+# Default is false
+#DISABLE_ESLINT_PLUGIN=false
+
+# 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_.
+#ENV_PREFIX=FRONT_
+
+
+

package/.eslintrc.js

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

package/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit ${1}

package/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.lintstagedrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.{js,jsx,ts,tsx}': 'eslint --fix',
+  '*.{ts,tsx}': 'tsc-files --noEmit',
+  '*.{scss,css}': 'stylelint --fix',
+};

package/.postcssrc.js

@@ -0,0 +1 @@
+module.exports = require('@pplancq/postcss-config');

package/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@pplancq/prettier-config');

package/.stylelintrc.js

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

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+## @pplancq/react-template 1.0.0 (2024-02-05)
+
+
+### Features
+
+* **react-template:** add config for end of line to lf ([cc67932](https://github.com/pplancq/dev-tools/commit/cc67932696406b4afaeeaa48515abf58bd716286))
+* **react-template:** add folder structure with documentation ([3d365c2](https://github.com/pplancq/dev-tools/commit/3d365c298ff1ed1abe1516892a52887724b1da7e))
+* **react-template:** add gitignore ([32f453d](https://github.com/pplancq/dev-tools/commit/32f453df6ee2f2c3ef270f4e95b8800f4a803d4e))
+* **react-template:** add linter ([7301361](https://github.com/pplancq/dev-tools/commit/7301361a019926d7c763c74e8f12689046e71e4b))
+* **react-template:** add react-hook-form with demo ([2a05997](https://github.com/pplancq/dev-tools/commit/2a05997bffa14e8fb58960857cbd99ee36df48b3))
+* **react-template:** add react-query with demo ([a205809](https://github.com/pplancq/dev-tools/commit/a205809b1c1ca08d57f36339d09092ccba852d9c))
+* **react-template:** add react-router ([596c3eb](https://github.com/pplancq/dev-tools/commit/596c3eb96accfba3fb08dc9ee487f88030fff0d1))
+* **react-template:** add vitest ([ebafa20](https://github.com/pplancq/dev-tools/commit/ebafa20e3bee41c1df6a56811d64be63e55d477d))
+* **react-template:** init starter with react App ([712d2f9](https://github.com/pplancq/dev-tools/commit/712d2f9e9ef80bc466229ec1c4937dc77e1eb1fa))
+
+
+
+### Dependencies
+
+* **@pplancq/babel-config:** upgraded to 1.0.0
+* **@pplancq/commitlint-config:** upgraded to 1.0.0
+* **@pplancq/eslint-config:** upgraded to 1.0.0
+* **@pplancq/postcss-config:** upgraded to 1.0.0
+* **@pplancq/prettier-config:** upgraded to 1.0.0
+* **@pplancq/stylelint-config:** upgraded to 1.0.0
+* **@pplancq/webpack-config:** upgraded to 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present pplancq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,221 @@
+## 🚀 <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.
+
+## 🏗 <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.
+
+## 🙇 <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

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/test-report.xml
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.idea

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@pplancq/react-template",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "react template",
+  "author": "pplancq <paul.plancq@outlook.fr>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pplancq/dev-tools",
+    "directory": "packages/webpack-config"
+  },
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack --mode production",
+    "test": "vitest",
+    "test:ci": "vitest run --coverage",
+    "lint": "concurrently --prefix-colors magenta,cyan,green \"npm:eslint\" \"npm:tsc\" \"npm:stylelint\"",
+    "eslint": "eslint src --ext js,jsx,ts,tsx",
+    "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
+    "stylelint": "stylelint \"src/**/*.{scss,css}\"",
+    "stylelint:fix": "stylelint \"src**/*.{scss,css}\" --fix",
+    "tsc": "tsc --noEmit",
+    "_prepare": "husky"
+  },
+  "bugs": {
+    "url": "https://github.com/pplancq/dev-tools/issues"
+  },
+  "keywords": [
+    "react",
+    "template"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "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"
+  },
+  "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",
+    "@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",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.0.4",
+    "concurrently": "^8.2.2",
+    "husky": "^9.0.7",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.0",
+    "tsc-files": "^1.1.4",
+    "typescript": "^5.3.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.0.4",
+    "vitest-sonar-reporter": "^1.0.0"
+  },
+  "volta": {
+    "node": "20.10.0",
+    "npm": "10.2.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Web site created using react-template"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <app-react></app-react>
+  </body>
+</html>

package/src/api/README.md

@@ -0,0 +1,64 @@
+# 📁 api
+
+The "api" folder is designed to handle calls to native APIs using the fetch function. These calls are essential for retrieving real-time data from external sources, such as remote servers or web services.
+## 📑 Table of Contents
+  - [Folder Organization](#folder-organization)
+  - [Usage](#usage)
+  - [Error Handling](#error-handling)
+  - [Security](#security)
+  - [Documentation](#documentation)
+  - [Testing](#testing)
+  - [Best Practice](#best-practice)
+
+
+## <span id="folder-organization">Folder Organization</span>
+
+The "api" folder can be organized as follows :
+
+1. **API Endpoints** : Create a separate file for each API you are calling. For example, if you have a user management API and a data retrieval API, you can have the files `users.ts`  and `data.ts`  to handle these respective calls.
+
+2. **Call Functions** : Inside each API file, define dedicated functions to make `fetch` requests to the corresponding endpoints. These functions can also include handling responses and errors.
+
+## <span id="usage">🧑🏻‍💻 Usage</span>
+
+When you need to make a call to a native API, import the appropriate function from the "api" folder into your code. For example:
+
+```javascript
+import { getUsers } from '@Front/api/users';
+
+const users = getUsers();
+```
+
+## <span id="error-handling">Error Handling</span>
+
+Ensure proper error handling in your API call functions. You can use error handling mechanisms such as promises or `try/catch` to capture and handle potential errors when making API calls.
+
+## <span id="security">Security</span>
+
+Be mindful of security when interacting with external APIs. Avoid storing sensitive information, such as API keys, directly in your source code. Use environment variables or external configuration files to manage this sensitive information securely.
+
+## <span id="documentation">Documentation</span>
+
+Document each API call function, specifying expected parameters, possible responses, and any relevant information about the API itself.
+
+## <span id="testing">Testing</span>
+
+Whenever possible, write unit tests to validate the behavior of API call functions. This will ensure that API calls work correctly and quickly detect potential issues.
+
+## <span id="best-practice">🎖️ Best Practice</span>
+
+It is recommended to implement a custom fetch function that serves as an enhancement or override of the default fetch function. This can be particularly useful for incorporating common configurations, such as adding headers like an API token.
+
+Consider the following example of a custom fetch function :
+
+```javascript
+// Custom fetch function with common configurations
+export const fetchApi = (uri, options) => {
+  const headers = new Headers(options.headers ?? []);
+  headers.append('x-api-key', '<token-api>');
+
+  return fetch(uri, { ...options, headers });
+};
+```
+
+In this example, the fetchApi function extends the default fetch function by automatically including an API token in the request header. This practice helps centralize common configurations and promotes consistency across your application.

package/src/api/demoApi.ts

@@ -0,0 +1,44 @@
+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);
+    }
+  });
+};

package/src/assets/README.md

@@ -0,0 +1,51 @@
+# 📁 assets
+
+The "assets" folder is a commonly used directory in a React application to store static resources such as images, CSS files, fonts, JSON data files, icons, and other non-JavaScript files used in your application. These resources are typically needed to style and customize the user interface of your application.
+
+## 📑 Table of Contents
+  - [Why Use an "assets" Folder](#folder-organization)
+  - [Usage Example](#usage)
+  - [Best Practice](#best-practice)
+
+## <span id="folder-organization">Why Use an "assets" Folder?</span>
+
+1. **Organization** : By storing your static resources in a separate folder named "assets," you maintain a cleaner and more organized project structure. This clearly separates static content from JavaScript files.
+
+2. **Ease of Access** : Files in the "assets" folder can be easily referenced in your code using relative paths. This simplifies the inclusion of images, CSS, fonts, and other resources in your React components.
+
+3. **Performance Optimization** : By storing static resources like images in an "assets" folder, you can optimize these files for better performance, for example, by using image compression tools.
+
+## <span id="usage">🧑🏻‍💻 Usage Example </span>
+
+To use an image stored in the "assets" folder, you can reference its relative path in your JavaScript or JSX code like this:
+
+```javascript
+import logo from '@Front/assets/images/logo.png'
+
+export const App = () => {
+  return (
+    <div>
+      <img src={logo} alt="Logo" />
+      {/* ... other elements of the application */}
+    </div>
+  );
+}
+```
+
+## <span id="best-practice">🎖️ Best Practice</span>
+
+When it comes to styling and managing assets, adopting the following practices can enhance maintainability and structure in your project:
+
+### - Global CSS Rules
+Define all global CSS rules, such as resets, fonts, and general styling, in a centralized stylesheet (in the css folder under the assets ). 
+
+This ensures consistency across your entire application.
+
+### - CSS Modules
+For component-specific styles, leverage CSS Modules to encapsulate styles within the component scope.
+
+ This helps prevent unintentional styling conflicts and promotes a modular approach to styling.
+
+----------
+***By adhering to these practices, you create a clear separation between global styles and component-specific styles, making your codebase more maintainable and scalable.***
+

package/src/assets/css/index.ts

@@ -0,0 +1,2 @@
+import './reset.css';
+import './mainBody.css';

package/src/assets/css/mainBody.css

@@ -0,0 +1,4 @@
+body,
+html {
+  height: 100%;
+}