@pplancq/react-template 2.10.0 → 2.10.2

package/src/demo/ui/pages/DemoHome/DemoHome.module.scss

@@ -4,52 +4,52 @@
 
 .container {
   display: flex;
-  padding-top: 32px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: 32px;
 }
 
 .bigTitleStyle {
   font-family: sans-serif;
   font-size: 40px;
   font-weight: 400;
-  letter-spacing: 1px;
+  color: #00008f;
   text-align: center;
   text-transform: uppercase;
-  color: #00008f;
+  letter-spacing: 1px;
 
   span {
     display: grid;
-    margin-top: 5px;
-    grid-template-columns: 1fr max-content 1fr;
     grid-template-rows: 27px 0;
-    align-items: center;
+    grid-template-columns: 1fr max-content 1fr;
     gap: 20px;
+    align-items: center;
+    margin-top: 5px;
     font-family: Raleway, sans-serif;
     font-size: 15px;
     font-weight: 500;
-    letter-spacing: 2px;
+    color: #444;
     text-transform: uppercase;
     word-spacing: 1px;
-    color: #444;
+    letter-spacing: 2px;
 
     &::before {
       display: block;
       height: 5px;
+      content: "";
+      background-color: #f8f8f8;
       border-top: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
-      background-color: #f8f8f8;
-      content: "";
     }
 
     &::after {
       display: block;
       height: 5px;
+      content: " ";
+      background-color: #f8f8f8;
       border-top: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
-      background-color: #f8f8f8;
-      content: " ";
     }
   }
 }
@@ -69,12 +69,12 @@
 
 .titleStyle {
   position: relative;
-  margin-left: 8px;
   padding-bottom: 10px;
+  margin-left: 8px;
   font-size: 20px;
   font-weight: 500;
-  letter-spacing: 0;
   line-height: 1.5em;
+  letter-spacing: 0;
 
   &::before {
     position: absolute;
@@ -82,8 +82,8 @@
     left: 0;
     width: 55px;
     height: 5px;
-    background-color: #111;
     content: "";
+    background-color: #111;
   }
 
   &::after {
@@ -93,8 +93,8 @@
     width: 95%;
     max-width: 255px;
     height: 1px;
-    background-color: #333;
     content: "";
+    background-color: #333;
   }
 }
 
