@pplancq/react-template 2.9.0 → 2.10.1

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.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

@@ -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.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/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.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/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";

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/forms/ProfileForm/ProfileForm.tsx

@@ -1,9 +1,9 @@
-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';
+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<ProfileFormValues>;
@@ -11,9 +11,9 @@ type ProfileFormProps = {
 };
 
 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) => {

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

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

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

@@ -1,13 +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';
+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'],
+    queryKey: ["demo-users"],
     queryFn: () => getDemoUsersUseCase.execute(),
   });
 };

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

@@ -1,7 +1,7 @@
-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';
+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 (

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

@@ -1,6 +1,6 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from "react";
 
-import classes from './MainTemplate.module.css';
+import classes from "./MainTemplate.module.css";
 
 type MainTemplateProps = {
   headerProps: {

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

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

package/src/demo/ui/pages/DemoHome/DemoHome.module.scss

@@ -4,52 +4,52 @@
 
 .container {
   display: flex;
-  padding-top: 32px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: 32px;
 }
 
 .bigTitleStyle {
   font-family: sans-serif;
   font-size: 40px;
   font-weight: 400;
-  letter-spacing: 1px;
+  color: #00008f;
   text-align: center;
   text-transform: uppercase;
-  color: #00008f;
+  letter-spacing: 1px;
 
   span {
     display: grid;
-    margin-top: 5px;
-    grid-template-columns: 1fr max-content 1fr;
     grid-template-rows: 27px 0;
-    align-items: center;
+    grid-template-columns: 1fr max-content 1fr;
     gap: 20px;
+    align-items: center;
+    margin-top: 5px;
     font-family: Raleway, sans-serif;
     font-size: 15px;
     font-weight: 500;
-    letter-spacing: 2px;
+    color: #444;
     text-transform: uppercase;
     word-spacing: 1px;
-    color: #444;
+    letter-spacing: 2px;
 
     &::before {
       display: block;
       height: 5px;
+      content: "";
+      background-color: #f8f8f8;
       border-top: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
-      background-color: #f8f8f8;
-      content: '';
     }
 
     &::after {
       display: block;
       height: 5px;
+      content: " ";
+      background-color: #f8f8f8;
       border-top: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
-      background-color: #f8f8f8;
-      content: ' ';
     }
   }
 }
@@ -69,12 +69,12 @@
 
 .titleStyle {
   position: relative;
-  margin-left: 8px;
   padding-bottom: 10px;
+  margin-left: 8px;
   font-size: 20px;
   font-weight: 500;
-  letter-spacing: 0;
   line-height: 1.5em;
+  letter-spacing: 0;
 
   &::before {
     position: absolute;
@@ -82,8 +82,8 @@
     left: 0;
     width: 55px;
     height: 5px;
+    content: "";
     background-color: #111;
-    content: '';
   }
 
   &::after {
@@ -93,8 +93,8 @@
     width: 95%;
     max-width: 255px;
     height: 1px;
+    content: "";
     background-color: #333;
-    content: '';
   }
 }
 
@@ -118,10 +118,10 @@
 }
 
 .a {
+  color: #00008f;
+  text-transform: uppercase;
   letter-spacing: 4px;
   text-decoration: none;
-  text-transform: uppercase;
-  color: #00008f;
 }
 
 .a:hover {
@@ -132,8 +132,8 @@ table,
 th,
 td {
   padding: 6px;
-  border: 1px solid black;
   font-family: sans-serif;
+  border: 1px solid black;
 }
 
 .tableWrapper {
@@ -151,11 +151,11 @@ table {
 }
 
 .infoSection {
+  padding: 16px;
   margin: 16px;
   margin-bottom: 20px;
-  padding: 16px;
-  border-radius: 8px;
   background-color: #f5f5f5;
+  border-radius: 8px;
   box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
 
   &:hover {
@@ -164,8 +164,8 @@ table {
 }
 
 ul {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style-type: none;
 }
 
@@ -176,8 +176,8 @@ li {
 
 code {
   padding: 2px 5px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   font-size: 14px;
   background-color: #f8f9fa;
+  border-radius: 4px;
 }

package/src/demo/ui/pages/DemoHome/DemoHome.tsx

@@ -1,7 +1,7 @@
-import image from '@Demo/ui/assets/images/templatePlugins.png';
-import { demoAppRoutes } from '@Demo/ui/routing/demoAppRoutes';
-import { NavLink } from '@Demo/ui/components/NavLink/NavLink';
-import classes from './DemoHome.module.scss';
+import image from "@Demo/ui/assets/images/templatePlugins.png";
+import { NavLink } from "@Demo/ui/components/NavLink/NavLink";
+import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
+import classes from "./DemoHome.module.scss";
 
 export const DemoHome = () => {
   return (
@@ -18,8 +18,8 @@ export const DemoHome = () => {
           <span className={classes.centredText}>
             <p className={classes.paragraphStyle}>
               This template now starts from a <span className={classes.highlight}>Clean Architecture</span> inspired
-              structure with a dedicated <span className={classes.boldText}>app</span> bootstrap layer, a{' '}
-              <span className={classes.boldText}>shared</span> common layer, and a{' '}
+              structure with a dedicated <span className={classes.boldText}>app</span> bootstrap layer, a{" "}
+              <span className={classes.boldText}>shared</span> common layer, and a{" "}
               <span className={classes.boldText}>demo</span> bounded context.
             </p>
             <p className={classes.paragraphStyle}>

package/src/demo/ui/pages/DependencyInjectionDemo/DependencyInjectionDemo.module.scss

@@ -3,17 +3,17 @@
 }
 
 .fieldsetStyle {
-  margin-top: 24px;
   padding: 16px;
+  margin-top: 24px;
   border: 1px solid black;
 }
 
 .title {
   padding-top: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .tableWrapper {
@@ -24,9 +24,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .lineStyle {

package/src/demo/ui/pages/DependencyInjectionDemo/DependencyInjectionDemo.tsx

@@ -1,7 +1,7 @@
-import type { GetArchitecturePrinciplesUseCaseInterface } from '@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface';
-import { DEMO_SERVICES } from '@Demo/serviceIdentifiers';
-import { useService } from '@Shared/ui/hooks/useService/useService';
-import classes from './DependencyInjectionDemo.module.scss';
+import type { GetArchitecturePrinciplesUseCaseInterface } from "@Demo/application/use-cases/GetArchitecturePrinciplesUseCaseInterface";
+import { DEMO_SERVICES } from "@Demo/serviceIdentifiers";
+import { useService } from "@Shared/ui/hooks/useService/useService";
+import classes from "./DependencyInjectionDemo.module.scss";
 
 export const DependencyInjectionDemo = () => {
   const getArchitecturePrinciplesUseCase = useService<GetArchitecturePrinciplesUseCaseInterface>(
@@ -31,7 +31,7 @@ export const DependencyInjectionDemo = () => {
               </tr>
             </thead>
             <tbody>
-              {architecturePrinciples.map(principle => (
+              {architecturePrinciples.map((principle) => (
                 <tr key={`${principle.layer}-${principle.title}`}>
                   <td>{principle.layer}</td>
                   <td>{principle.title}</td>

package/src/demo/ui/pages/ReactHookFormDemo/ReactHookFormDemo.module.scss

@@ -9,9 +9,9 @@
 .title {
   padding-top: 16px;
   font-size: 20px;
-  letter-spacing: 4px;
-  text-align: center;
   color: #00008f;
+  text-align: center;
+  letter-spacing: 4px;
 }
 
 .lineStyle {
@@ -24,9 +24,9 @@
 
 .profileSectionStyle {
   display: flex;
-  padding-top: 16px;
-  padding-bottom: 16px;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }

package/src/demo/ui/pages/ReactHookFormDemo/ReactHookFormDemo.tsx

@@ -1,8 +1,8 @@
-import type { ProfileFormValues } from '@Demo/application/dtos/ProfileFormValues';
-import { ProfileForm } from '@Demo/ui/forms/ProfileForm/ProfileForm';
-import { useState } from 'react';
+import type { ProfileFormValues } from "@Demo/application/dtos/ProfileFormValues";
+import { ProfileForm } from "@Demo/ui/forms/ProfileForm/ProfileForm";
+import { useState } from "react";
 
-import classes from './ReactHookFormDemo.module.scss';
+import classes from "./ReactHookFormDemo.module.scss";
 
 export const ReactHookFormDemo = () => {
   const [profileData, setProfileData] = useState<ProfileFormValues>();