@pplancq/react-template 2.10.0 → 2.10.2

package/scripts/removeDemo.cjs

@@ -1,127 +1,153 @@
 #!/usr/bin/env node
-const { rmSync, readFileSync, writeFileSync, mkdirSync } = require('node:fs');
-const { resolve } = require('node:path');
+const { rmSync, readFileSync, writeFileSync, mkdirSync } = require("node:fs");
+const { resolve } = require("node:path");
+const { execFileSync } = require("node:child_process");
 
-const resolveSrc = path => resolve(__dirname, `../src${path}`);
+const resolveSrc = (path) => resolve(__dirname, `../src${path}`);
 
-rmSync(resolveSrc('/demo'), { recursive: true, force: true });
+rmSync(resolveSrc("/demo"), { recursive: true, force: true });
+rmSync(resolve(__dirname, "../tests/unit/demo"), { recursive: true, force: true });
+rmSync(resolve(__dirname, "../tests/e2e/demo.test.ts"), { force: true });
+writeFileSync(
+  resolve(__dirname, "../tests/e2e/home.test.ts"),
+  [
+    'import { expect } from "@playwright/test";',
+    'import { describe, it } from "./fixture/playwright.fixture";',
+    "",
+    'describe("Home", () => {',
+    '  it("should display the home page", async ({ page }) => {',
+    '    await page.goto("/");',
+    '    await expect(page.getByRole("heading", { name: "Home" })).toBeVisible();',
+    "  });",
+    "});",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
+);
 
-rmSync(resolveSrc('/app/assets/css/mainBody.css'), { force: true });
-writeFileSync(resolveSrc('/app/assets/css/global.css'), ':root {\n  --white-color: #fff;\n}\n', { encoding: 'utf-8' });
-writeFileSync(resolveSrc('/app/assets/css/index.ts'), "import './reset.css';\nimport './global.css';\n", {
-  encoding: 'utf-8',
+rmSync(resolveSrc("/app/assets/css/mainBody.css"), { force: true });
+writeFileSync(resolveSrc("/app/assets/css/global.css"), ":root {\n  --white-color: #fff;\n}\n", { encoding: "utf-8" });
+writeFileSync(resolveSrc("/app/assets/css/index.ts"), 'import "./reset.css";\nimport "./global.css";\n', {
+  encoding: "utf-8",
 });
 
-mkdirSync(resolveSrc('/home/domain'), { recursive: true });
-writeFileSync(resolveSrc('/home/domain/.gitkeep'), '', { encoding: 'utf-8' });
+mkdirSync(resolveSrc("/home/domain"), { recursive: true });
+writeFileSync(resolveSrc("/home/domain/.gitkeep"), "", { encoding: "utf-8" });
 
-mkdirSync(resolveSrc('/home/application'), { recursive: true });
-writeFileSync(resolveSrc('/home/application/.gitkeep'), '', { encoding: 'utf-8' });
+mkdirSync(resolveSrc("/home/application"), { recursive: true });
+writeFileSync(resolveSrc("/home/application/.gitkeep"), "", { encoding: "utf-8" });
 
-mkdirSync(resolveSrc('/home/infrastructure'), { recursive: true });
-writeFileSync(resolveSrc('/home/infrastructure/.gitkeep'), '', { encoding: 'utf-8' });
+mkdirSync(resolveSrc("/home/infrastructure"), { recursive: true });
+writeFileSync(resolveSrc("/home/infrastructure/.gitkeep"), "", { encoding: "utf-8" });
 
-writeFileSync(resolveSrc('/home/serviceIdentifiers.ts'), 'export const HOME_SERVICES = Object.freeze({});\n', {
-  encoding: 'utf-8',
+writeFileSync(resolveSrc("/home/serviceIdentifiers.ts"), "export const HOME_SERVICES = Object.freeze({});\n", {
+  encoding: "utf-8",
 });
 
 writeFileSync(
-  resolveSrc('/home/serviceHome.ts'),
+  resolveSrc("/home/serviceHome.ts"),
   [
-    "import { ContainerModule } from 'inversify';",
-    '',
-    'export const serviceHome: ContainerModule = new ContainerModule(_options => {',
-    '  // Register your home context services here',
-    '});',
-    '',
-  ].join('\n'),
-  { encoding: 'utf-8' },
+    'import { ContainerModule } from "inversify";',
+    "",
+    "export const serviceHome: ContainerModule = new ContainerModule(() => {",
+    "  // Register your home context services here",
+    "});",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
 );
 
-mkdirSync(resolveSrc('/home/ui/pages/Home'), { recursive: true });
+mkdirSync(resolveSrc("/home/ui/pages/Home"), { recursive: true });
 writeFileSync(
-  resolveSrc('/home/ui/pages/Home/Home.tsx'),
+  resolveSrc("/home/ui/pages/Home/Home.tsx"),
   [
-    'export const Home = () => {',
-    '  return (',
-    '    <section>',
-    '      <h1>Home</h1>',
-    '      <p>Your demo context has been removed. Start building your first bounded context from here.</p>',
-    '    </section>',
-    '  );',
-    '};',
-    '',
-  ].join('\n'),
-  { encoding: 'utf-8' },
+    "export const Home = () => (",
+    "  <section>",
+    "    <h1>Home</h1>",
+    "    <p>Your demo context has been removed. Start building your first bounded context from here.</p>",
+    "  </section>",
+    ");",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
 );
 
-mkdirSync(resolveSrc('/home/ui/routing'), { recursive: true });
+mkdirSync(resolveSrc("/home/ui/routing"), { recursive: true });
 writeFileSync(
-  resolveSrc('/home/ui/routing/homeAppRoutes.ts'),
-  ['export const homeAppRoutes = Object.freeze({', "  home: '/',", '});', ''].join('\n'),
-  { encoding: 'utf-8' },
+  resolveSrc("/home/ui/routing/homeAppRoutes.ts"),
+  ["export const homeAppRoutes = Object.freeze({", '  home: "/",', "});", ""].join("\n"),
+  { encoding: "utf-8" },
 );
 
 writeFileSync(
-  resolveSrc('/home/ui/routing/homeRoutes.tsx'),
+  resolveSrc("/home/ui/routing/homeRoutes.tsx"),
   [
-    "import { Home } from '@Home/ui/pages/Home/Home';",
-    "import type { RouteObject } from 'react-router';",
-    '',
-    'export const homeRoutes: RouteObject = {',
-    '  children: [',
-    '    {',
-    '      index: true,',
-    '      element: <Home />,',
-    '    },',
-    '  ],',
-    '};',
-    '',
-  ].join('\n'),
-  { encoding: 'utf-8' },
+    'import { Home } from "@Home/ui/pages/Home/Home";',
+    'import type { RouteObject } from "react-router";',
+    "",
+    "export const homeRoutes: RouteObject = {",
+    "  children: [",
+    "    {",
+    "      index: true,",
+    "      element: <Home />,",
+    "    },",
+    "  ],",
+    "};",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
 );
 
 writeFileSync(
-  resolveSrc('/app/config/serviceContainer.ts'),
+  resolveSrc("/app/config/serviceContainer.ts"),
   [
-    "import { serviceHome } from '@Home/serviceHome';",
-    "import { Container } from 'inversify';",
-    '',
-    'export const serviceContainer = new Container();',
-    '',
-    'serviceContainer.load(serviceHome);',
-    '',
-  ].join('\n'),
-  { encoding: 'utf-8' },
+    'import { serviceHome } from "@Home/serviceHome";',
+    'import { Container } from "inversify";',
+    "",
+    "export const serviceContainer = new Container();",
+    "",
+    "serviceContainer.load(serviceHome);",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
 );
 
 writeFileSync(
-  resolveSrc('/app/routing/routes.tsx'),
+  resolveSrc("/app/routing/routes.tsx"),
   [
-    "import { homeRoutes } from '@Home/ui/routing/homeRoutes';",
-    "import type { RouteObject } from 'react-router';",
-    '',
-    'export const routeObject: RouteObject[] = [',
-    '  {',
-    "    path: '/',",
-    '    children: [homeRoutes],',
-    '  },',
-    '];',
-    '',
-  ].join('\n'),
-  { encoding: 'utf-8' },
+    'import { homeRoutes } from "@Home/ui/routing/homeRoutes";',
+    'import type { RouteObject } from "react-router";',
+    "",
+    "export const routeObject: RouteObject[] = [",
+    "  {",
+    '    path: "/",',
+    "    children: [homeRoutes],",
+    "  },",
+    "];",
+    "",
+  ].join("\n"),
+  { encoding: "utf-8" },
 );
 
-const tsconfigJson = JSON.parse(readFileSync(resolve(__dirname, '../tsconfig.json'), { encoding: 'utf-8' }));
-delete tsconfigJson.compilerOptions.paths['@Demo/*'];
-tsconfigJson.compilerOptions.paths['@Home/*'] = ['./src/home/*'];
-writeFileSync(resolve(__dirname, '../tsconfig.json'), JSON.stringify(tsconfigJson, null, 2), { encoding: 'utf-8' });
+const tsconfigJson = JSON.parse(readFileSync(resolve(__dirname, "../tsconfig.json"), { encoding: "utf-8" }));
+delete tsconfigJson.compilerOptions.paths["@Demo/*"];
+tsconfigJson.compilerOptions.paths["@Home/*"] = ["./src/home/*"];
+writeFileSync(resolve(__dirname, "../tsconfig.json"), `${JSON.stringify(tsconfigJson, null, 2)}\n`, {
+  encoding: "utf-8",
+});
 
-const packagesJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), { encoding: 'utf-8' }));
-const { 'remove:demo': _, ...scripts } = packagesJson.scripts;
+const packagesJson = JSON.parse(readFileSync(resolve(__dirname, "../package.json"), { encoding: "utf-8" }));
+const { "remove:demo": _, ...scripts } = packagesJson.scripts;
 packagesJson.scripts = { ...scripts };
-writeFileSync(resolve(__dirname, '../package.json'), JSON.stringify(packagesJson, null, 2), { encoding: 'utf-8' });
+writeFileSync(resolve(__dirname, "../package.json"), `${JSON.stringify(packagesJson, null, 2)}\n`, {
+  encoding: "utf-8",
+});
+
+execFileSync(require.resolve("prettier/bin/prettier.cjs"), ["--write", "package.json", "tsconfig.json"], {
+  cwd: resolve(__dirname, ".."),
+  stdio: "ignore",
+});
 
-rmSync(resolve(__dirname, '../scripts/removeDemo.cjs'));
+rmSync(resolve(__dirname, "../scripts/removeDemo.cjs"));
 
-console.info('\nThe demo application has been removed\n');
+console.info("\nThe demo application has been removed\n");

package/scripts/test.js

@@ -1,16 +1,16 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import concurrently from 'concurrently';
+// eslint-disable-next-line import/no-unresolved
+import concurrently from "concurrently";
 
 const args = process.argv.slice(2);
 
-let commands = ['npm:test:unit', 'npm:test:e2e'];
+let commands = ["npm:test:unit", "npm:test:e2e"];
 
-if (args.includes('--coverage')) {
-  commands = commands.map(command => `${command} -- --coverage`);
+if (args.includes("--coverage")) {
+  commands = commands.map((command) => `${command} -- --coverage`);
 }
 
 const { result } = concurrently(commands, {
-  prefixColors: 'auto',
+  prefixColors: "auto",
   maxProcesses: 1,
 });
 

package/src/app/App.tsx

@@ -9,10 +9,8 @@ type AppProps = {
   basename?: string;
 };
 
-export const App = ({ basename }: AppProps) => {
-  return (
-    <Providers queryClient={queryClient} container={serviceContainer}>
-      <Router basename={basename} />
-    </Providers>
-  );
-};
+export const App = ({ basename }: AppProps) => (
+  <Providers queryClient={queryClient} container={serviceContainer}>
+    <Router basename={basename} />
+  </Providers>
+);

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

@@ -77,15 +77,15 @@ time,
 mark,
 audio,
 video {
-  margin: 0;
   padding: 0;
-  border: 0;
-  vertical-align: baseline;
+  margin: 0;
   font: inherit;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
   font-size: 100%;
+  vertical-align: baseline;
+  border: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

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

@@ -9,10 +9,8 @@ type ProvidersProps = PropsWithChildren<{
   container: Container;
 }>;
 
-export const Providers = ({ queryClient, container, children }: ProvidersProps) => {
-  return (
-    <ServiceProvider container={container}>
-      <QueryClientProvider queryClient={queryClient}>{children}</QueryClientProvider>
-    </ServiceProvider>
-  );
-};
+export const Providers = ({ queryClient, container, children }: ProvidersProps) => (
+  <ServiceProvider container={container}>
+    <QueryClientProvider queryClient={queryClient}>{children}</QueryClientProvider>
+  </ServiceProvider>
+);

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

@@ -6,11 +6,9 @@ type ClientProviderProps = {
   queryClient: QueryClient;
 };
 
-export const QueryClientProvider = ({ children, queryClient }: PropsWithChildren<ClientProviderProps>) => {
-  return (
-    <ReactQueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </ReactQueryClientProvider>
-  );
-};
+export const QueryClientProvider = ({ children, queryClient }: PropsWithChildren<ClientProviderProps>) => (
+  <ReactQueryClientProvider client={queryClient}>
+    {children}
+    <ReactQueryDevtools initialIsOpen={false} />
+  </ReactQueryClientProvider>
+);

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

@@ -5,7 +5,5 @@ import type { ArchitecturePrincipleRepositoryInterface } from "@Demo/domain/repo
 export class GetArchitecturePrinciplesUseCase implements GetArchitecturePrinciplesUseCaseInterface {
   public constructor(private readonly architecturePrincipleRepository: ArchitecturePrincipleRepositoryInterface) {}
 
-  public readonly execute = (): ArchitecturePrinciple[] => {
-    return this.architecturePrincipleRepository.getAll();
-  };
+  public readonly execute = (): ArchitecturePrinciple[] => this.architecturePrincipleRepository.getAll();
 }

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

@@ -5,7 +5,5 @@ import type { DemoUserRepositoryInterface } from "@Demo/domain/repositories/Demo
 export class GetDemoUsersUseCase implements GetDemoUsersUseCaseInterface {
   public constructor(private readonly demoUserRepository: DemoUserRepositoryInterface) {}
 
-  public readonly execute = async (): Promise<DemoUser[]> => {
-    return this.demoUserRepository.getAll();
-  };
+  public readonly execute = async (): Promise<DemoUser[]> => this.demoUserRepository.getAll();
 }

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

@@ -27,7 +27,5 @@ export class StaticArchitecturePrincipleRepository implements ArchitecturePrinci
     },
   ];
 
-  public readonly getAll = (): ArchitecturePrinciple[] => {
-    return this.architecturePrinciples;
-  };
+  public readonly getAll = (): ArchitecturePrinciple[] => this.architecturePrinciples;
 }

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

