@pplancq/react-template 2.8.17 → 2.10.0

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

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react';
-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>
-        <Header />
-      </Router>,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});

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

@@ -1,37 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Header Component > should render the Header component correctly 1`] = `
-<div>
-  <div
-    class="_container_a5b977"
-  >
-    <a
-      data-discover="true"
-      href="/"
-    >
-      <img
-        alt="logo"
-        class="_logoStyle_9e86a7"
-        src="/src/assets/images/logo.png"
-        style="width: 50px;"
-      />
-    </a>
-    <nav>
-      <ul
-        class="_navList_eee024"
-      >
-        <li>
-          <a
-            aria-current="page"
-            class="_a_eee024 active"
-            data-discover="true"
-            href="/"
-          >
-            Demo
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-`;

package/src/components/Header/index.ts

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

package/src/components/README.md

@@ -1,33 +0,0 @@
-# 📁 components
-
-The "components" folder is a crucial element of any React application. It is used to organize and store reusable components that make up the user interface of your application. React components are self-contained pieces of the user interface, each having its own logic and rendering.
-
-## 📑 Table of Contents
-
-- [Why Use a "components" Folder](#folder-organization)
-- [Usage](#usage)
-
-## <span id="folder-organization">Why Use a "components" Folder?</span>
-
-1. **Modularity** : Components can be reused across different parts of your application. This promotes code modularity and allows you to maintain your application more efficiently.
-
-2. **Clarity** : By grouping all your components in a "components" folder, it is easier to understand the structure of your application. It also facilitates the search and management of components.
-
-3. **Better Organization** : Organizing components in a dedicated folder helps clearly distinguish components from other elements of the application, such as styles, images, or configuration files.
-
-## <span id="usage">🧑🏻‍💻 Usage Example </span>
-
-Suppose you have a "Header.js" component in the "components" folder. You can import and use it in other parts of your application like this:
-
-```javascript
-import Header from '@Front/components/Header';
-
-export const App = () => {
-  return (
-    <div>
-      <Header />
-      {/* ... other elements of the application */}
-    </div>
-  );
-};
-```

package/src/components/TextInput/index.ts

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

package/src/config/README.md

@@ -1,63 +0,0 @@
-# 📁 config
-
-The "config" folder is intended to store all important configurations and utilities needed for our React project. Bringing together this information in one place makes managing configuration settings easier and ensures better code organization.
-
-## 📑 Table of Contents
-
-- [Folder Organization](#folder-organization)
-- [Content Example](#content-example)
-- [Usage](#usage)
-- [Best Practice](#best-practice)
-
-## <span id="folder-organization">Folder Organization</span>
-
-Within the "config" folder, you can find the following elements:
-
-1. **Configuration Files** : Files containing variables and configuration parameters, such as `apiConfig.ts` for configurations related to API calls, `appConfig.ts` for general application settings, `queryClientConfig.ts` for react-query-related configuration, etc.
-
-2. **Configuration Scripts** : Scripts or utilities that facilitate dynamic configuration of the application, such as theme configuration, language management, etc.
-
-## <span id="content-example">Content Example</span>
-
-Here is an example folder structure for "config":
-
-```
-📁config/
-├── 📄 apiConfig.ts
-├── 📄 appConfig.ts
-├── 📄 queryClientConfig.ts
-├── 📄 translationConfig.ts
-```
-
-## <span id="usage">🧑🏻‍💻Usage in the Project</span>
-
-When you need to access a specific configuration in your code, import the appropriate file from the "config" folder. For example:
-
-```javascript
-// Example of using an API configuration
-import { apiEndpoint } from '@Front/config/apiConfig';
-
-// Example of using a react-query configuration
-import { queryClient } from '@Front/config/queryConfig';
-
-// Example of using a general application configuration
-import { appName } from '@Front/config/appConfig';
-```
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-Efficient configuration management is crucial for maintaining a clear and organized codebase. Follow these best practices for managing configuration files:
-
-#### - Context-Specific Configuration
-
-Separate configuration files based on different contexts, such as API configurations, QueryClient configurations, translations, etc.
-
-This helps in better organization and ease of maintenance.
-
-#### - File Naming Convention
-
-Suffix configuration files with `Config` to enhance visibility and make it easier to identify configuration files at a glance.
-
----
-
-**_By adopting these practices, you create a modular and organized approach to configuration management, making it simpler to locate and manage context-specific settings._**

package/src/config/index.ts

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

package/src/config/queryClientConfig.ts

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

package/src/forms/ProfileForm/index.ts

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

package/src/forms/README.md

@@ -1,142 +0,0 @@
-# 📁 forms
-
-The "forms" folder is designed to organize and manage all the necessary forms in our application. Whether it's for managing vehicle-related risks, contact forms, or any other type of form, this folder is intended to centralize the logic and presentation of forms.
-
-## 📑 Table of Contents
-
-- [Why Use a "forms" Folder](#folder-organization)
-- [Typical Structure of a "forms" Folder](#structure)
-- [Usage](#usage)
-- [Using React Hook Form](#react-hook-form)
-- [Best Practice](#best-practice)
-
-## <span id="folder-organization">Why Use a "forms" Folder?</span>
-
-1. **Organization** : By grouping all form components in a dedicated folder, we maintain a clean and clear project structure. This facilitates the search and management of forms.
-
-2. **Reusability** : The form components we develop in this folder can be reused across different parts of the application, promoting code modularity.
-
-3. **Code Clarity** : By separating form components from the application logic, we make our code more readable and easier to maintain.
-
-## <span id="structure">Typical Structure of a "forms" Folder</span>
-
-The structure of a "forms" folder can vary based on our project's needs, but here is a typical structure we might adopt:
-
-```
-📁 forms
-├── 📁VehicleRiskForm
-│   ├── 📄 index.ts
-│   ├── 📄 VehicleRiskForm.tsx
-│   ├── 📄 VehicleRiskForm.module.css
-├── 📁ContactForm
-│   ├── 📄 index.ts
-│   ├── 📄 ContactForm.tsx
-│   ├── 📄 ContactForm.module.css
-```
-
-In this structure, each form, such as "VehicleRiskForm" or "ContactForm," has its own sub-folder containing associated TypeScript and CSS files. This helps maintain a clear organization of our code.
-
-## <span id="usage">🧑🏻‍💻Usage Example</span>
-
-Suppose we have a "VehicleRiskForm" form component in the "forms/VehicleRiskForm" folder. We can import and use it in our React components like this:
-
-```javascript
-import { VehicleRiskForm } from '@Front/forms/VehicleRiskForm';
-
-export const App = () => {
-  return (
-    <div>
-      <VehicleRiskForm />
-      {/* ... other elements of the application */}
-    </div>
-  );
-};
-```
-
-## <span id="react-hook-form">💡 Using React Hook Form</span>
-
-This project utilizes [React Hook Form](https://react-hook-form.com/) for handling forms. React Hook Form is a powerful library for managing forms in React applications with a simple and intuitive API.
-
-### React Hook Form Overview
-
-[React Hook Form](https://react-hook-form.com/) is a library for managing forms in React applications. It offers a declarative approach to handling form state and validation, making it easy to create complex forms with minimal boilerplate.
-
-#### Features:
-
-- **Declarative Approach:** Define your forms with a declarative syntax, making it easy to understand and maintain.
-
-- **Minimal Re-renders:** React Hook Form is designed to minimize re-renders for optimal performance.
-
-- **Form Validation:** Easily implement form validation with built-in validation rules or custom validation functions.
-
-- **Context API Integration:** Leverage React Hook Form's context API for managing form state across components.
-
-### Implementation using React Hook Form Context
-
-In this project, we've taken advantage of React Hook Form's context API to manage the state of our forms across different components. This allows us to access and update form data without prop drilling, making the codebase cleaner and more maintainable.
-
-#### Example:
-
-```jsx
-import React from 'react';
-import { useForm } from 'react-hook-form';
-
-// Form component using React Hook Form
-const MyForm = () => {
-  const { register, handleSubmit, formState } = useForm();
-
-  const onSubmit = data => {
-    // Handle form submission
-    console.log(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>
-        Name:
-        <input {...register('name', { required: true })} />
-      </label>
-
-      {/* Add more form fields as needed */}
-
-      <button type="submit" disabled={formState.isSubmitting}>
-        Submit
-      </button>
-    </form>
-  );
-};
-```
-
-In the above example, we use the useForm hook to initialize the form and get the necessary methods (register, handleSubmit, and formState). The onSubmit function is called when the form is submitted, and you can access the form data from the data parameter.
-
-**_By using React Hook Form in this way, we've streamlined the form management process and created a more maintainable and efficient solution for handling forms in our project._**
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-When working with `React-hook-form`, consider the following best practices to enhance maintainability and organization:
-
-#### - Use FormProvider
-
-Always use the `FormProvider` provided by `react-hook-form` to manage the form state.
-
-This ensures a centralized state management approach and simplifies form-related operations.
-
-#### - Separate Yup Validation Rules
-
-If validation rules become extensive, consider separating them into a dedicated file for better organization. This enhances readability and simplifies updates to validation logic.
-
-#### - Separate useForm Logic
-
-Separate the logic related to `useForm` into a custom hook file, especially if the form logic is complex or if it is shared across multiple components.
-
-#### - Separate onSubmit Function
-
-If the `onSubmit` function logic is substantial, consider separating it into a dedicated file. This promotes a clean separation of concerns and makes the codebase more modular.
-
-#### - Separate Submit Button
-
-If needed, separate the submit button into its own file to facilitate easy customization or relocation from the main form component.
-
----
-
-**_By adhering to these best practices, you create a structured and modular approach to form management, ensuring clarity and maintainability in your codebase._**

package/src/hooks/README.md

@@ -1,83 +0,0 @@
-# 📁 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

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

package/src/hooks/api/useDemoApi.ts

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

package/src/pages/Demo/Demo.tsx

@@ -1,236 +0,0 @@
-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/index.ts

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

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

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

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

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