@bigbinary/neeto-molecules 3.15.41 → 3.15.43

package/types/NeetoWidget.d.ts

@@ -1,43 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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 };