@pplancq/react-template 2.8.17 → 2.9.0

package/src/app/README.md

@@ -0,0 +1,69 @@
+# `app`
+
+The `app` folder is the **application bootstrap layer**. It is not a bounded context — it has no business
+domain of its own. Its single responsibility is to assemble all the pieces (providers, router, DI container,
+contexts) and expose the application to the browser.
+
+Path alias: `@App/*`
+
+## Contents
+
+| Subfolder / file     | Role                                                                             |
+| -------------------- | -------------------------------------------------------------------------------- |
+| `App.tsx`            | Root React component — composes providers and router                             |
+| `AppHTMLElement.tsx` | Custom-element bootstrap (`<app-react>`). Mounts/unmounts the React root         |
+| `assets/`            | Global CSS reset, base styles, and app-wide static assets                        |
+| `config/`            | App-wide configuration and the **composition root** (`serviceContainer.ts`)      |
+| `providers/`         | React provider components: `ServiceProvider`, `QueryClientProvider`, `Providers` |
+| `routing/`           | Top-level router and route aggregation                                           |
+
+## Composition root
+
+`config/serviceContainer.ts` is the **composition root** of the dependency injection system. It is the single
+place in the application where the Inversify container is created and all bounded-context service collections
+are loaded:
+
+```ts
+import { serviceDemo } from '@Demo/serviceDemo';
+import { Container } from 'inversify';
+
+export const serviceContainer = new Container();
+serviceContainer.load(serviceDemo);
+// add more context modules here as the application grows
+```
+
+The composition root is the **only** place that knows about concrete implementations. Every other layer receives
+dependencies through interfaces and the DI container.
+
+## Provider tree
+
+The `Providers` component wraps the application in its provider tree. The order matters:
+
+```
+ServiceProvider          ← makes the DI container available via React context
+  └── QueryClientProvider ← makes React Query available
+        └── {children}    ← the rest of the application
+```
+
+`ServiceProvider` must be outermost so that any inner provider can use `useService` to resolve DI services.
+
+## Custom element bootstrap
+
+`AppHTMLElement.tsx` registers the application as a
+[custom element](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) (`<app-react>`).
+This allows the React app to be embedded in any HTML host without tight coupling to a specific framework or
+page structure. The custom element mounts a React root in `connectedCallback` and unmounts it in
+`disconnectedCallback`.
+
+## Dependency rules for `app`
+
+- ✅ Can import from `@Shared/*` and any bounded context (e.g., `@Demo/*`)
+- ✅ Responsible for high-level orchestration only
+- ❌ Must not contain business rules or feature-specific logic
+- ❌ Generic helpers belong in `shared`, not here
+
+## Avoid
+
+- Business rules or domain objects
+- Feature-specific orchestration that belongs to a bounded context
+- Generic helpers that should live in `shared`

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

@@ -1,11 +1,11 @@
-import { App } from '@Front/components/App';
+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 bootstrap from '../bootstrap';
+import AppHTMLElement from '../AppHTMLElement';
 
