sprint-asia-custom-component 0.1.147 → 0.1.149

package/dist/index.js

@@ -224,7 +224,8 @@
     icon = null,
     positionIcon = "left",
     //left, right // Position
-    onClick = () => {}
+    onClick = () => {},
+    isSubmit = false
   }) => {
     const [isPressed, setIsPressed] = React.useState(false);
     const handleButtonPress = () => {
@@ -238,7 +239,7 @@
     };
     return /*#__PURE__*/React__default["default"].createElement("button", {
       className: `
-            ${isPressed && isActive ? 'bg-primary700 text-white' : isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default'} 
+            ${isPressed && isActive ? "bg-primary700 text-white" : isActive ? "bg-primary500 hover:bg-primary600 text-white cursor-pointer" : "bg-neutral30 text-neutral80 cursor-default"} 
             ${type === "full" && "w-full"}
             ${size === "small" && "text-sm h-7"}
             ${size === "medium" && "text-md h-8"}
@@ -253,7 +254,8 @@
       onMouseDown: handleButtonPress,
       onMouseUp: handleButtonRelease,
       onTouchStart: handleButtonPress,
-      onTouchEnd: handleButtonRelease
+      onTouchEnd: handleButtonRelease,
+      type: isSubmit ? "submit" : "button"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center"
     }, isIconVisible && positionIcon == "left" && icon && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -26085,7 +26087,8 @@
     maxFiles = 1,
     selectedFile,
     error = "",
-    disabled
+    disabled,
+    acceptExcel = false
   }) => {
     const [errorMessage, setErrorMessage] = React.useState("");
     const onDropRejected = rejectedFiles => {
@@ -26093,20 +26096,31 @@
       if (file.errors[0]?.code === "file-too-large") {
         setErrorMessage("Your file is too large. Max file size is 5 MB");
       } else if (file.errors[0]?.code === "file-invalid-type") {
-        setErrorMessage("File format not supported. Please try again with PNG, JPEG, JPG, or PDF file within 5 MB");
+        setErrorMessage(excelAcceptedFiles ? "File format not supported. Please try again with XLSX, XLS, CSV, or TSV file within 5 MB" : "File format not supported. Please try again with PNG, JPEG, JPG, or PDF file within 5 MB");
       }
     };
+
+    // Default file types
+    const defaultAcceptedFiles = {
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+      "application/pdf": [".pdf"]
+    };
+
+    // Additional file types
+    const excelAcceptedFiles = {
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+      "application/vnd.ms-excel": [".xls"],
+      "text/csv": [".csv"],
+      "text/tab-separated-values": [".tsv"]
+    };
     const {
       getRootProps,
       getInputProps
     } = useDropzone({
       onDrop,
       maxFiles,
-      accept: {
-        "image/jpeg": [".jpeg", ".jpg"],
-        "image/png": [".png"],
-        "application/pdf": [".pdf"]
-      },
+      accept: acceptExcel ? excelAcceptedFiles : defaultAcceptedFiles,
       noKeyboard: true,
       maxSize: 5242881,
       onDropRejected,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.147",
+  "version": "0.1.149",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/button/primarybutton/index.js

@@ -1,33 +1,40 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const PrimaryButton = ({
-    title = "Button",
-    type = "wrap",
-    isActive = true,
-    size = "large",
-    isIconVisible = false,
-    icon = null,
-    positionIcon = "left", //left, right // Position
-    onClick = () => {}
+  title = "Button",
+  type = "wrap",
+  isActive = true,
+  size = "large",
+  isIconVisible = false,
+  icon = null,
+  positionIcon = "left", //left, right // Position
+  onClick = () => {},
+  isSubmit = false,
 }) => {
-    const [isPressed, setIsPressed] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
 
-    const handleButtonPress = () => {
-        setIsPressed(true);
-    };
+  const handleButtonPress = () => {
+    setIsPressed(true);
+  };
 
-    const handleButtonRelease = () => {
-        setIsPressed(false);
-    };
+  const handleButtonRelease = () => {
+    setIsPressed(false);
+  };
 
-    const handleClick = (e) => {
-        onClick(e);
-    };
+  const handleClick = (e) => {
+    onClick(e);
+  };
 
   return (
     <button
-        className={`
-            ${(isPressed && isActive) ? 'bg-primary700 text-white' : (isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default')} 
+      className={`
+            ${
+              isPressed && isActive
+                ? "bg-primary700 text-white"
+                : isActive
+                ? "bg-primary500 hover:bg-primary600 text-white cursor-pointer"
+                : "bg-neutral30 text-neutral80 cursor-default"
+            } 
             ${type === "full" && "w-full"}
             ${size === "small" && "text-sm h-7"}
             ${size === "medium" && "text-md h-8"}
@@ -36,26 +43,22 @@ const PrimaryButton = ({
             ${size === "extra very large" && "text-2xl h-14"}
             ${size === "detail division" && "text-sm h-10"}
             ${size === "client approval" && "text-sm h-8"}
-            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
-        }
-        disabled={!isActive}
-        onClick={handleClick}
-        onMouseDown={handleButtonPress}
-        onMouseUp={handleButtonRelease}
-        onTouchStart={handleButtonPress}
-        onTouchEnd={handleButtonRelease}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`}
+      disabled={!isActive}
+      onClick={handleClick}
+      onMouseDown={handleButtonPress}
+      onMouseUp={handleButtonRelease}
+      onTouchStart={handleButtonPress}
+      onTouchEnd={handleButtonRelease}
+      type={isSubmit ? "submit" : "button"}
     >
-        <div className='flex items-center'>
-                {
-                    isIconVisible && positionIcon == "left" && icon && <span className='mr-1'>{icon}</span>
-                }
-                <p>{title}</p>
-                {
-                    isIconVisible && positionIcon == "right" && icon && <span className='ml-1'>{icon}</span>
-                }
-            </div>
+      <div className="flex items-center">
+        {isIconVisible && positionIcon == "left" && icon && <span className="mr-1">{icon}</span>}
+        <p>{title}</p>
+        {isIconVisible && positionIcon == "right" && icon && <span className="ml-1">{icon}</span>}
+      </div>
     </button>
   );
 };
 
-export default PrimaryButton;
+export default PrimaryButton;

package/src/components/dropzone/uploadfile/index.js

@@ -11,6 +11,7 @@ const DropzoneUploadFile = ({
   selectedFile,
   error = "",
   disabled,
+  acceptExcel = false,
 }) => {
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -19,18 +20,33 @@ const DropzoneUploadFile = ({
     if (file.errors[0]?.code === "file-too-large") {
       setErrorMessage("Your file is too large. Max file size is 5 MB");
     } else if (file.errors[0]?.code === "file-invalid-type") {
-      setErrorMessage("File format not supported. Please try again with PNG, JPEG, JPG, or PDF file within 5 MB");
+      setErrorMessage(
+        excelAcceptedFiles
+          ? "File format not supported. Please try again with XLSX, XLS, CSV, or TSV file within 5 MB"
+          : "File format not supported. Please try again with PNG, JPEG, JPG, or PDF file within 5 MB"
+      );
     }
   };
 
+  // Default file types
+  const defaultAcceptedFiles = {
+    "image/jpeg": [".jpeg", ".jpg"],
+    "image/png": [".png"],
+    "application/pdf": [".pdf"],
+  };
+
+  // Additional file types
+  const excelAcceptedFiles = {
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+    "application/vnd.ms-excel": [".xls"],
+    "text/csv": [".csv"],
+    "text/tab-separated-values": [".tsv"],
+  };
+
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
     maxFiles,
-    accept: {
-      "image/jpeg": [".jpeg", ".jpg"],
-      "image/png": [".png"],
-      "application/pdf": [".pdf"],
-    },
+    accept: acceptExcel ? excelAcceptedFiles : defaultAcceptedFiles,
     noKeyboard: true,
     maxSize: 5242881,
     onDropRejected,

package/src/templates/index.js

@@ -1146,7 +1146,14 @@ const Templates = () => {
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Dropzone</p>
-      <DropzoneUploadFile title="Upload Your File" subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB" required={true} />
+      <DropzoneUploadFile
+        title="Upload Your File"
+        subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB"
+        required={true}
+        onDrop={handleFileChange}
+        selectedFile={currentImage}
+        acceptExcel
+      />
 
       <div className="m-9"></div>
       <DropzoneUploadPhoto