@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/types/HelpPopover.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { ButtonProps, PopoverProps } from "@bigbinary/neetoui";
+/**
+ *
+ * Can be used to show contextual help information within a popover when a user
+ *
+ * hovers on the help icon. This component can be used to provide guidance,
+ *
+ * instructions, or additional context without cluttering the main interface. We
+ *
+ * can also direct the user to a separate page for more information.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/b5a8695a-9017-4a89-a138-425b0ef71835|height=200|width=300)
+ *
+ * @example 
+ *
+ * import HelpPopover from "@bigbinary/neeto-molecules/HelpPopover";
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <HelpPopover
+ *         title="What is KB keywords?"
+ *         description="Keywords represent the key concepts of an article. These will be
+ *             shown on the KB and will be used for SEO"
+ *         helpLinkProps={{ label: "KB", href: "https://google.com/kb" }}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const HelpPopover: React.FC<{
+  title?: string;
+  description?: React.ReactNode;
+  helpLinkProps?: ButtonProps;
+  popoverProps?: PopoverProps;
+  size?: "default" | "large";
+  className?: string;
+  icon?: React.ReactNode;
+  iconColor?: string;
+}>;
+export default HelpPopover;

package/types/Insights.d.ts

@@ -0,0 +1,108 @@
+import { ButtonProps, DropdownProps, InputProps, TypographyProps } from "@bigbinary/neetoui";
+import React from "react";
+interface Time {
+  h: number;
+  m: number;
+  s: number;
+}
+interface Devices {
+  desktop: number;
+  smartphone: number;
+  [key: string]: number;
+}
+interface OperatingSystems {
+  mac: number;
+  windows: number;
+  [key: string]: number;
+}
+interface Browsers {
+  chrome: number;
+  safari: number;
+  [key: string]: number;
+}
+interface InsightsData {
+  visitCount: number;
+  startCount: number;
+  submissionCount: number;
+  completionRate: number;
+  averageSubmissionTime: Time;
+  devices: Devices;
+  operatingSystems: OperatingSystems;
+  browsers: Browsers;
+}
+interface TimePeriodValue {
+  startDate: Dayjs;
+  endDate: Dayjs;
+  rangeType: string;
+}
+interface TimePeriod {
+  label: string;
+  value: TimePeriodValue;
+}
+interface HelpTexts {
+  visitCount?: string;
+  startCount?: string;
+  submissions?: string;
+  completionRate?: string;
+  averageSubmissionTime?: string;
+}
+/**
+ *
+ * The Insights molecule displays key record insights, including a date range
+ *
+ * filter, offering a quick overview of user engagement in a user-friendly format.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/52269241/f733bf16-5d70-406d-9076-fd0e41c13bcd|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Insights from "@bigbinary/neeto-molecules/Insights";
+ * 
+ * const DEFAULT_DATE_RANGE = {
+ *   label: "All time",
+ *   value: { startDate: null, endDate: null, rangeType: "all" },
+ * };
+ * 
+ * const Summary = () => {
+ *   const [timePeriod, setTimePeriod] = useState(DEFAULT_DATE_RANGE);
+ * 
+ *   return (
+ *     <Insights
+ *       {...{ setTimePeriod, timePeriod, isLoading }}
+ *       showWarningMessage
+ *       insightsData={{
+ *         visitCount: 6,
+ *         startCount: 6,
+ *         submissionCount: 6,
+ *         completionRate: 100,
+ *         averageSubmissionTime: { h: 0, m: 11, s: 37 },
+ *         devices: { desktop: 80, smartphone: 20 },
+ *         operatingSystems: { mac: 40, windows: 40, android: 15, ios: 5 },
+ *         browsers: { chrome: 60, safari: 30, opera: 10 },
+ *       }}
+ *       helpTexts={{
+ *         averageSubmissionTime:
+ *           "Avg. time updates only with time duration feature enabled.",
+ *       }}
+ *     />
+ *   );
+ * };
+ * 
+ * export default Summary;
+ * @endexample
+ * Note: The value of timePeriod state will contain the startDate, endDate and
+ *
+ * range_type of the selected filter. This can be passed into the filterParams of
+ *
+ * your API.
+ *
+*/
+const Insights: React.FC<{
+  insightsData: InsightsData;
+  isLoading: boolean;
+  timePeriod: TimePeriod;
+  setTimePeriod: (timePeriod: TimePeriod) => void;
+  helpTexts?: HelpTexts;
+  showWarningMessage: boolean;
+}>;
+export default Insights;

