@pplancq/react-template 2.8.17 → 2.10.0

package/src/demo/README.md

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

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 { 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";
+
+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/demo/ui/components/DemoHeader/index.ts

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

package/src/{ui/molecules/Navigation/Navigation.tsx → demo/ui/components/DemoNavigation/DemoNavigation.tsx}

@@ -1,18 +1,18 @@
-import { NavLink } from '@Front/ui/atoms/NavLink';
-import { useId } from 'react';
-import classes from './Navigation.module.css';
+import { NavLink } from "@Demo/ui/components/NavLink/NavLink";
+import { useId } from "react";
+import classes from "./DemoNavigation.module.css";
 
-type NavigationProps = {
+type DemoNavigationProps = {
   links: { label: string; url: string }[];
 };
 
-export const Navigation = ({ links }: NavigationProps) => {
+export const DemoNavigation = ({ links }: DemoNavigationProps) => {
   const id = useId();
 
   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

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

package/src/{ui/atoms → 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

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

package/src/{ui/atoms → 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

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

package/src/{ui/atoms → 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

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

package/src/{components → demo/ui/components}/TextInput/TextInput.tsx

@@ -1,6 +1,6 @@
-import { Input } from '@Front/ui/atoms/Input';
-import { InputHTMLAttributes } from 'react';
-import { 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

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

package/src/{forms → demo/ui/forms}/ProfileForm/ProfileForm.tsx

@@ -1,31 +1,31 @@
-import { TextInput } from '@Front/components/TextInput';
-import { ProfileType } from '@Front/types/profileTypes';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import classes from './ProfileForm.module.scss';
+import type { ProfileFormValues } from "@Demo/application/dtos/ProfileFormValues";
+import { TextInput } from "@Demo/ui/components/TextInput/TextInput";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { FormProvider, type SubmitHandler, useForm } from "react-hook-form";
+import * as yup from "yup";
+import classes from "./ProfileForm.module.scss";
 
 type ProfileFormProps = {
-  onSubmit: SubmitHandler<ProfileType>;
+  onSubmit: SubmitHandler<ProfileFormValues>;
   resetForm: () => void;
 };
 
 const schema = yup.object().shape({
-  mail: yup.string().email('Check the mail pattern').required('This field is required'),
-  firstName: yup.string().required('This field is required'),
-  lastName: yup.string().required('This field is required'),
+  mail: yup.string().email("Check the mail pattern").required("This field is required"),
+  firstName: yup.string().required("This field is required"),
+  lastName: yup.string().required("This field is required"),
 });
 
 export const ProfileForm = ({ onSubmit, resetForm }: ProfileFormProps) => {
-  const methods = useForm<ProfileType>({
+  const methods = useForm<ProfileFormValues>({
     resolver: yupResolver(schema),
   });
 
   return (
     <FormProvider {...methods}>
       <form onSubmit={methods.handleSubmit(onSubmit)}>
-        <p>The form is being submited {methods.formState.submitCount} times</p>
-        <TextInput label="E-mail" type="email" name="mail" placeholder="Exemple@gmail.com" />
+        <p>The form has been submitted {methods.formState.submitCount} times.</p>
+        <TextInput label="E-mail" type="email" name="mail" placeholder="example@gmail.com" />
 
         <TextInput label="First Name" name="firstName" placeholder="First Name" />
 

package/src/demo/ui/forms/ProfileForm/index.ts

@@ -0,0 +1 @@
+export { ProfileForm } from "./ProfileForm";

package/src/demo/ui/hooks/useDemoUsersQuery/useDemoUsersQuery.ts

@@ -0,0 +1,13 @@
+import type { GetDemoUsersUseCaseInterface } from "@Demo/application/use-cases/GetDemoUsersUseCaseInterface";
+import { DEMO_SERVICES } from "@Demo/serviceIdentifiers";
+import { useService } from "@Shared/ui/hooks/useService/useService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useDemoUsersQuery = () => {
+  const getDemoUsersUseCase = useService<GetDemoUsersUseCaseInterface>(DEMO_SERVICES.GetDemoUsersUseCase);
+
+  return useQuery({
+    queryKey: ["demo-users"],
+    queryFn: () => getDemoUsersUseCase.execute(),
+  });
+};

package/src/demo/ui/layouts/DemoLayout/DemoLayout.tsx

@@ -0,0 +1,12 @@
+import { DemoFooter } from "@Demo/ui/components/DemoFooter/DemoFooter";
+import { DemoHeader } from "@Demo/ui/components/DemoHeader/DemoHeader";
+import { MainTemplate } from "@Demo/ui/layouts/MainTemplate/MainTemplate";
+import { Outlet } from "react-router";
+
+export const DemoLayout = () => {
+  return (
+    <MainTemplate headerProps={{ leftComponents: <DemoHeader /> }} footerProps={{ footerContent: <DemoFooter /> }}>
+      <Outlet />
+    </MainTemplate>
+  );
+};

package/src/demo/ui/layouts/MainTemplate/MainTemplate.module.css

@@ -0,0 +1,21 @@
+.mainTemplateStyle {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.main {
+  flex: 1;
+}
+
+.footer {
+  padding: 16px;
+}

package/src/demo/ui/layouts/MainTemplate/MainTemplate.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren, ReactNode } from "react";
+
+import classes from "./MainTemplate.module.css";
+
+type MainTemplateProps = {
+  headerProps: {
+    leftComponents?: ReactNode;
+    rightComponents?: ReactNode;
+  };
+  footerProps: {
+    footerContent?: ReactNode;
+  };
+};
+
+export const MainTemplate = ({ headerProps, footerProps, children }: PropsWithChildren<MainTemplateProps>) => {
+  return (
+    <div className={classes.mainTemplateStyle}>
+      <header className={classes.header}>
+        {headerProps.leftComponents}
+        {headerProps.rightComponents}
+      </header>
+      <main className={classes.main}>{children}</main>
+      <footer className={classes.footer}>{footerProps.footerContent}</footer>
+    </div>
+  );
+};

package/src/demo/ui/layouts/MainTemplate/index.ts

@@ -0,0 +1 @@
+export { MainTemplate } from "./MainTemplate";