@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/NeetoWidget.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+
+type EmbedCode = React.FC<{
+  maxWidth?: string;
+  primaryApp?: string;
+  showSessionContext?: boolean;
+  showUserIdentity?: boolean;
+}>;
+/**
+ *
+ * This component can be accessed only in SSO mode. To access the component, run
+ *
+ * neetoAuth in the background and restart the application in SSO mode.
+ *
+ * This object contains the widget names.
+ *
+ * This component can be used to render the neetoWidget embed code within any
+ *
+ * host application. It uses APIs from neeto_sso to query the apiKey from
+ *
+ * neeto-auth-web, enable/disable widgets, and to allow the user to send the
+ *
+ * embed code via email.
+ *
+ * Developers can use the props to customize the component for the host
+ *
+ * application.
+ *
+ * @example 
+ *
+ * <NeetoWidget.EmbedCode primaryApp={NeetoWidget.WIDGET_TYPES.chat} />
+ * @endexample
+*/
+declare const NeetoWidget: {
+  EmbedCode: EmbedCode;
+  WIDGET_TYPES: {
+    engage: "engage";
+    chat: "chat";
+    replay: "replay";
+  };
+};
+
+export { NeetoWidget as default };

package/types/Onboarding.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+interface OnboardingComponent {
+  key: string;
+  element: React.ReactNode;
+  label: string;
+}
+/**
+ *
+ * The Onboarding component facilitates a smooth onboarding flow. It comprises
+ *
+ * three primary screens:
+ *
+ * Additionally, you can enhance the onboarding experience by passing custom
+ *
+ * components using the onboardingSteps prop. These custom components will be
+ *
+ * rendered between the WelcomeScreen and HelpScreen, allowing for a more
+ *
+ * customized onboarding process.
+ *
+ * @example 
+ *
+ * import Onboarding from "@bigbinary/neeto-molecules/Onboarding";
+ * 
+ * const Onboarding = () => {
+ *   const [currentStep, setCurrentStep] = useState(0);
+ * 
+ *   const CustomComponent = () => {
+ *     return (
+ *       <div>
+ *         <h1>Custom Component</h1>
+ *       </div>
+ *     );
+ *   };
+ * 
+ *   return (
+ *     <>
+ *       <Onboarding
+ *         currentStep={currentStep}
+ *         setCurrentStep={setCurrentStep}
+ *         completeButtonProps={{
+ *           onClick: () => {
+ *             console.log("Onboarding completed");
+ *           },
+ *         }}
+ *         onboardingSteps={[
+ *           {
+ *             key: "custom-component",
+ *             label: "Custom Component",
+ *             element: <CustomComponent />,
+ *           },
+ *         ]}
+ *       />
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
+declare const Onboarding: React.FC<{
+  currentStep: string;
+  completeButtonProps: Object;
+  setCurrentStep: React.Dispatch<React.SetStateAction<string>>;
+  onboardingSteps?: OnboardingComponent[];
+  helpScreenClassName?: string;
+  isAnimated?: boolean;
+  disableStepClick?: boolean;
+}>;
+
+export { Onboarding as default };

package/types/OptionFields.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+type Option = {
+  label: string;
+  id: string;
+  position: number;
+  altId?: string;
+  [key: string]: boolean | undefined;
+};
+type BulkActionProps = {
+  enabled: boolean;
+  bulkAddHelpDocUrl: string;
+};
+type OptionFieldsProps = {
+  name?: string;
+  error?: string;
+  onDelete?: (index: number) => void;
+  onChange: (options: Option[]) => void;
+  onEdit?: (index: number) => void;
+  onBlur?: (id: string, value: string) => void;
+  buttonProps?: ButtonProps;
+  minOptions?: number;
+  draggable?: boolean;
+  editable?: boolean;
+  disabled?: boolean;
+  isAddOptionEnabled?: boolean;
+  isDeleteOptionEnabled?: boolean;
+  shouldResetEmptyOptionOnBlur?: boolean;
+  isPictureChoice?: boolean;
+  isTextArea?: boolean;
+  shouldDestroy?: boolean;
+  destroyFlagName?: string;
+  itemLabel?: string;
+  isNewItemsPrefilled?: boolean;
+  bulkActionProps?: BulkActionProps;
+};
+/**
+ *
+ * A component to add, edit, delete, and reorder options for multiple choice and
+ *
+ * single choice questions.
+ *
+ * @example 
+ *
+ * import OptionFields from "@bigbinary/neeto-molecules/OptionFields";
+ * 
+ * <Formik onReset={noop} onSubmit={noop}>
+ *   <Form>
+ *     <OptionFields
+ *       name=""
+ *       minOptions={2}
+ *       options={[
+ *         { id: "1", label: "Option 1", position: 1 },
+ *         { id: "2", label: "Option 2", position: 2 },
+ *         { id: "3", label: "Option 3", position: 3 },
+ *       ]}
+ *       onChange={noop}
+ *       {...args}
+ *     />
+ *   </Form>
+ * </Formik>;
+ * @endexample
+ * This component must be used inside a Formik component. The values from the
+ *
+ * component will be passed to the onChange function as an array of options.
+ *
+*/
+declare const OptionFields: React.FC<OptionFieldsProps>;
+
+export { OptionFields as default };

