@pplancq/react-template 1.0.0

package/src/hooks/README.md

@@ -0,0 +1,87 @@
+# 📁 hooks 
+
+The "hooks" folder is a directory you can create in your React project to group custom hooks you develop. Hooks are special functions introduced in React 16.8, allowing the management of state and lifecycle in functional components.
+
+
+## 📑 Table of Contents
+  - [Why Use a "hooks" Folder](#folder-organization)
+  - [Usage Example](#usage)
+  - [React-Query-Folder](#folder-react-query)
+
+## <span id="folder-organization">Why Use a "hooks" Folder?</span>
+
+1. **Code Reusability** : Custom hooks enable reusing state and lifecycle logic across multiple functional components, promoting code reuse and adhering to the DRY (Don't Repeat Yourself) principle.
+
+2. **Separation of Concerns** : By grouping your custom hooks in a distinct folder, you maintain a clear separation between the business logic of your application and the React components themselves.
+
+3. **Code Clarity** : Grouping custom hooks in a "hooks" folder simplifies code maintenance and readability, making it easier to locate and understand specific logic.
+
+
+## <span id="usage">🧑🏻‍💻 Usage Example</span>
+
+Suppose you have a custom hook "useCustomHook1.js" in the "hooks" folder. You can import it and use it in a functional component like this :
+
+```javascript
+import { useCustomHook1 } from './hooks/useCustomHook1';
+
+export const MyComponent = () => {
+  const customData = useCustomHook1();
+
+  return (
+    <div>
+      {/* Use customData in your component */}
+    </div>
+  );
+}
+```
+## <span id="folder-react-query">"api" Folder for React Query Requests</span>
+
+Under the "hooks" folder, we have included a sub-folder "api" specifically designed to handle requests using React Query. This allows for more efficient organization of API requests, isolating them from component logic and leveraging the power of React Query for state and data caching.
+
+The typical structure of this "api" folder might look like this:
+
+```
+📁 hooks
+├── 📁 api
+│   ├── 📄 useUsers.ts
+│   ├── 📄 usePosts.ts
+```
+
+Each file, such as "useUsers.ts" or "usePosts.ts," contains logic to perform requests specific to a given resource. You can then use these queries in your components by importing them appropriately.
+
+Using React Query for API request management makes data retrieval, caching, and updating easier while reducing code complexity.
+
+
+### What is React Query?
+
+React Query is an open-source JavaScript library that simplifies data management in a React application. It provides a simple and powerful way to handle network requests, data caching, error handling, and more. With React Query, you can significantly improve the development experience of your React applications by managing data efficiently.
+
+### Key Features
+
+#### 1. Query Management
+
+- React Query simplifies making API requests by providing hooks for GET, POST, PUT, DELETE, etc.
+- You can easily specify query options such as parameters, headers, and more.
+
+#### 2. Data Caching
+
+- Retrieved data is automatically cached, avoiding unnecessary API calls.
+- Custom caching rules can be defined for each query.
+
+#### 3. State Management
+
+- React Query automatically manages data state, providing loading, success, and error states for each query.
+- You can easily access query states in your components.
+
+#### 4. Automatic Refetching
+
+- React Query offers automatic data refetching, ensuring data is automatically refreshed at regular intervals, improving data freshness.
+
+#### 5. Mutation Management
+
+- The library also facilitates mutation management, such as creating, updating, and deleting data.
+- Mutations are easy to define and manage.
+
+---
+***For more information and details, refer to the 
+[official React Query documentation.](https://tanstack.com/query/v3/)***

package/src/hooks/api/queryKey.ts

@@ -0,0 +1 @@
+export const demoQuery = () => ['dataWithDelay'];

package/src/hooks/api/useDemoApi.ts

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

package/src/main.ts

@@ -0,0 +1,3 @@
+import('./bootstrap').then(({ default: AppReact }) => {
+  customElements.define('app-react', AppReact);
+});

package/src/pages/Demo/Demo.module.scss

@@ -0,0 +1,184 @@
+.foo {
+  flex: 1 0 calc(1vw - 1px);
+}
+
+.container {
+  display: flex;
+  padding-top: 32px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.bigTitleStyle {
+  font-family: sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  text-align: center;
+  text-transform: uppercase;
+  color: #00008f;
+
+  span {
+    display: grid;
+    margin-top: 5px;
+    grid-template-columns: 1fr max-content 1fr;
+    grid-template-rows: 27px 0;
+    grid-gap: 20px;
+    align-items: center;
+    font-family: Raleway, sans-serif;
+    font-size: 15px;
+    font-weight: normal;
+    font-weight: 500;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    word-spacing: 1px;
+    color: #444;
+
+    &::before {
+      display: block;
+      height: 5px;
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      background-color: #f8f8f8;
+      content: '';
+    }
+
+    &::after {
+      display: block;
+      height: 5px;
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      background-color: #f8f8f8;
+      content: ' ';
+    }
+  }
+}
+
+.imagePlace {
+  width: 30%;
+
+  @media screen and (width <= 900px) {
+    width: 50%;
+  }
+}
+
+.paragraphContainer {
+  width: 100%;
+  padding-bottom: 32px;
+}
+
+.titleStyle {
+  position: relative;
+  margin-left: 8px;
+  padding-bottom: 10px;
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5em;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 55px;
+    height: 5px;
+    background-color: #111;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    bottom: 2px;
+    left: 0;
+    width: 95%;
+    max-width: 255px;
+    height: 1px;
+    background-color: #333;
+    content: '';
+  }
+}
+
+.boldText {
+  font-weight: bold;
+}
+
+.centredText {
+  text-align: center;
+}
+
+.paragraphStyle {
+  padding: 12px;
+  font-family: sans-serif;
+  font-size: 16px;
+}
+
+.demoStyle {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.a {
+  letter-spacing: 4px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #00008f;
+}
+
+.a:hover {
+  color: black;
+}
+
+table,
+th,
+td {
+  padding: 6px;
+  border: 1px solid black;
+  font-family: sans-serif;
+}
+
+.tableWrapper {
+  margin: 16px;
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+}
+
+.highlight {
+  font-weight: bold;
+  color: #00008f;
+}
+
+.infoSection {
+  margin: 16px;
+  margin-bottom: 20px;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
+
+  &:hover {
+    background-color: lightgrey;
+  }
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+li {
+  margin-bottom: 10px;
+  font-family: sans-serif;
+}
+
+code {
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  background-color: #f8f9fa;
+}

package/src/pages/Demo/Demo.tsx

@@ -0,0 +1,237 @@
+import image from '@Front/assets/images/templatePlugins.png';
+import { approutes } from '@Front/routing/appRoutes';
+import { NavLink } from '@Front/ui/atoms/NavLink';
+import classes from './Demo.module.scss';
+
+export const Demo = () => {
+  return (
+    <div className={classes.container}>
+      <div className={classes.bigTitleStyle}>
+        Welcome to Your React Starter Kit
+        <span>Welcome</span>
+      </div>
+
+      <div className={classes.foo}>FlexBlug</div>
+
+      <div className={classes.paragraphContainer}>
+        <h1 className={classes.titleStyle}>Overview</h1>
+        <div className={classes.infoSection}>
+          <span className={classes.centredText}>
+            <p className={classes.paragraphStyle}>
+              <span className={classes.highlight}>Congratulations</span> on starting your project with our{' '}
+              <span className={classes.highlight}>React Starter Kit!</span> This kit is designed to jumpstart your
+              development with a well-organized project structure and pre-configured tools.
+            </p>
+            <p className={classes.paragraphStyle}>
+              Below, you'll find an overview of the key features, tools, and architecture used in this starter kit.
+            </p>
+          </span>
+        </div>
+      </div>
+      <img src={image} alt="template" className={classes.imagePlace} />
+
+      <div className={classes.paragraphContainer}>
+        <h1 className={classes.titleStyle}>Objective</h1>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            The goal of this <span className={classes.boldText}>starter kit</span> is to enable you to quickly start a
+            new project with all the necessary tools.
+          </p>
+          <p className={classes.paragraphStyle}>
+            Additionally, this <span className={classes.boldText}>starter kit</span> offers a robust set of options for
+            structuring your <span className={classes.boldText}>React application</span>, providing flexibility to adapt
+            to various project architectures.
+          </p>
+          <p className={classes.paragraphStyle}>
+            It has been thoughtfully designed not only to expedite the initial setup but also to streamline the
+            implementation of <span className={classes.highlight}>Micro-Frontends</span>, making it a versatile solution
+            for projects of different scales. (for more details check the{' '}
+            <span className={classes.highlight}>README.md</span> file)
+          </p>
+        </div>
+      </div>
+
+      <div className={classes.paragraphContainer}>
+        <h1 className={classes.titleStyle}>Features</h1>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>React: </span>A JavaScript library for building user interfaces.
+          </p>
+        </div>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>TypeScript: </span>A superset of JavaScript that adds static typing.
+          </p>
+        </div>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>React Query: </span>A library for managing, caching, and updating server
+            state in React applications. (for more details check the{' '}
+            <span className={classes.highlight}>README.md</span> file under the{' '}
+            <span className={classes.boldText}>hooks</span> folder)
+          </p>
+          <div className={classes.demoStyle}>
+            <NavLink to={approutes.reactQueryDemo} className={classes.a}>
+              Run Demo
+            </NavLink>
+          </div>
+        </div>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>React Hook Form: </span>A library for managing forms with React hooks.
+            (for more details check the <span className={classes.highlight}>README.md</span> file under the{' '}
+            <span className={classes.boldText}>forms</span> folder)
+          </p>
+          <div className={classes.demoStyle}>
+            <NavLink to={approutes.reactHookFormDemo} className={classes.a}>
+              Run Demo
+            </NavLink>
+          </div>
+        </div>
+
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>React Router: </span>A declarative routing solution for React. (for more
+            details check the <span className={classes.highlight}>README.md</span> file under the{' '}
+            <span className={classes.boldText}>routing</span> folder)
+          </p>
+        </div>
+        <div className={classes.infoSection}>
+          <p className={classes.paragraphStyle}>
+            <span className={classes.boldText}>...and more: </span>Explore the{' '}
+            <span className={classes.highlight}>Package.json</span> file to see additional dependencies.
+          </p>
+        </div>
+      </div>
+
+      <div className={classes.paragraphContainer}>
+        <h1 className={classes.titleStyle}>Project Structure</h1>
+
+        <div className={classes.infoSection}>
+          <div className={classes.tableWrapper}>
+            <table>
+              <thead>
+                <tr>
+                  <th>Folder</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>api</span>
+                  </td>
+                  <td>Place your API-related code here.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>assets</span>
+                  </td>
+                  <td>Store your static assets (images, fonts, etc.) in this directory.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>components</span>
+                  </td>
+                  <td>Reusable React components go here.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>config</span>
+                  </td>
+                  <td>Configuration files and environment variables are managed here.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>forms</span>
+                  </td>
+                  <td>Define your forms using React Hook Form.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>hooks</span>
+                  </td>
+                  <td>Custom React hooks to share logic across components.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>pages</span>
+                  </td>
+                  <td>React components that represent individual pages or views.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>providers</span>
+                  </td>
+                  <td>React context providers for state management.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>routing</span>
+                  </td>
+                  <td>Configure your application routes here.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>types</span>
+                  </td>
+                  <td>TypeScript type definitions.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>ui</span>
+                  </td>
+                  <td>Presentational components and styles.</td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className={classes.boldText}>utils</span>
+                  </td>
+                  <td>General utility functions.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div className={classes.paragraphContainer}>
+        <h1 className={classes.titleStyle}>Additional Information</h1>
+        <div className={classes.infoSection}>
+          <ul>
+            <li>
+              - Customize the project configuration in the <code>config</code> directory.
+            </li>
+            <li>
+              - Explore the <code>utils</code> directory for utility functions.
+            </li>
+            <li>- Leverage React Query for efficient data fetching.</li>
+            <li>- Take advantage of React Hook Form for managing forms seamlessly.</li>
+            <li>
+              - Refer to the <code>types</code> directory for TypeScript type definitions.
+            </li>
+          </ul>
+        </div>
+        <div className={classes.infoSection}>
+          <span className={classes.centredText}>
+            <p className={classes.paragraphStyle}>
+              Our project is organized into various folders, each containing its own{' '}
+              <span className={classes.highlight}>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 className={classes.highlight}>README.md</span> file in{' '}
+              <span className={classes.boldText}>each folder of the project</span>.
+            </p>
+          </span>
+        </div>
+        <div className={classes.infoSection}>
+          <span className={classes.centredText}>
+            <p className={classes.paragraphStyle}>
+              Feel free to explore and modify the structure to suit your project's needs.{' '}
+              <span className={classes.boldText}>Happy coding!</span>
+            </p>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/pages/Demo/ReactHookFormDemo/ReactHookFormDemo.module.css

@@ -0,0 +1,32 @@
+.container {
+  padding: 32px;
+}
+
+.fieldsetStyle {
+  margin-top: 24px;
+}
+
+.title {
+  padding-top: 16px;
+  font-size: 20px;
+  letter-spacing: 4px;
+  text-align: center;
+  color: #00008f;
+}
+
+.lineStyle {
+  width: 20%;
+}
+
+.paragraph {
+  padding-top: 16px;
+}
+
+.profileSectionStyle {
+  display: flex;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}

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

@@ -0,0 +1,48 @@
+import { ProfileForm } from '@Front/forms/ProfileForm';
+import { ProfileType } from '@Front/types/profileTypes';
+import { useState } from 'react';
+
+import classes from './ReactHookFormDemo.module.css';
+
+export const ReactHookFormDemo = () => {
+  const [profileData, setProfileData] = useState<ProfileType>();
+
+  const onSubmit = (data: ProfileType) => {
+    setProfileData({ ...data });
+  };
+
+  const resetForm = () => {
+    setProfileData(undefined);
+  };
+
+  return (
+    <div className={classes.container}>
+      <h1 className={classes.title}>React Hook Form</h1>
+      <hr className={classes.lineStyle} color="#00008f" />
+
+      <fieldset className={classes.fieldsetStyle}>
+        <legend className={classes.subTitle}>React Hook Form Example</legend>
+        <p className={classes.paragraph}>
+          React Hook Form is a React library that simplifies form management in a React application using hooks. It
+          provides a lightweight and efficient approach for handling form state, data validation, and handling
+          form-related events.
+        </p>
+        <div className={classes.profileSectionStyle}>
+          <fieldset>
+            <legend>Formulaire</legend>
+            <ProfileForm onSubmit={onSubmit} resetForm={resetForm} />
+          </fieldset>
+
+          {profileData && (
+            <fieldset>
+              <legend>Résultat</legend>
+              <p>E-mail: {profileData.mail} </p>
+              <p>First-name: {profileData.firstName} </p>
+              <p>Last-name: {profileData.lastName} </p>
+            </fieldset>
+          )}
+        </div>
+      </fieldset>
+    </div>
+  );
+};

package/src/pages/Demo/ReactHookFormDemo/index.ts

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

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

@@ -0,0 +1,7 @@
+import { RouteObject } from 'react-router-dom';
+import { ReactHookFormDemo } from './ReactHookFormDemo';
+
+export const reactHookFormDemoRoutes: RouteObject = {
+  path: 'ReactHookFormDemo',
+  element: <ReactHookFormDemo />,
+};

package/src/pages/Demo/ReactQueryDemo/ReactQueryDemo.module.scss

@@ -0,0 +1,38 @@
+.container {
+  padding: 32px;
+}
+
+.fieldsetStyle {
+  margin-top: 24px;
+  padding: 16px;
+  border: 1px solid black;
+}
+
+.title {
+  padding-top: 16px;
+  font-size: 20px;
+  letter-spacing: 4px;
+  text-align: center;
+  color: #00008f;
+}
+
+.tableWrapper {
+  overflow: auto;
+}
+
+.dataTitle {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 20px;
+  letter-spacing: 4px;
+  text-align: center;
+  color: #00008f;
+}
+
+.lineStyle {
+  width: 20%;
+}
+
+.paragraph {
+  padding-top: 16px;
+}