@bigbinary/neeto-molecules 1.0.12 → 1.0.14

package/types/IpRestriction.d.ts

@@ -1,5 +1,23 @@
 import React from "react";
-
+/**
+ *
+ * A common component to restrict IPs in neeto applications.
+ *
+ * ![Ip](https://user-images.githubusercontent.com/49012815/209516878-91d69555-a643-486a-81f8-e59797d3bef3.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import IpRestriction from "@bigbinary/neeto-molecules/IpRestriction";
+ * 
+ * const IpRestrictionSetting = () => (
+ *   <Container isHeaderFixed className="w-full">
+ *     <Header title="IP Restrictions" />
+ *     <Scrollable className="w-full">
+ *       <IpRestriction />
+ *     </Scrollable>
+ *   </Container>
+ * );
+ * @endexample
+*/
 const IpRestriction: React.FC<{}>;
-
-export default IpRestriction;
+export default IpRestriction;

package/types/KeyboardShortcuts.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { TFunction } from "i18next";
-
 interface Shortcut {
   sequence: string;
   description: TFunction;
@@ -12,12 +11,92 @@ interface Category {
 interface ProductShortcuts {
   [index: string | TFunction]: Category;
 }
-
-const KeyboardShortcutsPane: {
+/**
+ *
+ * A common component that accept's a list of all the keyboard shortcuts in a
+ *
+ * product and renders a side panel on the right side of the screen upon pressing a
+ *
+ * defined hotkey (shift+/).
+ *
+ * All the global shortcuts like open pane, close modal etc will be rendered by
+ *
+ * default by the component. It provides a single prop called productShortcuts
+ *
+ * which is used to pass in the product specific keyboard shortcuts. The prop's
+ *
+ * structure is given below:
+ *
+ * @example 
+ *
+ * {
+ *   [i18n.t("shortcuts.category1.categoryName")]: {
+ *     shortcutName: {
+ *       sequence: "command+shift+r",
+ *       description: "",
+ *     },
+ *   },
+ *   [i18n.t("shortcuts.category2.categoryName")]: {
+ *     shortcutName2: {
+ *       sequence: "r s",
+ *       description: "",
+ *       fullShortcutsLink: "www.example.com/all-shortcuts"
+ *     },
+ *   },
+ * }
+ * @endexample
+ * fullShortcutsLink is an optional property in the data structure which can be
+ *
+ * used to render links which points to external pages that lists all the
+ *
+ * shortcuts. This will be useful when the number of shortcuts under a category is
+ *
+ * very large.
+ *
+ * The sequence should be passed in MacOS format and the component will take care
+ *
+ * of detecting & converting it to the users platform. The component supports three
+ *
+ * kinds of sequence.
+ *
+ * @example 
+ *
+ * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
+ * 
+ * const App = () => (
+ *   <Main />
+ *   <KeyboardShortcuts.Pane productShortcuts={{
+ *     [i18n.t("shortcuts.tickets.categoryName")]: {
+ *       openNotes: {
+ *         sequence: "command+shift+r",
+ *         description: i18n.t("shortcuts.tickets.openNotes"),
+ *       },
+ *     },
+ *   }}/>
+ * )
+ * @endexample
+ * This hook can be used to manage the behavior of KeyboardShortcuts pane.
+ *
+ * @example 
+ *
+ * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
+ * 
+ * const [isOpen, setIsOpen] = KeyboardShortcuts.usePaneState();
+ * 
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}> Open shortcuts pane</button>
+ *     <button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
+ *       Toggle shortcuts pane
+ *     </button>
+ *   </>
+ * );
+ * @endexample
+*/
+const KeyboardShortcuts: {
   Pane: React.FC<{
     productShortcuts?: ProductShortcuts;
   }>;
   usePaneState(): [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 };
-
-export default KeyboardShortcutsPane;
+export default KeyboardShortcuts;

package/types/LoginPage.d.ts

@@ -1,5 +1,39 @@
 import React from "react";
-
+/**
+ *
+ * A common login page for all neeto-applications with dedicated button for oliver
+ *
+ * to login.
+ *
+ * undefined
+ *
+ * Usage:
+ *
+ * @example 
+ *
+ * import LoginPage from "@bigbinary/neeto-molecules/LoginPage";
+ * 
+ * // Main.jsx
+ * export default function Main() {
+ *   if (!isLoggedIn) {
+ *     return <LoginPage handleSubmit={payload => sessionsApi.create(payload)} />;
+ *   }
+ * 
+ *   // return main routes
+ * }
+ * @endexample
+ * The payload will be of the following format:
+ *
+ * @example 
+ *
+ * {
+ *   "user": {
+ *     "email": "oliver@example.com",
+ *     "password": "welcome"
+ *   }
+ * }
+ * @endexample
+*/
 const LoginPage: React.FC<{
   handleSubmit: (data: {
     user: {
@@ -8,5 +42,4 @@ const LoginPage: React.FC<{
     };
   }) => any;
 }>;
-
-export default LoginPage;
+export default LoginPage;

package/types/MenuBar.d.ts

@@ -1,9 +1,117 @@
 import React from "react";
-
-const Menubar: React.FC<{
-    title?: string;
-    showMenu?: boolean;
-    className?: string;
-}>;
-
-export default Menubar;
+import { ButtonProps, InputProps } from "@bigbinary/neetoui";
+import { LinkProps } from "react-router-dom";
+type BlockProps = {
+  label: string;
+  url?: string;
+  icon?: React.ReactNode;
+  count?: number;
+  active?: boolean;
+  onEdit?: (...args: any[]) => any;
+  onClick?: (...args: any[]) => any;
+  className?: string;
+} & LinkProps & React.RefAttributes<HTMLAnchorElement> & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type ItemProps = {
+  label?: string;
+  description?: string;
+  active?: boolean;
+  className?: string;
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type SubTitleProps = {
+  iconProps?: ButtonProps[];
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type SearchProps = {
+  isCollapsed?: boolean;
+  onCollapse?: React.MouseEventHandler<HTMLButtonElement>;
+} & InputProps;
+type AddNewProps = {
+  label?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+/**
+ *
+ * Used in neeto products to show a collapsible menu which can be used for adding
+ *
+ * navigation options to view different sections.
+ *
+ * ![image](https://user-images.githubusercontent.com/12969853/225556542-ed4fd436-45d8-4eb5-8ffe-4a9e191d8fc1.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
+ * 
+ * const MenuBarContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <MenuBar showMenu />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * MenuBar with custom title
+ *
+ * @example 
+ *
+ * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
+ * 
+ * const MenuBarContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <MenuBar showMenu title="Custom Title" />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * MenuBar with child components
+ *
+ * @example 
+ *
+ * import MenuBar from "@bigbinary/neeto-molecules/MenuBar";
+ * 
+ * const MenuBarContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <MenuBar showMenu title="Custom Title">
+ *         <MenuBar.Block active count={13} label="All" />
+ *         <MenuBar.SubTitle
+ *           iconProps={[
+ *             {
+ *               icon: Search,
+ *               onClick: () => {},
+ *             },
+ *           ]}
+ *         >
+ *           <Typography
+ *             component="h4"
+ *             style="h5"
+ *             textTransform="uppercase"
+ *             weight="bold"
+ *           >
+ *             Subtitle
+ *           </Typography>
+ *         </MenuBar.SubTitle>
+ *         <MenuBar.Search collapse={isSearchCollapsed} onCollapse={() => {}} />
+ *         <MenuBar.AddNew label="Add new button" />
+ *         <MenuBar.Item
+ *           description="An Item which can have a subheading and heading"
+ *           label="Heading"
+ *         />
+ *       </MenuBar>
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const MenuBar: React.FC<{
+  title?: string;
+  showMenu?: boolean;
+  className?: string;
+  children?: React.ReactNode | React.ReactNode[];
+}> & {
+  Block: React.FC<BlockProps>;
+  Item: React.FC<ItemProps>;
+  SubTitle: React.FC<SubTitleProps>;
+  Search: React.FC<SearchProps>;
+  AddNew: React.FC<AddNewProps>;
+};
+export default MenuBar;

package/types/NeetoWidget.d.ts

@@ -1,10 +1,30 @@
 import React from "react";
-
 type EmbedCode = React.FC<{
   primaryApp?: string;
-  initialSelectedWidgets?: string[];
 }>;
-
+/**
+ *
+ * This object contains the widget names.
+ *
+ * This component can be used to render the neetoWidget embed code within any
+ *
+ * host application. It uses APIs from neeto_sso to query the apiKey from
+ *
+ * neeto-auth-web, enable/disable widgets, and to allow the user to send the
+ *
+ * embed code via email.
+ *
+ * Developers can use the props to customize the component for the host
+ *
+ * application.
+ *
+ * Usage:
+ *
+ * @example 
+ *
+ * <NeetoWidget.EmbedCode primaryApp={NeetoWidget.WIDGET_TYPES.chat} />
+ * @endexample
+*/
 const NeetoWidget: {
   EmbedCode: EmbedCode;
   WIDGET_TYPES: {
@@ -13,5 +33,4 @@ const NeetoWidget: {
     replay: "replay";
   };
 };
-
-export default NeetoWidget;
+export default NeetoWidget;

package/types/PageLoader.d.ts

@@ -1,7 +1,38 @@
 import React from "react";
-
+/**
+ *
+ * Used in neeto products as the page loader to indicate that the page is being
+ *
+ * loaded.
+ *
+ * ![image](https://user-images.githubusercontent.com/12969853/225239088-f78bd7b4-ba46-404c-896c-e9e5104f824c.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import PageLoader from "@bigbinary/neeto-molecules/PageLoader";
+ * const PageLoaderContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <PageLoader />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * PageLoader with custom text
+ *
+ * @example 
+ *
+ * import PageLoader from "@bigbinary/neeto-molecules/PageLoader";
+ * const PageLoaderContainer = ({ children }) => {
+ *   return (
+ *     <div>
+ *       <PageLoader text="Loading..." />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
 const PageLoader: React.FC<{
-    text?: string;
+  text?: string;
 }>;
-
-export default PageLoader;
+export default PageLoader;

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

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