@@ -5,13 +5,11 @@ 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>
-  );
-};
+export const DemoFooter = () => (
+  <div className={classes.container}>
+    <hr />
+    <Link to={demoAppRoutes.home}>
+      <Logo size="50px" src={logo} alt="logo" />
+    </Link>
+  </div>
+);

package/src/demo/ui/components/DemoHeader/DemoHeader.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
-  width: auto;
-  padding: 8px;
   flex-direction: row;
   align-items: center;
+  width: auto;
+  padding: 8px;
 }

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

@@ -6,20 +6,18 @@ 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>
-  );
-};
+export const DemoHeader = () => (
+  <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/DemoNavigation/DemoNavigation.module.css

@@ -15,8 +15,8 @@
 }
 
 .a {
+  color: white;
+  text-transform: uppercase;
   letter-spacing: 4px;
   text-decoration: none;
-  text-transform: uppercase;
-  color: white;
 }

package/src/demo/ui/components/Input/Input.module.scss

@@ -6,8 +6,8 @@
 }
 
 %inputStyle {
-  margin: 10px;
   padding: 10px;
+  margin: 10px;
 }
 
 .inputStyle {
@@ -21,8 +21,8 @@
   border-radius: 2px;
 
   &:focus {
-    border: 2px solid red;
     outline: none !important;
+    border: 2px solid red;
   }
 }
 

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

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

package/src/demo/ui/forms/ProfileForm/ProfileForm.module.scss

@@ -4,7 +4,7 @@
 
 .buttonsStyle {
   display: flex;
-  padding-right: 8px;
   flex-direction: row;
   justify-content: space-between;
+  padding-right: 8px;
 }

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

@@ -3,10 +3,8 @@ 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>
-  );
-};
+export const DemoLayout = () => (
+  <MainTemplate headerProps={{ leftComponents: <DemoHeader /> }} footerProps={{ footerContent: <DemoFooter /> }}>
+    <Outlet />
+  </MainTemplate>
+);

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

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

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

@@ -12,15 +12,13 @@ type MainTemplateProps = {
   };
 };
 
-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>
-  );
-};
+export const MainTemplate = ({ headerProps, footerProps, children }: PropsWithChildren<MainTemplateProps>) => (
+  <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>
+);