package/types/PageLoader.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+/**
+ *
+ * Used in neeto products as the page loader to indicate that the page is being
+ *
+ * loaded.
+ *
+ * ![image](https://user-images.githubusercontent.com/12969853/225239088-f78bd7b4-ba46-404c-896c-e9e5104f824c.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import PageLoader from "@bigbinary/neeto-molecules/PageLoader";
+ * const PageLoaderContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <PageLoader />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * PageLoader with custom text
+ *
+ * @example 
+ *
+ * import PageLoader from "@bigbinary/neeto-molecules/PageLoader";
+ * const PageLoaderContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <PageLoader text="Loading..." />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const PageLoader: React.FC<{
+  text?: string;
+}>;
+
+export { PageLoader as default };

package/types/PhoneNumber.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { InputProps, SelectProps, TypographyProps } from '@bigbinary/neetoui';
+import { CountryCode } from 'libphonenumber-js';
+import { StringSchema } from 'yup';
+
+interface PhoneNumberInputProps extends InputProps {
+  value?: string;
+  onChange?: (value: string) => any;
+  className?: string;
+  selectProps?: SelectProps;
+  error?: string;
+  initialCountryCode?: string;
+}
+interface FormikPhoneNumberInputProps extends PhoneNumberInputProps {
+  name: string;
+}
+interface PhoneNumberProps extends TypographyProps {
+  className?: string;
+  defaultCountry?: string;
+  children?: React.ReactNode;
+  showEmoji?: boolean;
+  value?: string;
+}
+declare const PhoneNumberInput: React.ForwardRefExoticComponent<PhoneNumberInputProps>;
+declare const FormikPhoneNumberInput: React.ForwardRefExoticComponent<FormikPhoneNumberInputProps>;
+/**
+ *
+ * An input component to input and validate phone numbers with a country code
+ *
+ * picker. The default country code will be detected automatically based on the
+ *
+ * location of the user's ip address. We are leveraging neetoIpLookupWeb for the
+ *
+ * same.
+ *
+ * ![PhoneNumberInput](https://user-images.githubusercontent.com/35297280/231367938-93aa94b0-2a8c-44b3-b1c7-8c60843e40c4.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * 
+ * import { PhoneNumberInput } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => {
+ *   const [phoneNumber, setPhoneNumber] = useState("");
+ * 
+ *   return <PhoneNumberInput value={phoneNumber} onChange={setPhoneNumber} />;
+ * };
+ * @endexample
+ * A typography component to display phone numbers along with the flag of the
+ *
+ * country associated with it.
+ *
+ * ![PhoneNumber](https://user-images.githubusercontent.com/35297280/231367945-ee5f0921-92e3-4086-a8e2-f9ab63cf9a37.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { PhoneNumber } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => <PhoneNumber showEmoji value="+919988776655" />;
+ * @endexample
+ * The PhoneNumberInput component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import { FormikPhoneNumberInput, validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import { Form } from "@bigbinary/neetoui/formik";
+ * 
+ * const App = () => (
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { phoneNumber: "+919988776655" },
+ *         validationSchema: yup.object({ phoneNumber: validation().required() }),
+ *         onSubmit: ({ phoneNumber }) => alert(phoneNumber),
+ *       }}
+ *     >
+ *       <FormikPhoneNumberInput name="phoneNumber" />
+ *     </Form>
+ *   );
+ * );
+ * @endexample
+ * A utility function that exports a Yup validation schema to be used in Formik. It
+ *
+ * accepts a string as an optional argument to override the default validation
+ *
+ * message.
+ *
+ * @example 
+ *
+ * import { validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import * as yup from "yup";
+ * 
+ * const VALIDATION_SCHEMA = yup.object({
+ *   phoneNumber: validation("Phone number is invalid"),
+ * });
+ * @endexample
+ * A utility function to check whether a phone number is valid. It accepts a phone
+ *
+ * number and a default country as argument and returns a boolean value specifying
+ *
+ * whether the phone number is valid or not.
+ *
+*/
+declare const PhoneNumber: React.FC<PhoneNumberProps>;
+declare const isPhoneNumberValid: (phoneNumber: string, defaultCountry?: CountryCode | {
+  defaultCountry?: CountryCode;
+  defaultCallingCode?: string;
+}) => boolean;
+declare const validation: (message?: string) => StringSchema<any, any, any>;
+
+export { FormikPhoneNumberInput, type FormikPhoneNumberInputProps, PhoneNumber, PhoneNumberInput, type PhoneNumberInputProps, type PhoneNumberProps, isPhoneNumberValid, validation };

