@bigbinary/neeto-molecules 3.15.41 → 3.15.43

package/types/Schedule.d.ts

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

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

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

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

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

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

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