@bigbinary/neeto-molecules 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/types/Columns.d.ts

@@ -8,38 +8,6 @@ import { CheckboxProps, DropdownProps, InputProps } from "@bigbinary/neetoui";
  *
  * ![image](https://user-images.githubusercontent.com/32426070/195069324-3cbb4c70-f62b-4080-b4ae-bdeabb449b23.png|height=200|width=300)
  *
- * Props:
- *
- * This is the data structure for the columnData prop:
- *
- * @example 
- *
- *   const columnData = [
- *   {
- *     title: "ID",
- *     dataIndex: "id",
- *     key: "id",
- *     ...
- *   },
- *   {
- *     title: "GUID",
- *     dataIndex: "guid",
- *     key: "guid",
- *     ...
- *   },
- *   ...
- * ];
- * @endexample
- * It is similar to the columnsData prop of the neetoUI table component
- *
- * (reference).
- *
- * These 3 props are required for the Columns as well as the neetoUI Table
- *
- * component to work.
- *
- * Simple:
- *
  * @example 
  *
  * import React, { useState } from "react";

package/types/EmailPreview.d.ts

@@ -7,12 +7,6 @@ import React from "react";
  *
  * @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";

package/types/ErrorPage.d.ts

@@ -3,15 +3,9 @@ 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 component also has a "contact us" link that opens the chat widget for
  *
- * 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. The component also has a
- *
- * "contact us" link that opens the chat widget for further communication.
+ * further communication.
  *
 */
 const ErrorPage: React.FC<{

package/types/IntegrationCard.d.ts

@@ -4,6 +4,8 @@ import React, { ReactElement } from "react";
  *
  * A common component used for integrations across neeto products.
  *
+ * ![Integrations](https://user-images.githubusercontent.com/49012815/237155224-582fe3b3-2b63-484b-bc08-6898fb8c1ce2.png|height=200|width=300)
+ *
  * @example 
  *
  * import IntegrationCard from "@bigbinary/neeto-molecules/IntegrationCard";

package/types/IntegrationDisconnectAlert.d.ts

@@ -3,6 +3,8 @@ import React from "react";
  *
  * A common component used for disconnect UI of integrations across neeto products.
  *
+ * ![Integration](https://github.com/bigbinary/neeto-molecules/assets/49012815/864c1407-a6c8-4b53-ab01-364db42d2a80|height=200|width=300)
+ *
  * @example 
  *
  * import IntegrationDisconnectAlert from "@bigbinary/neeto-molecules/IntegrationDisconnectAlert";

package/types/IntegrationWalkthroughModal.d.ts

@@ -3,6 +3,8 @@ import React from "react";
  *
  * A component used to display walkthrough video of integration.
  *
+ * ![IntegrationWalkthroughModal](https://user-images.githubusercontent.com/89389135/243562250-9cdd99cf-ee7e-42b5-b578-ca57db5fc94a.png|height=200|width=300)
+ *
  * @example 
  *
  * import React, { useState } from "react";

package/types/KeyboardShortcuts.d.ts

@@ -19,6 +19,8 @@ interface ProductShortcuts {
  *
  * defined hotkey (shift+/).
  *
+ * ![image](https://user-images.githubusercontent.com/29166133/223832668-2b92ff28-6565-434c-8a76-cf587c9dbc99.png|height=200|width=300)
+ *
  * 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
@@ -77,6 +79,8 @@ interface ProductShortcuts {
  * @endexample
  * This hook can be used to manage the behavior of KeyboardShortcuts pane.
  *
+ * This hook will return an array with exactly 2 values just like useState hook.
+ *
  * @example 
  *
  * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";

package/types/LoginPage.d.ts

@@ -7,8 +7,6 @@ import React from "react";
  *
  * undefined
  *
- * Usage:
- *
  * @example 
  *
  * import LoginPage from "@bigbinary/neeto-molecules/LoginPage";

package/types/MenuBar.d.ts

@@ -62,7 +62,15 @@ type AddNewProps = {
  *   );
  * };
  * @endexample
- * MenuBar with child components
+ * Props for MenuBar.Block:
+ *
+ * Props for MenuBar.AddNew:
+ *
+ * Props for MenuBar.SubTitle:
+ *
+ * Props for MenuBar.Search:
+ *
+ * Props for MenuBar.Item:
  *
  * @example 
  *

package/types/NeetoWidget.d.ts

@@ -25,14 +25,10 @@ type EmbedCode = React.FC<{
  *
  * application.
  *
- * Usage:
- *
  * @example 
  *
  * <NeetoWidget.EmbedCode primaryApp={NeetoWidget.WIDGET_TYPES.chat} />
  * @endexample
- * Props:
- *
 */
 const NeetoWidget: {
   EmbedCode: EmbedCode;

package/types/PhoneNumber.d.ts

@@ -31,8 +31,6 @@ export
  *
  * ![PhoneNumberInput](https://user-images.githubusercontent.com/35297280/231367938-93aa94b0-2a8c-44b3-b1c7-8c60843e40c4.png|height=200|width=300)
  *
- * Props:
- *
  * @example 
  *
  * import React, { useState } from "react";
@@ -51,8 +49,6 @@ export
  *
  * ![PhoneNumber](https://user-images.githubusercontent.com/35297280/231367945-ee5f0921-92e3-4086-a8e2-f9ab63cf9a37.png|height=200|width=300)
  *
- * Props:
- *
  * @example 
  *
  * import { PhoneNumber } from "@bigbinary/neeto-molecules/PhoneNumber";

package/types/PublishBlock.d.ts

@@ -16,10 +16,6 @@ interface PublishBlockProps {
  *
  * ![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";
@@ -47,21 +43,37 @@ interface PublishBlockProps {
  *     </>
  *   );
  *   return (
- *     <>
- *       <PublishBlock
- *         renderDraftButtons={renderDraftButtons}
- *         renderPublishButtons={renderPublishButtons}
- *       />
+ *     <PublishBlock
+ *       renderDraftButtons={renderDraftButtons}
+ *       renderPublishButtons={renderPublishButtons}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * This optional component can be used to render the reset alert modal for
+ *
+ * discarding draft.
+ *
+ * It also accepts all other alert props.
+ *
+ * @example 
+ *
+ * import PublishBlock from "@bigbinary/neeto-molecules/PublishBlock";
  * 
- *       <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
- *       />
- *     </>
+ * const PublishActionBlock = (
+ *   {
+ *     //all variables used in the below example can be passed as props or can be defined in the component itself
+ *   }
+ * ) => {
+ *   return (
+ *     <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

package/types/Schedule.d.ts

@@ -5,8 +5,6 @@ import React from "react";
  *
  * ![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:
@@ -15,7 +13,7 @@ import React from "react";
  *
  * @example 
  *
- *   const periods = {
+ * const periods = {
  *   sunday: [],
  *   monday: [
  *     {
@@ -95,11 +93,7 @@ import React from "react";
  *   ],
  *   saturday: [],
  * };
- * 
- * ];
  * @endexample
- * Simple:
- *
  * @example 
  *
  * import React, { useState } from "react";

package/types/SubHeader.d.ts

@@ -57,12 +57,6 @@ interface RightBlockComposition {
  *   />
  * );
  * @endexample
- * For common usages with Download, Manage Columns and Filters, we can use the
- *
- * composite component SubHeader.RightBlock
- *
- * Props:
- *
  * @example 
  *
  * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";

package/types/TableWrapper.d.ts

@@ -15,10 +15,6 @@ import React from "react";
  *
  * below.
  *
- * TableWrapper should be used only with Tables used in the listing layout as shown
- *
- * below.
- *
  * @example 
  *
  * import TableWrapper from "@bigbinary/neeto-molecules/TableWrapper";