@pplancq/react-template 2.9.0 → 2.10.1

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/src/demo/ui/pages/ReactQueryDemo/ReactQueryDemo.tsx

@@ -1,5 +1,5 @@
-import { useDemoUsersQuery } from '@Demo/ui/hooks/useDemoUsersQuery/useDemoUsersQuery';
-import classes from './ReactQueryDemo.module.scss';
+import { useDemoUsersQuery } from "@Demo/ui/hooks/useDemoUsersQuery/useDemoUsersQuery";
+import classes from "./ReactQueryDemo.module.scss";
 
 export const ReactQueryDemo = () => {
   const { data = [], isLoading, isError } = useDemoUsersQuery();
@@ -36,7 +36,7 @@ export const ReactQueryDemo = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {data.map(eachResult => (
+                  {data.map((eachResult) => (
                     <tr key={eachResult.id}>
                       <td>{eachResult.id}</td>
                       <td>{eachResult.name}</td>

package/src/demo/ui/routing/demoAppRoutes.ts

@@ -1,6 +1,6 @@
 export const demoAppRoutes = Object.freeze({
-  home: '/',
-  reactQuery: '/react-query',
-  reactHookForm: '/react-hook-form',
-  dependencyInjection: '/dependency-injection',
+  home: "/",
+  reactQuery: "/react-query",
+  reactHookForm: "/react-hook-form",
+  dependencyInjection: "/dependency-injection",
 });

package/src/demo/ui/routing/demoRoutes.tsx

@@ -1,12 +1,12 @@
-import { demoAppRoutes } from '@Demo/ui/routing/demoAppRoutes';
-import { DemoLayout } from '@Demo/ui/layouts/DemoLayout/DemoLayout';
-import { DemoHome } from '@Demo/ui/pages/DemoHome/DemoHome';
-import { DependencyInjectionDemo } from '@Demo/ui/pages/DependencyInjectionDemo/DependencyInjectionDemo';
-import { ReactHookFormDemo } from '@Demo/ui/pages/ReactHookFormDemo/ReactHookFormDemo';
-import { ReactQueryDemo } from '@Demo/ui/pages/ReactQueryDemo/ReactQueryDemo';
-import type { RouteObject } from 'react-router';
+import { DemoLayout } from "@Demo/ui/layouts/DemoLayout/DemoLayout";
+import { DemoHome } from "@Demo/ui/pages/DemoHome/DemoHome";
+import { DependencyInjectionDemo } from "@Demo/ui/pages/DependencyInjectionDemo/DependencyInjectionDemo";
+import { ReactHookFormDemo } from "@Demo/ui/pages/ReactHookFormDemo/ReactHookFormDemo";
+import { ReactQueryDemo } from "@Demo/ui/pages/ReactQueryDemo/ReactQueryDemo";
+import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
+import type { RouteObject } from "react-router";
 
-const toRelativePath = (path: string) => path.replace(/^\//, '');
+const toRelativePath = (path: string) => path.replace(/^\//, "");
 
 export const demoRoutes: RouteObject = {
   element: <DemoLayout />,

package/src/main.ts

@@ -1,10 +1,10 @@
-import AppHTMLElement from '@App/AppHTMLElement';
+import AppHTMLElement from "@App/AppHTMLElement";
 
-if (import.meta.env.FRONT_MOCK_ENABLE === 'true') {
-  const { worker } = await import('@Mocks/browser');
+if (import.meta.env.FRONT_MOCK_ENABLE === "true") {
+  const { worker } = await import("@Mocks/browser");
   await worker.start({
-    onUnhandledRequest: 'warn',
+    onUnhandledRequest: "warn",
   });
 }
 
-customElements.define('app-react', AppHTMLElement);
+customElements.define("app-react", AppHTMLElement);

package/src/react-app-env.d.ts

@@ -1,3 +1,3 @@
 interface ImportMetaEnv {
-  readonly FRONT_MOCK_ENABLE: 'true' | 'false';
+  readonly FRONT_MOCK_ENABLE: "true" | "false";
 }

package/src/shared/infrastructure/http/constant.ts

@@ -1,16 +1,16 @@
 export enum METHODS {
-  get = 'GET',
-  post = 'POST',
-  put = 'PUT',
-  patch = 'PATCH',
-  delete = 'DELETE',
+  get = "GET",
+  post = "POST",
+  put = "PUT",
+  patch = "PATCH",
+  delete = "DELETE",
 }
 
 export enum HEADERS {
-  contentType = 'content-type',
+  contentType = "content-type",
 }
 
 export enum MIME_TYPES {
-  json = 'application/json',
-  text = 'plain/text',
+  json = "application/json",
+  text = "plain/text",
 }

package/src/shared/infrastructure/http/fetchApi.ts

@@ -1,5 +1,5 @@
-import type { Json } from './fetchApi.type';
-import { HEADERS, METHODS, MIME_TYPES } from './constant';
+import { HEADERS, METHODS, MIME_TYPES } from "./constant";
+import type { Json } from "./fetchApi.type";
 
 export type FetchApiError = Error & {
   code?: number;
@@ -41,7 +41,7 @@ export const fetchApi = async <T extends Json | string>({
     throw error;
   }
 
-  if ((response.headers.get(HEADERS.contentType) ?? '').includes('json')) {
+  if ((response.headers.get(HEADERS.contentType) ?? "").includes("json")) {
     return JSON.parse(content) as T;
   }
 

package/src/shared/ui/hooks/useService/useService.ts

@@ -1,12 +1,12 @@
-import { ServiceContext } from '@App/providers/ServiceProvider/ServiceContext';
-import type { ServiceIdentifier } from 'inversify';
-import { useContext } from 'react';
+import { ServiceContext } from "@App/providers/ServiceProvider/ServiceContext";
+import type { ServiceIdentifier } from "inversify";
+import { useContext } from "react";
 
 export const useService = <T = unknown>(serviceIdentifier: ServiceIdentifier<T>): T => {
   const context = useContext(ServiceContext);
 
   if (!context) {
-    throw new Error('useService must be used within a ServiceProvider');
+    throw new Error("useService must be used within a ServiceProvider");
   }
 
   return context.container.get<T>(serviceIdentifier);

package/tests/e2e/demo.test.ts

@@ -0,0 +1,17 @@
+import { getUsers200 } from "@Mocks/handlers/userHandlers";
+import { expect } from "@playwright/test";
+import { describe, it } from "./fixture/playwright.fixture";
+
+describe("Demo Test", () => {
+  it("should have a title", async ({ page }) => {
+    await page.goto("/");
+    const title = page.getByText("WELCOME TO YOUR REACT STARTER KIT");
+    await expect(title).toBeVisible();
+  });
+
+  it("should data fetching", async ({ page, network }) => {
+    network.use(getUsers200);
+    await page.goto("/react-query");
+    await expect(page.getByText("Demo user")).toBeVisible();
+  });
+});

package/tests/e2e/fixture/playwright.fixture.ts

@@ -0,0 +1,15 @@
+import type { NetworkFixture } from "@msw/playwright";
+import { test as base } from "@playwright/test";
+import { createNetworkFixture } from "../utils/createNetworkFixture";
+import { createTestWithCoverageFixture } from "../utils/createTestWithCoverageFixture";
+
+export const test = base.extend<{
+  testWithCoverage: string;
+  network: NetworkFixture;
+}>({
+  testWithCoverage: createTestWithCoverageFixture(),
+  network: createNetworkFixture(),
+});
+
+export const it = test;
+export const { describe } = test;

package/tests/{utils → e2e/utils}/createNetworkFixture.ts

@@ -1,5 +1,5 @@
-import { defineNetworkFixture, type NetworkFixture } from '@msw/playwright';
-import type { PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from '@playwright/test';
+import { defineNetworkFixture, type NetworkFixture } from "@msw/playwright";
+import type { PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
 
 export const createNetworkFixture = (): [
   TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>,

package/tests/{utils → e2e/utils}/createTestWithCoverageFixture.ts

@@ -1,14 +1,14 @@
-import type { PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from '@playwright/test';
-import { test } from '@playwright/test';
-import { CoverageReport } from 'monocart-coverage-reports';
-import { coverageOptions } from '../../mrc.playwright.config';
+import type { PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
+import { test } from "@playwright/test";
+import { CoverageReport } from "monocart-coverage-reports";
+import { coverageOptions } from "../../../mrc.playwright.config";
 
 export const createTestWithCoverageFixture = (): [
   TestFixture<string, PlaywrightTestArgs & PlaywrightWorkerArgs>,
-  { scope: 'test'; auto: true },
+  { scope: "test"; auto: true },
 ] => [
   async ({ page }, use) => {
-    const isChromium = test.info().project.name === 'chromium';
+    const isChromium = test.info().project.name === "chromium";
 
     if (isChromium && coverageOptions.enabled) {
       await page.coverage.startJSCoverage({
@@ -16,7 +16,7 @@ export const createTestWithCoverageFixture = (): [
       });
     }
 
-    await use('testWithCoverage');
+    await use("testWithCoverage");
 
     if (isChromium && coverageOptions.enabled) {
       const coverageList = await page.coverage.stopJSCoverage();
@@ -25,7 +25,7 @@ export const createTestWithCoverageFixture = (): [
     }
   },
   {
-    scope: 'test',
+    scope: "test",
     auto: true,
   },
 ];

package/tests/{utils → e2e/utils}/playwright.globalSetup.ts

@@ -1,10 +1,10 @@
-import type { FullConfig } from '@playwright/test';
-import { CoverageReport } from 'monocart-coverage-reports';
-import { coverageOptions } from '../../mrc.playwright.config';
+import type { FullConfig } from "@playwright/test";
+import { CoverageReport } from "monocart-coverage-reports";
+import { coverageOptions } from "../../../mrc.playwright.config";
 
 const globalSetup = (config: FullConfig) => {
   if (config.webServer && coverageOptions.enabled) {
-    console.info('[playwright]  Coverage enabled with monocart');
+    console.info("[playwright]  Coverage enabled with monocart");
     const mcr = new CoverageReport(coverageOptions);
     mcr.cleanCache();
   }

package/tests/{utils → e2e/utils}/playwright.globalTeardown.ts

@@ -1,6 +1,6 @@
-import type { FullConfig } from '@playwright/test';
-import { CoverageReport } from 'monocart-coverage-reports';
-import { coverageOptions } from '../../mrc.playwright.config';
+import type { FullConfig } from "@playwright/test";
+import { CoverageReport } from "monocart-coverage-reports";
+import { coverageOptions } from "../../../mrc.playwright.config";
 
 const globalTeardown = async (config: FullConfig) => {
   if (config.webServer && coverageOptions.enabled) {

package/{src/app/__tests__ → tests/unit/app}/AppHTMLElement.test.tsx

@@ -1,19 +1,19 @@
-import { App } from '@App/App';
-import { waitFor } from '@testing-library/react';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from 'vitest';
-import AppHTMLElement from '../AppHTMLElement';
+import { App } from "@App/App";
+import AppHTMLElement from "@App/AppHTMLElement";
+import { waitFor } from "@testing-library/react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
 
-vi.mock('@App/App', () => ({
+vi.mock("@App/App", () => ({
   App: () => <div data-testid="app-mock">AppMock</div>,
 }));
 
-vi.mock('react-dom/client', () => ({
+vi.mock("react-dom/client", () => ({
   createRoot: vi.fn(),
 }));
 
-describe('AppHTMLElement', () => {
+describe("AppHTMLElement", () => {
   let container: HTMLElement;
   const render = vi.fn();
   const unmount = vi.fn();
@@ -22,17 +22,17 @@ describe('AppHTMLElement', () => {
     unmount,
   }));
 
-  customElements.define('bootstrap-html-element', AppHTMLElement);
+  customElements.define("bootstrap-html-element", AppHTMLElement);
 
   beforeEach(() => {
-    container = document.createElement('bootstrap-html-element');
+    container = document.createElement("bootstrap-html-element");
   });
 
   afterEach(() => {
     container.remove();
   });
 
-  it('should mount the React component in the custom element', () => {
+  it("should mount the React component in the custom element", () => {
     document.body.appendChild(container);
 
     expect(createRoot as Mock).toHaveBeenCalledWith(expect.anything());
@@ -44,7 +44,7 @@ describe('AppHTMLElement', () => {
     expect(unmount).not.toHaveBeenCalled();
   });
 
-  it('should unmount the React component when removed from the DOM', async () => {
+  it("should unmount the React component when removed from the DOM", async () => {
     document.body.appendChild(container);
 
     expect(unmount).not.toHaveBeenCalled();
@@ -56,7 +56,7 @@ describe('AppHTMLElement', () => {
     });
   });
 
-  it('should not unmount when element is removed and re-added to the DOM', async () => {
+  it("should not unmount when element is removed and re-added to the DOM", async () => {
     document.body.appendChild(container);
     container.remove();
     document.body.appendChild(container);

package/tests/unit/demo/ui/components/DemoFooter/Footer.test.tsx

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

package/tests/unit/demo/ui/components/DemoHeader/Header.test.tsx

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

package/tests/unit/demo/ui/components/Logo/Logo.test.tsx

@@ -0,0 +1,12 @@
+import { Logo } from "@Demo/ui/components/Logo";
+import { render } from "@testing-library/react";
+import { expect } from "vitest";
+import { axe } from "vitest-axe";
+
+describe("<Logo />", () => {
+  it("should", async () => {
+    const { container } = render(<Logo src="foo" alt="bar" />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/tsconfig.json

@@ -29,6 +29,6 @@
       "@Mocks/*": ["./mocks/*"]
     }
   },
-  "include": ["src", "mocks", "vitest.setup.ts", "rsbuild.config.ts"],
+  "include": ["src", "tests", "mocks", "vitest.setup.ts", "rsbuild.config.ts"],
   "exclude": ["node_modules"]
 }

package/vitest.config.mts

@@ -28,7 +28,7 @@ export default defineConfig(({ mode }) => {
         'vitest-sonar-reporter': 'sonar-report.xml',
         junit: 'junit-report.xml',
       },
-      include: ['src/**/*.(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',

package/postcss.config.mjs

@@ -1,5 +0,0 @@
-import defaultConfig from '@pplancq/postcss-config';
-
-export default {
-  ...defaultConfig,
-};

package/src/demo/ui/components/DemoFooter/__tests__/Footer.test.tsx

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

package/src/demo/ui/components/DemoHeader/__tests__/Header.test.tsx

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

package/src/demo/ui/components/Logo/__tests__/Logo.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react';
-import { expect } from 'vitest';
-import { axe } from 'vitest-axe';
-import { Logo } from '../Logo';
-
-describe('<Logo />', () => {
-  it('should', async () => {
-    const { container } = render(<Logo src="foo" alt="bar" />);
-
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/tests/demo.test.ts

@@ -1,17 +0,0 @@
-import { expect } from '@playwright/test';
-import { getUsers200 } from '../mocks/handlers/userHandlers';
-import { describe, it } from './fixture/playwright.fixture';
-
-describe('Demo Test', () => {
-  it('should have a title', async ({ page }) => {
-    await page.goto('/');
-    const title = page.getByText('WELCOME TO YOUR REACT STARTER KIT');
-    await expect(title).toBeVisible();
-  });
-
-  it('should data fetching', async ({ page, network }) => {
-    network.use(getUsers200);
-    await page.goto('/reactQueryDemo');
-    await expect(page.getByText('Demo user')).toBeVisible();
-  });
-});

package/tests/fixture/playwright.fixture.ts

@@ -1,15 +0,0 @@
-import type { NetworkFixture } from '@msw/playwright';
-import { test as base } from '@playwright/test';
-import { createNetworkFixture } from '../utils/createNetworkFixture';
-import { createTestWithCoverageFixture } from '../utils/createTestWithCoverageFixture';
-
-export const test = base.extend<{
-  testWithCoverage: string;
-  network: NetworkFixture;
-}>({
-  testWithCoverage: createTestWithCoverageFixture(),
-  network: createNetworkFixture(),
-});
-
-export const it = test;
-export const { describe } = test;