integrated typescript

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/CVS": true,
+        "**/.DS_Store": true,
+        "**/Thumbs.db": true,
+        "**/node_modules": true
+    }
+}

package.json

@@ -17,7 +17,7 @@
     "web-vitals": "^3.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -39,5 +39,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.5",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "typescript": "^4.9.4"
   }
 }

src/components/MenuItems.jsx

@@ -1,12 +1,11 @@
 import { useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
-import { Box } from "@chakra-ui/react";
+import { Box, Link } from "@chakra-ui/react";
 import Dropdown from "./Dropdown";
+import { RANGE } from "utils";
 
 const MenuItems = ({ items, depthLevel }) => {
    const [dropdown, setDropdown] = useState(false);
-
-   let ref = useRef();
+   const ref = useRef();
 
    useEffect(() => {
       const handler = (event) => {
@@ -24,11 +23,11 @@ const MenuItems = ({ items, depthLevel }) => {
    }, [dropdown]);
 
    const onMouseEnter = () => {
-      window.innerWidth > 960 && setDropdown(true);
+      window.innerWidth > RANGE && setDropdown(true);
    };
 
    const onMouseLeave = () => {
-      window.innerWidth > 960 && setDropdown(false);
+      window.innerWidth > RANGE && setDropdown(false);
    };
 
    const closeDropdown = () => {
@@ -43,61 +42,23 @@ const MenuItems = ({ items, depthLevel }) => {
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}
          onClick={closeDropdown}
-         px={2}
+         px={13}
       >
          {items.url && items.submenu ? (
             <>
-               <Box
-                  as="button"
-                  display="flex"
-                  alignItems="center"
-                  color="inherit"
-                  fontSize="inherit"
-                  border="none"
-                  backgroundColor="transparent"
-                  cursor="pointer"
-                  width="100%"
-                  onClick={() => setDropdown((prev) => !prev)}
-                  _hover={{
-                     bg: "#f2f2f2",
-                  }}
-
-                  // aria-haspopup="menu"
-                  // aria-expanded={dropdown ? "true" : "false"}
-               >
-                  {window.innerWidth < 960 && depthLevel === 0 ? (
+               <Box _hover={{ bg: "gray.300" }}>
+                  {window.innerWidth < RANGE && depthLevel === 0 ? (
                      items.title
                   ) : (
-                     <Link
-                        to={items.url}
-                        style={{
-                           display: "block",
-                           fontSize: "inherit",
-                           color: "inherit",
-                           textDecoration: "none",
-                        }}
-                     >
-                        {items.title}
-                     </Link>
+                     <Link to={items.url}>{items.title}</Link>
                   )}
 
                   {depthLevel > 0 &&
-                  window.innerWidth < 960 ? null : depthLevel > 0 &&
-                    window.innerWidth > 960 ? (
+                  window.innerWidth < RANGE ? null : depthLevel > 0 &&
+                    window.innerWidth > RANGE ? (
                      <span>&raquo;</span>
                   ) : (
-                     <Box
-                        as="span"
-                        _after={{
-                           content: `""`,
-                           display: "inline-block",
-                           marginLeft: "0.28em",
-                           verticalAlign: "0.09em",
-                           borderTop: "0.42em solid",
-                           borderRight: "0.32em solid transparent",
-                           borderLeft: "0.32em solid transparent",
-                        }}
-                     />
+                     <Box />
                   )}
                </Box>
                <Dropdown
@@ -109,21 +70,15 @@ const MenuItems = ({ items, depthLevel }) => {
          ) : !items.url && items.submenu ? (
             <>
                <Box
-                  as="button"
-                  display="flex"
                   alignItems="center"
-                  color="inherit"
-                  fontSize="inherit"
                   border="none"
                   backgroundColor="transparent"
                   cursor="pointer"
                   width="100%"
                   _hover={{
-                     bg: "#f2f2f2",
+                     bg: "gray.300",
                   }}
                   onClick={() => setDropdown((prev) => !prev)}
-                  // aria-expanded={dropdown ? "true" : "false"}
-                  // aria-haspopup="menu"
                >
                   {items.title}{" "}
                   {depthLevel > 0 ? (
@@ -151,12 +106,14 @@ const MenuItems = ({ items, depthLevel }) => {
             </>
          ) : (
             <Link
-               to={items.url}
-               style={{
-                  display: "block",
-                  fontSize: "inherit",
-                  color: "inherit",
-                  textDecoration: "none",
+               href={items.url}
+               display="block"
+               fontSize="inherit"
+               color="inherit"
+               textDecoration="none"
+               cursor="pointer"
+               _hover={{
+                  bg: "gray.300",
                }}
             >
                {items.title}

src/index.js → src/index.tsx

@@ -14,7 +14,9 @@ const colors = {
    },
 };
 const theme = extendTheme({ colors });
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(
+   document.getElementById("root") as HTMLAreaElement
+);
 root.render(
    <ChakraProvider theme={theme}>
       <BrowserRouter>

src/utils/constant.ts

@@ -0,0 +1 @@
+export const RANGE = 960;

src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./constant";

tsconfig.json

@@ -0,0 +1,31 @@
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"lib": [
+			"DOM",
+			"ES6",
+			"DOM.Iterable",
+			"ScriptHost",
+			"ES2016.Array.Include"
+		],
+		"baseUrl": "./src",
+		"allowJs": true,
+		"strictNullChecks": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"noImplicitAny": false,
+		"jsx": "react-jsx"
+	},
+	"typeRoots": ["./node_modules/@types", "./index.d.ts"],
+	"include": ["src/**/*", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}