feat: add react-hook-form and yup, add eslint setting for react and i…

…mport order, add two pages, add paths annotations

.eslintrc

@@ -0,0 +1,48 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.cjs"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "react", "@typescript-eslint", "import"],
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react/display-name": 0,
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "error",
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-no-useless-fragment": "off",
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external"], ["parent", "sibling"], "index"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "import/prefer-default-export": "off",
+
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "react/function-component-definition": [
+      2,
+      { "namedComponents": "function-declaration" }
+    ],
+    "react/jsx-one-expression-per-line": "off"
+  }
+}

package.json

@@ -10,12 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.7",
+    "axios": "^1.5.1",
     "i18next": "^23.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-i18next": "^13.3.0",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
-    "styled-components": "^6.1.0"
+    "styled-components": "^6.1.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "yup": "^1.3.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -24,6 +30,8 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "prettier": "3.0.3",

src/App.tsx

@@ -1,22 +1,33 @@
-import { Link, Route, Routes } from 'react-router-dom';
-import { HashRouterStyled, HelloWorldStyled, LinkSegment } from './AppStyles';
-import { Home, SignIn, SignUp } from './pages';
+import { default as PageRoute } from '@constants/routes';
+import GlobalStyles from '@styles/globals';
+import { HashRouter, Link, Route, Routes } from 'react-router-dom';
+
+import { AppStyled, LinkSegment } from './AppStyles';
+import { ChangePassword, ForgotPassword, Home, SignIn, SignUp } from './pages';
 
 function App() {
   return (
-    <HashRouterStyled>
-      <HelloWorldStyled>Hello World</HelloWorldStyled>
-      <LinkSegment>
-        <Link to={'/'}>Home</Link>
-        <Link to={'signin'}>SignIn</Link>
-        <Link to={'signup'}>SignUp</Link>
-      </LinkSegment>
-      <Routes>
-        <Route index path="/" element={<Home />} />
-        <Route path="signin" element={<SignIn />} />
-        <Route path="signup" element={<SignUp />} />
-      </Routes>
-    </HashRouterStyled>
+    <HashRouter>
+      <AppStyled>
+        <GlobalStyles />
+
+        <LinkSegment>
+          <Link to={PageRoute.Home}>Home</Link>
+          <Link to={PageRoute.SignIn}>SignIn</Link>
+          <Link to={PageRoute.SignUp}>SignUp</Link>
+          <Link to={PageRoute.ForgotPassword}>Forgot Password</Link>
+          <Link to={PageRoute.ChangePassword}>Change Password</Link>
+        </LinkSegment>
+
+        <Routes>
+          <Route index path={PageRoute.Home} element={<Home />} />
+          <Route path={PageRoute.SignIn} element={<SignIn />} />
+          <Route path={PageRoute.SignUp} element={<SignUp />} />
+          <Route path={PageRoute.ForgotPassword} element={<ForgotPassword />} />
+          <Route path={PageRoute.ChangePassword} element={<ChangePassword />} />
+        </Routes>
+      </AppStyled>
+    </HashRouter>
   );
 }
 

src/AppStyles.ts

@@ -1,20 +1,17 @@
-import { HashRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const HashRouterStyled = styled(HashRouter)`
-  width: 100%;
-  height: 100%;
+export const AppStyled = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
 `;
 
 export const LinkSegment = styled.div`
   display: flex;
   gap: 1rem;
-`;
 
-export const HelloWorldStyled = styled.p`
-  font-size: 2rem;
+  width: fit-content;
+
+  padding: 1rem;
+  border: solid 1px black;
+  border-radius: 5px;
 `;

src/pages/ChangePassword.tsx

@@ -0,0 +1,9 @@
+function ChangePassword() {
+  return (
+    <div>
+      <p>Change Password</p>
+    </div>
+  );
+}
+
+export default ChangePassword;

src/pages/ForgotPassword.tsx

@@ -0,0 +1,9 @@
+function ForgotPassword() {
+  return (
+    <div>
+      <p>Forgot Password</p>
+    </div>
+  );
+}
+
+export default ForgotPassword;

src/pages/SignIn.tsx

@@ -1,8 +1,30 @@
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+type Inputs = {
+  login: string;
+  password: string;
+};
+
 function SignIn() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Inputs>();
+  const onSubmit: SubmitHandler<Inputs> = (data) => {
+    console.log(data);
+  };
+
   return (
-    <div>
-      <p>Sign In</p>
-    </div>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('login', { required: true })} />
+      {errors.login && <span>This field is required</span>}
+
+      <input {...register('password', { required: true })} />
+      {errors.password && <span>This field is required</span>}
+
+      <input type="submit" />
+    </form>
   );
 }
 

src/pages/index.ts

@@ -1,3 +1,5 @@
 export { default as SignIn } from './SignIn';
 export { default as SignUp } from './SignUp';
 export { default as Home } from './Home';
+export { default as ChangePassword } from './ChangePassword';
+export { default as ForgotPassword } from './ForgotPassword';

src/shared/constants/routes.ts

@@ -0,0 +1,9 @@
+const Route = {
+  Home: '/',
+  SignIn: 'signin',
+  SignUp: 'signup',
+  ChangePassword: 'change-password',
+  ForgotPassword: 'forgot-password',
+};
+
+export default Route;

src/shared/styles/StyledComponents.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const FlexCentered = styled.div`
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/shared/styles/globals.ts

@@ -0,0 +1,23 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+
+    width: 100vw;
+    height: 100vh;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body * {
+    font-family: 'Rubik', sans-serif !important;
+  }
+`;
+
+export default GlobalStyles;

tsconfig.json

@@ -18,7 +18,14 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./src",
+    "paths": {
+      "@/modules/*": ["./modules/*"],
+      "@constants/*": ["./shared/constants/*"],
+      "@styles/*": ["./shared/styles/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
   base: '/MangaHub/',
 });