package/types/ProductEmbed.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+
+interface InlineProps {
+  label: string;
+  description: string;
+  width?: number;
+  height?: number;
+  elementSelector?: string;
+}
+interface FloatingPopupProps {
+  label: string;
+  description: string;
+  btnText?: string;
+  btnColor?: string;
+  btnTextColor?: string;
+  btnPosition?: string;
+  icon?: React.FC;
+  showIcon?: boolean;
+}
+interface ElementPopupProps {
+  label: string;
+  description: string;
+  elementSelector?: string;
+}
+type CodeSampleType = "html" | "react";
+/**
+ *
+ * A component to generate and display the embed code for a product, which can then
+ *
+ * be pasted into a host application where the product should be embedded. Please
+ *
+ * note that this component does not embed the product itself but provides the
+ *
+ * necessary code and a preview to facilitate embedding.
+ *
+ * Here’s how you can use the ProductEmbed component in your React application:
+ *
+ * @example 
+ *
+ * import ProductEmbed from "@bigbinary/neeto-molecules/ProductEmbed";
+ * 
+ * const EmbedPage = () => (
+ *   <ProductEmbed
+ *     id="123"
+ *     goBackLink="/share"
+ *     options={{
+ *       inline: {
+ *         label: "Inline",
+ *         description: "An inline component",
+ *         width: 90,
+ *         height: 100,
+ *         elementSelector: "#inline-embed",
+ *       },
+ *       floatingPopup: {
+ *         label: "Floating Popup",
+ *         description: "A floating popup",
+ *         btnText: "Schedule meeting",
+ *         showIcon: true,
+ *         icon: Calendar,
+ *       },
+ *       elementPopup: {
+ *         label: "Element Popup",
+ *         description: "An element popup",
+ *         elementSelector: "element-id",
+ *       },
+ *     }}
+ *     isQueryParamsEnabled={true}
+ *     supportedLanguages={["html", "react"]}
+ *   />
+ * );
+ * 
+ * export default EmbedPage;
+ * @endexample
+*/
+declare const ProductEmbed: React.FC<{
+  className?: string;
+  goBackLink?: string;
+  customEmbedScriptPath?: string;
+  customPreviewIframeUrl?: string;
+  extraArgs?: object;
+  id: string;
+  options?: {
+    inline?: InlineProps;
+    floatingPopup?: FloatingPopupProps;
+    elementPopup?: ElementPopupProps;
+  };
+  isQueryParamsEnabled?: boolean;
+  otherCustomizations?: Function;
+  inlineWrapperStyle?: string;
+  supportedLanguages?: CodeSampleType[];
+}>;
+
+export { ProductEmbed as default };

package/types/PublishBlock.d.ts

