@bigbinary/neeto-molecules 1.0.13 → 1.0.14

package/types/DateRangeFilter.d.ts

@@ -1,17 +1,52 @@
 import React from "react";
-
 import { Dayjs } from "dayjs";
-
 interface TimePeriodType {
   startDate: Dayjs;
   endDate: Dayjs;
   rangeType: string;
 }
-
+/**
+ *
+ * A common component to manage your date range filters.
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/45137335/221573730-3195ac05-6cf2-4b45-bfe9-427b077cec07.png|height=200|width=300)
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/45137335/221578791-74b1c235-9287-4650-9d9b-6774df1d689d.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import DateRangeFilter from "@bigbinary/neeto-molecules/DateRangeFilter";
+ * const DateRangeFilterActionBlock = (
+ *   {
+ *     //pass the necessary props
+ *   }
+ * ) => {
+ *   const [timePeriod, setTimePeriod] = useState(INITIAL_TIME_PERIOD_VALUE);
+ *   //INITIAL_TIME_PERIOD_VALUE  will be an object with label,value and rangeType as keys
+ *   return (
+ *     <DateRangeFilter
+ *       timePeriod={timePeriod}
+ *       setTimePeriod={setTimePeriod}
+ *       timePeriodOptions={[
+ *         {
+ *           label: "New filter label",
+ *           value: {startDate:  pass dayjs object , endDate:  pass dayjs object , rangeType: "new_range_type"},
+ *         },
+ *       ]} // pass this prop only if you want to override default filters available
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Note: The value of timePeriod state will contain the startDate, endDate and
+ *
+ * range_type of the selected filter. This can be passed into the filterParams of
+ *
+ * your API.
+ *
+*/
 const DateRangeFilter: React.FC<{
   timePeriod: TimePeriodType;
   setTimePeriod: React.Dispatch<React.SetStateAction<TimePeriodType>>;
   timePeriodOptions: TimePeriodType[];
 }>;
-
-export default DateRangeFilter;
+export default DateRangeFilter;

package/types/DynamicVariables.d.ts

@@ -1,18 +1,45 @@
 import React from "react";
 import { DropdownProps } from "@bigbinary/neetoui";
-
 interface Variable {
   label?: string;
   key?: string;
   value?: string;
   category?: string;
-  variables?: Omit<Variable, "variables">[]
+  variables?: Omit<Variable, "variables">[];
 }
-
+/**
+ *
+ * A common component for using dynamic variables.
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/70290286/223332469-21106919-637f-48b5-abec-a57306ca7005.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import DynamicVariables from "@bigbinary/neeto-molecules/DynamicVariables";
+ * import { Input } from "neetoui/formik";
+ * 
+ * const DynamicVariablesDemo = () => {
+ *   return (
+ *     <Input
+ *       label="Input with DynamicVariables"
+ *       name="subject"
+ *       suffix={
+ *         <Variables
+ *           dropdownProps={{ buttonStyle: "text" }}
+ *           variables={EDITOR_VARIABLES}
+ *           onVariableClick={variable => {
+ *             console.log(variable);
+ *           }}
+ *         />
+ *       }
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
 const DynamicVariables: React.FC<{
   onVariableClick?: (variable: Variable) => void;
   variables: Variable[];
   dropdownProps?: DropdownProps;
 }>;
-
-export default DynamicVariables;
+export default DynamicVariables;

package/types/EmailPreview.d.ts

@@ -1,5 +1,40 @@
 import React from "react";
-
+/**
+ *
+ * A common component to preview emails.
+ *
+ * ![EmailPreview](https://user-images.githubusercontent.com/66865722/222370228-cda4ac74-8ec9-4288-ab88-a49b21cab284.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * ["oliver@example.com", "eve@example.com"]
+ * @endexample
+ * Simple:
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import { useFormikContext } from "formik";
+ * import EmailPreview from "@bigbinary/neeto-molecules/EmailPreview";
+ * const EmailShare = () => {
+ *   const { values } = useFormikContext();
+ *   return (
+ *     <div>
+ *       <EmailPreview
+ *         actionButtonText={values.startSurveyButtonText}
+ *         body={values.emailBody}
+ *         subject={values.emailSubject}
+ *         logo={values.logo}
+ *         to={values.notifyEmails}
+ *         from={values.emailsFrom}
+ *         productName="Form"
+ *       />
+ *     </div>
+ *   );
+ * };
+ * export default EmailShare;
+ * @endexample
+*/
 const EmailPreview: React.FC<{
   to?: string[];
   subject?: string;
@@ -9,5 +44,4 @@ const EmailPreview: React.FC<{
   productName?: string;
   actionButtonText?: string;
 }>;
-
-export default EmailPreview;
+export default EmailPreview;

package/types/ErrorPage.d.ts

@@ -1,8 +1,19 @@
 import React from "react";
-
+/**
+ *
+ * A fallback page for handling 404, 403 and 500 errors.
+ *
+ * This component accepts two optional props status and homeUrl. status is
+ *
+ * the status code of the error. 404 is the default value for status. homeUrl
+ *
+ * is the URL to which the user will be taken to when user clicks on back to home
+ *
+ * button. / is the default value for homeUrl.
+ *
+*/
 const ErrorPage: React.FC<{
   homeUrl?: string;
   status?: number;
 }>;
-
-export default ErrorPage;
+export default ErrorPage;

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,7 +1,6 @@
 import React from "react";
 import { ButtonProps, InputProps } from "@bigbinary/neetoui";
 import { LinkProps } from "react-router-dom";
-
 type BlockProps = {
   label: string;
   url?: string;
@@ -11,44 +10,99 @@ type BlockProps = {
   onEdit?: (...args: any[]) => any;
   onClick?: (...args: any[]) => any;
   className?: string;
-} & LinkProps &
-  React.RefAttributes<HTMLAnchorElement> &
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >;
-
+} & 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
->;
-
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 type SubTitleProps = {
   iconProps?: ButtonProps[];
-} & React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->;
-
+} & 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
->;
-
-const Menubar: React.FC<{
+} & 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;
@@ -60,5 +114,4 @@ const Menubar: React.FC<{
   Search: React.FC<SearchProps>;
   AddNew: React.FC<AddNewProps>;
 };
-
-export default Menubar;
+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;