@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/Schedule.d.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+
+/**
+ *
+ * It is a component which allows setting working hours for the week.
+ *
+ * To use this component, you should install @bigbinary/neeto-time-zones package.
+ *
+ * @example 
+ *
+ * yarn add @bigbinary/neeto-time-zones
+ * @endexample
+ * ![image](https://user-images.githubusercontent.com/35630321/198989580-36a91233-8e7b-4300-b980-f50d2b0efcaa.png|height=200|width=300)
+ *
+ * How to Reset Form from outside Schedule Component:
+ *
+ * How to get the form errors from outside Schedule Component:
+ *
+ * This is the data structure for the periods prop:
+ *
+ * @example 
+ *
+ * const periods = {
+ *   sunday: [],
+ *   monday: [
+ *     {
+ *       id: "cf329f59-cbcb-445b-b567-ad04a2813b8c",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "monday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.796Z",
+ *       updatedAt: "2022-10-31T07:07:44.796Z",
+ *       startTime: "09:00 AM",
+ *       endTime: "05:00 PM",
+ *     },
+ *     {
+ *       id: "9ad79a58-1a0f-4ee7-b540-d86d55765874",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "monday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.801Z",
+ *       updatedAt: "2022-10-31T07:07:44.801Z",
+ *       startTime: "06:00 PM",
+ *       endTime: "07:00 PM",
+ *     },
+ *   ],
+ *   tuesday: [
+ *     {
+ *       id: "8cd6d2c6-50f5-436f-89f5-35db1a4c44bb",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "tuesday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.806Z",
+ *       updatedAt: "2022-10-31T07:07:44.806Z",
+ *       startTime: "09:00 AM",
+ *       endTime: "05:00 PM",
+ *     },
+ *   ],
+ *   wednesday: [
+ *     {
+ *       id: "1ea6c1b7-2fdb-4b2b-b35a-dc75f58cb84d",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "wednesday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.810Z",
+ *       updatedAt: "2022-10-31T07:07:44.810Z",
+ *       startTime: "09:00 AM",
+ *       endTime: "05:00 PM",
+ *     },
+ *   ],
+ *   thursday: [
+ *     {
+ *       id: "a9b5ea22-4765-4db2-b0f8-78aa1dd458f2",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "thursday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.812Z",
+ *       updatedAt: "2022-10-31T07:07:44.812Z",
+ *       startTime: "09:00 AM",
+ *       endTime: "05:00 PM",
+ *     },
+ *   ],
+ *   friday: [
+ *     {
+ *       id: "b1e4852c-d91f-419e-bb95-1ead12da69b2",
+ *       periodableType: "Availability",
+ *       periodableId: "2b9d8d31-8928-4f8e-87d2-8e8989b5be72",
+ *       wday: "friday",
+ *       period: null,
+ *       createdAt: "2022-10-31T07:07:44.823Z",
+ *       updatedAt: "2022-10-31T07:07:44.823Z",
+ *       startTime: "09:00 AM",
+ *       endTime: "05:00 PM",
+ *     },
+ *   ],
+ *   saturday: [],
+ * };
+ * @endexample
+ * @example 
+ *
+ * import { useState } from "react";
+ * import Schedule from "@bigbinary/neeto-molecules/Schedule";
+ * import { periods } from "constants";
+ * 
+ * const App = () => {
+ *   const [isEditing, setIsEditing] = useState(false);
+ * 
+ *   return (
+ *     <div>
+ *       <Schedule
+ *         handleSubmit={value => {
+ *           setIsEditing(false);
+ *         }}
+ *         isEditing={isEditing}
+ *         periods={periods}
+ *         setIsEditing={setIsEditing}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const Schedule: React.FC<{
+  isEditing?: boolean;
+  setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
+  handleSubmit?: Function;
+  handleValuesChanged?: Function;
+  showHeader?: boolean;
+  isEditable?: boolean;
+  periods: {
+    [key: string]: Array<any>;
+  };
+  ref?: React.MutableRefObject;
+  allowAddPeriod?: boolean;
+  isCreating?: boolean;
+  firstDay?: number;
+  showTimeZone?: boolean;
+  slotInterval?: number;
+}>;
+
+export { Schedule as default };

package/types/Scrollable.d.ts

@@ -0,0 +1,30 @@
+import { SIZES } from 'components/Scrollable/constants';
+import React from 'react';
+
+/**
+ *
+ * The Scrollable component can be used along with the Header and SubHeader to show
+ *
+ * large tables or UI that needs scrolling. It provides a scrollable container in
+ *
+ * the remaining space.
+ *
+ * @example 
+ *
+ * import Scrollable from "@bigbinary/neeto-molecules/Scrollable";
+ * 
+ * const App = () => (
+ *   <Scrollable>
+ *     {[...Array(20)].map((_, i) => (
+ *       <DummyCard key={i} />
+ *     ))}
+ *   </Scrollable>
+ * );
+ * @endexample
+*/
+declare const Scrollable: React.FC<{
+  className?: string;
+  size?: keyof typeof SIZES;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+
+export { Scrollable as default };

package/types/Search.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InputProps } from 'neetoui';
+
+/**
+ *
+ * A common search component with search value debounced
+ *
+ * @example 
+ *
+ * import Search from "@bigbinary/neeto-molecules/Search";
+ * 
+ * const Page = () => <Search debounceTime={500} onChange={e => noop} />;
+ * @endexample
+*/
+declare const Search: React.FC<{
+  debounceTime?: number;
+  onSearch?: (value: string) => void;
+  enableUrlSync?: boolean;
+  searchParamName?: string;
+} & InputProps>;
+
+export { Search as default };

