@bigbinary/neeto-molecules 1.0.12 → 1.0.14

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/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;