@@ -118,10 +118,10 @@
 }
 
 .a {
+  color: #00008f;
+  text-transform: uppercase;
   letter-spacing: 4px;
   text-decoration: none;
-  text-transform: uppercase;
-  color: #00008f;
 }
 
 .a:hover {
@@ -132,8 +132,8 @@ table,
 th,
 td {
   padding: 6px;
-  border: 1px solid black;
   font-family: sans-serif;
+  border: 1px solid black;
 }
 
 .tableWrapper {
@@ -151,11 +151,11 @@ table {
 }
 
 .infoSection {
+  padding: 16px;
   margin: 16px;
   margin-bottom: 20px;
-  padding: 16px;
-  border-radius: 8px;
   background-color: #f5f5f5;
+  border-radius: 8px;
   box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
 
   &:hover {
@@ -164,8 +164,8 @@ table {
 }
 
 ul {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style-type: none;
 }
 
@@ -176,8 +176,8 @@ li {
 
 code {
   padding: 2px 5px;
-  border-radius: 4px;
   font-family: "Courier New", monospace;
   font-size: 14px;
   background-color: #f8f9fa;
+  border-radius: 4px;
 }

package/src/demo/ui/pages/DemoHome/DemoHome.tsx

@@ -3,115 +3,113 @@ import { NavLink } from "@Demo/ui/components/NavLink/NavLink";
 import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
 import classes from "./DemoHome.module.scss";
 
-export const DemoHome = () => {
-  return (
-    <div className={classes.container}>
-      <div className={classes.bigTitleStyle}>
-        Welcome to Your React Starter Kit <span>Clean Architecture</span>
-      </div>
+export const DemoHome = () => (
+  <div className={classes.container}>
+    <div className={classes.bigTitleStyle}>
+      Welcome to Your React Starter Kit <span>Clean Architecture</span>
+    </div>
 
-      <div className={classes.foo}>Vertical slices, shared kernel, and explicit composition.</div>
+    <div className={classes.foo}>Vertical slices, shared kernel, and explicit composition.</div>
 
-      <div className={classes.paragraphContainer}>
-        <h1 className={classes.titleStyle}>Overview</h1>
-        <div className={classes.infoSection}>
-          <span className={classes.centredText}>
-            <p className={classes.paragraphStyle}>
-              This template now starts from a <span className={classes.highlight}>Clean Architecture</span> inspired
-              structure with a dedicated <span className={classes.boldText}>app</span> bootstrap layer, a{" "}
-              <span className={classes.boldText}>shared</span> common layer, and a{" "}
-              <span className={classes.boldText}>demo</span> bounded context.
-            </p>
-            <p className={classes.paragraphStyle}>
-              The goal is to help you start from explicit architecture choices while still keeping a runnable example
-              project that demonstrates routing, form handling, data fetching, and dependency injection.
-            </p>
-          </span>
-        </div>
+    <div className={classes.paragraphContainer}>
+      <h1 className={classes.titleStyle}>Overview</h1>
+      <div className={classes.infoSection}>
+        <span className={classes.centredText}>
+          <p className={classes.paragraphStyle}>
+            This template now starts from a <span className={classes.highlight}>Clean Architecture</span> inspired
+            structure with a dedicated <span className={classes.boldText}>app</span> bootstrap layer, a{" "}
+            <span className={classes.boldText}>shared</span> common layer, and a{" "}
+            <span className={classes.boldText}>demo</span> bounded context.
+          </p>
+          <p className={classes.paragraphStyle}>
+            The goal is to help you start from explicit architecture choices while still keeping a runnable example
+            project that demonstrates routing, form handling, data fetching, and dependency injection.
+          </p>
+        </span>
       </div>
-      <img src={image} alt="Template architecture overview" className={classes.imagePlace} />
+    </div>
+    <img src={image} alt="Template architecture overview" className={classes.imagePlace} />
 
-      <div className={classes.paragraphContainer}>
-        <h1 className={classes.titleStyle}>Folder 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}>app</span>
-                  </td>
-                  <td>Application bootstrap, routing, providers, config, and global assets.</td>
-                </tr>
-                <tr>
-                  <td>
-                    <span className={classes.boldText}>shared</span>
-                  </td>
-                  <td>Reusable common code with no demo-specific responsibility.</td>
-                </tr>
-                <tr>
-                  <td>
-                    <span className={classes.boldText}>demo</span>
-                  </td>
-                  <td>Example bounded context split into ui, application, domain, and infrastructure.</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+    <div className={classes.paragraphContainer}>
+      <h1 className={classes.titleStyle}>Folder 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}>app</span>
+                </td>
+                <td>Application bootstrap, routing, providers, config, and global assets.</td>
+              </tr>
+              <tr>
+                <td>
+                  <span className={classes.boldText}>shared</span>
+                </td>
+                <td>Reusable common code with no demo-specific responsibility.</td>
+              </tr>
+              <tr>
+                <td>
+                  <span className={classes.boldText}>demo</span>
+                </td>
+                <td>Example bounded context split into ui, application, domain, and infrastructure.</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
-      <div className={classes.paragraphContainer}>
-        <h1 className={classes.titleStyle}>Pedagogical Demos</h1>
-        <div className={classes.infoSection}>
-          <p className={classes.paragraphStyle}>
-            Each page below demonstrates a different aspect of the template. The React Query example resolves its use
-            case through Inversify, the React Hook Form example stays focused on UI composition, and the dependency
-            injection example makes the layer boundaries explicit.
-          </p>
-        </div>
+    </div>
+    <div className={classes.paragraphContainer}>
+      <h1 className={classes.titleStyle}>Pedagogical Demos</h1>
+      <div className={classes.infoSection}>
+        <p className={classes.paragraphStyle}>
+          Each page below demonstrates a different aspect of the template. The React Query example resolves its use case
+          through Inversify, the React Hook Form example stays focused on UI composition, and the dependency injection
+          example makes the layer boundaries explicit.
+        </p>
+      </div>
 
-        <div className={classes.infoSection}>
-          <p className={classes.paragraphStyle}>
-            <span className={classes.boldText}>React Query demo: </span>
-            fetches remote users through a repository and a use case.
-          </p>
-          <div className={classes.demoStyle}>
-            <NavLink to={demoAppRoutes.reactQuery} className={classes.a}>
-              Run demo
-            </NavLink>
-          </div>
+      <div className={classes.infoSection}>
+        <p className={classes.paragraphStyle}>
+          <span className={classes.boldText}>React Query demo: </span>
+          fetches remote users through a repository and a use case.
+        </p>
+        <div className={classes.demoStyle}>
+          <NavLink to={demoAppRoutes.reactQuery} className={classes.a}>
+            Run demo
+          </NavLink>
         </div>
+      </div>
 
-        <div className={classes.infoSection}>
-          <p className={classes.paragraphStyle}>
-            <span className={classes.boldText}>React Hook Form demo: </span>
-            shows a form-first UI example inside the new bounded context.
-          </p>
-          <div className={classes.demoStyle}>
-            <NavLink to={demoAppRoutes.reactHookForm} className={classes.a}>
-              Run demo
-            </NavLink>
-          </div>
+      <div className={classes.infoSection}>
+        <p className={classes.paragraphStyle}>
+          <span className={classes.boldText}>React Hook Form demo: </span>
+          shows a form-first UI example inside the new bounded context.
+        </p>
+        <div className={classes.demoStyle}>
+          <NavLink to={demoAppRoutes.reactHookForm} className={classes.a}>
+            Run demo
+          </NavLink>
         </div>
+      </div>
 
-        <div className={classes.infoSection}>
-          <p className={classes.paragraphStyle}>
-            <span className={classes.boldText}>Dependency injection demo: </span>
-            explains how app, shared, and demo collaborate through explicit abstractions.
-          </p>
-          <div className={classes.demoStyle}>
-            <NavLink to={demoAppRoutes.dependencyInjection} className={classes.a}>
-              Run demo
-            </NavLink>
-          </div>
+      <div className={classes.infoSection}>
+        <p className={classes.paragraphStyle}>
+          <span className={classes.boldText}>Dependency injection demo: </span>
+          explains how app, shared, and demo collaborate through explicit abstractions.
+        </p>
+        <div className={classes.demoStyle}>
+          <NavLink to={demoAppRoutes.dependencyInjection} className={classes.a}>
+            Run demo
+          </NavLink>
         </div>
       </div>
     </div>
-  );
-};
+  </div>
+);

package/src/demo/ui/pages/DependencyInjectionDemo/DependencyInjectionDemo.module.scss

@@ -3,17 +3,17 @@
 }
 
 .fieldsetStyle {
-  margin-top: 24px;
   padding: 16px;
+  margin-top: 24px;
   border: 1px solid black;
 }
 
 .title {
   padding-top: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .tableWrapper {
@@ -24,9 +24,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .lineStyle {

package/src/demo/ui/pages/ReactHookFormDemo/ReactHookFormDemo.module.scss

@@ -9,9 +9,9 @@
 .title {
   padding-top: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .lineStyle {
@@ -24,9 +24,9 @@
 
 .profileSectionStyle {
   display: flex;
-  padding-top: 16px;
-  padding-bottom: 16px;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }

package/src/demo/ui/pages/ReactQueryDemo/ReactQueryDemo.module.scss

@@ -3,17 +3,17 @@
 }
 
 .fieldsetStyle {
-  margin-top: 24px;
   padding: 16px;
+  margin-top: 24px;
   border: 1px solid black;
 }
 
 .title {
   padding-top: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .tableWrapper {
@@ -24,9 +24,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .lineStyle {

package/stylelint.config.mjs

@@ -1,3 +1,3 @@
 export default {
-  extends: ['@pplancq/stylelint-config/prettier'],
+  extends: ["@pplancq/stylelint-config"],
 };

package/vitest.config.mts

@@ -1,50 +1,50 @@
-import react from '@vitejs/plugin-react';
-import { loadEnv } from 'vite';
-import svgr from 'vite-plugin-svgr';
+import react from "@vitejs/plugin-react";
+import { loadEnv } from "vite";
+import svgr from "vite-plugin-svgr";
 // eslint-disable-next-line import/no-unresolved
-import { defineConfig } from 'vitest/config';
+import { defineConfig } from "vitest/config";
 
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
+  const env = loadEnv(mode, process.cwd(), "");
 
   return {
     plugins: [react(), svgr()],
-    envPrefix: env.ENV_PREFIX ?? 'FRONT_',
+    envPrefix: env.ENV_PREFIX ?? "FRONT_",
     resolve: {
       tsconfigPaths: true,
     },
     test: {
       globals: true,
-      environment: 'jsdom',
-      setupFiles: 'vitest.setup.ts',
+      environment: "jsdom",
+      setupFiles: "vitest.setup.ts",
       clearMocks: true,
       css: {
         modules: {
-          classNameStrategy: 'non-scoped',
+          classNameStrategy: "non-scoped",
         },
       },
-      reporters: ['default', 'junit', 'vitest-sonar-reporter'],
+      reporters: ["default", "junit", "vitest-sonar-reporter"],
       outputFile: {
-        'vitest-sonar-reporter': 'sonar-report.xml',
-        junit: 'junit-report.xml',
+        "vitest-sonar-reporter": "sonar-report.xml",
+        junit: "junit-report.xml",
       },
-      include: ['tests/unit/**/*.(spec|test|steps).[jt]s?(x)'],
+      include: ["tests/unit/**/*.(spec|test|steps).[jt]s?(x)"],
       maxWorkers: env.CI ? 2 : undefined,
       coverage: {
-        enabled: env.CI === 'true',
-        reporter: ['lcovonly', 'html', 'text', 'text-summary'],
-        provider: 'v8',
+        enabled: env.CI === "true",
+        reporter: ["lcovonly", "html", "text", "text-summary"],
+        provider: "v8",
         lines: 80,
         functions: 75,
         branches: 80,
         statements: 80,
-        include: ['src/**/*.[jt]s?(x)'],
+        include: ["src/**/*.[jt]s?(x)"],
         exclude: [
-          'src/**/*.d.[jt]s?(x)',
-          'src/utils/tests/**/*.[jt]s?(x)',
-          'src/**/*.types.[jt]s?(x)',
-          'src/**/index.[jt]s?(x)',
-          'src/**/*.stories.[jt]s?(x)',
+          "src/**/*.d.[jt]s?(x)",
+          "src/utils/tests/**/*.[jt]s?(x)",
+          "src/**/*.types.[jt]s?(x)",
+          "src/**/index.[jt]s?(x)",
+          "src/**/*.stories.[jt]s?(x)",
         ],
       },
     },

package/vitest.setup.ts

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import '@testing-library/jest-dom/vitest';
-import { server } from '@Mocks/server';
-import { cleanup } from '@testing-library/react';
-import * as matchers from 'vitest-axe/matchers';
+import "@testing-library/jest-dom/vitest";
+import { server } from "@Mocks/server";
+import { cleanup } from "@testing-library/react";
+import * as matchers from "vitest-axe/matchers";
 
 expect.extend(matchers);
 
 beforeAll(() => {
-  server.listen({ onUnhandledRequest: 'error' });
+  server.listen({ onUnhandledRequest: "error" });
 });
 
 afterAll(() => {