package/types/SendToFields.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { InputProps } from 'neetoui';
+
+/**
+ *
+ * This email input component comes with the capability to include recipients in
+ *
+ * the Blind Carbon Copy (BCC) and Carbon Copy (CC) fields. The 'showCopyEmail'
+ *
+ * formik key is used to toggle the visibility of the Cc/Bcc input fields and is
+ *
+ * automatically added if omitted when clicking the Cc/Bcc
+ *
+ * button.Additionally,default name attributes, 'sendTo,' 'sendToCc,' and
+ *
+ * 'sendToBcc,' are provided for the email inputs, which can be customized to suit
+ *
+ * your needs.
+ *
+ * @example 
+ *
+ * import SendToFields from "@bigbinary/neeto-molecules/SendToFields";
+ * 
+ * const SendToFieldsComponent = () => (
+ *   <Form
+ *     formikProps={{
+ *       enableReinitialize: true,
+ *       initialValues: {
+ *         sendTo: [],
+ *         sendToCc: [],
+ *         sendToBcc: [],
+ *         showCopyEmail: false,
+ *       },
+ *     }}
+ *   >
+ *     <SendToFields
+ *       showUploadCsvButton
+ *       showCcBccButton
+ *       emailInputProps={{
+ *         id: "sendTo",
+ *         name: "sendTo",
+ *       }}
+ *       ccInputProps={{
+ *         label: "CC",
+ *         name: "sendToCc",
+ *       }}
+ *       bccInputProps={{
+ *         label: "BCC",
+ *         name: "sendToBcc",
+ *       }}
+ *     />
+ *   </Form>
+ * );
+ * @endexample
+*/
+declare const SendToFields: React.FC<{
+  inputProps?: InputProps;
+  ccInputProps?: InputProps;
+  bccInputPropse?: InputProps;
+  showUploadCsvButton: boolean;
+  showCcBccButton: boolean;
+  showCcField?: boolean;
+  showBccField?: boolean;
+  showSendToField?: boolean;
+}>;
+
+export { SendToFields as default };

package/types/SessionEnvironment.d.ts

