@pplancq/react-template 2.8.17 → 2.9.0

package/src/pages/Demo/__tests__/__snapshots__/Demo.test.tsx.snap

@@ -1,557 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Demo Component > should render the Demo component correctly 1`] = `
-<div>
-  <div
-    class="_container_af1029"
-  >
-    <div
-      class="_bigTitleStyle_af1029"
-    >
-      Welcome to Your React Starter Kit 
-      <span>
-        Welcome
-      </span>
-    </div>
-    <div
-      class="_foo_af1029"
-    >
-      FlexBlug
-    </div>
-    <div
-      class="_paragraphContainer_af1029"
-    >
-      <h1
-        class="_titleStyle_af1029"
-      >
-        Overview
-      </h1>
-      <div
-        class="_infoSection_af1029"
-      >
-        <span
-          class="_centredText_af1029"
-        >
-          <p
-            class="_paragraphStyle_af1029"
-          >
-            <span
-              class="_highlight_af1029"
-            >
-              Congratulations
-            </span>
-             on starting your project with our
-             
-            <span
-              class="_highlight_af1029"
-            >
-              React Starter Kit!
-            </span>
-             This kit is designed to jumpstart your development with a well-organized project structure and pre-configured tools.
-          </p>
-          <p
-            class="_paragraphStyle_af1029"
-          >
-            Below, you'll find an overview of the key features, tools, and architecture used in this starter kit.
-          </p>
-        </span>
-      </div>
-    </div>
-    <img
-      alt="template"
-      class="_imagePlace_af1029"
-      src="/src/assets/images/templatePlugins.png"
-    />
-    <div
-      class="_paragraphContainer_af1029"
-    >
-      <h1
-        class="_titleStyle_af1029"
-      >
-        Objective
-      </h1>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          The goal of this 
-          <span
-            class="_boldText_af1029"
-          >
-            starter kit
-          </span>
-           is to enable you to quickly start a new project with all the necessary tools.
-        </p>
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          Additionally, this 
-          <span
-            class="_boldText_af1029"
-          >
-            starter kit
-          </span>
-           offers a robust set of options for structuring your 
-          <span
-            class="_boldText_af1029"
-          >
-            React application
-          </span>
-          , providing flexibility to adapt to various project architectures.
-        </p>
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          It has been thoughtfully designed not only to expedite the initial setup but also to streamline the implementation of 
-          <span
-            class="_highlight_af1029"
-          >
-            Micro-Frontends
-          </span>
-          , making it a versatile solution for projects of different scales. (for more details check the
-           
-          <span
-            class="_highlight_af1029"
-          >
-            README.md
-          </span>
-           file)
-        </p>
-      </div>
-    </div>
-    <div
-      class="_paragraphContainer_af1029"
-    >
-      <h1
-        class="_titleStyle_af1029"
-      >
-        Features
-      </h1>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            React: 
-          </span>
-          A JavaScript library for building user interfaces.
-        </p>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            TypeScript: 
-          </span>
-          A superset of JavaScript that adds static typing.
-        </p>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            React Query: 
-          </span>
-          A library for managing, caching, and updating server state in React applications. (for more details check the
-           
-          <span
-            class="_highlight_af1029"
-          >
-            README.md
-          </span>
-           file under the
-           
-          <span
-            class="_boldText_af1029"
-          >
-            hooks
-          </span>
-           folder)
-        </p>
-        <div
-          class="_demoStyle_af1029"
-        >
-          <a
-            class="_a_af1029"
-            data-discover="true"
-            href="/reactQueryDemo"
-          >
-            Run Demo
-          </a>
-        </div>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            React Hook Form: 
-          </span>
-          A library for managing forms with React hooks. (for more details check the 
-          <span
-            class="_highlight_af1029"
-          >
-            README.md
-          </span>
-           file under the
-           
-          <span
-            class="_boldText_af1029"
-          >
-            forms
-          </span>
-           folder)
-        </p>
-        <div
-          class="_demoStyle_af1029"
-        >
-          <a
-            class="_a_af1029"
-            data-discover="true"
-            href="/reactHookFormDemo"
-          >
-            Run Demo
-          </a>
-        </div>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            React Router: 
-          </span>
-          A declarative routing solution for React. (for more details check the 
-          <span
-            class="_highlight_af1029"
-          >
-            README.md
-          </span>
-           file under the
-           
-          <span
-            class="_boldText_af1029"
-          >
-            routing
-          </span>
-           folder)
-        </p>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <p
-          class="_paragraphStyle_af1029"
-        >
-          <span
-            class="_boldText_af1029"
-          >
-            ...and more: 
-          </span>
-          Explore the
-           
-          <span
-            class="_highlight_af1029"
-          >
-            Package.json
-          </span>
-           file to see additional dependencies.
-        </p>
-      </div>
-    </div>
-    <div
-      class="_paragraphContainer_af1029"
-    >
-      <h1
-        class="_titleStyle_af1029"
-      >
-        Project Structure
-      </h1>
-      <div
-        class="_infoSection_af1029"
-      >
-        <div
-          class="_tableWrapper_af1029"
-        >
-          <table>
-            <thead>
-              <tr>
-                <th>
-                  Folder
-                </th>
-                <th>
-                  Description
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    api
-                  </span>
-                </td>
-                <td>
-                  Place your API-related code here.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    assets
-                  </span>
-                </td>
-                <td>
-                  Store your static assets (images, fonts, etc.) in this directory.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    components
-                  </span>
-                </td>
-                <td>
-                  Reusable React components go here.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    config
-                  </span>
-                </td>
-                <td>
-                  Configuration files and environment variables are managed here.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    forms
-                  </span>
-                </td>
-                <td>
-                  Define your forms using React Hook Form.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    hooks
-                  </span>
-                </td>
-                <td>
-                  Custom React hooks to share logic across components.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    pages
-                  </span>
-                </td>
-                <td>
-                  React components that represent individual pages or views.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    providers
-                  </span>
-                </td>
-                <td>
-                  React context providers for state management.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    routing
-                  </span>
-                </td>
-                <td>
-                  Configure your application routes here.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    types
-                  </span>
-                </td>
-                <td>
-                  TypeScript type definitions.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    ui
-                  </span>
-                </td>
-                <td>
-                  Presentational components and styles.
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span
-                    class="_boldText_af1029"
-                  >
-                    utils
-                  </span>
-                </td>
-                <td>
-                  General utility functions.
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div
-      class="_paragraphContainer_af1029"
-    >
-      <h1
-        class="_titleStyle_af1029"
-      >
-        Additional Information
-      </h1>
-      <div
-        class="_infoSection_af1029"
-      >
-        <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
-        class="_infoSection_af1029"
-      >
-        <span
-          class="_centredText_af1029"
-        >
-          <p
-            class="_paragraphStyle_af1029"
-          >
-            Our project is organized into various folders, each containing its own
-             
-            <span
-              class="_highlight_af1029"
-            >
-              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
-              class="_highlight_af1029"
-            >
-              README.md
-            </span>
-             file in
-             
-            <span
-              class="_boldText_af1029"
-            >
-              each folder of the project
-            </span>
-            .
-          </p>
-        </span>
-      </div>
-      <div
-        class="_infoSection_af1029"
-      >
-        <span
-          class="_centredText_af1029"
-        >
-          <p
-            class="_paragraphStyle_af1029"
-          >
-            Feel free to explore and modify the structure to suit your project's needs.
-             
-            <span
-              class="_boldText_af1029"
-            >
-              Happy coding!
-            </span>
-          </p>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/pages/Demo/index.ts

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

