♻️ Refactor Code to support Chakra v3

Signed-off-by: Muhammed Hussein Karimi <info@karimi.dev>

.node-version

@@ -1 +1 @@
-v20.14.0
+v22.8.0

.nvmrc

@@ -1 +1 @@
-v20.14.0
+v22.8.0

Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM node:20.14.0-bookworm AS base
+FROM node:22-bookworm AS base
 
 # Install dependencies only when needed
 FROM base AS deps

README.md

@@ -27,7 +27,7 @@ Check out [deployments](./deployments/README.md)
 
 * [ ] Pagination
 * [ ] Save credentials in browser
-* [ ] Creating and Using more reusable components (specially Modals in page)
+* [ ] Creating and Using more reusable components (specially Dialogs in page)
 * [x] More Docs (Screenshot, Deployment)
 
 ## Contributing

next.config.mjs

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "standalone"
+  output: "standalone",
+  experimental: {
+    optimizePackageImports: ["@chakra-ui/react"],
+  },
 };
 
 export default nextConfig;

package.json

@@ -9,25 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.590.0",
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/next-js": "^2.2.0",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "framer-motion": "^11.2.10",
+    "@aws-sdk/client-s3": "^3.693.0",
+    "@chakra-ui/react": "^3.1.2",
+    "@emotion/react": "^11.13.3",
     "moment": "^2.30.1",
-    "next": "14.2.3",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-icons": "^5.2.1"
+    "next": "15.0.3",
+    "next-themes": "^0.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3",
-    "typescript": "^5"
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "15.0.3",
+    "typescript": "^5.6.3"
   }
 }

src/app/deleteObject.tsx

@@ -1,90 +1,92 @@
+import { Field } from "@/components/ui/field"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Toaster, toaster } from "@/components/ui/toaster"
 import {
-  AlertDialog,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogBody,
-  AlertDialogFooter,
   Button,
   Input,
-  FormLabel,
-  FormControl,
   Code,
-  useToast
 } from "@chakra-ui/react";
 import { setValueFromEvent } from "./utils";
 import { useState } from "react";
 
 const DeleteObject = ({
-  isOpen,
+  open,
   onOpen,
   onClose,
   cancelRef,
   objectKey,
   action
 }: {
-  isOpen: boolean;
+  open: boolean;
   onOpen: () => void;
   onClose: () => void;
   cancelRef: React.MutableRefObject<any>;
   action: () => void;
   objectKey: string;
 }) => {
   const [key, setKey] = useState("");
-  const toast = useToast();
 
   return (
-    <AlertDialog
-      isOpen={isOpen}
-      leastDestructiveRef={cancelRef}
-      onClose={onClose}
-    >
-      <AlertDialogOverlay>
-        <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+    <>
+      <Toaster />
+
+      <DialogRoot
+        open={open}
+        onExitComplete={onClose}
+        role="alertdialog"
+      >
+        <DialogContent>
+          <DialogHeader fontSize="lg" fontWeight="bold">
             Delete Object
-          </AlertDialogHeader>
+          </DialogHeader>
 
-          <AlertDialogBody>
+          <DialogBody>
             Are you sure? You will not be able to undo this action afterwards.
             Enter Object Key <Code>{objectKey}</Code> to confirm object removal
-            <FormControl mt={4}>
-              <FormLabel>Object Key</FormLabel>
+            <Field label="Object Key" mt={4}>
               <Input
                 onChange={(ev) => setValueFromEvent(ev, setKey)}
                 placeholder="Object Key"
               />
-            </FormControl>
-          </AlertDialogBody>
+            </Field>
+          </DialogBody>
 
-          <AlertDialogFooter>
+          <DialogFooter>
             <Button ref={cancelRef} onClick={onClose}>
               Cancel
             </Button>
             <Button
-              colorScheme="red"
+              colorPalette="red"
               onClick={() => {
                 if (key === objectKey) {
                   action();
                   onClose();
                 } else {
-                  toast({
+                  toaster.create({
                     title: "Wrong Input",
                     description: "Input must be the same as object key",
-                    status: "error",
+                    type: "error",
                     duration: 5000,
-                    isClosable: true
                   });
                 }
               }}
               ml={3}
             >
               Delete
             </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialogOverlay>
-    </AlertDialog>
+          </DialogFooter>
+        </DialogContent>
+      </DialogRoot>
+    </>
   );
 };
 

src/app/header.tsx

@@ -4,36 +4,36 @@ import {
   Stack,
   Heading,
   Flex,
-  Button,
   useDisclosure,
-  useColorMode,
   IconButton,
   Icon
 } from "@chakra-ui/react";
-import { HamburgerIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
-import LoginModal from "./loginModal";
+import { IoMoon, IoSunnyOutline } from "react-icons/io5";
+import { RxHamburgerMenu } from "react-icons/rx";
+import LoginDialog from "./loginDialog";
 import { S3Client } from "@aws-sdk/client-s3";
 import { MdStorage } from "react-icons/md";
-
+import { useTheme } from 'next-themes'
+import { Button } from "@/components/ui/button"
 const Header = ({
   onLogin,
   user
 }: {
   onLogin: ({ client, bucket }: { client: S3Client; bucket: string }) => void;
   user: S3Client | null;
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { open, onOpen, onClose } = useDisclosure();
   const [loading, setLoading] = useState(false);
   const {
-    isOpen: isModalOpen,
-    onOpen: onModalOpen,
-    onClose: onModalClose
+    open: isDialogOpen,
+    onOpen: onDialogOpen,
+    onClose: onDialogClose
   } = useDisclosure();
-  const handleToggle = () => (isOpen ? onClose() : onOpen());
-  const { colorMode, toggleColorMode } = useColorMode();
+  const handleToggle = () => (open ? onClose() : onOpen());
+  const { theme, setTheme } = useTheme();
   const onLoginFormOpen = () => {
     setLoading(true);
-    onModalOpen();
+    onDialogOpen();
   };
   return (
     <Flex
@@ -50,33 +50,32 @@ const Header = ({
       </Flex>
 
       <Box display={{ base: "block", md: "none" }} onClick={handleToggle}>
-        <HamburgerIcon />
+        <RxHamburgerMenu />
       </Box>
       <Stack
         direction={{ base: "column", md: "row" }}
-        display={{ base: isOpen ? "block" : "none", md: "flex" }}
+        display={{ base: open ? "block" : "none", md: "flex" }}
         width={{ base: "full", md: "auto" }}
         mt={{ base: 4, md: 0 }}
       >
         <Button
           disabled={user !== null}
-          isLoading={loading}
+          loading={loading}
           onClick={onLoginFormOpen}
         >
           {user ? "Logged in" : "Login"}
         </Button>
         <IconButton
-          onClick={toggleColorMode}
+          onClick={() => setTheme(theme === "light" ? "light" : "dark")}
           variant={"ghost"}
           aria-label="Color Mode"
-          icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
-        />
-        <LoginModal
+        >{theme === "light" ? <IoMoon /> : <IoSunnyOutline />}</IconButton>
+        <LoginDialog
           onLogin={onLogin}
-          isOpen={isModalOpen}
+          open={isDialogOpen}
           onOpen={onLoginFormOpen}
           onClose={() => {
-            onModalClose();
+            onDialogClose();
             setTimeout(() => setLoading(false), 1500);
           }}
         />