@@ -0,0 +1,170 @@
+import React from 'react';
+import { HelpPopoverProps } from './HelpPopover.js';
+import '@bigbinary/neetoui';
+
+interface Details {
+  name?: string;
+  value: string;
+  label?: string;
+  key?: string;
+  icon?: React.ReactNode;
+  error?: string;
+  kind?: string;
+  isEditable?: boolean;
+  extraClasses?: string;
+  extraWrapperClasses?: string;
+  id?: string;
+  fieldValueId?: string;
+  custom?: boolean;
+  showCopyButton?: boolean;
+}
+
+/**
+ *
+ * SessionEnvironment is a component that displays the session details like name,
+ *
+ * email, phone number, etc. It also provides an option to view more details, where
+ *
+ * you can see additional information about the session, which is hidden by
+ *
+ * default.
+ *
+ * ![Screenshot](https://github.com/user-attachments/assets/37f608e0-8a3d-4f47-87e2-fcd49ba067a4|height=200|width=300)
+ *
+ * @example 
+ *
+ * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
+ * 
+ * const App = () => {
+ *   const details = [
+ *     { name: "name", value: "John Doe" },
+ *     { name: "email", value: "john.doe@example.com" },
+ *     { name: "phone_number", value: "+1 123 456 7890" },
+ *   ];
+ * 
+ *   const moreDetails = [
+ *     {
+ *       name: "created_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Created at",
+ *     },
+ *     {
+ *       name: "updated_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Updated at",
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <div>
+ *       <SessionEnvironment
+ *         details={details}
+ *         helpPopoverProps={{
+ *           description:
+ *             "The details pane shows extra information about your recording. Additional details on each metadata field can be found in the help article.",
+ *           helpLinkProps: {
+ *             href: "https://neetoreplayhelp.neetokb.com/articles/recording-details",
+ *             label: t("common.viewHelpArticle"),
+ *           },
+ *         }}
+ *         moreDetails={moreDetails}
+ *         title="Recording details"
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import { useState } from "react";
+ * 
+ * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
+ * 
+ * const App = () => {
+ *   const basicDetails = [
+ *     {
+ *       name: "name",
+ *       value: "John Doe",
+ *       isEditable: true,
+ *     },
+ *     {
+ *       name: "email",
+ *       value: "john.doe@example.com",
+ *       isEditable: true,
+ *     },
+ *     {
+ *       name: "phone_number",
+ *       value: "+1 123 456 7890",
+ *     },
+ *   ];
+ * 
+ *   const moreDetails = [
+ *     {
+ *       name: "created_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Created at",
+ *     },
+ *     {
+ *       name: "updated_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Updated at",
+ *     },
+ *   ];
+ * 
+ *   const [editableDetails, setEditableDetails] = useState([
+ *     ...basicDetails,
+ *     ...moreDetails,
+ *   ]);
+ * 
+ *   const handleSubmit = ({ name, value }) => {
+ *     setEditableDetails(oldDetails =>
+ *       oldDetails.map(detail => {
+ *         if (detail.name === name) {
+ *           return { ...detail, value, isEditing: false };
+ *         }
+ * 
+ *         return detail;
+ *       })
+ *     );
+ *   };
+ * 
+ *   const handleCancel = name => {
+ *     setEditableDetails(oldDetails =>
+ *       oldDetails.map(detail => {
+ *         if (detail.name === name) return findBy({ name }, args.details);
+ * 
+ *         return detail;
+ *       })
+ *     );
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <SessionEnvironment
+ *         details={basicDetails}
+ *         handleCancel={handleCancel}
+ *         handleSubmit={handleSubmit}
+ *         moreDetails={moreDetails}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const SessionEnvironment: React.FC<{
+  allowMultiline?: boolean;
+  details: Details[];
+  handleCancel?: (string) => void;
+  handleSubmit?: (object) => void;
+  helpPopoverProps?: HelpPopoverProps;
+  iconSize?: number;
+  isLoading?: boolean;
+  moreDetails?: Details[];
+  title?: string;
+}>;
+
+export { SessionEnvironment as default };

package/types/Settings.d.ts

@@ -0,0 +1,108 @@
+import React, { ReactNode } from 'react';
+import { HeaderProps } from './Header.js';
+import 'components/Header/constants';
+import 'neetoui';
+import './MoreDropdown.js';
+import '@bigbinary/neetoui';
+
+type SettingItem = {
+  label: string;
+  description: string;
+  path?: string;
+  href?: string;
+  children: ReactNode;
+  icon: ReactNode;
+  dataCy?: string;
+  isConnected?: boolean;
+};
+type SettingCategory = {
+  id: string;
+  label: string;
+  isIntegration?: boolean;
+  items: SettingItem[];
+};
+/**
+ *
+ * Settings can be used to create a settings page card layout.
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/16af3d07-e96a-4b4e-8013-ed6fa577c7b8|height=200|width=300)
+ *
+ * @example 
+ *
+ * categories={[
+ *   {
+ *     id: "general-settings",
+ *     label: "General Settings",
+ *     items: [
+ *       {
+ *         label: 'Ticket tags',
+ *         description: 'Create and manage tags',
+ *         icon: TicketIcon,
+ *         path: '/settings/general/ticket_tags'
+ *         dataCy: 'Ticket tags' //dataCy can be passed here.
+ *         // other props will be passed on to the setting card.
+ *       }
+ *       ...
+ *       ...
+ *       //more items
+ *     ]
+ *   },
+ *   {
+ *     id: "integrations",
+ *     isIntegration: true //Integrations section MUST have 'isIntegration: true',
+ *     label: "Integrations",
+ *     items: [
+ *       {
+ *         label: 'Github',
+ *         description: 'Connect with github',
+ *         icon: GithubIcon,
+ *         path: routes.settings.integrations.github.index,
+ *         isConnected: true,
+ *         // other props will be spread on the Link element in the settings card.
+ *       }
+ *     ],
+ *   },
+ *   ...
+ *   ...
+ *   //more categories
+ * ]}
+ * @endexample
+ * Note: This component also supports "scroll-into-view" functionality to scroll
+ *
+ * specific setting categories into view, based on the query params. For example,
+ *
+ * the page will scroll to the "Integrations" category, when the query params
+ *
+ * contain ?category=integrations. The query param should be the id of the
+ *
+ * category.
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * import Settings from "@bigbinary/neeto-molecules/Settings";
+ * import { Modal as IntegrationModal } from "neetointegrations"
+ * import { getCategories } from "./utils";
+ * 
+ * const SettingsPage = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   return (
+ *     <div>
+ *       <Settings categories={getCategories()} />
+ *       <IntegrationModal isOpen={isOpen}>
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const Settings: React.FC<{
+  title?: string;
+  isTitleHidden?: boolean;
+  isSearchHidden?: boolean;
+  categories: SettingCategory[];
+  className: string;
+  headerProps?: HeaderProps;
+}>;
+
+export { Settings as default };

package/types/ShareRecordingPane.d.ts

@@ -0,0 +1,85 @@
+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 { 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
+ * @example 
+ *
+ * import { 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 with multiple recording URLs"
+ *         onClick={() => setIsOpen(true)}
+ *       />
+ *       <ShareRecordingPane
+ *         recordingUrls={[
+ *           "https://example.com/recording",
+ *           "https://customexample.domain.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;
+  recordingUrls?: Array<string>;
+  totalDuration: number;
+  getCurrentTimestamp: () => number;
+  isOpen: boolean;
+  onClose: Function;
+  isLoading?: boolean;
+}>;
+
+export { ShareRecordingPane as default };