@bigbinary/neeto-molecules 3.2.18 → 3.3.0

package/src/translations/en.json

@@ -381,7 +381,13 @@
     "publishBlock": {
       "viewDraftVersion": "View draft version",
       "deleteDraftVersion": "Delete draft version. It'll not impact the published version.",
-      "viewPublishedVersion": "View published version"
+      "viewPublishedVersion": "View published version",
+      "publishLater": "Publish later",
+      "publishNow": "Publish now",
+      "publishSettings": "Publish settings",
+      "dateTime": "Date & Time",
+      "helperText": "This allows you to schedule a publication time.",
+      "timezoneDescription": "Your current timezone is <strong>{{timezone, anyCase}}</strong>. To change it, click <button>here</button>."
     },
     "shareViaLink": {
       "title": "Share link",
@@ -719,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>;

package/types/PublishBlock.d.ts

@@ -1,14 +1,28 @@
 import React from "react";
 import { AlertProps, ButtonProps } from "@bigbinary/neetoui";
+interface PublishPaneProps {
+  isSubmitting: boolean;
+  onPublish: (params: {
+    isPublishLaterChecked: boolean;
+    datetimeValue: Date | null;
+    onClose: () => void;
+  }) => void;
+  onCancel: (params: {
+    onClose: () => void;
+  }) => void;
+  datetime: Date | null;
+}
+interface PublishButtonProps extends ButtonProps {
+  showTooltipWhenDisabled?: boolean;
+  publishPaneProps?: PublishPaneProps;
+}
 interface PublishBlockProps {
   renderDraftButtons: (props: {
     ViewDraftButton: React.FC<ButtonProps>;
     ResetDraftButton: React.FC<ButtonProps>;
   }) => React.ReactNode;
   renderPublishButtons: (props: {
-    PublishButton: React.FC<ButtonProps & {
-      showTooltipWhenDisabled?: boolean;
-    }>;
+    PublishButton: React.FC<PublishButtonProps>;
     PublishPreviewButton: React.FC<ButtonProps>;
   }) => React.ReactNode;
 }
@@ -52,6 +66,51 @@ interface PublishBlockProps {
  *   );
  * };
  * @endexample
+ * To use scheduling of publication:
+ *
+ * @example 
+ *
+ * import PublishBlock from "@bigbinary/neeto-molecules/PublishBlock";
+ * 
+ * const PublishActionBlock = (
+ *   {
+ *     //all variables used in the below example can be passed as props or can be defined in the component itself
+ *   }
+ * ) => {
+ *   const renderDraftButtons = ({ ViewDraftButton, ResetDraftButton }) =>
+ *     !isDraftBlockHidden && (
+ *       <>
+ *         <ViewDraftButton to={previewDraftUrl} />
+ *         {hasDraftVersion && <ResetDraftButton onClick={handleResetDraft} />}
+ *       </>
+ *     );
+ * 
+ *   const renderPublishButtons = ({ PublishButton, PublishPreviewButton }) => (
+ *     <>
+ *       <PublishButton
+ *         disabled={isPublishDisabled}
+ *         onClick={handlePublish}
+ *         publishPaneProps={{
+ *           isSubmitting: false,
+ *           onPublish: ({ onClose }) => onClose(),
+ *           onCancel: ({ onClose }) => onClose(),
+ *           datetime: null,
+ *         }}
+ *       />
+ *       <PublishPreviewButton
+ *         disabled={isPublishPreviewDisabled}
+ *         to={previewPublishedUrl}
+ *       />
+ *     </>
+ *   );
+ *   return (
+ *     <PublishBlock
+ *       renderDraftButtons={renderDraftButtons}
+ *       renderPublishButtons={renderPublishButtons}
+ *     />
+ *   );
+ * };
+ * @endexample
  * This optional component can be used to render the reset alert modal for
  *
  * discarding draft.