@bigbinary/neeto-molecules 3.2.19 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.2.19",
+  "version": "3.3.0",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -725,6 +725,20 @@
       "checkboxLabel": "Start at",
       "tooltipContent": "Copy link",
       "successTooltipContent": "Link copied"
+    },
+    "fileUpload": {
+      "filesDropzone": {
+        "errors": {
+          "fileTooLarge": "The file '{{fileName, anyCase}}' is larger than {{maxSize, anyCase}}",
+          "fileInvalidType": "Currently the file type {{fileType}} is not permitted.",
+          "tooManyFiles": "You can only upload {{maxFiles}} file.",
+          "defaultError": "Something went wrong while uploading {{fileName, anyCase}}"
+        },
+        "maxFileSize": "Maximum allowed size is {{size}} {{unit, anyCase}}",
+        "allowedFileTypes": "Allowed file types are {{types}}",
+        "oneFileAllowed": "Please upload only 1 file",
+        "chooseFileOrDragHere": "Choose file or drag here"
+      }
     }
   }
 }

package/types/FileUpload.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+interface FileObject {
+  url: string;
+  size?: number;
+  name: string;
+}
+export interface FileUploadProps {
+  className?: string;
+  allowedFileTypes?: string;
+  multipleFilesAllowed?: boolean;
+  maxFileSize?: number;
+  isPreview?: boolean;
+  minFileSize?: number;
+  files?: FileObject[];
+  onChange?: (files: FileObject[] | []) => void;
+  error?: string;
+  setError?: (error: string) => void;
+  setTouched?: (touched: boolean) => void;
+}
+;
+export interface FormikFileUploadProps extends FileUploadProps {
+  name: string;
+}
+;
+export
+/**
+ *
+ * The FileUpload component provides an interface for uploading files with drag-and-drop support, real-time previews, and comprehensive error handling.
+ *
+ * It allows users to configure file types, size limits, and whether multiple files can be uploaded simultaneously.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import { FileUpload } from "@bigbinary/neeto-molecules/FileUpload";
+ * 
+ * const FileUploadComponent = () => {
+ *   const [files, setFiles] = useState([]);
+ *   const [error, setError] = useState("");
+ * 
+ *   const handleFileChange = (updatedFiles) => {
+ *     // Perform any custom logic here
+ *     setFiles(updatedFiles);
+ *   };
+ * 
+ *   return (
+ *     <FileUpload
+ *       allowedFileTypes="image/jpeg, image/png"
+ *       multipleFilesAllowed={true}
+ *       maxFileSize={5} // in MB
+ *       minFileSize={1} // in MB
+ *       files={files}
+ *       onChange={handleFileChange}
+ *       error={error}
+ *       setError={setError}
+ *     />
+ *   );
+ * };
+ * 
+ * export default FileUploadComponent;
+ * @endexample
+ * The FileUpload component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import { FormikFileUpload } from "@bigbinary/neeto-molecules/FileUpload";
+ * import { Form } from "@bigbinary/neetoui/formik";
+ * 
+ * const App = () => (
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { files: [] },
+ *         onSubmit: handleSubmit,
+ *       }}
+ *     >
+ *       <FormikFileUpload name="files" />
+ *     </Form>
+ *   );
+ * );
+ * @endexample
+*/
+const FileUpload: React.FC<FileUploadProps>;
+export const FormikFileUpload: React.FC<FormikFileUploadProps>;