From 6e52e2634fe6bb3253b3c848b8977acbd1244ef0 Mon Sep 17 00:00:00 2001
From: Ali Josheghani <ali.josheghani2005@gmail.com>
Date: Mon, 20 May 2024 22:25:03 +0330
Subject: [PATCH] feat : add types for all props components , add scroll css
 styles

---
 package-lock.json                             |  7 ++++
 package.json                                  |  1 +
 src/components/alert/Alert.tsx                | 20 +++++++---
 src/{assets => components}/button/index.tsx   |  4 +-
 .../header/components/navbar/MobileMenu.tsx   |  3 +-
 .../components/navbar/MobileMenuButton.tsx    |  4 +-
 .../header/components/navbar/Navbar.tsx       |  9 +++--
 .../header/components/navbar/NavbarLink.tsx   |  5 ++-
 src/index.css                                 | 37 +++++++++++++++++++
 src/types/alertProps.d.ts                     |  7 ++++
 src/types/buttonProps.d.ts                    |  5 +++
 src/types/mobileMenu.d.ts                     |  7 ++++
 src/types/mobileMenuButton.d.ts               |  4 ++
 src/types/navbarLink.d.ts                     | 12 ++++++
 src/types/routes.d.ts                         |  5 +++
 15 files changed, 116 insertions(+), 14 deletions(-)
 rename src/{assets => components}/button/index.tsx (70%)
 create mode 100644 src/types/alertProps.d.ts
 create mode 100644 src/types/buttonProps.d.ts
 create mode 100644 src/types/mobileMenu.d.ts
 create mode 100644 src/types/mobileMenuButton.d.ts
 create mode 100644 src/types/navbarLink.d.ts
 create mode 100644 src/types/routes.d.ts

