@bigbinary/neeto-molecules 1.0.74 → 1.0.76-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.74",
+  "version": "1.0.76-beta",
   "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>",
@@ -51,7 +51,7 @@
     "@bigbinary/neeto-commons-frontend": "2.0.106",
     "@bigbinary/neeto-editor": "1.27.0-beta.1",
     "@bigbinary/neeto-filters-frontend": "^2.11.15",
-    "@bigbinary/neeto-icons": "^1.12.3",
+    "@bigbinary/neeto-icons": "^1.14.0",
     "@bigbinary/neeto-molecules": "^1.0.5",
     "@bigbinary/neetoui": "^5.0.9",
     "@faker-js/faker": "7.6.0",

package/src/translations/en.json

@@ -67,12 +67,16 @@
       "logout": "Log out",
       "help": "Help",
       "productSwitcher": "Product switcher",
+      "neetoProducts": "neeto products",
       "helpLinks": {
         "liveChat": "Live chat",
         "helpCenter": "Help center",
         "whatsNew": "What's new",
-        "keyboardShortcuts": "Keyboard shortcuts"
-      }
+        "keyboardShortcuts": "Keyboard shortcuts",
+        "helpArticles": "Help articles"
+      },
+      "showMenu": "Show menu",
+      "hideMenu": "Hide menu"
     },
     "appSwitcher": {
       "noApps": "No apps found",
@@ -444,6 +448,33 @@
         "fileSizeLimitExceeded": "Your file is larger than {{maxSizeInReadableUnits}}. Please try again with a smaller file.",
         "fileTypeError": "Please upload a file with one of the following file types: {{acceptedTypes}}."
       }
+    },
+    "emailForm": {
+      "errors": {
+        "required": "{{entity}} is required",
+        "invalidEmailAddress": "Please enter a valid email address",
+        "messageRequired": "Message is required",
+        "subjectRequired": "Subject is required"
+      },
+      "fields": {
+        "sendToEmailAddress": "'Send to' email address",
+        "replyToEmailAddress": "'Reply to' email address"
+      },
+      "helpText": "You can customize the {{type}} by using \"dynamic variables\". To use \"dynamic variables\" click on the <span>{ }</span> icon.",
+      "uploadCSV": "Upload CSV",
+      "labels": {
+        "sendTo": "Send to",
+        "replyTo": "Reply to",
+        "message": "Message",
+        "subject": "Subject",
+        "ccBcc": "Cc/Bcc",
+        "cc": "CC",
+        "bCc": "BCC"
+      },
+      "placeholders": {
+        "emailPlaceholder": "Write email address",
+        "commaSeparatedEmails": "Use comma (‘) to add multiple email addresses"
+      }
     }
   }
 }

package/types/EmailForm.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+type ContentVariables = {
+  label: string;
+  key: string;
+};
+type FieldOptions = {
+  label: string;
+  value: string;
+};
+/**
+ *
+ * This is a component used to create or edit an email template. It includes fields for defining the email subject, message, sender details, and recipient details. It also provides options to insert variables into the message and subject field, validate input, and handle save or cancel actions."
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/8749438/9d29264e-05f9-4aef-b804-03073feb524e|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import { EmailForm, EmailFormProvider } from "components/EmailForm";
+ * 
+ * const EmailComposer = () => {
+ *   return (
+ *     <EmailFormProvider>
+ *       {({ values }) => (
+ *         <div className="flex gap-2 p-6">
+ *           <EmailForm
+ *             showReplyToField
+ *             showSendToField
+ *             messageVariables={messageVariables}
+ *             replyToOptions={replyToOptions}
+ *             subjectVariables={subjectVariables}
+ *           />
+ *           <EmailPreview
+ *             body={values.message}
+ *             subject={values.subject}
+ *             to={pluck("value", values.sendTo)}
+ *           />
+ *         </div>
+ *       )}
+ *     </EmailFormProvider>
+ *   );
+ * };
+ * 
+ * export default EmailComposer;
+ * @endexample
+*/
+const EmailForm: React.FC<{
+  messageVariables?: ContentVariables[];
+  subjectVariables?: ContentVariables[];
+  handleCancel: () => void;
+  isLoading?: boolean;
+  replyToOptions?: FieldOptions[];
+  isUpdating?: boolean;
+}>;
+export default EmailForm;

package/types/EmailFormProvider.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/**
+ *
+ * This is a container component for EmailForm that maintains the context values such as the Formik container. By using this context, EmailForm and its child components can easily access and manage form state, handle form submission, and perform form validation, among other operations.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import { EmailFormProvider } from "components/EmailForm";
+ * 
+ * const EmailComposer = () => {
+ *   return (
+ *     <EmailFormProvider>
+ *       {({ values }) => (
+ *         { children }
+ *       )}
+ *     </EmailFormProvider>
+ *   );
+ * };
+ * 
+ * export default EmailComposer;
+ * @endexample
+*/
+declare const EmailFormProvider: <T extends {}>(props: {
+  showSendToField?: boolean;
+  showReplyToField?: boolean;
+  onSubmit: FormikConfig<T>['onSubmit'];
+  initialValues: T;
+  children: ReactNode;
+  formikProps: {
+    [key: string]: any;
+  };
+  validationSchema: yup.Schema<T>;
+}) => JSX.Element;
+export default EmailFormProvider;

package/types/Sidebar.d.ts

@@ -24,7 +24,7 @@ interface ProfileInfo {
 interface HelpLinks {
   liveChatProps?: LinkType;
   helpCenterProps?: LinkType;
-  changelogProps?: LinkType;
+  changelogProps?: ChangeLogPropsType;
   keyboardShortcutProps?: LinkType;
 }
 /**