package/src/pages/Demo/routes.tsx

@@ -1,8 +0,0 @@
-import { reactHookFormDemoRoutes } from '@Front/pages/Demo/ReactHookFormDemo';
-import { RouteObject } from 'react-router';
-import { Demo } from './Demo';
-import { reactQueryDemoRoutes } from './ReactQueryDemo';
-
-export const demoRoutes: RouteObject = {
-  children: [{ index: true, element: <Demo /> }, reactQueryDemoRoutes, reactHookFormDemoRoutes],
-};

package/src/pages/Layout/Layout.tsx

@@ -1,12 +0,0 @@
-import { Footer } from '@Front/components/Footer';
-import { Header } from '@Front/components/Header';
-import { MainTemplate } from '@Front/ui/templates/MainTemplate';
-import { Outlet } from 'react-router';
-
-export const Layout = () => {
-  return (
-    <MainTemplate headerProps={{ leftComponents: <Header /> }} footerProps={{ footerContent: <Footer /> }}>
-      <Outlet />
-    </MainTemplate>
-  );
-};

package/src/pages/Layout/index.ts

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

package/src/pages/README.md

@@ -1,91 +0,0 @@
-# 📁 pages
-
-The "pages" folder is designed to contain all the pages of our application. This structure facilitates organization, management, and navigation between the different views of our application. Additionally, if a page contains components related to its structure, we can create sub-folders to maintain order.
-
-## 📑 Table of Contents
-
-- [Why Use a "pages" Folder](#folder-organization)
-- [Typical Structure of a "pages" Folder](#structure)
-- [Usage Example](#usage)
-- [Best Practice](#best-practice)
-
-## <span id="folder-organization">Why Use a "pages" Folder?</span>
-
-1. **Clear Organization** : By grouping all our pages in a single folder, we maintain a clear organization of our application, making it easy to find specific pages.
-
-2. **Ease of Navigation** : A well-organized "pages" folder structure makes navigation between the views of our application easier.
-
-3. **Reusability** : Components specific to a page can be reused in other pages, promoting code modularity.
-
-## <span id="structure">Typical Structure of a "pages" Folder</span>
-
-The structure of a "pages" folder can vary depending on the size of your application, but here is a typical structure you might adopt:
-
-```
-📁 Pages
-├── 📁 Home
-├── 📁 User
-│   ├── 📁 UserProfile
-├── 📁 Posts
-│   ├── 📁 Article
-├── 📁 Admin
-```
-
-In this structure, each page, such as "Home" or "User," is typically defined in its own file. If a page is complex and requires related components, you can create a sub-folder to maintain order related to the URL, as with "UserProfile" or "Article" in this example.
-
-## <span id="usage">🧑🏻‍💻 Usage Example</span>
-
-Suppose we have a "UserProfile" page with a complex structure:
-
-```
-📁 UserProfile
-├── 📄 index.ts
-├── 📄 UserProfile.tsx
-├── 📄 routes.tsx
-```
-
-```javascript
-// index.ts
-export { userProfileRoutes } from './routes';
-
-// routes.tsx (react-router v7)
-import { RouteObject } from 'react-router';
-import { UserProfile } from './UserProfile';
-
-export const userProfileRoutes: RouteObject = {
-  path: 'user-profile',
-  element: <UserProfile />,
-};
-
-// UserProfile.tsx
-export const UserProfile = () => {
-  return (
-    <div>
-      UserProfile
-      {/* Content of the UserProfile page */}
-    </div>
-  );
-}
-```
-
-By using a "pages" folder and the ability to create sub-folders, we effectively organize our pages and their related components for better management of our application.
-
-## <span id="best-practice">🎖️ Best Practice</span>
-
-When working with page components, it is advisable to follow these best practices to maintain a clean and organized code structure:
-
-#### - Minimize Business Logic
-
-Limit the inclusion of business logic within page components.
-
-Instead, delegate complex business logic to separate utility functions, services, or hooks. This keeps your page components focused on rendering and layout.
-
-#### - Data Presence Control
-
-Keep the logic within page components to a minimum, focusing primarily on controlling the presence of data.
-
-If data is not available or meets certain conditions, consider redirecting to a dedicated error or not-found page.
-
----
-
-**_By adopting these practices, you create page components that are focused on their primary responsibilities, leading to cleaner and more maintainable code._**

package/src/pages/UnexpectedError/UnexpectedError.module.css

@@ -1,8 +0,0 @@
-.root {
-  display: flex;
-  width: 100%;
-  padding-top: 15%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}

package/src/pages/UnexpectedError/UnexpectedError.tsx

@@ -1,22 +0,0 @@
-import logo from '@Front/assets/images/logo.png';
-import { Logo } from '@Front/ui/atoms/Logo';
-import { Link, useRouteError } from 'react-router';
-
-import classes from './UnexpectedError.module.css';
-
-export const UnexpectedError = () => {
-  const error: unknown = useRouteError();
-
-  return (
-    <div className={classes.root}>
-      <Link to="/">
-        <Logo src={logo} alt="logo" />
-      </Link>
-      <h1>Oops!</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
-      <p>
-        <i>{(error as Error)?.message || (error as { statusText?: string })?.statusText}</i>
-      </p>
-    </div>
-  );
-};