feat(design-system): add upload file (#5)

package.json

@@ -37,12 +37,14 @@
     "next-sitemap": "^4.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.1.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "universal-cookie": "^7.1.0",
+    "yet-another-react-lightbox": "^3.21.6",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

src/app/(auth)/signup/page.tsx

@@ -2,6 +2,7 @@
 
 import Button from "@/components/buttons/Button";
 import Input from "@/components/form/Input";
+import UploadFile from "@/components/form/UploadFile";
 import NextImage from "@/components/NextImage";
 import Typography from "@/components/Typography";
 import api from "@/lib/api";
@@ -18,7 +19,7 @@ type SignUpRequest = {
   username: string;
   email: string;
   password: string;
-  ttd: string;
+  ttd: File | null;
 };
 
 export default function SignUp() {
@@ -35,7 +36,30 @@ export default function SignUp() {
     SignUpRequest
   >({
     mutationFn: async (data: SignUpRequest) => {
-      return await api.post("/users/signup", data);
+      // return await api.post("/users/signup", data);
+      //   return await api.post("/users/signup", data, {
+      //     headers: {
+      //       "Content-Type": "multipart/form-data",
+      //     },
+      //   });
+      // },
+      const formData = new FormData();
+
+      // Append form fields to the FormData
+      formData.append("name", data.name);
+      formData.append("username", data.username);
+      formData.append("email", data.email);
+      formData.append("password", data.password);
+
+      if (data.ttd) {
+        formData.append("ttd", data.ttd);
+      }
+
+      return await api.post("/users/signup", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
     },
     onSuccess: (_, variables) => {
       const { username } = variables;
@@ -116,13 +140,15 @@ export default function SignUp() {
                   },
                 }}
               />
-              <Input
-                id="ttd"
-                label="Upload Tanda Tangan (.png)"
-                placeholder="Tanda Tangan"
-                className="h-[250px]"
-                validation={{ required: "Tanda tangan harus diisi" }}
-              />
+              <div>
+                <UploadFile
+                  label="Upload File"
+                  id="image"
+                  maxSize={2000000}
+                  helperText="Format file .jpeg .jpg .png .pdf, maksimum 2 MB"
+                  validation={{ required: "This field is required" }}
+                />
+              </div>
             </div>
             <div className="w-full h-full flex flex-col items-center gap-3 max-md:gap-1">
               <Button

src/app/sandbox/form/page.tsx

@@ -1,24 +1,81 @@
 "use client";
 
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 
-import Input from "@/components/form/Input";
+import UploadFile from "@/components/form/UploadFile";
+import Button from "@/components/buttons/Button";
+import { ApiError } from "@/types/api";
+import { useMutation } from "@tanstack/react-query";
+import api from "@/lib/api";
+import toast from "react-hot-toast";
+import { Input } from "@nextui-org/react";
 
 export default function FormSandbox() {
   const methods = useForm();
 
+  const { handleSubmit } = methods;
+
+  const { mutate: handleImageUpload } = useMutation<
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    any,
+    ApiError,
+    FormData
+  >({
+    mutationFn: async (data) => {
+      await api
+        .post("/users/file", data, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((res) => {
+          // const data = res.data.data;
+          toast.success("File uploaded!");
+          return res;
+        });
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const onSubmit: SubmitHandler<any> = (data) => {
+    const formData = new FormData();
+
+    if (data.image && data.image[0]) {
+      formData.append("file", data.image[0]);
+    }
+
+    handleImageUpload(formData);
+  };
+
   return (
     <main className="flex min-h-screen items-center justify-center bg-white">
       <div className="flex flex-col">
         <FormProvider {...methods}>
-          <form className="w-[600px] flex flex-col gap-4">
+          <form
+            className="w-[600px] flex flex-col gap-4"
+            onSubmit={handleSubmit(onSubmit)}
+          >
             <Input id="Test" label="Username Tujuan" placeholder="Username" />
             <Input
               id="Test"
               label="Username Tujuan"
               placeholder="Username"
               readOnly
             />
+            <div>
+              <UploadFile
+                label="Upload File"
+                id="image"
+                maxSize={2000000}
+                helperText="Format file .jpeg .jpg .png .pdf, maksimum 2 MB"
+                validation={{ required: "This field is required" }}
+              />
+            </div>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
           </form>
         </FormProvider>
       </div>

src/components/form/HelperText.tsx

@@ -13,12 +13,10 @@ export default function HelperText({
   return (
     <div className="flex space-x-1">
       <Typography
-        as="p"
-        font="Inter"
         weight="regular"
-        variant="p"
+        variant="sm"
         className={clsxm(
-          "text-xs !leading-tight text-gray-900",
+          "text-sm !leading-tight text-gray-900",
           helperTextClassName,
         )}
       >