@pplancq/react-template 1.0.0

package/src/pages/Demo/ReactQueryDemo/ReactQueryDemo.tsx

@@ -0,0 +1,55 @@
+import { useDemoApi } from '@Front/hooks/api/useDemoApi';
+import classes from './ReactQueryDemo.module.scss';
+
+export const ReactQueryDemo = () => {
+  const { result, isLoading, isError } = useDemoApi();
+
+  if (isError) {
+    return <div>Error fetching data</div>;
+  }
+
+  return (
+    <div className={classes.container}>
+      <h1 className={classes.title}>React Query</h1>
+      <hr className={classes.lineStyle} color="#00008f" />
+
+      <div className={classes.fieldsetStyle}>
+        <p className={classes.paragraph}>
+          React Query is a popular library for data management in React applications. It simplifies data query
+          management, caching, data invalidation, and loading state handling.
+        </p>
+        {isLoading ? (
+          <h1 className={classes.dataTitle}>Loading...</h1>
+        ) : (
+          <>
+            <h1 className={classes.dataTitle}>React Query Data Fetched</h1>
+            <div className={classes.tableWrapper}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Age</th>
+                    <th>Email</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {result?.map(eachResult => (
+                    <tr key={eachResult.id}>
+                      <td>{eachResult.id}</td>
+                      <td>{eachResult.firstName}</td>
+                      <td>{eachResult.lastName}</td>
+                      <td>{eachResult.age}</td>
+                      <td>{eachResult.email}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

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

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

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

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

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

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

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

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

package/src/pages/Demo/index.ts

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

package/src/pages/Demo/routes.tsx

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

package/src/pages/Error/Error.module.css

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

package/src/pages/Error/Error.tsx

@@ -0,0 +1,22 @@
+import logo from '@Front/assets/images/logo.png';
+import { Logo } from '@Front/ui/atoms/Logo';
+import { Link, useRouteError } from 'react-router-dom';
+
+import classes from './Error.module.css';
+
+export const Error = () => {
+  const error: unknown = useRouteError();
+
+  return (
+    <div className={classes.errorPageStyle}>
+      <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>
+  );
+};

package/src/pages/Error/index.ts

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

package/src/pages/Layout/Layout.tsx

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

package/src/pages/Layout/index.ts

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