package/types/IntegrationCard.d.ts

@@ -21,6 +21,8 @@ export interface IntegrationCardProps {
   customDropdown?: React.ReactNode;
   children?: React.ReactNode;
   dataCy?: string;
+  connectPath?: string;
+  connectUrl?: string;
 }
 /**
  *

package/types/KeyboardShortcuts.d.ts

@@ -128,9 +128,9 @@ interface ShortcutsObject {
  * @example 
  *
  * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
- * import { useHotKeys } from "neetocommons/react-utils";
+ * import useHotkeys from "neetohotkeys";
  * 
- * useHotKeys(
+ * useHotkeys(
  *   KeyboardShortcuts.GLOBAL_SHORTCUTS.GLOBAL.submitForm.sequence,
  *   keyboardShortCutHandlers.SUBMIT_FORM,
  *   { mode: "global" }

package/types/MadeWith.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ *
+ * A component used for rendering made with block.
+ *
+ * @example 
+ *
+ * import MadeWith from "@bigbinary/neeto-molecules/MadeWith";
+ * 
+ * <MadeWith />;
+ * @endexample
+*/
+const MadeWith: React.FC<{
+  productName?: string;
+}>;
+export default MadeWith;

package/types/MoreDropdown.d.ts

@@ -9,6 +9,9 @@ type MenuItems = {
   dropdownProps?: DropdownProps;
   menuItems?: MenuItems[];
 };
