added home-page and form hook library

apps/frontend/src/app/app.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.scss';
 
-import NxWelcome from './nx-welcome';
 import {Home} from './home';
 export function App() {
   return (

apps/frontend/src/app/home.tsx

@@ -2,19 +2,22 @@ import {LoginPage, RegistrationPage} from "@platform/site-pages";
 import {Link, Routes, Route} from 'react-router-dom'
 
 export function Home() {
-  return(
+  return (
-    <>
+    <div>
-      <ul>
+      <ul className="text-white text-3xl flex items-center justify-between bg-amber-300 w-screen mx-auto px-10 py-5">
-        <li><Link to="/login">Login</Link></li>
+        <li className="hover:text-blue-600"><Link to="/login">Login</Link></li>
-        <li><Link to="/register">Register</Link></li>
+        <li className="shover:text-blue-600"><Link to="/register">Register</Link></li>
+        <li className="hover:text-blue-600"><Link to="/">Home</Link></li>
       </ul>
-      <Routes>
+      <div className="">
-        <Route path="/login" element={<LoginPage/>}></Route>
+        <h2>Home page</h2>
-        <Route path="/register" element={<RegistrationPage/>}></Route>
+      </div>
-      </Routes>
+      <div className="mx-auto flex justify-center mt-3.5">
-      <h1>Hello</h1>
+        <Routes>
-      <LoginPage/>
+          <Route path="/login" element={<LoginPage/>}></Route>
-      <RegistrationPage/>
+          <Route path="/register" element={<RegistrationPage/>}></Route>
-    </>
+        </Routes>
+      </div>
+    </div>
   );
 }

libs/site-pages/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/home-page/home-page';
 export * from './lib/registration-page/registration-page';
 export * from './lib/login-page/login-page';
 export * from './lib/site-pages';

libs/site-pages/src/lib/home-page/home-page.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

libs/site-pages/src/lib/home-page/home-page.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomePage from './home-page';
+
+describe('HomePage', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomePage />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/site-pages/src/lib/home-page/home-page.tsx

@@ -0,0 +1,14 @@
+import styles from './home-page.module.scss';
+
+/* eslint-disable-next-line */
+export interface HomePageProps {}
+
+export function HomePage(props: HomePageProps) {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to HomePage!</h1>
+    </div>
+  );
+}
+
+export default HomePage;

libs/site-pages/src/lib/login-page/components/LoginForm.tsx

@@ -0,0 +1,31 @@
+import {useForm, SubmitHandler} from "react-hook-form";
+import {register} from "@swc-node/register/register";
+import {Link} from "react-router-dom";
+
+type Inputs = {
+  example: string;
+  exampleRequired: string;
+}
+
+export function LoginForm() {
+  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
+  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
+
+  console.log(watch("example")) // watch input value by passing the name of it
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col bg-amber-100">
+        <input defaultValue="test" {...register("example")} className="border-2"/>
+        <input type="password" {...register("exampleRequired", { required: true })} className="border-2 my-1"/>
+      </div>
+      <div className="text-red-500 my-1">
+        {errors.exampleRequired && <span>This field is required</span>}
+      </div>
+      <div className="">
+      <input type="submit" className="bg-amber-300 p-3 my-1 hover:bg-amber-500 transition text-white"/>
+      <Link to="/">Забыли пароль?</Link>
+      </div>
+    </form>
+  );
+}

libs/site-pages/src/lib/login-page/login-page.tsx

@@ -1,12 +1,14 @@
 import styles from './login-page.module.scss';
+import {LoginForm} from "./components/LoginForm";
 
 /* eslint-disable-next-line */
 export interface LoginPageProps {}
 
 export function LoginPage(props: LoginPageProps) {
   return (
-    <div className={styles['container']}>
+    <div className="block bg-amber-100 p-5">
-      <h1>Welcome to LoginPage!</h1>
+      <h1 className="text-4xl mb-2">Войти</h1>
+      <LoginForm/>
     </div>
   );
 }

libs/site-pages/src/lib/registration-page/registration-page.tsx

@@ -6,7 +6,12 @@ export interface RegistrationPageProps {}
 export function RegistrationPage(props: RegistrationPageProps) {
   return (
     <div className={styles['container']}>
-      <h1>Welcome to RegistrationPage!</h1>
+      <h1 className="text-4xl">Welcome to RegistrationPage!</h1>
+      <form action="">
+        <input type="text"/>
+        <input type="text" className="m-1 text-2xl"/>
+        <button>Войти</button>
+      </form>
     </div>
   );
 }

package.json

@@ -26,11 +26,12 @@
     "match-sorter": "^6.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.2",
     "react-is": "18.2.0",
     "react-router-dom": "^6.14.2",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
-    "sort-by": "^1.2.0",
+    "sort-by": "^0.0.2",
     "styled-components": "5.3.6",
     "tslib": "^2.3.0"
   },
@@ -75,7 +76,7 @@
     "autoprefixer": "10.4.13",
     "babel-jest": "^29.4.1",
     "babel-plugin-styled-components": "1.10.7",
-    "cypress": "^12.11.0",
+    "cypress": "^4.2.0",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-cypress": "^2.10.3",