-vi.mock('@Front/components/App', () => ({
+vi.mock('@App/App', () => ({
   App: () => <div data-testid="app-mock">AppMock</div>,
 }));
 
@@ -13,7 +13,7 @@ vi.mock('react-dom/client', () => ({
   createRoot: vi.fn(),
 }));
 
-describe('bootstrap', () => {
+describe('AppHTMLElement', () => {
   let container: HTMLElement;
   const render = vi.fn();
   const unmount = vi.fn();
@@ -22,7 +22,7 @@ describe('bootstrap', () => {
     unmount,
   }));
 
-  customElements.define('bootstrap-html-element', bootstrap);
+  customElements.define('bootstrap-html-element', AppHTMLElement);
 
   beforeEach(() => {
     container = document.createElement('bootstrap-html-element');

package/src/app/config/serviceContainer.ts

@@ -0,0 +1,6 @@
+import { serviceDemo } from '@Demo/serviceDemo';
+import { Container } from 'inversify';
+
+export const serviceContainer = new Container();
+
+serviceContainer.load(serviceDemo);

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

@@ -0,0 +1,18 @@
+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;
+  container: Container;
+}>;
+
+export const Providers = ({ queryClient, container, children }: ProvidersProps) => {
+  return (
+    <ServiceProvider container={container}>
+      <QueryClientProvider queryClient={queryClient}>{children}</QueryClientProvider>
+    </ServiceProvider>
+  );
+};

package/src/{providers → app/providers}/QueryClientProvider/QueryClientProvider.tsx

@@ -3,12 +3,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { PropsWithChildren } from 'react';
 
 type ClientProviderProps = {
-  client: QueryClient;
+  queryClient: QueryClient;
 };
 
-export const QueryClientProvider = ({ children, client }: PropsWithChildren<ClientProviderProps>) => {
+export const QueryClientProvider = ({ children, queryClient }: PropsWithChildren<ClientProviderProps>) => {
   return (
-    <ReactQueryClientProvider client={client}>
+    <ReactQueryClientProvider client={queryClient}>
       {children}
       <ReactQueryDevtools initialIsOpen={false} />
     </ReactQueryClientProvider>

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

@@ -0,0 +1,8 @@
+import type { Container } from 'inversify';
+import { createContext } from 'react';
+
+export type ServiceContextValue = {
+  container: Container;
+};
+
+export const ServiceContext = createContext<ServiceContextValue | null>(null);

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

@@ -0,0 +1,14 @@
+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;
+}>;
+
+export const ServiceProvider = ({ container, children }: ServiceProviderProps) => {
+  const containerRef = useRef({ container });
+
+  return <ServiceContext.Provider value={containerRef.current}>{children}</ServiceContext.Provider>;
+};

package/src/app/routing/Router.tsx

@@ -0,0 +1,14 @@
+import { RouterProvider, createBrowserRouter } from 'react-router';
+import { routeObject } from './routes';
+
+type RouterProps = {
+  basename?: string;
+};
+
+export const Router = ({ basename }: RouterProps = {}) => {
+  const router = createBrowserRouter(routeObject, {
+    basename,
+  });
+
+  return <RouterProvider router={router} />;
+};

package/src/app/routing/appRoutes.ts

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

package/src/app/routing/routes.tsx

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

package/src/demo/README.md

@@ -0,0 +1,148 @@
+# `demo`
+
+The `demo` folder is the template's **example Bounded Context**.
+
+Path alias: `@Demo/*`
+
+## What is a Bounded Context?
+
+In Domain-Driven Design (DDD), a **Bounded Context** is an isolated, autonomous slice of the application that
+owns its own domain model, its own ubiquitous language, and its own internal implementation. It communicates
+with the outside world (other contexts, the app layer) through well-defined entry points only.
+
+Practical rules:
+
+- A bounded context **never imports directly from another bounded context**. Cross-context communication goes
+  through clearly defined contracts (events, DTOs, or a shared kernel type).
+- A bounded context **owns its full stack**: from the domain model all the way to the UI.
+- Every concept inside a context is named consistently — this is the **Ubiquitous Language** principle. The
+  same word must mean the same thing everywhere inside the context.
+
+## Layer structure
+
+The `demo` context follows Clean Architecture's four-layer model:
+
+```
+demo/
+├── domain/          ← pure business contracts, entities, repository interfaces
+├── application/     ← use cases, DTOs, orchestration
+├── infrastructure/  ← concrete implementations, adapters
+├── ui/              ← React pages, components, hooks, routing
+├── serviceDemo.ts   ← Inversify ContainerModule that wires this context's DI
+└── serviceIdentifiers.ts ← unique Symbols for each service in this context
+```
+
+### `domain/`
+
+The heart of the context. Contains:
+
+- **Repository interfaces** — describe the data access operations the domain needs (e.g.,
+  `DemoUserRepositoryInterface`, `ArchitecturePrincipleRepositoryInterface`). These are TypeScript interfaces;
+  the implementation lives in `infrastructure/`.
+- **Entities** — objects with identity and lifecycle (e.g., `DemoUser`).
+- **Value Objects** — immutable objects defined by their values (no identity).
+
+Zero external dependencies. No React, no Inversify, no HTTP.
+
+### `application/`
+
+The orchestration layer. Contains:
+
+- **Use cases** — named, testable business operations (e.g., `GetDemoUsersUseCase`). Each use case implements
+  an interface (`GetDemoUsersUseCaseInterface`) so it can be replaced by a test double without modifying the UI.
+- **DTOs** — plain, typed structures that carry data across layer boundaries (e.g., `ArchitecturePrinciple`,
+  `ProfileFormValues`).
+
+Can import from `domain`. Must not import from `infrastructure` or `ui`.
+
+### `infrastructure/`
+
+The adapter layer. Contains:
+
+- **Concrete repository implementations** (e.g., `HttpDemoUserRepository`, `StaticArchitecturePrincipleRepository`).
+  Each class implements an interface defined in `domain/`, satisfying the **Dependency Inversion Principle**.
+
+Can import from `domain` (the interfaces it implements) and from `@Shared/infrastructure` (shared adapters).
+Must not import from `application` or `ui`.
+
+### `ui/`
+
+The presentation layer. Contains:
+
+- **Pages** — top-level route components
+- **Components** — context-specific visual components
+- **Layouts** — page-level layout wrappers
+- **Forms** — form composition (React Hook Form)
+- **Hooks** — React Query hooks that bridge use cases to the React component tree
+- **Routing** — route declarations exported to `@App/routing`
+
+The UI layer uses `useService` from `@Shared/ui/hooks/useService` to resolve use cases from the DI container.
+It calls use cases; it does not call repositories or infrastructure directly.
+
+## Dependency direction within the context
+
+```
+ui  →  application  →  domain
+infrastructure  -.→  domain (implements its interfaces)
+```
+
+The arrows show allowed import direction. Reversing them is a Clean Architecture violation.
+
+## DI wiring
+
+### `serviceIdentifiers.ts`
+
+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'),
+  // ...
+});
+```
+
+Using `Symbol.for` with a namespaced string (`Demo.*`) avoids collisions with other contexts.
+
+### `serviceDemo.ts`
+
+A `ContainerModule` that binds each service identifier to its concrete implementation using Inversify's
+`toDynamicValue`. This pattern avoids TypeScript decorators entirely, keeping the domain and application layers
+free of framework metadata:
+
+```ts
+export const serviceDemo: ContainerModule = new ContainerModule(options => {
+  options
+    .bind<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)
+    .toDynamicValue(() => new HttpDemoUserRepository())
+    .inSingletonScope();
+
+  options
+    .bind<GetDemoUsersUseCaseInterface>(DEMO_SERVICES.GetDemoUsersUseCase)
+    .toDynamicValue(
+      services => new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
+    )
+    .inSingletonScope();
+});
+```
+
+`serviceDemo` is loaded into the global container in `@App/config/serviceContainer.ts`.
+
+## UI organization principle
+
+The UI layer uses practical, readable sub-folders (`components`, `layouts`, `pages`, `forms`, `hooks`,
+`routing`). Atomic Design can still guide how you think about component responsibility — keeping components
+small and composable — but strict `atoms/molecules/organisms/templates` directories add indirection without
+real value in most projects.
+
+## Important: demo as a model, not a constraint
+
+The `demo` context exists to show the path. When you start your real project:
+
+1. Rename or replace `demo` with your first real bounded context.
+2. Add its alias to `tsconfig.json` (e.g., `"@Orders/*": ["src/orders/*"]`).
+3. Create its `serviceIdentifiers.ts` and `service[ContextName].ts` (e.g., `serviceHome.ts`).
+4. Register its container module in `app/config/serviceContainer.ts`.
+
+Keep visual components in their context's `ui/` folder until there is a proven, concrete reason to move them
+to `shared`.

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

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

package/src/{types/profileTypes.ts → demo/application/dtos/ProfileFormValues.ts}

@@ -1,4 +1,4 @@
-export type ProfileType = {
+export type ProfileFormValues = {
   mail: string;
   firstName: string;
   lastName: string;

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

@@ -0,0 +1,11 @@
+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) {}
+
+  public readonly execute = (): ArchitecturePrinciple[] => {
+    return this.architecturePrincipleRepository.getAll();
+  };
+}

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

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

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

@@ -0,0 +1,11 @@
+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) {}
+
+  public readonly execute = async (): Promise<DemoUser[]> => {
+    return this.demoUserRepository.getAll();
+  };
+}

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

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

package/src/demo/domain/entities/DemoUser.ts

@@ -0,0 +1,7 @@
+export type DemoUser = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  website: string;
+};

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

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

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

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

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

@@ -0,0 +1,29 @@
+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;
+  name: string;
+  username: string;
+  email: string;
+  website: string;
+};
+
+export class HttpDemoUserRepository implements DemoUserRepositoryInterface {
+  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 => ({
+      id: user.id,
+      name: user.name,
+      username: user.username.toUpperCase(),
+      email: user.email.toLowerCase(),
+      website: user.website,
+    }));
+  };
+}

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

@@ -0,0 +1,33 @@
+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: 'Application orchestrates use cases',
+      description: 'Use cases expose intent-driven APIs such as GetDemoUsersUseCase instead of leaking infrastructure.',
+      layer: 'application',
+    },
+    {
+      title: 'Infrastructure implements contracts',
+      description:
+        'Concrete adapters, such as the HTTP repository, live in infrastructure and are selected by the container.',
+      layer: 'infrastructure',
+    },
+    {
+      title: 'UI depends on abstractions',
+      description:
+        'React pages use hooks and useService to resolve use cases without importing infrastructure directly.',
+      layer: 'ui',
+    },
+  ];
+
+  public readonly getAll = (): ArchitecturePrinciple[] => {
+    return this.architecturePrinciples;
+  };
+}

package/src/demo/serviceDemo.ts

@@ -0,0 +1,39 @@
+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';
+
+export const serviceDemo: ContainerModule = new ContainerModule(options => {
+  options
+    .bind<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)
+    .toDynamicValue(() => new HttpDemoUserRepository())
+    .inSingletonScope();
+
+  options
+    .bind<GetDemoUsersUseCaseInterface>(DEMO_SERVICES.GetDemoUsersUseCase)
+    .toDynamicValue(
+      services => new GetDemoUsersUseCase(services.get<DemoUserRepositoryInterface>(DEMO_SERVICES.DemoUserRepository)),
+    )
+    .inSingletonScope();
+
+  options
+    .bind<ArchitecturePrincipleRepositoryInterface>(DEMO_SERVICES.ArchitecturePrincipleRepository)
+    .toDynamicValue(() => new StaticArchitecturePrincipleRepository())
+    .inSingletonScope();
+
+  options
+    .bind<GetArchitecturePrinciplesUseCaseInterface>(DEMO_SERVICES.GetArchitecturePrinciplesUseCase)
+    .toDynamicValue(
+      services =>
+        new GetArchitecturePrinciplesUseCase(
+          services.get<ArchitecturePrincipleRepositoryInterface>(DEMO_SERVICES.ArchitecturePrincipleRepository),
+        ),
+    )
+    .inSingletonScope();
+});

package/src/demo/serviceIdentifiers.ts

@@ -0,0 +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'),
+});

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

@@ -0,0 +1,17 @@
+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 classes from './DemoFooter.module.css';
+
+export const DemoFooter = () => {
+  return (
+    <div className={classes.container}>
+      <hr />
+      <Link to={demoAppRoutes.home}>
+        <Logo size="50px" src={logo} alt="logo" />
+      </Link>
+    </div>
+  );
+};

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

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

package/src/{components/Footer → demo/ui/components/DemoFooter}/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Footer Component > should render the Footer component correctly 1`] = `
 <div>
   <div
-    class="_container_acfd2c"
+    class="container"
   >
     <hr />
     <a
@@ -12,8 +12,8 @@ exports[`Footer Component > should render the Footer component correctly 1`] = `
     >
       <img
         alt="logo"
-        class="_logoStyle_9e86a7"
-        src="/src/assets/images/logo.png"
+        class="logoStyle"
+        src="/src/demo/ui/assets/images/logo.png"
         style="width: 50px;"
       />
     </a>

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

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

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

@@ -0,0 +1,25 @@
+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 classes from './DemoHeader.module.css';
+
+export const DemoHeader = () => {
+  return (
+    <div className={classes.container}>
+      <Link to={demoAppRoutes.home}>
+        <Logo size="50px" src={logo} alt="logo" />
+      </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 },
+        ]}
+      />
+    </div>
+  );
+};

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

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