@pplancq/react-template 2.8.16 → 2.9.0

package/src/pages/UnexpectedError/index.ts

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

package/src/providers/QueryClientProvider/index.ts

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

package/src/providers/README.md

@@ -1,112 +0,0 @@
-# 📁 providers
-
-The "providers" folder is designed to expose service handlers and custom contexts that provide shared functionality across our entire application. It serves as a centralized way to manage services such as authentication, authorization, translation management, and many others.
-
-## 📑 Table of Contents
-
-- [Why Use a "providers" Folder?](#folder-organization)
-- [Structure of a "providers" Folder](#structure)
-- [Usage Example](#usage)
-- [Best Practice](#best-practice)
-
-## <span id="folder-organization">Why Use a "providers" Folder?</span>
-
-1. **Centralization** : By grouping all our service handlers in a "providers" folder, we centralize the management of these services, making configuration and usage simpler.
-
-2. **Reusability** : Service handlers and custom contexts exposed in this folder can be reused across different components of our application, promoting code reuse.
-
-3. **Better Separation of Concerns** : By separating services from the user interface, we improve code readability and adhere to the separation of concerns principle.
-
-## <span id="structure">Structure of a "providers" Folder</span>
-
-The structure of a "providers" folder can vary based on your project's needs, but here is a typical structure you might adopt :
-
-```
-📁 providers
-├── 📁 AuthProvider
-├── 📁 AuthorizationProvider
-├── 📁 TranslationProvider
-├── 📁 CustomRouterProvider
-├── 📁 CustomContextProvider
-├── 📁 ...
-```
-
-Each file, such as "AuthProvider.ts" or "TranslationProvider.ts," contains a service handler or custom context intended to be used throughout your application.
-
-## <span id="usage">🧑🏻‍💻Usage Example </span>
-
-Suppose we have an authentication service handler "AuthProvider" in our "providers" folder:
-
-```javascript
-// AuthProvider.js
-import { createContext, useState } from 'react';
-
-export const AuthContext = createContext();
-
-export const AuthProvider = ({ children }) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  const login = () => {
-    setIsAuthenticated(true);
-  };
-
-  const logout = () => {
-    setIsAuthenticated(false);
-  };
-
-  return <AuthContext.Provider value={{ isAuthenticated, login, logout }}>{children}</AuthContext.Provider>;
-};
-```
-
-We can then use this authentication service provider in our components by wrapping our components in the provided context:
-
-```javascript
-import { AuthProvider } from '@Front/Providers/AuthProvider';
-
-export const App = () => {
-  return <AuthProvider>{/* Vos composants React ici */}</AuthProvider>;
-};
-```
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-A good practice is to set up a Higher Order Component (HOC) "withProvider" that allows injecting all providers at
-once.
-
-Example:
-
-```typescript
-import { ComponentType } from 'react';
-import { QueryClient } from '@tanstack/react-query';
-import { AuthProvider } from '@Front/Providers/AuthProvider';
-import { QueryClientProvider }  from '@Front/Providers/QueryClientProvider ';
-
-export interface WithRootProps {
-  queryClient: QueryClient;
-}
-
-export const withProvider = <P extends object>(Component: ComponentType<P>) => {
-  const WithProvider = ({ queryClient, ...props }: P & WithRootProps) => (
-    <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <Component {...props as P} />
-        </AuthProvider>
-    </QueryClientProvider>
-  );
-  WithProvider.displayName = `withProvider(${Component.displayName || Component.name})`
-
-  return WithProvider
-
-}
-```
-
-```javascript
-import { withProvider } from '@Front/Providers/withProvider';
-import { App } from '@Front/components/App';
-
-const Root = withProvider(App);
-```
-
----
-
-**_By using a "providers" folder, we centralize the management of services and custom contexts, enhancing code reuse and ease of maintenance._**

package/src/providers/index.ts

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

package/src/providers/withProviders/index.ts

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

package/src/providers/withProviders/withProviders.tsx

@@ -1,18 +0,0 @@
-import { QueryClientProvider } from '@Front/providers/QueryClientProvider';
-import type { ComponentProps, ComponentType } from 'react';
-
-type WithRootProps = {
-  queryClient: ComponentProps<typeof QueryClientProvider>['client'];
-};
-
-export const withProvider = <P extends object>(Component: ComponentType<P>) => {
-  const WithProvider = ({ queryClient, ...props }: P & WithRootProps) => (
-    <QueryClientProvider client={queryClient}>
-      <Component {...(props as P)} />
-    </QueryClientProvider>
-  );
-
-  WithProvider.displayName = `withProvider(${Component.displayName || Component.name})`;
-
-  return WithProvider;
-};

package/src/routing/README.md

@@ -1,76 +0,0 @@
-# 📁routing
-
-The "routing" folder is responsible for managing navigation within the application. We use the `react-router` library to facilitate route creation and navigation between different views of our application.
-
-## 📑 Table of Contents
-
-- [Folder Organization](#folder-organization)
-- [Using `react-router`](#react-router)
-- [Using `appRoutes.ts`](#using-appRoutes)
-- [Learn More](#learn-more)
-
-## <span id="folder-organization">Folder Organization</span>
-
-In the "routing" folder, you can find the following files and components:
-
-1. **`routesObject.tsx`** : This file contains the configuration of our main router. It declares the various routes of the application and defines the components associated with each route.
-
-2. **`routerFactory.ts`** : The `routerFactory.ts` file can contain functions or reusable components related to routing. You can place routing utilities or custom components to facilitate navigation management in our application.
-
-3. **`appRoutes.ts`** It contains a simple structure to define the paths of our application.
-
-## <span id="react-router">🧑🏻‍💻 Using `react-router` </span>
-
-`react-router` is a library that makes it easy to create routes in a React application. You can import it into the appropriate files to define routes and manage navigation between views. Here's a simple example of its usage:
-
-```javascript
-import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router/dom';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: (
-      <div>
-        <h1>Hello World</h1>
-        <Link to="about">About Us</Link>
-      </div>
-    ),
-  },
-  {
-    path: 'about',
-    element: <div>About</div>,
-  },
-]);
-
-createRoot(document.getElementById('root')).render(<RouterProvider router={router} />);
-```
-
-## <span id="using-appRoutes">Using `appRoutes.ts`</span>
-
-How to define a router with parameters ?
-
-The simplest way is to write it with the parameters as `react-router` requires, and when using it in a `NavLink` call the `generatPath` function from `react-router`.
-
-For example:
-
-```javascript
-// appRoutes.ts
-export const appRoutes = {
-  home: '/',
-  post: '/post',
-  article: '/post/:id',
-};
-// component.tsx
-import { NavLink, generatePath } from 'react-router/dom';
-import { appRoutes } from '@Front/routing/appRoutes';
-export const ComponentName = () => {
-  return <NavLink to={generatePath(appRoutes.article, { id: 1 })}>link to article 1</NavLink>;
-};
-```
-
-With the `generatePath` function, it is possible to generate URIs with dynamic parameters.
-
-## <span id="learn-more">🙇 Learn More</span>
-
-- [React Router](https://reactrouter.com/en/main/start/overview)

package/src/routing/appRoutes.ts

@@ -1,5 +0,0 @@
-export const approutes = {
-  home: '/',
-  reactQueryDemo: '/reactQueryDemo',
-  reactHookFormDemo: '/reactHookFormDemo',
-};

package/src/routing/routerFactory.ts

@@ -1,12 +0,0 @@
-import { createBrowserRouter } from 'react-router';
-import { routeObject } from './routes';
-
-interface CreateRouterProps {
-  basename?: string;
-}
-
-export const createRouter = ({ basename }: CreateRouterProps = {}) => {
-  return createBrowserRouter(routeObject, {
-    basename,
-  });
-};

package/src/routing/routes.tsx

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

package/src/types/README.md

@@ -1,62 +0,0 @@
-# 📁 types
-
-The "types" folder: since we are using TypeScript, this folder is intended to contain custom type definition files that enhance type checking and auto-completion in your code.
-
-## 📑 Table of Contents
-
-- [Why use a "types" folder?](#folder-organization)
-- [Structure of a "types" folder](#structure)
-- [Example of usage](#usage)
-
-## <span id="folder-organization">Why use a "types" folder?</span>
-
-1. **Type Checking** : By defining custom types for our application, we improve type checking, making it easier to detect and prevent typing errors.
-
-2. **Better Auto-Completion** : Custom type definition files allow code editors to provide more accurate auto-completion when working with objects, functions, and components.
-
-3. **Integrated Documentation** : By creating explicit types, you effectively document your code, making it easier for other developers to understand your components, functions, and data.
-
-## <span id="structure">Structure of a "types" folder</span>
-
-The structure of a "types" folder can vary based on need, but here's a typical structure you might adopt :
-
-```
-📁 src
-📁 types
-├── 📄 customTypes.ts
-├── 📄 apiTypes.ts
-```
-
-In this structure, each file, such as "customTypes.ts" or "apiTypes.ts," contains type definitions specific to your application. For example, you might define types for API data, business objects, or component props.
-
-## <span id="usage">🧑🏻‍💻 Example of usage</span>
-
-Suppose you have defined a custom type in "customTypes.ts":
-
-```typescript
-// customTypes.ts
-export type User = {
-  id: number;
-  name: string;
-  email?: string;
-};
-```
-
-You can then use this type in your React components to define props or states, enhancing type checking:
-
-```typescript
-import { User } from '@Front/types/customTypes';
-
-type UserProfileProps = {
-  user: User;
-};
-
-export const UserProfile = ({ user }: UserProfileProps) => {
-  return (
-    <div id={user.id}>
-      <h1>{user.name}</h1>
-      {user.email && <p>Email: {user.email}</p>}
-    </div>
-  );
-};
-```

package/src/types/demoApi.ts

@@ -1,25 +0,0 @@
-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;
-  name: string;
-  username: string;
-  email: string;
-  address: Address;
-  phone: string;
-  website: string;
-  company: Company;
-};
-
-export type Users = User[];

package/src/ui/README.md

@@ -1,144 +0,0 @@
-# 📁 ui
-
-The "ui" folder is a directory designed to group and organize reusable components.
-
-We follow the concept of Atomic design to structure our components into "atoms," "molecules," "organisms," and "templates," ensuring consistent design and maximum reusability.
-
-## 📑 Table of Contents
-
-- [Why use a "ui" folder with Atomic Design](#folder-organization)
-- [Structure of a "ui" folder according to Atomic Design](#structure)
-- [Usage Example](#usage)
-- [Best Practice](#best-practice)
-
-## <span id="folder-organization">Why use a "ui" folder with Atomic Design?</span>
-
-1. **Modularity** : Atomic Design divides components into levels of increasing complexity, making it easy to create reusable components at different levels.
-
-2. **Visual Consistency** : By following the concept of Atomic Design, we can maintain visual consistency across our entire application by reusing atoms, molecules, and organisms.
-
-3. **Productivity** : Creating prefab components in a "ui" folder speeds up development by reducing code duplication.
-
-## <span id="structure">Structure of a "ui" folder according to Atomic Design</span>
-
-The structure of a "ui" folder can follow the hierarchy of Atomic Design:
-
-```
- 📁 ui
-├── 📁 atoms
-│   ├──📁 Button
-│   ├──📁 Input
-│   ├── ...
-├── 📁 molecules
-│   ├── 📁 FormField
-│   ├── 📁 SearchBar
-│   ├── ...
-├── 📁 organisms
-│   ├── 📁 Header
-│   ├── 📁 Footer
-│   ├── ...
-├── 📁 templates
-│   ├── 📁 PageTemplate
-│   ├── ...
-```
-
-Each level (atoms, molecules, organisms, templates) groups components based on their complexity. You can create subfolders to better organize the components.
-
-## <span id="usage">🧑🏻‍💻Example of usage</span>
-
-## Using components from Atomic Design
-
-In our project, we use Atomic Design to organize our reusable components into levels ranging from "atoms" to "templates." Here's a concrete example of using these components in our application.
-
-### Atom - "Button" Component
-
-"Atoms" are basic components that don't depend on other components. In our "ui/atoms" folder, we have the "Button" component. It's a simple UI element that we can use as follows:
-
-```javascript
-import { Button } from '@Front/ui/atoms/Button';
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <Button label="Cliquez-moi" />
-      {/* ... other elements of the application */}
-    </div>
-  );
-};
-```
-
-### Molecule - "SearchBar" Component
-
-"Molecules" are more complex components that group atoms to form a functional set. In our "ui/molecules" folder, we have the "SearchBar" component that uses the atomic "Button":
-
-```javascript
-import { SearchBar } from '@Front/ui/molecules/SearchBar';
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <SearchBar placeholder="Rechercher..." />
-      {/* ... other elements of the application */}
-    </div>
-  );
-};
-```
-
-The "SearchBar" component is a molecule because it combines the "Button" atom with other atoms.
-
-### Organism - "Header" Component
-
-"Organisms" are even more complex components that combine molecules and atoms to create self-contained parts of the UI. In our "ui/organisms" folder, we have the "Header" component that might include the molecular "SearchBar":
-
-```javascript
-import Header from '@Front/ui/organisms/Header';
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <Header />
-      {/* ... other elements of the application */}
-    </div>
-  );
-};
-```
-
-The "Header" component is an organism because it combines the molecular "SearchBar" with other elements to form a self-contained part of the interface.
-
-### Templates - "PageTemplate" Component
-
-"Templates" are "skeleton" components that define the placement of elements using React's composition ability.
-
-In our "ui/templates" folder, we have the "PageTemplate" component that defines the placement of the "topBar," "body," and "footer" to create a complete page:
-
-```javascript
-import PageTemplate from '@Front/ui/templates/PageTemplate';
-
-export const MyComponent = () => {
-  return <PageTemplate topBar={<div>TopBar</div>} body={<div>Boby</div>} footer={<div>Footer</div>} />;
-};
-```
-
-The "PageTemplate" component is a template because it incorporates the "Header" organism and other elements to create a complete page.
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-When incorporating external component libraries, it is recommended to adhere to the following best practices for the organization of UI components:
-
-#### - Export Components via the `ui` Directory
-
-Always export UI components from the `ui` directory, even if they are sourced from an external component library.
-
-This practice serves as a central point for managing component exports and facilitates handling bugs or breaking changes.
-
-#### - Centralized Component Management
-
-By exporting components through the ui directory, you establish a centralized location for managing changes or addressing issues related to external components.
-
-In the event of a bug or breaking change, modifications can be made at a single location, preventing the need to update multiple parts of the codebase.
-
-This approach contributes to better maintainability and ensures that updates to external components are efficiently managed.
-
----
-
-**_By adopting this practice, you create a clear separation between your custom components and external components, simplifying maintenance and reducing the impact of changes from external dependencies._**

package/src/ui/molecules/Navigation/index.ts

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

package/src/ui/organisms/Footer/Footer.module.css

@@ -1,10 +0,0 @@
-footer {
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-  letter-spacing: 4px;
-  text-align: center;
-  text-transform: uppercase;
-  color: white;
-  background-color: #00008f;
-}

package/src/ui/organisms/Footer/Footer.tsx

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import classes from './Footer.module.css';
-
-type FooterProps = {
-  footerContent?: ReactNode;
-};
-
-export const Footer = ({ footerContent }: FooterProps) => {
-  return <footer className={classes.footer}>{footerContent}</footer>;
-};

package/src/ui/organisms/Footer/index.ts

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

package/src/ui/organisms/Header/Header.module.css

@@ -1,17 +0,0 @@
-header {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #00008f;
-}
-
-@media screen and (width <= 900px) {
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}

package/src/ui/organisms/Header/Header.tsx

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-import classes from './Header.module.css';
-
-type HeaderProps = {
-  leftComponents?: ReactNode;
-  rightComponents?: ReactNode;
-};
-
-export const Header = ({ leftComponents, rightComponents }: HeaderProps) => {
-  return (
-    <header className={classes.header}>
-      {leftComponents}
-      {rightComponents}
-    </header>
-  );
-};

package/src/ui/organisms/Header/index.ts

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

package/src/ui/organisms/MainContent/MainContent.module.css

@@ -1,3 +0,0 @@
-main {
-  flex-grow: 1;
-}

package/src/ui/organisms/MainContent/MainContent.tsx

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-import classes from './MainContent.module.css';
-
-export const MainContent = ({ children }: PropsWithChildren) => {
-  return <main className={classes.main}>{children}</main>;
-};

package/src/ui/organisms/MainContent/index.ts

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

package/src/ui/templates/MainTemplate/MainTemplate.module.css

@@ -1,5 +0,0 @@
-.mainTemplateStyle {
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-}

package/src/utils/README.md

@@ -1,70 +0,0 @@
-# 📁 utils
-
-The `utils` folder contains reusable utilities and functionalities used across different parts of the application. These utilities are designed to simplify the code, promote reusability, and enhance the maintainability of the project.
-
-## 📑 Table of Contents
-
-- [Usage Example](#usage)
-- [Best Practice](#best-practice)
-
-## <span id="usage">🧑🏻‍💻 Example of usage</span>
-
-### `formatDate.ts`
-
-The `formatDate.ts` file contains a utility function to consistently format dates throughout the application. You can use it to display dates in various components.
-
-Example of usage:
-
-```typescript
-import { formatDate } from '@Front/utils/formatDate';
-
-const formattedDate = formatDate(new Date());
-```
-
-### `apiUtils.ts`
-
-The `apiUtils.ts` file contains utility functions to simplify API calls. You can find functions to handle HTTP requests, manipulate responses, and manage errors.
-
-Example of usage:
-
-```typescript
-import { fetchData, handleResponse } from '@Front/utils/apiUtils';
-
-async function fetchDataAndHandleError() {
-  try {
-    const data = await fetchData('https://api.example.com/data');
-    const processedData = handleResponse(data);
-  } catch (error) {
-    console.error('An error occurred while fetching data:', error);
-  }
-}
-```
-
-```typescript
-import { formatDate, fetchData, handleResponse } from '@Front/utils';
-// Use the utilities as needed
-```
-
----
-
-**_By using the "utils" folder, we organize our utilities efficiently for better reuse and simplified management._**
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-When dealing with utility functions, especially those sourced from external libraries like `date-fns`, it is advisable to follow these best practices for maintaining a structured codebase:
-
-#### - Export Libraries from the `utils` Directory
-
-Always export utility libraries, such as `date-fns` or others, from the `utils` directory. This practice provides a central location for managing library imports and ensures consistent usage throughout the codebase.
-
-#### - Centralized Library Management
-
-Exporting libraries through the `utils` directory establishes a centralized point for managing changes or updates to external libraries.
-
-In case of updates, bug fixes, or changes in functionality, modifications can be made at a single location, preventing the need to update multiple parts of the codebase.
-
-This approach contributes to better maintainability and ensures that updates to external libraries are efficiently handled.
-
----
-
-**_By adhering to this practice, you create a clear separation between custom utility functions and external libraries, making your codebase more organized and reducing the impact of changes from external dependencies._**