@bigbinary/neeto-molecules 0.0.1

package/types/Schedule.d.ts

@@ -0,0 +1,132 @@
+import React from "react";
+/**
+ *
+ * It is a component which allows setting working hours for the week.
+ *
+ * ![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 React, { 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
+*/
+const Schedule: React.FC<{
+  isEditing?: boolean;
+  setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
+  handleSubmit?: Function;
+  handleValuesChanged?: Function;
+  showHeader?: boolean;
+  periods: {
+    [key: string]: Array<any>;
+  };
+  ref?: React.MutableRefObject;
+}>;
+export default Schedule;

package/types/Scrollable.d.ts

@@ -0,0 +1,28 @@
+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
+*/
+const Scrollable: React.FC<{
+  className?: string;
+  size?: keyof typeof SIZES;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export default Scrollable;

package/types/ShareViaEmail.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+/**
+ *
+ * A common component to share entities via email.
+ *
+ * ![ShareViaEmail](https://user-images.githubusercontent.com/66865722/229559580-b58d4418-8b03-4afc-9f63-c2dfa756c0fa.png|height=200|width=300)
+ *
+ * Simple:
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import ShareViaEmail from "@bigbinary/neeto-molecules/ShareViaEmail";
+ * import Scrollable from "@bigbinary/neeto-molecules/Scrollable";
+ * 
+ * const ShareViaEmail = () => {
+ *   const handleSubmit = () => {
+ *     //api call
+ *   };
+ * 
+ *   return (
+ *     <Scrollable className="flex w-full flex-col p-0">
+ *       <ShareViaEmail
+ *         backToUrl="/home/share"
+ *         handleSubmit={handleSubmit}
+ *         description="Share form via email"
+ *       />
+ *     </Scrollable>
+ *   );
+ * };
+ * export default ShareViaEmail;
+ * @endexample
+ * With children and EmailPreview props:
+ *
+ * @example 
+ *
+ * import React, {useState} from "react";
+ * import ShareViaEmail from "@bigbinary/neeto-molecules/ShareViaEmail";
+ * import Scrollable from "@bigbinary/neeto-molecules/Scrollable";
+ * 
+ * const ShareViaEmail = () => {
+ *   const [startButtonText, setStartButtonText] = useState("")
+ * 
+ *   const handleSubmit = () => {
+ *     //custom validations and API call
+ *   };
+ * 
+ *   const StartButtonText => (
+ *     //input field
+ *   )
+ * 
+ *   return (
+ *     <Scrollable className="flex w-full flex-col p-0">
+ *       <ShareViaEmail
+ *         backToUrl="/home/share"
+ *         handleSubmit={handleSubmit}
+ *         productName="Form"
+ *       >
+ *         <StartButtonText />
+ *         {other child components}
+ *       </ShareViaEmail>
+ *     </Scrollable>
+ *   );
+ * };
+ * export default ShareViaEmail;
+ * @endexample
+*/
+const ShareViaEmail: React.FC<{
+  backToUrl?: string;
+  children?: React.ReactNode;
+  description?: string;
+  disableReplyTo?: boolean;
+  productName?: string;
+  defaultValues?: {
+    sendFromEmail?: string;
+    replyToEmail?: string;
+    emailSubject?: string;
+    emailBody?: string;
+    actionButtonText?: string;
+  };
+  handleSubmit: (data: {
+    sendFromEmail: string;
+    replyToEmail: string;
+    notifyEmails: {
+      label: string;
+      value: string;
+      valid: boolean;
+    }[];
+    emailSubject: string;
+    emailBody: string;
+    isSendLaterEnabled: boolean;
+    sendEmailDatetime: string;
+    category: string;
+    actionButtonText: string;
+  }) => void;
+  showVideoEmbedInEditor?: boolean;
+  title?: string;
+}>;
+export default ShareViaEmail;

package/types/ShareViaLink.d.ts

@@ -0,0 +1,117 @@
+import React from "react";
+/**
+ *
+ * A common component to share the link in multiple ways.
+ *
+ * ![ShareViaLink](https://user-images.githubusercontent.com/54279092/220558650-b00669cf-1b59-4fff-8b21-10d12f801939.png|height=200|width=300)
+ *
+ * Regenerate URL enabled
+ *
+ * @example 
+ *
+ * import { useRegenerateUrl } from "hooks/reactQuery/useQuizzesApi";
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => {
+ *   const { mutate: regenerateURL, isLoading: isRegenerating } =
+ *     useRegenerateUrl();
+ * 
+ *   return (
+ *     <ShareViaLink
+ *       enabledOptions={{ regenerate: true }}
+ *       entity={quiz}
+ *       entityName="quiz"
+ *       handleRegenerate={regenerateURL}
+ *       isLoading={isRegenerating}
+ *       socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *       url={quizUrl}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Regenerate URL and Edit URL enabled
+ *
+ * @example 
+ *
+ * import { useRegenerateUrl, useUpdateUrl } from "hooks/reactQuery/useQuizzesApi";
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => {
+ *   const { mutate: regenerateURL, isLoading: isRegenerating } =
+ *     useRegenerateUrl();
+ * 
+ *   const { mutate: updateUrl, isLoading: isUpdating } = useUpdateUrl();
+ * 
+ *   return (
+ *     <ShareViaLink
+ *       editUrlProps={{
+ *         prefix: `${window.location.origin}/`,
+ *         editablePath: window.location.pathname,
+ *       }}
+ *       enabledOptions={{ regenerate: true, edit: true }}
+ *       entity={quiz}
+ *       entityName="quiz"
+ *       handleEdit={updateUrl}
+ *       handleRegenerate={regenerateURL}
+ *       isLoading={isRegenerating || isUpdating}
+ *       socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *       url={quizUrl}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Regenerate URL and Edit URL disabled
+ *
+ * @example 
+ *
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => (
+ *   <ShareViaLink
+ *     entity={quiz}
+ *     entityName="quiz"
+ *     socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *     url={quizUrl}
+ *   />
+ * );
+ * @endexample
+ * With preview URL
+ *
+ * @example 
+ *
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => (
+ *   <ShareViaLink
+ *     entity={quiz}
+ *     entityName="quiz"
+ *     previewUrl={quizPreviewUrl}
+ *     socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *     url={quizUrl}
+ *   />
+ * );
+ * @endexample
+*/
+const ShareViaLink: React.FC<{
+  isLoading?: boolean;
+  editUrlProps?: {
+    prefix?: string;
+    editablePath?: string;
+    maxLength?: number;
+  };
+  enabledOptions?: {
+    regenerate?: boolean;
+    edit?: boolean;
+  };
+  entity: {
+    id: string;
+    name: string;
+  };
+  entityName: string;
+  handleEdit?: Function;
+  handleRegenerate?: Function;
+  previewUrl?: string;
+  socialMediaPostTitle: string;
+  url: string;
+}>;
+export default ShareViaLink;

package/types/Sidebar.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { NavLinkProps } from "react-router-dom";
+import { AvatarProps } from "@bigbinary/neetoui";
+type NavLinkItemType = {
+  to: string;
+  label?: React.ReactNode;
+  icon?: any;
+  description?: React.ReactNode;
+} & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
+type LinkType = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  label?: React.ReactNode;
+  icon?: any;
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+interface ProfileInfo {
+  name?: string;
+  email?: string;
+  topLinks?: LinkType[];
+  bottomLinks?: LinkType[];
+  customContent?: React.ReactNode;
+  changelogProps?: LinkType;
+  helpProps?: LinkType;
+}
+interface HelpLinks {
+  liveChatProps?: LinkType;
+  helpCenterProps?: LinkType;
+  changelogProps?: LinkType;
+  keyboardShortcutProps?: LinkType;
+}
+/**
+ *
+ * Used in neeto products for showing options like: settings, profile, whats new,
+ *
+ * app switcher etc. App switcher UI & Changelog display UI are all implemented
+ *
+ * internally in this component.
+ *
+ * ![image](https://user-images.githubusercontent.com/29166133/220422846-7cb06cd1-396c-4f5e-b493-531c96c70e43.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Sidebar from "@bigbinary/neeto-molecules/Sidebar";
+ * import { SIDEBAR_LINKS } from "components/constants";
+ * 
+ * const SidebarContainer = ({ children }) => {
+ *   // custom app logic
+ *   return (
+ *     <div>
+ *       <Sidebar showAppSwitcher={false} navLinks={SIDEBAR_LINKS} />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const Sidebar: React.FC<{
+  navLinks?: NavLinkItemType[];
+  profileInfoOverrides?: ProfileInfo & AvatarProps;
+  helpLinkOverrides?: HelpLinks;
+  extraTopLinks?: LinkType[];
+  showAppSwitcher?: boolean;
+}>;
+export default Sidebar;

package/types/SubHeader.d.ts

@@ -0,0 +1,97 @@
+import React from "react";
+import { CheckboxProps, DropdownProps, InputProps } from "neetoui";
+import { Filters } from "neetofilters";
+type ColumnData = {
+  dataIndex: string;
+  title: string;
+  key: string;
+};
+type DownloadButtonProps = {
+  count?: number;
+  onClick: () => void;
+  "data-cy"?: string;
+};
+type ColumnsButtonProps = {
+  onChange: (columns: ColumnData[]) => void;
+  actionBlock?: React.ReactNode;
+  checkboxProps?: Partial<CheckboxProps>;
+  columnData?: ColumnData[];
+  dropdownProps?: Partial<DropdownProps>;
+  fixedColumns?: string[];
+  isSearchable?: boolean;
+  localStorageKey?: string;
+  initialValue?: string[];
+  noColumnMessage?: string;
+  searchProps?: Partial<InputProps>;
+};
+interface RightBlockComposition {
+  RightBlock: React.FC<{
+    downloadButtonProps?: DownloadButtonProps;
+    filterProps?: React.ComponentProps<typeof Filters>;
+    columnsButtonProps?: ColumnsButtonProps;
+  }>;
+}
+/**
+ *
+ * The SubHeader component is used alongside the header component to display
+ *
+ * additional information or actions.
+ *
+ * @example 
+ *
+ * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
+ * 
+ * const App = () => (
+ *   <SubHeader
+ *     leftActionBlock={
+ *       <Typography component="h4" style="h4">
+ *         118 Contacts
+ *       </Typography>
+ *     }
+ *     rightActionBlock={
+ *       <>
+ *         <Button icon={Delete} label="Delete" style="secondary" />
+ *         <Button label="Disable" style="secondary" />
+ *       </>
+ *     }
+ *   />
+ * );
+ * @endexample
+ * @example 
+ *
+ * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
+ * 
+ * const App = () => (
+ *   <SubHeader
+ *     leftActionBlock={
+ *       <Typography component="h4" style="h4">
+ *         118 Contacts
+ *       </Typography>
+ *     }
+ *     rightActionBlock={
+ *       <SubHeader.RightBlock
+ *         downloadButtonProps={{
+ *           onClick: download(),
+ *         }}
+ *         filterProps={
+ *           {
+ *              NeetoFilters props 
+ *           }
+ *         }
+ *         columnsButtonProps={
+ *           {
+ *              Columns props 
+ *           }
+ *         }
+ *       />
+ *     }
+ *   />
+ * );
+ * @endexample
+*/
+const SubHeader: React.FC<{
+  className?: string;
+  leftActionBlock?: React.ReactNode;
+  rightActionBlock?: React.ReactNode;
+}> & RightBlockComposition;
+export default SubHeader;

package/types/TableWrapper.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+/**
+ *
+ * TableWrapper is used to wrap the table component. It is used to avoid the
+ *
+ * dynamic height calculation and inconsistency in heights for the parent container
+ *
+ * of the table component. TableWrapper is used to wrap the table component. It is
+ *
+ * used to avoid the dynamic height calculation and inconsistency in heights for
+ *
+ * the parent container of the table component.
+ *
+ * TableWrapper should be used only with Tables used in the listing layout as shown
+ *
+ * below.
+ *
+ * @example 
+ *
+ * import TableWrapper from "@bigbinary/neeto-molecules/TableWrapper";
+ * 
+ * const App = () => (
+ *   <Container>
+ *     <Header />
+ *     <SubHeader />
+ *     <TableWrapper>
+ *       <Table columnData={columnData} rowData={rowData} />
+ *     </TableWrapper>
+ *   </Container>
+ * );
+ * @endexample
+*/
+const TableWrapper: React.FC<{
+  hasPagination?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}>;
+export default TableWrapper;

package/types/TimeFormat.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { TooltipProps, TypographyProps } from "@bigbinary/neetoui";
+import {
+  timeFormat,
+  DateTimeType,
+} from "@bigbinary/neeto-commons-frontend/utils";
+
+const TimeFormat: {
+  [key in Capitalize<keyof typeof timeFormat>]: React.FC<{
+    date: DateTimeType;
+    typographyProps?: Partial<TypographyProps>;
+    tooltipProps?: Partial<TooltipProps>;
+  }>;
+};
+
+export default TimeFormat;

package/types/TimezoneMismatchModal.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+/**
+ *
+ * A modal to show when the user's timezone is different from the timezone of the
+ *
+ * browser. The user can choose to continue with the users timezone or update the
+ *
+ * user timezone to the browsers's timezone.
+ *
+ * @example 
+ *
+ * import TimezoneMismatchModal from "@bigbinary/neeto-molecules/TimezoneMismatchModal";
+ * 
+ * const App = () => (
+ *   <div>
+ *     <TimezoneMismatchModal />
+ *   </div>
+ * );
+ * @endexample
+ * To control the visibility of the modal, use the isOpen prop. You can also pass
+ *
+ * a callback to the onClose prop to be called when the modal is closed. Usage:
+ *
+ * @example 
+ *
+ * import TimezoneMismatchModal from "@bigbinary/neeto-molecules/TimezoneMismatchModal";
+ * 
+ * const App = () => (
+ *   <div>
+ *     <TimezoneMismatchModal isOpen={true} onClose={() => {}} />
+ *   </div>
+ * );
+ * @endexample
+*/
+const TimezoneMismatchModal: React.FC<{
+  isOpen?: boolean;
+  onClose?: Function;
+}>;
+export default TimezoneMismatchModal;