@pplancq/react-template 1.0.0

package/src/assets/css/reset.css

@@ -0,0 +1,131 @@
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+form,
+label,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+html,
+body,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  font: inherit;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: none;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}

package/src/bootstrap.tsx

@@ -0,0 +1,26 @@
+import { App } from '@Front/components/App';
+import { StrictMode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+// eslint-disable-next-line import/no-default-export
+export default class Bootstrap extends HTMLElement {
+  private readonly root: Root;
+
+  constructor() {
+    super();
+
+    this.root = createRoot(this);
+  }
+
+  connectedCallback() {
+    this.root.render(
+      <StrictMode>
+        <App basename={this.getAttribute('basename') ?? ''} />
+      </StrictMode>,
+    );
+  }
+
+  disconnectedCallback() {
+    queueMicrotask(() => this.root.unmount());
+  }
+}

package/src/components/App/App.tsx

@@ -0,0 +1,18 @@
+import { queryClient } from '@Front/config';
+import { withProvider } from '@Front/providers';
+import { createRouter } from '@Front/routing/routerFactory';
+import { RouterProvider } from 'react-router-dom';
+
+import '@Front/assets/css';
+
+type AppProps = {
+  basename?: string;
+};
+
+const AppWithProviders = withProvider(RouterProvider);
+
+export const App = ({ basename }: AppProps) => {
+  const router = createRouter({ basename });
+
+  return <AppWithProviders queryClient={queryClient} router={router} />;
+};

package/src/components/App/index.ts

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

package/src/components/Footer/Footer.module.css

@@ -0,0 +1,4 @@
+.container {
+  width: auto;
+  padding: 16px;
+}

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,16 @@
+import logo from '@Front/assets/images/logo.png';
+import { Logo } from '@Front/ui/atoms/Logo';
+import { Link } from 'react-router-dom';
+
+import classes from './Footer.module.css';
+
+export const Footer = () => {
+  return (
+    <div className={classes.container}>
+      <hr />
+      <Link to="/">
+        <Logo size="50px" src={logo} alt="logo" />
+      </Link>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Footer } from '../Footer';
+
+describe('Footer Component', () => {
+  it('should render the Footer component correctly', () => {
+    const { container } = render(
+      <Router>
+        <Footer />
+      </Router>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Footer Component > should render the Footer component correctly 1`] = `
+<div>
+  <div
+    class="_container_eb428f"
+  >
+    <hr />
+    <a
+      href="/"
+    >
+      <img
+        alt="logo"
+        class="_logoStyle_a0661f"
+        src="/src/assets/images/logo.png"
+        style="width: 50px;"
+      />
+    </a>
+  </div>
+</div>
+`;

package/src/components/Footer/index.ts

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

package/src/components/Header/Header.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  width: auto;
+  padding: 8px;
+  flex-direction: row;
+  align-items: center;
+}

package/src/components/Header/Header.tsx

@@ -0,0 +1,17 @@
+import logo from '@Front/assets/images/logo.png';
+import { Logo } from '@Front/ui/atoms/Logo';
+import { Navigation } from '@Front/ui/molecules/Navigation';
+import { Link } from 'react-router-dom';
+
+import classes from './Header.module.css';
+
+export const Header = () => {
+  return (
+    <div className={classes.container}>
+      <Link to="/">
+        <Logo size="50px" src={logo} alt="logo" />
+      </Link>
+      <Navigation links={[{ label: 'Demo', url: '/' }]} />
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+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

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

package/src/components/Header/index.ts

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

package/src/components/README.md

@@ -0,0 +1,34 @@
+# 📁 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/TextInput.tsx

@@ -0,0 +1,24 @@
+import { Input } from '@Front/ui/atoms/Input';
+import { InputHTMLAttributes } from 'react';
+import { FieldError, useFormContext } from 'react-hook-form';
+
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  label: string;
+}
+
+export const TextInput = ({ name, label, ...rest }: TextInputProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+  return (
+    <Input
+      label={label}
+      {...register(name)}
+      {...rest}
+      hasError={!!errors[name]}
+      helperText={(errors[name] as FieldError)?.message}
+    />
+  );
+};

package/src/components/TextInput/index.ts

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

package/src/config/README.md

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

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

package/src/config/queryClientConfig.ts

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

package/src/forms/ProfileForm/ProfileForm.module.scss

@@ -0,0 +1,10 @@
+.inputStyle {
+  margin-top: 16px;
+}
+
+.buttonsStyle {
+  display: flex;
+  padding-right: 8px;
+  flex-direction: row;
+  justify-content: space-between;
+}

package/src/forms/ProfileForm/ProfileForm.tsx

@@ -0,0 +1,51 @@
+import { TextInput } from '@Front/components/TextInput';
+import { ProfileType } from '@Front/types/profileTypes';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import classes from './ProfileForm.module.scss';
+
+type ProfileFormProps = {
+  onSubmit: SubmitHandler<ProfileType>;
+  resetForm: () => void;
+};
+
+const schema = yup.object().shape({
+  mail: yup.string().email('Check the mail pattern').required('This field is required'),
+  firstName: yup.string().required('This field is required'),
+  lastName: yup.string().required('This field is required'),
+});
+
+export const ProfileForm = ({ onSubmit, resetForm }: ProfileFormProps) => {
+  const methods = useForm<ProfileType>({
+    resolver: yupResolver(schema),
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <p>The form is being submited {methods.formState.submitCount} times</p>
+        <TextInput label="E-mail" type="email" name="mail" placeholder="Exemple@gmail.com" />
+
+        <TextInput label="First Name" name="firstName" placeholder="First Name" />
+
+        <TextInput label="Last Name" name="lastName" placeholder="Last Name" />
+
+        <div className={classes.buttonsStyle}>
+          <input type="submit" className={classes.inputStyle} />
+          {methods.formState.isSubmitted && (
+            <input
+              type="button"
+              className={classes.inputStyle}
+              value="Reset"
+              onClick={() => {
+                methods.reset();
+                resetForm();
+              }}
+            />
+          )}
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

package/src/forms/ProfileForm/index.ts

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

package/src/forms/README.md

@@ -0,0 +1,131 @@
+# 📁 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.***