@@ -0,0 +1,148 @@
+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<PublishButtonProps>;
+    PublishPreviewButton: React.FC<ButtonProps>;
+  }) => React.ReactNode;
+}
+/**
+ *
+ * A common component to manage draft and publish versions.
+ *
+ * ![image](https://user-images.githubusercontent.com/35297280/219363621-9fb295c4-72e4-4cde-b8d1-614f49e5dfa5.png|height=200|width=300)
+ *
+ * @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} />
+ *       <PublishPreviewButton
+ *         disabled={isPublishPreviewDisabled}
+ *         to={previewPublishedUrl}
+ *       />
+ *     </>
+ *   );
+ *   return (
+ *     <PublishBlock
+ *       renderDraftButtons={renderDraftButtons}
+ *       renderPublishButtons={renderPublishButtons}
+ *     />
+ *   );
+ * };
+ * @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.
+ *
+ * It also accepts all other alert props.
+ *
+ * @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
+ *   }
+ * ) => {
+ *   return (
+ *     <PublishBlock.Alert
+ *       isOpen={isResetDraftAlertOpen}
+ *       message="Leaving this page will delete all unpublished changes."
+ *       title="Discard changes?"
+ *       submitButtonLabel="Discard changes"
+ *       onClose={() => setIsResetDraftAlertOpen(false)}
+ *       onSubmit={action("handleReset")}
+ *       //other alert props can also be passed
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const PublishBlock: React.FC<PublishBlockProps> & {
+  Alert: React.FC<AlertProps>;
+};
+
+export { PublishBlock as default };

package/types/Rename.d.ts

@@ -0,0 +1,73 @@
+import { ButtonProps, TypographyProps, InputProps } from '@bigbinary/neetoui';
+import React from 'react';
+
+/**
+ *
+ * The Rename component is used to rename a resource on the page, It can be used as
+ *
+ * the title in the Header component and provides props for additional actions with
+ *
+ * the dropdown.
+ *
+ * @example 
+ *
+ * import Rename from "@bigbinary/neeto-molecules/Rename";
+ * 
+ * const App = () => {
+ *   const [value, setValue] = useState("Name");
+ *   return (
+ *     <Rename
+ *       value={value}
+ *       placeholder="Enter a name"
+ *       dropdownItems={[
+ *         {
+ *           label: "Clone",
+ *           onClick: () => alert("Clicked on clone"),
+ *         },
+ *       ]}
+ *       onRename={value => setValue(name)}
+ *       breadcrumbs={[
+ *         {
+ *           label: "Home",
+ *           link: "home",
+ *         },
+ *         {
+ *           label: "Contacts",
+ *           link: "contacts",
+ *         },
+ *       ]}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const Rename: React.FC<{
+  className?: string;
+  isOpen?: boolean;
+  allowEmptySubmission: boolean;
+  defaultName: string;
+  value: string;
+  onRename?: (newName: string) => void;
+  onClone?: () => void;
+  onArchiveStatusToggle?: () => void;
+  onDelete?: () => void;
+  isArchived?: boolean;
+  isUpdating?: boolean;
+  placeholder?: string;
+  hideMenu?: boolean;
+  disabled?: boolean;
+  dropdownItems?: ButtonProps[];
+  submitButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  textProps?: TypographyProps;
+  inputProps?: InputProps;
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+  formatText?: (value: string) => string;
+  dropdownButtonProps: ButtonProps;
+  dropdownProps: DropdownProps;
+}>;
+
+export { Rename as default };

package/types/ResponsiveDevicePicker.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+type SelectedDeviceState = "desktop" | "tablet" | "mobile";
+/**
+ *
+ * A common component to switch between different device resolutions.
+ *
+ * ![image](https://user-images.githubusercontent.com/24496302/230879938-43f4a9bc-cb36-496a-be18-79d85fbffb3a.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import ResponsiveDevicePicker from "@bigbinary/neeto-molecules/ResponsiveDevicePicker";
+ * 
+ * const ResponsiveDevicePickerContainer = ({}) => {
+ *   const [selectedDevice, setSelectedDevice] = useState("desktop");
+ * 
+ *   return (
+ *     <ResponsiveDevicePicker
+ *       selectedDevice={selectedDevice}
+ *       onDeviceChange={setSelectedDevice}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const ResponsiveDevicePicker: React.FC<{
+  className?: string;
+  selectedDevice?: SelectedDeviceState;
+  onDeviceChange?: (device: SelectedDeviceState) => void;
+}>;
+
+export { ResponsiveDevicePicker as default };