diff --git a/package-lock.json b/package-lock.json
index 64f83b0..9035eb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react-router-dom": "^6.23.1"
       },
       "devDependencies": {
+        "@types/nprogress": "^0.2.3",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -1317,6 +1318,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
diff --git a/package.json b/package.json
index eb27ea8..3101b22 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index a366b20..5123bd5 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,5 +1,16 @@
-const Alert = ({ children, type, message }) => {
-  const types = {
+import { AlertProps, MessageType } from "../../types/alertProps";
+
+const Alert = ({ children, type = "info", message }: AlertProps) => {
+  const types: Record<
+    MessageType,
+    {
+      text: string;
+      bg: string;
+      darkText: string;
+      darkBg: string;
+      iconPath: string;
+    }
+  > = {
     info: {
       text: "text-blue-800",
       bg: "bg-blue-50",
@@ -42,8 +53,7 @@ const Alert = ({ children, type, message }) => {
     },
   };
 
-  const { text, bg, darkText, darkBg, iconPath, title } =
-    types[type] || types.info;
+  const { text, bg, darkText, darkBg, iconPath } = types[type];
 
   return (
     <div
@@ -59,7 +69,7 @@ const Alert = ({ children, type, message }) => {
       >
         <path d={iconPath} />
       </svg>
-      <span className="sr-only">Info</span>
+      <span className="sr-only">{children}</span>
       <div>
         <span className="font-medium">{children}</span> {message}
       </div>
diff --git a/src/assets/button/index.tsx b/src/components/button/index.tsx
similarity index 70%
rename from src/assets/button/index.tsx
rename to src/components/button/index.tsx
index f0d005a..4b7d807 100644
--- a/src/assets/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -1,4 +1,6 @@
-function Button({ children, onClick, extra }) {
+import { ButtonProps } from "../../types/buttonProps";
+
+function Button({ children, onClick, extra }: ButtonProps) {
   return (
     <button
       className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${extra}`}
diff --git a/src/components/header/components/navbar/MobileMenu.tsx b/src/components/header/components/navbar/MobileMenu.tsx
index 81d0ece..d7ddba9 100644
--- a/src/components/header/components/navbar/MobileMenu.tsx
+++ b/src/components/header/components/navbar/MobileMenu.tsx
@@ -1,6 +1,7 @@
 // src/components/Header/Navbar/MobileMenu.tsx
+import { MobileMenuProps } from "../../../../types/mobileMenu";
 import NavbarLink from "./NavbarLink";
-const MobileMenu = ({ isOpen, toggleMenu, routes }) => {
+const MobileMenu = ({ isOpen, toggleMenu, routes }: MobileMenuProps) => {
   return (
     <>
       <div
diff --git a/src/components/header/components/navbar/MobileMenuButton.tsx b/src/components/header/components/navbar/MobileMenuButton.tsx
index 1502a73..f6f8a9f 100644
--- a/src/components/header/components/navbar/MobileMenuButton.tsx
+++ b/src/components/header/components/navbar/MobileMenuButton.tsx
@@ -1,4 +1,6 @@
-const MobileMenuButton = ({ isOpen, onClick }) => {
+import { MobileMenuButtonProps } from "../../../../types/mobileMenuButton";
+
+const MobileMenuButton = ({ isOpen, onClick }: MobileMenuButtonProps) => {
   return (
     <button
       onClick={onClick}
diff --git a/src/components/header/components/navbar/Navbar.tsx b/src/components/header/components/navbar/Navbar.tsx
index 982ebf0..410b2b6 100644
--- a/src/components/header/components/navbar/Navbar.tsx
+++ b/src/components/header/components/navbar/Navbar.tsx
@@ -1,16 +1,17 @@
 // src/components/Header/Navbar/Navbar.tsx
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import MobileMenuButton from "./MobileMenuButton";
 import MobileMenu from "./MobileMenu";
 import NavbarLink from "./NavbarLink";
 import router from "../../../../routes/routes";
-import Button from "../../../../assets/button";
+import Button from "../../../button";
 import { Link } from "react-router-dom";
+import { Route } from "../../../../types/routes";
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const [routes, setRoutes] = useState(router);
+  const [routes] = useState<Route[]>(router);
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
diff --git a/src/components/header/components/navbar/NavbarLink.tsx b/src/components/header/components/navbar/NavbarLink.tsx
index 78793a9..4e686c7 100644
--- a/src/components/header/components/navbar/NavbarLink.tsx
+++ b/src/components/header/components/navbar/NavbarLink.tsx
@@ -1,10 +1,11 @@
 import { NavLink } from "react-router-dom";
+import { NavbarLinkProps, NavData } from "../../../../types/navbarLink";
 
-const NavbarLink = ({ to, children, onClick }) => {
+const NavbarLink = ({ to, children, onClick }: NavbarLinkProps) => {
   return (
     <NavLink
       to={to}
-      className={(navData) =>
+      className={(navData: NavData) =>
         navData.isActive
           ? "block px-2 mx-3 py-2 text-base font-medium text-yellow-600 border-b-2 border-yellow-600"
           : "block px-2 mx-3 py-2 rounded-md text-base font-medium text-white"
diff --git a/src/index.css b/src/index.css
index 75027b8..9243c30 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,4 +32,41 @@
     @apply backdrop-blur-[19px] backdrop-saturate-[200%] bg-[rgba(17,25,40,0.25)] rounded-xl;
     -webkit-backdrop-filter: blur(19px) saturate(200%);
   }
+  /* برای مرورگرهای WebKit (مثل Chrome و Safari) */
+  ::-webkit-scrollbar {
+    width: 12px; /* عرض نوار اسکرول */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent; /* پس‌زمینه نوار اسکرول */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-yellow-600; /* رنگ نوار اسکرول */
+    border-radius: 20px; /* گرد کردن نوار اسکرول */
+    border: 3px solid transparent; /* ایجاد فضای خالی در اطراف نوار اسکرول */
+    background-clip: content-box; /* اطمینان از حفظ فضای خالی */
+  }
+
+  /* برای مرورگر Firefox */
+  * {
+    scrollbar-width: thin; /* عرض نوار اسکرول */
+    scrollbar-color: #ca8a04 transparent; /* رنگ نوار اسکرول و پس‌زمینه */
+  }
+
+  /* برای مرورگرهای مبتنی بر Blink (مثل Edge) */
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ca8a04;
+    border-radius: 20px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
 }
diff --git a/src/types/alertProps.d.ts b/src/types/alertProps.d.ts
new file mode 100644
index 0000000..d00879d
--- /dev/null
+++ b/src/types/alertProps.d.ts
@@ -0,0 +1,7 @@
+export type MessageType = "info" | "danger" | "success" | "warning" | "dark";
+
+export interface AlertProps {
+  children: React.ReactNode;
+  type?: "info" | "danger" | "success" | "warning" | "dark";
+  message: string;
+}
diff --git a/src/types/buttonProps.d.ts b/src/types/buttonProps.d.ts
new file mode 100644
index 0000000..628f0d9
--- /dev/null
+++ b/src/types/buttonProps.d.ts
@@ -0,0 +1,5 @@
+export interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  extra?: React.CSSProperties;
+}
diff --git a/src/types/mobileMenu.d.ts b/src/types/mobileMenu.d.ts
new file mode 100644
index 0000000..f8a91eb
--- /dev/null
+++ b/src/types/mobileMenu.d.ts
@@ -0,0 +1,7 @@
+import { Route } from "./routes";
+
+export interface MobileMenuProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+  routes: Route[];
+}
diff --git a/src/types/mobileMenuButton.d.ts b/src/types/mobileMenuButton.d.ts
new file mode 100644
index 0000000..d085218
--- /dev/null
+++ b/src/types/mobileMenuButton.d.ts
@@ -0,0 +1,4 @@
+export interface MobileMenuButtonProps {
+  isOpen: boolean;
+  onClick: () => void;
+}
diff --git a/src/types/navbarLink.d.ts b/src/types/navbarLink.d.ts
new file mode 100644
index 0000000..0cc68c0
--- /dev/null
+++ b/src/types/navbarLink.d.ts
@@ -0,0 +1,12 @@
+import { NavLinkProps } from "react-router-dom";
+
+export interface NavbarLinkProps {
+  to: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface NavData {
+  isActive: boolean;
+  isPending: boolean;
+}
diff --git a/src/types/routes.d.ts b/src/types/routes.d.ts
new file mode 100644
index 0000000..676976a
--- /dev/null
+++ b/src/types/routes.d.ts
@@ -0,0 +1,5 @@
+export interface Route {
+  id: number;
+  path: string;
+  name: string;
+}