@pplancq/react-template 2.9.0 → 2.10.0

package/playwright-report/sonar-results.xml

@@ -0,0 +1,20 @@
+<testExecutions version="1">
+<file path="/Users/paul/dev/@pplancq/dev-tools/packages/react-template/tests/e2e/demo.test.ts">
+<testCase name="Demo Test › should have a title" duration="218">
+</testCase>
+<testCase name="Demo Test › should data fetching" duration="225">
+</testCase>
+</file>
+<file path="/Users/paul/dev/@pplancq/dev-tools/packages/react-template/tests/e2e/demo.test.ts">
+<testCase name="Demo Test › should have a title" duration="210">
+</testCase>
+<testCase name="Demo Test › should data fetching" duration="226">
+</testCase>
+</file>
+<file path="/Users/paul/dev/@pplancq/dev-tools/packages/react-template/tests/e2e/demo.test.ts">
+<testCase name="Demo Test › should have a title" duration="518">
+</testCase>
+<testCase name="Demo Test › should data fetching" duration="509">
+</testCase>
+</file>
+</testExecutions>

package/playwright.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, devices } from '@playwright/test';
 const appUrl = 'http://localhost:3000';
 
 export default defineConfig({
-  testDir: 'tests',
+  testDir: 'tests/e2e',
   outputDir: 'test-results',
   fullyParallel: true,
   forbidOnly: Boolean(process.env.CI),
@@ -18,8 +18,8 @@ export default defineConfig({
       { outputFile: 'playwright-report/sonar-results.xml', sonarcloud: true },
     ],
   ],
-  globalSetup: 'tests/utils/playwright.globalSetup.ts',
-  globalTeardown: 'tests/utils/playwright.globalTeardown.ts',
+  globalSetup: 'tests/e2e/utils/playwright.globalSetup.ts',
+  globalTeardown: 'tests/e2e/utils/playwright.globalTeardown.ts',
   use: {
     baseURL: appUrl,
     trace: 'retain-on-failure',

package/src/app/App.tsx

@@ -1,9 +1,9 @@
-import { queryClient } from '@App/config/queryClientConfig';
-import { serviceContainer } from '@App/config/serviceContainer';
-import { Providers } from '@App/providers/Providers/Providers';
-import { Router } from '@App/routing/Router';
+import { queryClient } from "@App/config/queryClientConfig";
+import { serviceContainer } from "@App/config/serviceContainer";
+import { Providers } from "@App/providers/Providers/Providers";
+import { Router } from "@App/routing/Router";
 
-import '@App/assets/css';
+import "@App/assets/css";
 
 type AppProps = {
   basename?: string;

package/src/app/AppHTMLElement.tsx

@@ -1,6 +1,6 @@
-import { App } from '@App/App';
-import { StrictMode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
+import { App } from "@App/App";
+import { StrictMode } from "react";
+import { createRoot, type Root } from "react-dom/client";
 
 // eslint-disable-next-line import/no-default-export
 export default class AppHTMLElement extends HTMLElement {
@@ -18,7 +18,7 @@ export default class AppHTMLElement extends HTMLElement {
     this.isMounted = true;
     this.root.render(
       <StrictMode>
-        <App basename={this.getAttribute('basename') ?? ''} />
+        <App basename={this.getAttribute("basename") ?? ""} />
       </StrictMode>,
     );
   }

package/src/app/README.md

@@ -24,8 +24,8 @@ place in the application where the Inversify container is created and all bounde
 are loaded:
 
 ```ts
-import { serviceDemo } from '@Demo/serviceDemo';
-import { Container } from 'inversify';
+import { serviceDemo } from "@Demo/serviceDemo";
+import { Container } from "inversify";
 
 export const serviceContainer = new Container();
 serviceContainer.load(serviceDemo);

package/src/app/assets/css/index.ts

@@ -1,2 +1,2 @@
-import './reset.css';
-import './mainBody.css';
+import "./reset.css";
+import "./mainBody.css";

package/src/app/assets/css/reset.css

@@ -83,8 +83,8 @@ video {
   vertical-align: baseline;
   font: inherit;
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
   font-size: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -128,5 +128,5 @@ table {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }

package/src/app/config/queryClientConfig.ts

@@ -1,3 +1,3 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient } from "@tanstack/react-query";
 
 export const queryClient = new QueryClient();

package/src/app/config/serviceContainer.ts

@@ -1,5 +1,5 @@
-import { serviceDemo } from '@Demo/serviceDemo';
-import { Container } from 'inversify';
+import { serviceDemo } from "@Demo/serviceDemo";
+import { Container } from "inversify";
 
 export const serviceContainer = new Container();
 

package/src/app/providers/Providers/Providers.tsx

@@ -1,8 +1,8 @@
-import { QueryClientProvider } from '@App/providers/QueryClientProvider/QueryClientProvider';
-import { ServiceProvider } from '@App/providers/ServiceProvider/ServiceProvider';
-import type { QueryClient } from '@tanstack/react-query';
-import type { Container } from 'inversify';
-import type { PropsWithChildren } from 'react';
+import { QueryClientProvider } from "@App/providers/QueryClientProvider/QueryClientProvider";
+import { ServiceProvider } from "@App/providers/ServiceProvider/ServiceProvider";
+import type { QueryClient } from "@tanstack/react-query";
+import type { Container } from "inversify";
+import type { PropsWithChildren } from "react";
 
 type ProvidersProps = PropsWithChildren<{
   queryClient: QueryClient;

package/src/app/providers/QueryClientProvider/QueryClientProvider.tsx

@@ -1,6 +1,6 @@
-import { type QueryClient, QueryClientProvider as ReactQueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import type { PropsWithChildren } from 'react';
+import { type QueryClient, QueryClientProvider as ReactQueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import type { PropsWithChildren } from "react";
 
 type ClientProviderProps = {
   queryClient: QueryClient;

package/src/app/providers/ServiceProvider/ServiceContext.ts

@@ -1,5 +1,5 @@
-import type { Container } from 'inversify';
-import { createContext } from 'react';
+import type { Container } from "inversify";
+import { createContext } from "react";
 
 export type ServiceContextValue = {
   container: Container;

package/src/app/providers/ServiceProvider/ServiceProvider.tsx

@@ -1,7 +1,7 @@
-import { ServiceContext } from '@App/providers/ServiceProvider/ServiceContext';
-import type { Container } from 'inversify';
-import type { PropsWithChildren } from 'react';
-import { useRef } from 'react';
+import { ServiceContext } from "@App/providers/ServiceProvider/ServiceContext";
+import type { Container } from "inversify";
+import type { PropsWithChildren } from "react";
+import { useRef } from "react";
 
 export type ServiceProviderProps = PropsWithChildren<{
   container: Container;

package/src/app/routing/Router.tsx

@@ -1,5 +1,5 @@
-import { RouterProvider, createBrowserRouter } from 'react-router';
-import { routeObject } from './routes';
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { routeObject } from "./routes";
 
 type RouterProps = {
   basename?: string;

package/src/app/routing/appRoutes.ts

@@ -1,3 +1,3 @@
 export const appRoutes = Object.freeze({
-  home: '/',
+  home: "/",
 });

package/src/app/routing/routes.tsx

@@ -1,9 +1,9 @@
-import { demoRoutes } from '@Demo/ui/routing/demoRoutes';
-import type { RouteObject } from 'react-router';
+import { demoRoutes } from "@Demo/ui/routing/demoRoutes";
+import type { RouteObject } from "react-router";
 
 export const routeObject: RouteObject[] = [
   {
-    path: '/',
+    path: "/",
     children: [demoRoutes],
   },
 ];

package/src/demo/README.md

@@ -96,8 +96,8 @@ Declares unique `Symbol` identifiers for every service in the context:
 
 ```ts
 export const DEMO_SERVICES = Object.freeze({
-  DemoUserRepository: Symbol.for('Demo.DemoUserRepository'),
-  GetDemoUsersUseCase: Symbol.for('Demo.GetDemoUsersUseCase'),
+  DemoUserRepository: Symbol.for("Demo.DemoUserRepository"),
+  GetDemoUsersUseCase: Symbol.for("Demo.GetDemoUsersUseCase"),
   // ...
 });
 ```
@@ -111,7 +111,7 @@ A `ContainerModule` that binds each service identifier to its concrete implement
 free of framework metadata:
 
 ```ts
-export const serviceDemo: ContainerModule = new ContainerModule(options => {
+export const serviceDemo: ContainerModule = new ContainerModule((options) => {
   options
     .bind<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)
     .toDynamicValue(() => new HttpDemoUserRepository())
@@ -120,7 +120,8 @@ export const serviceDemo: ContainerModule = new ContainerModule(options => {
   options
     .bind<GetDemoUsersUseCaseInterface>(DEMO_SERVICES.GetDemoUsersUseCase)
     .toDynamicValue(
-      services => new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
+      (services) =>
+        new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
     )
     .inSingletonScope();
 });

package/src/demo/application/dtos/ArchitecturePrinciple.ts

@@ -1,5 +1,5 @@
 export type ArchitecturePrinciple = {
   title: string;
   description: string;
-  layer: 'domain' | 'application' | 'infrastructure' | 'ui';
+  layer: "domain" | "application" | "infrastructure" | "ui";
 };

package/src/demo/application/use-cases/GetArchitecturePrinciplesUseCase.ts

@@ -1,6 +1,6 @@
-import type { ArchitecturePrinciple } from '@Demo/application/dtos/ArchitecturePrinciple';
-import type { GetArchitecturePrinciplesUseCaseInterface } from '@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface';
-import type { ArchitecturePrincipleRepositoryInterface } from '@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface';
+import type { ArchitecturePrinciple } from "@Demo/application/dtos/ArchitecturePrinciple";
+import type { GetArchitecturePrinciplesUseCaseInterface } from "@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface";
+import type { ArchitecturePrincipleRepositoryInterface } from "@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface";
 
 export class GetArchitecturePrinciplesUseCase implements GetArchitecturePrinciplesUseCaseInterface {
   public constructor(private readonly architecturePrincipleRepository: ArchitecturePrincipleRepositoryInterface) {}

package/src/demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface.ts

@@ -1,4 +1,4 @@
-import type { ArchitecturePrinciple } from '@Demo/application/dtos/ArchitecturePrinciple';
+import type { ArchitecturePrinciple } from "@Demo/application/dtos/ArchitecturePrinciple";
 
 export interface GetArchitecturePrinciplesUseCaseInterface {
   execute: () => ArchitecturePrinciple[];

package/src/demo/application/use-cases/GetDemoUsersUseCase.ts

@@ -1,6 +1,6 @@
-import type { GetDemoUsersUseCaseInterface } from '@Demo/application/use-cases/GetDemoUsersUseCaseInterface';
-import type { DemoUser } from '@Demo/domain/entities/DemoUser';
-import type { DemoUserRepositoryInterface } from '@Demo/domain/repositories/DemoUserRepositoryInterface';
+import type { GetDemoUsersUseCaseInterface } from "@Demo/application/use-cases/GetDemoUsersUseCaseInterface";
+import type { DemoUser } from "@Demo/domain/entities/DemoUser";
+import type { DemoUserRepositoryInterface } from "@Demo/domain/repositories/DemoUserRepositoryInterface";
 
 export class GetDemoUsersUseCase implements GetDemoUsersUseCaseInterface {
   public constructor(private readonly demoUserRepository: DemoUserRepositoryInterface) {}

package/src/demo/application/use-cases/GetDemoUsersUseCaseInterface.ts

@@ -1,4 +1,4 @@
-import type { DemoUser } from '@Demo/domain/entities/DemoUser';
+import type { DemoUser } from "@Demo/domain/entities/DemoUser";
 
 export interface GetDemoUsersUseCaseInterface {
   execute: () => Promise<DemoUser[]>;

package/src/demo/domain/repositories/ArchitecturePrincipleRepositoryInterface.d.ts

@@ -1,4 +1,4 @@
-import type { ArchitecturePrinciple } from '@Demo/application/dtos/ArchitecturePrinciple';
+import type { ArchitecturePrinciple } from "@Demo/application/dtos/ArchitecturePrinciple";
 
 export interface ArchitecturePrincipleRepositoryInterface {
   getAll: () => ArchitecturePrinciple[];

package/src/demo/domain/repositories/DemoUserRepositoryInterface.d.ts

@@ -1,4 +1,4 @@
-import type { DemoUser } from '@Demo/domain/entities/DemoUser';
+import type { DemoUser } from "@Demo/domain/entities/DemoUser";
 
 export interface DemoUserRepositoryInterface {
   getAll: () => Promise<DemoUser[]>;

package/src/demo/infrastructure/repositories/HttpDemoUserRepository.ts

@@ -1,6 +1,6 @@
-import type { DemoUser } from '@Demo/domain/entities/DemoUser';
-import type { DemoUserRepositoryInterface } from '@Demo/domain/repositories/DemoUserRepositoryInterface';
-import { fetchApi } from '@Shared/infrastructure/http/fetchApi';
+import type { DemoUser } from "@Demo/domain/entities/DemoUser";
+import type { DemoUserRepositoryInterface } from "@Demo/domain/repositories/DemoUserRepositoryInterface";
+import { fetchApi } from "@Shared/infrastructure/http/fetchApi";
 
 type DemoUserApiResponse = {
   id: number;
@@ -11,14 +11,14 @@ type DemoUserApiResponse = {
 };
 
 export class HttpDemoUserRepository implements DemoUserRepositoryInterface {
-  private readonly apiPath = 'https://jsonplaceholder.typicode.com/users';
+  private readonly apiPath = "https://jsonplaceholder.typicode.com/users";
 
   public readonly getAll = async (): Promise<DemoUser[]> => {
     const users = await fetchApi<DemoUserApiResponse[]>({
       path: this.apiPath,
     });
 
-    return users.map(user => ({
+    return users.map((user) => ({
       id: user.id,
       name: user.name,
       username: user.username.toUpperCase(),

package/src/demo/infrastructure/repositories/StaticArchitecturePrincipleRepository.ts

@@ -1,29 +1,29 @@
-import type { ArchitecturePrinciple } from '@Demo/application/dtos/ArchitecturePrinciple';
-import type { ArchitecturePrincipleRepositoryInterface } from '@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface';
+import type { ArchitecturePrinciple } from "@Demo/application/dtos/ArchitecturePrinciple";
+import type { ArchitecturePrincipleRepositoryInterface } from "@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface";
 
 export class StaticArchitecturePrincipleRepository implements ArchitecturePrincipleRepositoryInterface {
   private readonly architecturePrinciples: ArchitecturePrinciple[] = [
     {
-      title: 'Domain stays framework-free',
-      description: 'The demo domain only defines contracts and pure data structures. React and Inversify stay outside.',
-      layer: 'domain',
+      title: "Domain stays framework-free",
+      description: "The demo domain only defines contracts and pure data structures. React and Inversify stay outside.",
+      layer: "domain",
     },
     {
-      title: 'Application orchestrates use cases',
-      description: 'Use cases expose intent-driven APIs such as GetDemoUsersUseCase instead of leaking infrastructure.',
-      layer: 'application',
+      title: "Application orchestrates use cases",
+      description: "Use cases expose intent-driven APIs such as GetDemoUsersUseCase instead of leaking infrastructure.",
+      layer: "application",
     },
     {
-      title: 'Infrastructure implements contracts',
+      title: "Infrastructure implements contracts",
       description:
-        'Concrete adapters, such as the HTTP repository, live in infrastructure and are selected by the container.',
-      layer: 'infrastructure',
+        "Concrete adapters, such as the HTTP repository, live in infrastructure and are selected by the container.",
+      layer: "infrastructure",
     },
     {
-      title: 'UI depends on abstractions',
+      title: "UI depends on abstractions",
       description:
-        'React pages use hooks and useService to resolve use cases without importing infrastructure directly.',
-      layer: 'ui',
+        "React pages use hooks and useService to resolve use cases without importing infrastructure directly.",
+      layer: "ui",
     },
   ];
 

package/src/demo/serviceDemo.ts

@@ -1,15 +1,15 @@
-import type { ArchitecturePrincipleRepositoryInterface } from '@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface';
-import type { DemoUserRepositoryInterface } from '@Demo/domain/repositories/DemoUserRepositoryInterface';
-import { StaticArchitecturePrincipleRepository } from '@Demo/infrastructure/repositories/StaticArchitecturePrincipleRepository';
-import { HttpDemoUserRepository } from '@Demo/infrastructure/repositories/HttpDemoUserRepository';
-import { GetArchitecturePrinciplesUseCase } from '@Demo/application/use-cases/GetArchitecturePrinciplesUseCase';
-import type { GetArchitecturePrinciplesUseCaseInterface } from '@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface';
-import { GetDemoUsersUseCase } from '@Demo/application/use-cases/GetDemoUsersUseCase';
-import type { GetDemoUsersUseCaseInterface } from '@Demo/application/use-cases/GetDemoUsersUseCaseInterface';
-import { ContainerModule } from 'inversify';
-import { DEMO_SERVICES } from './serviceIdentifiers';
+import { GetArchitecturePrinciplesUseCase } from "@Demo/application/use-cases/GetArchitecturePrinciplesUseCase";
+import type { GetArchitecturePrinciplesUseCaseInterface } from "@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface";
+import { GetDemoUsersUseCase } from "@Demo/application/use-cases/GetDemoUsersUseCase";
+import type { GetDemoUsersUseCaseInterface } from "@Demo/application/use-cases/GetDemoUsersUseCaseInterface";
+import type { ArchitecturePrincipleRepositoryInterface } from "@Demo/domain/repositories/ArchitecturePrincipleRepositoryInterface";
+import type { DemoUserRepositoryInterface } from "@Demo/domain/repositories/DemoUserRepositoryInterface";
+import { HttpDemoUserRepository } from "@Demo/infrastructure/repositories/HttpDemoUserRepository";
+import { StaticArchitecturePrincipleRepository } from "@Demo/infrastructure/repositories/StaticArchitecturePrincipleRepository";
+import { ContainerModule } from "inversify";
+import { DEMO_SERVICES } from "./serviceIdentifiers";
 
-export const serviceDemo: ContainerModule = new ContainerModule(options => {
+export const serviceDemo: ContainerModule = new ContainerModule((options) => {
   options
     .bind<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)
     .toDynamicValue(() => new HttpDemoUserRepository())
@@ -18,7 +18,8 @@ export const serviceDemo: ContainerModule = new ContainerModule(options => {
   options
     .bind<GetDemoUsersUseCaseInterface>(DEMO_SERVICES.GetDemoUsersUseCase)
     .toDynamicValue(
-      services => new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
+      (services) =>
+        new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
     )
     .inSingletonScope();
 
@@ -30,7 +31,7 @@ export const serviceDemo: ContainerModule = new ContainerModule(options => {
   options
     .bind<GetArchitecturePrinciplesUseCaseInterface>(DEMO_SERVICES.GetArchitecturePrinciplesUseCase)
     .toDynamicValue(
-      services =>
+      (services) =>
         new GetArchitecturePrinciplesUseCase(
           services.get<ArchitecturePrincipleRepositoryInterface>(DEMO_SERVICES.ArchitecturePrincipleRepository),
         ),

package/src/demo/serviceIdentifiers.ts

@@ -1,6 +1,6 @@
 export const DEMO_SERVICES = Object.freeze({
-  DemoUserRepository: Symbol.for('Demo.DemoUserRepository'),
-  GetDemoUsersUseCase: Symbol.for('Demo.GetDemoUsersUseCase'),
-  ArchitecturePrincipleRepository: Symbol.for('Demo.ArchitecturePrincipleRepository'),
-  GetArchitecturePrinciplesUseCase: Symbol.for('Demo.GetArchitecturePrinciplesUseCase'),
+  DemoUserRepository: Symbol.for("Demo.DemoUserRepository"),
+  GetDemoUsersUseCase: Symbol.for("Demo.GetDemoUsersUseCase"),
+  ArchitecturePrincipleRepository: Symbol.for("Demo.ArchitecturePrincipleRepository"),
+  GetArchitecturePrinciplesUseCase: Symbol.for("Demo.GetArchitecturePrinciplesUseCase"),
 });

package/src/demo/ui/components/DemoFooter/DemoFooter.tsx

@@ -1,9 +1,9 @@
-import logo from '@Demo/ui/assets/images/logo.png';
-import { demoAppRoutes } from '@Demo/ui/routing/demoAppRoutes';
-import { Logo } from '@Demo/ui/components/Logo/Logo';
-import { Link } from 'react-router';
+import logo from "@Demo/ui/assets/images/logo.png";
+import { Logo } from "@Demo/ui/components/Logo/Logo";
+import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
+import { Link } from "react-router";
 
-import classes from './DemoFooter.module.css';
+import classes from "./DemoFooter.module.css";
 
 export const DemoFooter = () => {
   return (

package/src/demo/ui/components/DemoFooter/index.ts

@@ -1 +1 @@
-export { DemoFooter } from './DemoFooter';
+export { DemoFooter } from "./DemoFooter";

package/src/demo/ui/components/DemoHeader/DemoHeader.tsx

@@ -1,10 +1,10 @@
-import logo from '@Demo/ui/assets/images/logo.png';
-import { DemoNavigation } from '@Demo/ui/components/DemoNavigation/DemoNavigation';
-import { demoAppRoutes } from '@Demo/ui/routing/demoAppRoutes';
-import { Logo } from '@Demo/ui/components/Logo/Logo';
-import { Link } from 'react-router';
+import logo from "@Demo/ui/assets/images/logo.png";
+import { DemoNavigation } from "@Demo/ui/components/DemoNavigation/DemoNavigation";
+import { Logo } from "@Demo/ui/components/Logo/Logo";
+import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
+import { Link } from "react-router";
 
-import classes from './DemoHeader.module.css';
+import classes from "./DemoHeader.module.css";
 
 export const DemoHeader = () => {
   return (
@@ -14,10 +14,10 @@ export const DemoHeader = () => {
       </Link>
       <DemoNavigation
         links={[
-          { label: 'Overview', url: demoAppRoutes.home },
-          { label: 'React Query', url: demoAppRoutes.reactQuery },
-          { label: 'React Hook Form', url: demoAppRoutes.reactHookForm },
-          { label: 'Dependency Injection', url: demoAppRoutes.dependencyInjection },
+          { label: "Overview", url: demoAppRoutes.home },
+          { label: "React Query", url: demoAppRoutes.reactQuery },
+          { label: "React Hook Form", url: demoAppRoutes.reactHookForm },
+          { label: "Dependency Injection", url: demoAppRoutes.dependencyInjection },
         ]}
       />
     </div>

package/src/demo/ui/components/DemoHeader/index.ts

@@ -1 +1 @@
-export { DemoHeader } from './DemoHeader';
+export { DemoHeader } from "./DemoHeader";

package/src/demo/ui/components/DemoNavigation/DemoNavigation.tsx

@@ -1,6 +1,6 @@
-import { NavLink } from '@Demo/ui/components/NavLink/NavLink';
-import { useId } from 'react';
-import classes from './DemoNavigation.module.css';
+import { NavLink } from "@Demo/ui/components/NavLink/NavLink";
+import { useId } from "react";
+import classes from "./DemoNavigation.module.css";
 
 type DemoNavigationProps = {
   links: { label: string; url: string }[];
@@ -12,7 +12,7 @@ export const DemoNavigation = ({ links }: DemoNavigationProps) => {
   return (
     <nav>
       <ul className={classes.navList}>
-        {links.map(link => (
+        {links.map((link) => (
           <li key={`${id} ${link.label} ${link.url}`}>
             <NavLink to={link.url} className={classes.a}>
               {link.label}

package/src/demo/ui/components/DemoNavigation/index.ts

@@ -1 +1 @@
-export { DemoNavigation } from './DemoNavigation';
+export { DemoNavigation } from "./DemoNavigation";

package/src/demo/ui/components/Input/Input.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, InputHTMLAttributes, useId } from 'react';
-import classes from './Input.module.scss';
+import { forwardRef, InputHTMLAttributes, useId } from "react";
+import classes from "./Input.module.scss";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -24,4 +24,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({ label, hasError
   );
 });
 
-Input.displayName = 'Input';
+Input.displayName = "Input";

package/src/demo/ui/components/Input/index.ts

@@ -1 +1 @@
-export { Input } from './Input';
+export { Input } from "./Input";

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

@@ -1,4 +1,4 @@
-import classes from './Logo.module.css';
+import classes from "./Logo.module.css";
 
 type LogoProps = {
   src: string;
@@ -6,6 +6,6 @@ type LogoProps = {
   size?: string;
 };
 
-export const Logo = ({ src, alt, size = '80px' }: LogoProps) => {
+export const Logo = ({ src, alt, size = "80px" }: LogoProps) => {
   return <img className={classes.logoStyle} style={{ width: size }} src={src} alt={alt} />;
 };

package/src/demo/ui/components/Logo/index.ts

@@ -1 +1 @@
-export { Logo } from './Logo';
+export { Logo } from "./Logo";

package/src/demo/ui/components/NavLink/NavLink.tsx

@@ -1,8 +1,8 @@
-import { ComponentProps } from 'react';
-import { NavLink as RouterNavLink } from 'react-router';
+import { ComponentProps } from "react";
+import { NavLink as RouterNavLink } from "react-router";
 
 type NavLinkProps = ComponentProps<typeof RouterNavLink>;
 
 export const NavLink = ({ className, ...props }: NavLinkProps) => (
-  <RouterNavLink {...props} className={[className].filter(Boolean).join(' ')} />
+  <RouterNavLink {...props} className={[className].filter(Boolean).join(" ")} />
 );

package/src/demo/ui/components/NavLink/index.ts

@@ -1 +1 @@
-export { NavLink } from './NavLink';
+export { NavLink } from "./NavLink";

package/src/demo/ui/components/TextInput/TextInput.tsx

@@ -1,6 +1,6 @@
-import { Input } from '@Demo/ui/components/Input/Input';
-import type { InputHTMLAttributes } from 'react';
-import { type FieldError, useFormContext } from 'react-hook-form';
+import { Input } from "@Demo/ui/components/Input/Input";
+import type { InputHTMLAttributes } from "react";
+import { type FieldError, useFormContext } from "react-hook-form";
 
 interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;

package/src/demo/ui/components/TextInput/index.ts

@@ -1 +1 @@
-export { TextInput } from './TextInput';
+export { TextInput } from "./TextInput";