+type DropdownButtonProps = {
+  isRounded?: boolean;
+} & ButtonProps;
 /**
  *
  * Dropdown menu with a 3 dot trigger button, can be used as a more menu.
@@ -37,7 +40,7 @@ type MenuItems = {
  * @endexample
 */
 const MoreDropdown: React.FC<{
-  dropdownButtonProps?: ButtonProps;
+  dropdownButtonProps?: DropdownButtonProps;
   isVertical?: boolean;
   isDisabled?: boolean;
   dropdownProps?: DropdownProps;

package/types/NavigationHeader.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import Rename from "./Rename";
 import { NavLinkProps } from "react-router-dom";
+import { ButtonProps } from "@bigbinary/neetoui";
+import Rename from "./Rename";
 interface NavLinkProps {
   activeClassName?: string | undefined;
   activeStyle?: React.CSSProperties | undefined;
@@ -38,6 +39,7 @@ type RightActionBlockPropTypes = {
   handleReset: () => void;
   publishAlertTitle: string;
   publishAlertDescription: string;
+  publishButtonProps: ButtonProps;
 };
 type NavigationLinkPropsType = {
   headerLinks: HeaderLinkPropType[];

package/types/Onboarding.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+interface OnboardingComponent {
+  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={[
+ *           {
+ *             label: "Custom Component",
+ *             element: <CustomComponent />,
+ *           },
+ *         ]}
+ *       />
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
+const Onboarding: React.FC<{
+  currentStep: number;
+  completeButtonProps: Object;
+  setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
+  onboardingSteps?: OnboardingComponent[];
+  helpScreenClassName?: string;
+  isAnimated?: boolean;
+}>;
+export default Onboarding;

package/types/OptionFields.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+type Option = {
+  label: string;
+  id: string;
+  position: number;
+  altId?: string;
+  _destroy?: boolean;
+};
+type OptionsType = Option[];
+type BulkActionProps = {
+  enabled: boolean;
+  bulkAddHelpDocUrl: string;
+};
+type OptionFieldsProps = {
+  options: OptionsType;
+  onChange: (options: OptionsType) => void;
+  error?: string;
+  onEdit?: (index: number) => void;
+  onDelete?: (index: number) => void;
+  buttonProps?: ButtonProps;
+  minOptions?: number;
+  draggable?: boolean;
+  editable?: boolean;
+  isPictureChoice?: boolean;
+  name?: string;
+  currentRecord?: Object;
+  isTextArea?: boolean;
+  itemLabel?: string;
+  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 default OptionFields;

package/types/PhoneNumber.d.ts

@@ -8,7 +8,7 @@ export interface PhoneNumberInputProps extends InputProps {
   className?: string;
   selectProps?: SelectProps;
   error?: string;
-  defaultCountry?: string;
+  initialCountryCode?: string;
 }
 export interface FormikPhoneNumberInputProps extends PhoneNumberInputProps {
   name: string;
@@ -27,7 +27,11 @@ export
  *
  * An input component to input and validate phone numbers with a country code
  *
- * picker.
+ * 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)
  *

package/types/ProductEmbed.d.ts

@@ -0,0 +1,87 @@
+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;
+}
+/**
+ *
+ * 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 React from "react";
+ * 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}
+ *   />
+ * );
+ * 
+ * export default EmbedPage;
+ * @endexample
+*/
+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;
+}>;
+export default ProductEmbed;

package/types/Rename.d.ts

@@ -48,8 +48,9 @@ const Rename: React.FC<{
   value: string;
   onRename?: (newName: string) => void;
   onClone?: () => void;
-  onArchive?: () => void;
+  onArchiveStatusToggle?: () => void;
   onDelete?: () => void;
+  isArchived?: boolean;
   isUpdating?: boolean;
   placeholder?: string;
   hideMenu?: boolean;
@@ -64,5 +65,7 @@ const Rename: React.FC<{
     link: string;
   }[];
   formatText?: (value: string) => string;
+  dropdownButtonProps: ButtonProps;
+  dropdownProps: DropdownProps;
 }>;
 export default Rename;

package/types/Schedule.d.ts

@@ -130,10 +130,12 @@ const Schedule: React.FC<{
   handleSubmit?: Function;
   handleValuesChanged?: Function;
   showHeader?: boolean;
+  isEditable?: boolean;
   periods: {
     [key: string]: Array<any>;
   };
   ref?: React.MutableRefObject;
   allowAddPeriod?: boolean;
+  isCreating?: boolean;
 }>;
 export default Schedule;

package/types/Search.d.ts

@@ -15,5 +15,7 @@ import { InputProps } from "neetoui";
 const Search: React.FC<{
   debounceTime?: number;
   onSearch?: (value: string) => void;
+  enableUrlSync?: boolean;
+  searchParamName?: string;
 } & InputProps>;
 export default Search;

package/types/Settings.d.ts

@@ -2,8 +2,13 @@ import React, { ReactNode } from "react";
 import { IntegrationCardProps } from "./IntegrationCard";
 type SettingItem = {
   label: string;
+  description: string;
   path: string;
-} & Partial<IntegrationCardProps>;
+  children: ReactNode;
+  icon: ReactNode;
+  dataCy?: string;
+  isConnected?: boolean;
+};
 type SettingCategory = {
   id: string;
   label: string;
@@ -44,13 +49,10 @@ type SettingCategory = {
  *       {
  *         label: 'Github',
  *         description: 'Connect with github',
- *         icon: GithubIcon
- *         onConnect: () => setIsIntegrationModalOpen(true)
- *         onDisconnect: ()=> setIsIntegrationDisconnectModalOpen(true)
- *         ...
- *         ...
- *         //rest of the props for IntegrationCard should be passed here.
- *         // other props will be passed on to the integration card.
+ *         icon: GithubIcon,
+ *         path: routes.settings.integrations.github.index,
+ *         isConnected: true,
+ *         // other props will be spread on the Link element in the settings card.
  *       }
  *     ],
  *   },
@@ -81,7 +83,7 @@ type SettingCategory = {
  * 
  *   return (
  *     <div>
- *       <Settings categories={getCategories({setIsIntegrationModalOpen: setIsOpen})} />
+ *       <Settings categories={getCategories()} />
  *       <IntegrationModal isOpen={isOpen}>
  *     </div>
  *   );
@@ -89,7 +91,8 @@ type SettingCategory = {
  * @endexample
 */
 const Settings: React.FC<{
+  isTitleHidden?: boolean;
+  isSearchHidden?: boolean;
   categories: SettingCategory[];
-  className?: string;
 }>;
 export default Settings;

package/types/ShareRecordingPane.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+/**
+ *
+ * The ShareRecordingPane component provides a pane interface for sharing
+ *
+ * recordings. It includes options for specifying playback timestamps and generates
+ *
+ * shareable links accordingly. The pane allows users to copy the shareable link
+ *
+ * and adjust playback timestamps.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import { Button } from "neetoui";
+ * import ShareRecordingPane from "components/ShareRecordingPane";
+ * 
+ * const ShareRecordingPaneExample = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   return (
+ *     <>
+ *       <Button
+ *         label="Open Share Recording Pane"
+ *         onClick={() => setIsOpen(true)}
+ *       />
+ *       <ShareRecordingPane
+ *         recordingUrl="https://example.com/recording"
+ *         totalDuration={3600} // Total duration in seconds (e.g., 1 hour)
+ *         getCurrentTimestamp={() => 300} // Current playback time in seconds
+ *         isOpen={isOpen} // Boolean indicating if the pane is open
+ *         onClose={() => setIsOpen(false)} // Function to close the pane
+ *         isLoading={false}
+ *       />
+ *     </>
+ *   );
+ * };
+ * 
+ * export default ShareRecordingPaneExample;
+ * @endexample
+*/
+declare const ShareRecordingPane: React.FC<{
+  recordingUrl: string;
+  totalDuration: number;
+  getCurrentTimestamp: () => number;
+  isOpen: boolean;
+  onClose: Function;
+  isLoading?: boolean;
+}>;
+export default ShareRecordingPane;

package/types/ShareViaLink.d.ts

@@ -4,6 +4,7 @@ type MoreOptions = {
   title: string;
   link: Function;
   icon: React.ReactNode;
+  onClick: Function;
   dataCy: string;
 };
 /**
@@ -20,7 +21,7 @@ type MoreOptions = {
  * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
  * 
  * const Share = ({ quiz }) => {
- *   const { mutate: regenerateURL, isLoading: isRegenerating } =
+ *   const { mutate: regenerateURL, isPending: isRegenerating } =
  *     useRegenerateUrl();
  * 
  *   return (
@@ -44,10 +45,10 @@ type MoreOptions = {
  * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
  * 
  * const Share = ({ quiz }) => {
- *   const { mutate: regenerateURL, isLoading: isRegenerating } =
+ *   const { mutate: regenerateURL, isPending: isRegenerating } =
  *     useRegenerateUrl();
  * 
- *   const { mutate: updateUrl, isLoading: isUpdating } = useUpdateUrl();
+ *   const { mutate: updateUrl, isPending: isUpdating } = useUpdateUrl();
  * 
  *   return (
  *     <ShareViaLink
@@ -103,7 +104,7 @@ type MoreOptions = {
  * @example 
  *
  * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
- * import { Message } from "neetoicons";
+ * import { Message, Notification } from "neetoicons";
  * 
  * const Share = ({ quiz }) => (
  *   <ShareViaLink
@@ -119,6 +120,14 @@ type MoreOptions = {
  *         icon: Message,
  *         dataCy: "share-via-email-link",
  *       },
+ *       {
+ *         title: "Notify users",
+ *         onClick: () => {
+ *           alert("Notified users");
+ *         },
+ *         icon: Notification,
+ *         dataCy: "notify-users",
+ *       },
  *     ]}
  *   />
  * );
@@ -147,5 +156,7 @@ const ShareViaLink: React.FC<{
   url: string;
   moreOptions?: MoreOptions[];
   isOtherShareOptionsEnabled?: boolean;
+  disableShareSocialMedia?: boolean;
+  disableQRDownload?: boolean;
 }>;
 export default ShareViaLink;