@bigbinary/neeto-molecules 3.13.4 → 3.13.6

package/types/EmailForm.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { HelpPopoverProps } from './HelpPopover.js';
-import '@bigbinary/neetoui';
+import { EmailPreviewProps } from './EmailPreview.js';
+import { HeaderProps } from './Header.js';
+import { TooltipProps, SwitchProps } from '@bigbinary/neetoui';
+import 'components/Header/constants';
+import 'neetoui';
+import './MoreDropdown.js';
 
 type ContentVariables = {
   label: string;
@@ -17,6 +22,36 @@ type ReplyToFieldProps = {
 type SendToFieldProps = {
   options?: FieldOptions[];
 };
+type EmailFormProps = {
+  messageVariables?: ContentVariables[];
+  subjectVariables?: ContentVariables[];
+  handleCancel?: () => void;
+  isLoading?: boolean;
+  replyToOptions?: FieldOptions[];
+  sendToOptions?: FieldOptions[];
+  isUpdating?: boolean;
+  showFields?: boolean;
+  className?: string;
+  replyToFieldProps?: ReplyToFieldProps;
+  sendToFieldProps?: SendToFieldProps;
+};
+interface ExtendedEmailPreviewProps extends EmailPreviewProps {
+  formatBody?: () => void;
+  formatSubject?: () => void;
+  bodyVariables?: object;
+  subjectVariables?: object;
+}
+interface InitialValues {
+  sendTo?: string[];
+  sendToId?: string;
+  sendToCc?: string[];
+  sendToBcc?: string[];
+  replyTo?: string;
+  showCopyEmails?: boolean;
+  subject?: string;
+  message?: string;
+  isEnabled?: boolean;
+}
 /**
  *
  * This is a component used to create or edit an email template. It includes fields
@@ -25,43 +60,77 @@ type SendToFieldProps = {
  *
  * It also provides options to insert variables into the message and subject field,
  *
- * validate input, and handle save or cancel actions."
+ * validate input, and handle save or cancel actions.
+ *
+ * The component works with a preview feature that shows how the email will look in
  *
- * ![image](https://github.com/bigbinary/neeto-molecules/assets/8749438/9d29264e-05f9-4aef-b804-03073feb524e|height=200|width=300)
+ * real time. As users add or change content in the template, the preview updates
+ *
+ * instantly, so they can see exactly how the email will appear before saving it.
+ *
+ * ![image](https://github.com/user-attachments/assets/c8fd8e68-ddd2-4652-b3fb-175ac098e1a0|height=200|width=300)
  *
  * @example 
  *
- * import { EmailForm, EmailFormProvider } from "components/EmailForm";
+ * import EmailForm from "@bigbinary/neeto-molecules/EmailForm";
  * 
  * const EmailComposer = () => {
  *   return (
- *     <EmailFormProvider>
- *       {({ values }) => (
- *         <div className="flex flex-col gap-2 p-6 md:flex-row">
- *           <EmailForm
- *             showReplyToField
- *             showSendToField
- *             messageVariables={messageVariables}
- *             subjectVariables={subjectVariables}
- *             sendToFieldProps={{options: sendToOptions}}
- *             replyToFieldProps={{
- *               options: replyToOptions,
- *               popoverProps: {
- *                 helpLinkProps: {
- *                   label: "Help link",
- *                   href: "https://help.neetoform.com/articles/reply-to-field-for-emails",
- *                 },
- *               },
- *             }}
- *           />
- *           <EmailPreview
- *             body={values.message}
- *             subject={values.subject}
- *             to={pluck("value", values.sendTo)}
- *           />
- *         </div>
- *       )}
- *     </EmailFormProvider>
+ *     <EmailForm
+ *       initialValues={{
+ *         message: "Test Message",
+ *         subject: "Test Subject",
+ *       }}
+ *       onSubmit={handleSubmit}
+ *       showReplyToField={showReplyToField}
+ *       showSendToField={showSendToField}
+ *       showSendToAsRadio={showSendToAsRadio}
+ *       formikProps={formikProps}
+ *       validationSchema={validationSchema}
+ *       switchProps={ name: "isEnabled", value: true }
+ *       titleProps={ value: "Title" }
+ *       headerProps={{
+ *         size: "small",
+ *         title: "Header",
+ *         breadcrumbs: [
+ *           { text: "First", link: "first-example" },
+ *           { text: "Second", link: "second-example" },
+ *           { text: "Third" },
+ *         ],
+ *         titleHelpPopoverProps: { title: "title help popover props" },
+ *       }}
+ *       mobilePreviewProps={{
+ *         message: 'Preview Message',
+ *         className: "neeto-ui-bg-gray-200 lg:hidden",
+ *       }}
+ *       emailFormProps={{
+ *         messageVariables,
+ *         subjectVariables,
+ *         replyToFieldProps: {
+ *           options: [
+ *             {
+ *               label: "Email Fugiat ratione nihil qui?",
+ *               value: "no-reply@example.com",
+ *             },
+ *           ],
+ *           popoverProps: {
+ *             helpLinkProps: {
+ *               label: "Help link",
+ *               href: "https://help.neetoform.com/articles/reply-to-field-for-emails",
+ *             },
+ *           },
+ *         },
+ *         sendToFieldProps: { options: sendToOptions },
+ *         sendToOptions,
+ *       }}
+ *       emailPreviewProps={{
+ *         customContent: <Footer {...{ kind }} />,
+ *         formatBody,
+ *         formatSubject,
+ *         bodyVariables,
+ *         subjectVariables,
+ *       }}
+ *     />
  *   );
  * };
  * 
@@ -69,17 +138,27 @@ type SendToFieldProps = {
  * @endexample
 */
 declare const EmailForm: React.FC<{
-  messageVariables?: ContentVariables[];
-  subjectVariables?: ContentVariables[];
-  handleCancel: () => void;
-  isLoading?: boolean;
-  replyToOptions?: FieldOptions[];
-  sendToOptions?: FieldOptions[];
-  isUpdating?: boolean;
+  onSubmit: FormikConfig<T>["onSubmit"];
+  initialValues: InitialValues;
+  formikProps?: {
+    [key: string]: any;
+  };
+  validationSchema?: ValidationMap;
   showFields?: boolean;
-  className?: string;
-  replyToFieldProps?: ReplyToFieldProps;
-  sendToFieldProps?: SendToFieldProps;
+  showSendToField?: boolean;
+  showReplyToField?: boolean;
+  showSendToAsRadio?: boolean;
+  showCcField?: boolean;
+  showBccField?: boolean;
+  isLoading?: boolean;
+  maxEmails?: number;
+  emailFormProps?: EmailFormProps;
+  emailPreviewProps?: Partial<ExtendedEmailPreviewProps>;
+  headerProps?: HeaderProps;
+  tooltipProps?: Partial<TooltipProps>;
+  switchProps?: SwitchProps;
+  mobilePreviewProps?: object;
+  children?: React.ReactNode;
 }>;
 
 export { EmailForm as default };

package/types/EmailFormProvider.d.ts

@@ -15,7 +15,7 @@ type ValidationMap = {
  *
  * @example 
  *
- * import { EmailFormProvider } from "components/EmailForm";
+ * import { EmailFormProvider } from "@bigbinary/neeto-molecules/EmailForm";
  * 
  * const EmailComposer = () => {
  *   return (

package/types/EmailPreview.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 
+interface EmailPreviewProps {
+  to?: string[];
+  subject?: string;
+  body?: string;
+  from?: string;
+  logo?: string;
+  actionButtonText?: string;
+  className?: string;
+  customContent?: React.ReactNode;
+}
 /**
  *
  * A common component to preview emails.
@@ -28,15 +38,6 @@ import React from 'react';
  * export default EmailShare;
  * @endexample
 */
-declare const EmailPreview: React.FC<{
-  to?: string[];
-  subject?: string;
-  body?: string;
-  from?: string;
-  logo?: string;
-  actionButtonText?: string;
-  className?: string;
-  customContent?: React.ReactNode;
-}>;
+declare const EmailPreview: React.FC<EmailPreviewProps>;
 
-export { EmailPreview as default };
+export { type EmailPreviewProps, EmailPreview as default };

package/types/Header.d.ts

@@ -17,7 +17,6 @@ interface HeaderProps {
   size?: keyof typeof SIZES;
   renderDropdown?: (Dropdown: MoreDropdown) => JSX.Element;
 }
-
 /**
  *
  * The Header component can be used to display the page title and an action block