@bigbinary/neeto-molecules 1.0.13 → 1.0.15

package/types/PublishBlock.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-
 import { AlertProps } from "@bigbinary/neetoui";
-
 interface PublishBlockProps {
   renderDraftButtons: (props: {
     ViewDraftButton: JSX.Element;
@@ -12,9 +10,63 @@ interface PublishBlockProps {
     PublishPreviewButton: JSX.Element;
   }) => 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)
+ *
+ * This optional component can be used to render the reset alert modal for
+ *
+ * discarding draft.
+ *
+ * @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}
+ *       />
+ * 
+ *       <PublishBlock.Alert
+ *         isOpen={isResetDraftAlertOpen}
+ *         message="Leaving this page will delete all unpublished changes."
+ *         title="Are you sure you want to discard changes?"
+ *         onClose={() => setIsResetDraftAlertOpen(false)}
+ *         onSubmit={action("handleReset")}
+ *         //other alert props can also be passed
+ *       />
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
 const PublishBlock: React.FC<PublishBlockProps> & {
   Alert: React.FC<AlertProps>;
 };
-
-export default PublishBlock;
+export default PublishBlock;

package/types/Schedule.d.ts

@@ -1,5 +1,129 @@
 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)
+ *
+ * Props:
+ *
+ * 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
+ * Simple:
+ *
+ * @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>>;
@@ -11,5 +135,4 @@ const Schedule: React.FC<{
   };
   ref?: React.MutableRefObject;
 }>;
-
-export default Schedule;
+export default Schedule;

package/types/Scrollable.d.ts

@@ -1,12 +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;
+  className?: string;
+  size?: keyof typeof SIZES;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export default Scrollable;

package/types/ShareViaEmail.d.ts

@@ -1,5 +1,71 @@
 import React from "react";
-
+/**
+ *
+ * A common component to share entities via email.
+ *
+ * ![ShareViaLink](https://user-images.githubusercontent.com/66865722/223617875-02359942-e008-4612-b64c-867673545d0e.png|height=200|width=300)
+ *
+ * Simple:
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import ShareViaEmail from "@bigbinary/neeto-molecules/ShareViaEmail";
+ * import { Scrollable } from "@bigbinary/neetoui/layouts";
+ * 
+ * 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/neetoui/layouts";
+ * 
+ * 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}
+ *         actionButtonText={startButtonText}
+ *         productName="Form"
+ *       >
+ *         <StartButtonText />
+ *         {other children components}
+ *       </ShareViaEmail>
+ *     </Scrollable>
+ *   );
+ * };
+ * export default ShareViaEmail;
+ * @endexample
+*/
 const ShareViaEmail: React.FC<{
   backToUrl?: string;
   children?: React.ReactNode;
@@ -13,7 +79,11 @@ const ShareViaEmail: React.FC<{
   handleSubmit: (data: {
     sendFromEmail: string;
     replyToEmail: string;
-    notifyEmails: { label: string; value: string; valid: boolean }[];
+    notifyEmails: {
+      label: string;
+      value: string;
+      valid: boolean;
+    }[];
     emailSubject: string;
     emailBody: string;
     isSendLaterEnabled: boolean;
@@ -21,5 +91,4 @@ const ShareViaEmail: React.FC<{
     category: string;
   }) => void;
 }>;
-
-export default ShareViaEmail;
+export default ShareViaEmail;

package/types/ShareViaLink.d.ts

@@ -1,5 +1,66 @@
 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
+ *       enableRegenerateUrl
+ *       entity={quiz}
+ *       entityName="quiz"
+ *       handleRegenerate={regenerateURL}
+ *       isRegenerating={isRegenerating}
+ *       socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *       url={quizUrl}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Regenerate 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<{
   isRegenerating?: boolean;
   enableRegenerateUrl?: boolean;
@@ -13,5 +74,4 @@ const ShareViaLink: React.FC<{
   socialMediaPostTitle: string;
   url: string;
 }>;
-
-export default ShareViaLink;
+export default ShareViaLink;

package/types/Sidebar.d.ts

@@ -1,8 +1,32 @@
 import React from "react";
-
 import { AvatarProps } from "@bigbinary/neetoui";
 import { LinkType, NavLinkItemType } from "@bigbinary/neetoui/layouts";
-
+/**
+ *
+ * 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 appName="invisible" navLinks={SIDEBAR_LINKS} />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
 const Sidebar: React.FC<{
   navLinks: NavLinkItemType[];
   appName: string;
@@ -24,5 +48,4 @@ const Sidebar: React.FC<{
   extraTopLinks?: LinkType[];
   showAppSwitcher?: boolean;
 }>;
-
-export default Sidebar;
+export default Sidebar;

package/types/SubHeader.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+const SubHeader: React.FC<{
+    className?: string,
+    leftActionBlock?: React.ReactNode,
+    rightActionBlock?: React.ReactNode,
+}>;
+
+export default SubHeader;

package/types/TimeFormat.d.ts

@@ -1,5 +1,17 @@
-import DateFormat from "@bigbinary/neeto-molecules/DateFormat";
+import React from "react";
 
-const TimeFormat = DateFormat;
+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

@@ -1,8 +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;
+export default TimezoneMismatchModal;