Merge pull request #7 from Nez27/feat/refactor-code

Refactor code and update config project
2026-09-22 20:01:59 +00:00 · 2023-10-24 11:19:44 +07:00
parent 0345593a48 2b2ed6765f
commit 52c3e28fbc
12 changed files with 77 additions and 35 deletions
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Hotel Management" />
    <title>Hotel Management</title>
  </head>
  <body>
@@ -23,6 +23,7 @@
    ]
  },
  "dependencies": {
+    "@emotion/is-prop-valid": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0",
@@ -5,6 +5,9 @@ settings:
  excludeLinksFromLockfile: false

 dependencies:
+  '@emotion/is-prop-valid':
+    specifier: ^1.2.1
+    version: 1.2.1
  react:
    specifier: ^18.2.0
    version: 18.2.0
@@ -24,10 +27,10 @@ dependencies:
 devDependencies:
  '@types/react':
    specifier: ^18.2.15
-    version: 18.2.28
+    version: 18.2.29
  '@types/react-dom':
    specifier: ^18.2.7
-    version: 18.2.13
+    version: 18.2.14
  '@typescript-eslint/eslint-plugin':
    specifier: ^6.0.0
    version: 6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2)
@@ -651,34 +654,34 @@ packages:
    resolution: {integrity: sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==}
    dev: true

-  /@types/prop-types@15.7.8:
-    resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==}
+  /@types/prop-types@15.7.9:
+    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
    dev: true

-  /@types/react-dom@18.2.13:
-    resolution: {integrity: sha512-eJIUv7rPP+EC45uNYp/ThhSpE16k22VJUknt5OLoH9tbXoi8bMhwLf5xRuWMywamNbWzhrSmU7IBJfPup1+3fw==}
+  /@types/react-dom@18.2.14:
+    resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
    dependencies:
-      '@types/react': 18.2.28
+      '@types/react': 18.2.29
    dev: true

-  /@types/react@18.2.28:
-    resolution: {integrity: sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==}
+  /@types/react@18.2.29:
+    resolution: {integrity: sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q==}
    dependencies:
-      '@types/prop-types': 15.7.8
-      '@types/scheduler': 0.16.4
+      '@types/prop-types': 15.7.9
+      '@types/scheduler': 0.16.5
      csstype: 3.1.2
    dev: true

-  /@types/scheduler@0.16.4:
-    resolution: {integrity: sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==}
+  /@types/scheduler@0.16.5:
+    resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
    dev: true

  /@types/semver@7.5.3:
    resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
    dev: true

-  /@types/stylis@4.2.1:
-    resolution: {integrity: sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg==}
+  /@types/stylis@4.2.2:
+    resolution: {integrity: sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==}
    dev: false

  /@typescript-eslint/eslint-plugin@6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2):
@@ -1994,7 +1997,7 @@ packages:
    dependencies:
      '@emotion/is-prop-valid': 1.2.1
      '@emotion/unitless': 0.8.1
-      '@types/stylis': 4.2.1
+      '@types/stylis': 4.2.2
      css-to-react-native: 3.2.0
      csstype: 3.1.2
      postcss: 8.4.31
@@ -1,7 +1,9 @@
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
+import { StyleSheetManager } from 'styled-components';

 // Components
-import AppLayout from './ui/AppLayout';
+import AppLayout from './components/AppLayout';
 import User from './pages/User';
 import Dashboard from './pages/Dashboard';
 import Room from './pages/Room';
@@ -13,19 +15,33 @@ import * as PATH from './constants/path';
 function App() {
  return (
    <>
-      <BrowserRouter>
-        <Routes>
-          <Route element={<AppLayout />}>
-            <Route index element={<Navigate replace to={PATH.USER} />} />
-            <Route path={PATH.DASHBOARD} element={<Dashboard />} />
-            <Route path={PATH.USER} element={<User />} />
-            <Route path={PATH.ROOM} element={<Room />} />
-          </Route>
-          <Route path={PATH.OTHER_PATH} element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+        <BrowserRouter>
+          <Routes>
+            <Route element={<AppLayout />}>
+              <Route index element={<Navigate replace to={PATH.USER} />} />
+              <Route path={PATH.DASHBOARD} element={<Dashboard />} />
+              <Route path={PATH.USER} element={<User />} />
+              <Route path={PATH.ROOM} element={<Room />} />
+            </Route>
+            <Route path={PATH.OTHER_PATH} element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </StyleSheetManager>
    </>
  );
 }

+// Fix the error 'React does not recognize the "someProp" prop on a DOM element'. Link ref: https://github.com/orgs/styled-components/discussions/4136
+
+// This implements the default behavior from styled-components v5
+function shouldForwardProp(propName: string, target: unknown) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
 export default App;
@@ -5,7 +5,7 @@ const ButtonIcon = styled.button`
  border: none;
  padding: 8px;
  transition: all 0.2s;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);

  &:hover {
    background-color: var(--hover-background-color);
@@ -14,6 +14,8 @@ const StyledAppLayout = styled.div`

 const Main = styled.main`
  border: 1px solid var(--border-color);
+
+  overflow: scroll;
 `;

 const AppLayout = () => {
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { IoPersonCircleOutline } from 'react-icons/io5';
-import { HiOutlineLogout } from 'react-icons/hi';

 // Components
-import ButtonIcon from './ButtonIcon';
+import { IoPersonCircleOutline } from 'react-icons/io5';
+import { HiOutlineLogout } from 'react-icons/hi';
+import ButtonIcon from '../commons/styles/ButtonIcon';

 const StyledHeaderMenu = styled.ul`
  display: flex;
@@ -1,5 +1,7 @@
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
+
+// Components
 import { MdSpaceDashboard } from 'react-icons/md';
 import { HiUsers } from 'react-icons/hi2';
 import { BsHouseDoorFill } from 'react-icons/bs';
@@ -16,7 +18,7 @@ const StyledNavLink = styled(NavLink)`
  align-items: center;
  gap: 20px;
  padding: 15px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
  transition: all 0.3s;

  & svg {
@@ -11,7 +11,7 @@ const StyledSidebar = styled.aside`
 `;

 const Heading = styled.h1`
-  font-size: 30px;
+  font-size: var(--fs-md);
  text-transform: uppercase;
  text-align: center;
  color: var(--primary-color);
@@ -1,7 +1,18 @@
 :root {
  --primary-color: #0010ba;
+  --header-table-color: #ebebeb;
  --border-color: #8c8c8c;
-  --radius-sm: 10px;
  --hover-background-color: #f3f4f6;
  --light-text: #fff;
+  --dark-text: #787878;
+
+  --radius-sm: 5px;
+  --radius-md: 10px;
+
+  --shadow-sm: 0px 10px 20px rgba(0, 0, 0, 0.2);
+
+  --fs-md: 30px;
+  --fs-lg: 40px;
+  --fs-sm: 18px;
+  --fs-sm-x: 16px;
 }
@@ -0,0 +1,6 @@
+{
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "dest": "/index.html" }
+  ]
+}