@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/DynamicVariables.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DropdownProps } from '@bigbinary/neetoui';
+
+interface Variable {
+  label?: string;
+  key?: string;
+  value?: string;
+  category?: string;
+  variables?: Omit<Variable, "variables">[];
+}
+/**
+ *
+ * A common component for using dynamic variables.
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/70290286/223332469-21106919-637f-48b5-abec-a57306ca7005.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import DynamicVariables from "@bigbinary/neeto-molecules/DynamicVariables";
+ * import { Input } from "neetoui/formik";
+ * 
+ * const DynamicVariablesDemo = () => {
+ *   return (
+ *     <Input
+ *       label="Input with DynamicVariables"
+ *       name="subject"
+ *       suffix={
+ *         <DynamicVariables
+ *           dropdownProps={{ buttonStyle: "text" }}
+ *           variables={EDITOR_VARIABLES}
+ *           onVariableClick={variable => {
+ *             console.log(variable);
+ *           }}
+ *         />
+ *       }
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const DynamicVariables: React.FC<{
+  onVariableClick?: (variable: Variable & {
+    categoryLabel?: string;
+  }) => void;
+  variables: Variable[];
+} & DropdownProps>;
+
+export { DynamicVariables as default };

package/types/EmailForm.d.ts

@@ -0,0 +1,165 @@
+import React from 'react';
+import { HelpPopoverProps } from './HelpPopover.js';
+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;
+  key: string;
+};
+type FieldOptions = {
+  label: string;
+  value: string;
+};
+type ReplyToFieldProps = {
+  popoverProps?: HelpPopoverProps;
+  options?: FieldOptions[];
+};
+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;
+  editorAddons?: string[];
+};
+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
+ *
+ * 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.
+ *
+ * The component works with a preview feature that shows how the email will look in
+ *
+ * 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 from "@bigbinary/neeto-molecules/EmailForm";
+ * 
+ * const EmailComposer = () => {
+ *   return (
+ *     <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,
+ *       }}
+ *     />
+ *   );
+ * };
+ * 
+ * export default EmailComposer;
+ * @endexample
+*/
+declare const EmailForm: React.FC<{
+  onSubmit: FormikConfig<T>["onSubmit"];
+  initialValues: InitialValues;
+  formikProps?: {
+    [key: string]: any;
+  };
+  validationSchema?: ValidationMap;
+  showFields?: boolean;
+  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

@@ -0,0 +1,48 @@
+import * as yup from 'yup';
+
+type ValidationMap = {
+  [key: string]: yup.AnySchema;
+};
+/**
+ *
+ * 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 { EmailFormProvider } from "@bigbinary/neeto-molecules/EmailForm";
+ * 
+ * const EmailComposer = () => {
+ *   return (
+ *     <EmailFormProvider>
+ *       {({ values }) => ({
+ *          children 
+ *       })}
+ *     </EmailFormProvider>
+ *   );
+ * };
+ * 
+ * export default EmailComposer;
+ * @endexample
+*/
+declare const EmailFormProvider: <T extends {}>(props: {
+  showSendToField?: boolean;
+  showReplyToField?: boolean;
+  showSendToAsRadio?: boolean;
+  onSubmit: FormikConfig<T>['onSubmit'];
+  initialValues: T;
+  children: ReactNode;
+  formikProps: {
+    [key: string]: any;
+  };
+  validationSchema?: ValidationMap;
+  showCcField?: boolean;
+  showBccField?: boolean;
+}) => JSX.Element;
+
+export { EmailFormProvider as default };

package/types/EmailPreview.d.ts

@@ -0,0 +1,43 @@
+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.
+ *
+ * ![EmailPreview](https://user-images.githubusercontent.com/66865722/222370228-cda4ac74-8ec9-4288-ab88-a49b21cab284.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { useFormikContext } from "formik";
+ * import EmailPreview from "@bigbinary/neeto-molecules/EmailPreview";
+ * const EmailShare = () => {
+ *   const { values } = useFormikContext();
+ *   return (
+ *     <div>
+ *       <EmailPreview
+ *         actionButtonText={values.startSurveyButtonText}
+ *         body={values.emailBody}
+ *         subject={values.emailSubject}
+ *         logo={values.logo}
+ *         to={values.notifyEmails}
+ *         from={values.emailsFrom}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * export default EmailShare;
+ * @endexample
+*/
+declare const EmailPreview: React.FC<EmailPreviewProps>;
+
+export { type EmailPreviewProps, EmailPreview as default };

package/types/EmojiPicker.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DropdownProps } from 'neetoui';
+
+type Emoji = {
+  native: string;
+  unified: string;
+};
+/**
+ *
+ * A component to pick emojis.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/6238f165-3a55-4e66-bf4f-101971f80c80|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiPicker from "@bigbinary/neeto-molecules/EmojiPicker";
+ * 
+ * const EmojiPickerContainer = () => {
+ *   const [emoji, setEmoji] = useState();
+ *   return (
+ *     <div>
+ *       <div>Selected Emoji: {emoji}</div>
+ *       <EmojiPicker onSelect={obj => setEmoji(obj.native)} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const EmojiPicker: React.FC<{
+  onSelect?: (emoji: Emoji) => void;
+  open?: boolean;
+  dropdownProps?: DropdownProps;
+}>;
+
+export { EmojiPicker as default };

package/types/EmojiReactions.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+
+type Emoji = {
+  native: string;
+  unified: string;
+};
+type Reaction = {
+  native: string;
+  unified: string;
+  userName: string;
+};
+/**
+ *
+ * A component to group user selected emojis and display them.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/576abbd2-dd08-4535-a120-1e9b295850fb|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiReactions from "@bigbinary/neeto-molecules/EmojiReactions";
+ * const EmojiReactionsContainer = () => {
+ *   const [reactions, setReactions] = useState([
+ *     { native: "😃", unified: "1f603", userName: "User 1" },
+ *     { native: "😄", unified: "1f604", userName: "User 1" },
+ *   ]);
+ * 
+ *   const createReaction = emoji => ({
+ *     native: emoji.native,
+ *     unified: emoji.unified,
+ *     userName: user.name,
+ *     userId: user.id,
+ *   });
+ * 
+ *   const onReactionClick = emoji => {
+ *     const reaction = findBy(
+ *       { unified: emoji.unified, userId: user.id },
+ *       reactions
+ *     );
+ *     if (reaction) {
+ *       setReactions(reactions.filter(item => item.unified !== reaction.unified));
+ *     } else {
+ *       setReactions([...reactions, createReaction(emoji)]);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <EmojiReactions {...{ onReactionClick, reactions }} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const EmojiReactions: React.FC<{
+  reactions: Reaction[];
+  onReactionClick?: (emoji: Emoji) => void;
+  emojiSize?: string;
+  emojiBoxStyle?: string;
+  isUpdating?: boolean;
+}>;
+
+export { EmojiReactions as default };

package/types/Engagements.d.ts

@@ -0,0 +1,131 @@
+import { ENGAGEMENT_TYPES } from 'components/Engagements/constants';
+
+type Emoji = {
+  native: string;
+  unified: string;
+};
+type MenuItems = {
+  label: string;
+  onClick: () => void;
+  key: string;
+  isVisible?: boolean;
+  hasSubItems?: boolean;
+  dropdownProps?: DropdownProps;
+  menuItems?: MenuItems[];
+};
+type UserData = {
+  name: string;
+  profileImageUrl?: string;
+};
+type CommentData = {
+  id: string;
+  createdAt?: string;
+  commenter?: UserData;
+  [key: string]: any;
+};
+type ActivityData = {
+  id: string;
+  creator?: UserData;
+  [key: string]: any;
+};
+type EngagementType = typeof ENGAGEMENT_TYPES[number];
+/**
+ *
+ * The Engagements component renders the general layout for comments and
+ *
+ * activities to show user engagement timeline.
+ *
+ * The main container component for the Engagements components that wraps the
+ *
+ * items.
+ *
+ * A wrapper component to be used within the Engagements to render individual
+ *
+ * comment.
+ *
+ * A wrapper component to be used within the Engagements to render individual
+ *
+ * activity.
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * import { User } from "neetoicons";
+ * import { Typography } from "neetoui";
+ * 
+ * import Engagements from "neetomolecules/Engagements";
+ * 
+ * const Timeline = () => {
+ *   const [data] = useState([
+ *     {
+ *       id: "comment-1",
+ *       content: "Hi world!",
+ *       commenter: { name: "Oliver Smith" },
+ *       createdAt: Date().toString(),
+ *     },
+ *     {
+ *       id: "comment-2",
+ *       content: "Hi Oliver!",
+ *       commenter: { name: "Lily James" },
+ *       createdAt: Date().toString(),
+ *     },
+ *     {
+ *       id: "activity-1",
+ *       type: "USER_EXIT",
+ *       creator: { name: "Oliver Smith" },
+ *       createdAt: Date().toString(),
+ *     },
+ *   ]);
+ * 
+ *   return (
+ *     <Engagements
+ *       {...{ data }}
+ *       isActivitiesEnabled
+ *       renderActivity={engagement => (
+ *         <Engagements.Activity icon={<User />} user={engagement.creator}>
+ *           <Typography style="body2">
+ *             {engagement.type === "USER_EXIT" &&
+ *               `${engagement.creator.name} left this conversation`}
+ *           </Typography>
+ *         </Engagements.Activity>
+ *       )}
+ *       renderComment={engagement => (
+ *         <Engagements.Comment
+ *           comment={engagement}
+ *           info="messaged"
+ *           user={engagement.commenter}
+ *         >
+ *           <Typography style="body2">{engagement.content}</Typography>
+ *         </Engagements.Comment>
+ *       )}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const Engagements: React.FC<{
+  data: Array<CommentData | ActivityData>;
+  isActivitiesEnabled?: boolean;
+  matchType?: (engagement: CommentData | ActivityData) => EngagementType;
+  renderComment: (engagement: CommentData, index: number) => React.ReactNode;
+  renderActivity: (engagement: ActivityData, index: number) => React.ReactNode;
+}> & {
+  Comment: React.FC<{
+    user: UserData;
+    comment: CommentData;
+    reactions?: boolean | Emoji[];
+    info?: string;
+    actions?: MenuItems[];
+    className?: string;
+    onAddReaction: (emoji: Emoji) => void;
+    onRemoveReaction: (emoji: Emoji) => void;
+  }>;
+  Activity: React.FC<{
+    user: UserData;
+    icon: React.ReactNode;
+    unread?: boolean;
+    className?: string;
+  }>;
+};
+
+export { Engagements as default };

package/types/ErrorPage.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ButtonProps } from '@bigbinary/neetoui';
+
+/**
+ *
+ * A fallback page for handling 404, 403 and 500 errors.
+ *
+ * The component also has a "contact us" link that opens the chat widget for
+ *
+ * further communication.
+ *
+*/
+declare const ErrorPage: React.FC<{
+  homeUrl?: string;
+  status?: number;
+  backToHomeButtonProps?: Partial<ButtonProps>;
+  children?: React.ReactNode | React.ReactNode[];
+  showNeetoChatWidget?: boolean;
+  description?: string;
+}>;
+
+export { ErrorPage as default };

package/types/FileUpload.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+
+interface FileObject {
+  url: string;
+  size?: number;
+  name: string;
+}
+interface FileUploadProps {
+  className?: string;
+  allowedFileTypes?: string;
+  multipleFilesAllowed?: boolean;
+  maxFileSize?: number;
+  hasFileSizeLimit?: boolean;
+  isPreview?: boolean;
+  minFileSize?: number;
+  files?: FileObject[];
+  onChange?: (files: FileObject[] | []) => void;
+  error?: string;
+  setError?: (error: string) => void;
+  setTouched?: (touched: boolean) => void;
+}
+interface FormikFileUploadProps extends FileUploadProps {
+  name: string;
+}
+/**
+ *
+ * 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 { 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
+*/
+declare const FileUpload: React.FC<FileUploadProps>;
+declare const FormikFileUpload: React.FC<FormikFileUploadProps>;
+
+export { FileUpload, type FileUploadProps, FormikFileUpload, type FormikFileUploadProps };