@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/KeyboardShortcuts.d.ts

@@ -0,0 +1,149 @@
+import React from 'react';
+import { TFunction } from 'i18next';
+
+interface Shortcut {
+  sequence: string;
+  description: TFunction;
+}
+interface Category {
+  [index: string]: Shortcut | string;
+  fullShortcutsLink?: string;
+}
+interface ShortcutsObject {
+  [index: string | TFunction]: Category;
+}
+/**
+ *
+ * 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+/).
+ *
+ * ![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
+ *
+ * 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.
+ *
+ * This hook will return an array with exactly 2 values just like useState hook.
+ *
+ * @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
+ * This constant exposes the list of global shortcuts displayed by the pane to the
+ *
+ * product.
+ *
+ * It will give the following shortcuts:
+ *
+ * @example 
+ *
+ * {
+ *   GLOBAL: {
+ *     openKeyboardShortcutsPane: {
+ *       sequence: "shift+/",
+ *       description: "See keyboard shortcuts",
+ *     },
+ *     close: {
+ *       sequence: "esc",
+ *       description: "Close modals, panes",
+ *     },
+ *     submitForm: {
+ *       sequence: "command+return",
+ *       description: "Submit form or text input",
+ *     },
+ *   },
+ * }
+ * @endexample
+ * It can be used by the product to implement the shortcuts without needing to
+ *
+ * define the shortcut constant again.
+ *
+ * @example 
+ *
+ * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
+ * import useHotkeys from "neetohotkeys";
+ * 
+ * useHotkeys(
+ *   KeyboardShortcuts.GLOBAL_SHORTCUTS.GLOBAL.submitForm.sequence,
+ *   keyboardShortCutHandlers.SUBMIT_FORM,
+ *   { mode: "global" }
+ * );
+ * @endexample
+*/
+declare const KeyboardShortcuts: {
+  Pane: React.FC<{
+    productShortcuts?: ShortcutsObject;
+  }>;
+  usePaneState(): [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  GLOBAL_SHORTCUTS: ShortcutsObject;
+};
+
+export { KeyboardShortcuts as default };

package/types/LoginPage.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ *
+ * A common login page for all neeto-applications with dedicated button for oliver
+ *
+ * to login.
+ *
+ * undefined
+ *
+ * @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
+*/
+declare const LoginPage: React.FC<{
+  handleSubmit: (data: {
+    user: {
+      email: string;
+      password: string;
+    };
+  }) => any;
+}>;
+
+export { LoginPage as default };

package/types/MadeWith.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/**
+ *
+ * A component used for rendering made with block.
+ *
+ * @example 
+ *
+ * import MadeWith from "@bigbinary/neeto-molecules/MadeWith";
+ * 
+ * <MadeWith />;
+ * @endexample
+*/
+declare const MadeWith: React.FC<{
+  productName?: string;
+}>;
+
+export { MadeWith as default };

package/types/MenuBar.d.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+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
+ * Props for MenuBar.Block:
+ *
+ * Props for MenuBar.AddNew:
+ *
+ * Props for MenuBar.SubTitle:
+ *
+ * Props for MenuBar.Search:
+ *
+ * Props for MenuBar.Item:
+ *
+ * @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 isCollapsed={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
+*/
+declare 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 { MenuBar as default };

package/types/Metadata.d.ts

@@ -0,0 +1,109 @@
+import React from 'react';
+
+type BlockProps = {
+  title?: React.ReactNode;
+  actionBlock?: React.ReactNode;
+  className?: string;
+};
+interface BlockComposition {
+  Block: React.FC<BlockProps>;
+  DetailsBlock: React.FC<BlockProps & {
+    details: Array<{
+      label?: React.ReactNode;
+      value?: React.ReactNode;
+      type?: string;
+    }>;
+    style?: "inline" | "multiline";
+    truncate?: Boolean;
+    truncateAt?: number;
+  }>;
+}
+/**
+ *
+ * This is a wrapper for displaying metadata information about an entity. It can
+ *
+ * have a header block and multiple card blocks inside it.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496457-9bb7fbbd-2a28-43af-b32b-67e8f1b4fe24.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Metadata from "@bigbinary/neeto-molecules/Metadata";
+ * 
+ * const MetadataComponent = () => (
+ *   <Metadata headerBlock={<Header />}>
+ *     <Metadata.Block>Custom content</Metadata.Block>
+ *   </Metadata>
+ * );
+ * @endexample
+ * A block component that can be rendered inside the Metadata wrapper component.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496694-2a2edd90-d023-4838-bcbc-8a6bf3c7c51b.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * const ActionBlock = ({ onAdd, onEdit }) => (
+ *   <MoreDropdown
+ *     menuItems={[
+ *       {
+ *         label: "Add",
+ *         onClick: onAdd,
+ *       },
+ *       {
+ *         label: "Edit",
+ *         onClick: onEdit,
+ *       },
+ *     ]}
+ *   />
+ * );
+ * 
+ * const MetadataComponent = () => (
+ *   <Metadata>
+ *     <Metadata.Block actionBlock={<ActionBlock />} title="Tags">
+ *       Custom content
+ *     </Metadata.Block>
+ *   </Metadata>
+ * );
+ * @endexample
+ * A custom block component built on top of Metadata.Block. It can be used to
+ *
+ * display some details as label-value pairs. It has a few options for rendering
+ *
+ * label and value inline or multiline. It also has the option to set a view more
+ *
+ * button to hide certain fields.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496874-ae846576-b892-40ee-84bf-df2abaa87f14.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * const MetadataComponent = () => (
+ *   const detailsToTruncate = [
+ *   { label: "Name", value: "Oliver" },
+ *   { label: "Phone", value: "1234567890" },
+ *   { label: "Email", value: "oliver@example.com" },
+ *   { label: "Custom", value: <Input /> },
+ *   ];
+ * 
+ *   const detailsWithDivider = [
+ *   { label: "Name", value: "Oliver" },
+ *   { label: "Phone", value: "1234567890" },
+ *   { type: "divider" },
+ *   { label: "Email", value: "oliver@example.com" },
+ *   { label: "Custom", value: <Input /> },
+ * ];
+ * 
+ *   <Metadata>
+ *     <Metadata.DetailsBlock truncate details={detailsToTruncate} truncateAt={2} />
+ *     <Metadata.DetailsBlock details={detailsWithDivider} />
+ *   </Metadata>
+ * );
+ * @endexample
+*/
+declare const Metadata: React.FC<{
+  className?: string;
+  headerBlock?: React.ReactNode;
+  size?: "small" | "medium";
+}> & BlockComposition;
+
+export { Metadata as default };

package/types/MobilePreviewHeader.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ *
+ * Can be used to show preview message for smaller viewports.
+ *
+ * @example 
+ *
+ * import MobilePreviewHeader from "@bigbinary/neeto-molecules/MobilePreviewHeader";
+ * 
+ * const App = () => <MobilePreviewHeader />;
+ * @endexample
+*/
+declare const MobilePreviewHeader: React.FC<{
+  message?: React.ReactNode;
+  className?: string;
+}>;
+
+export { MobilePreviewHeader as default };

package/types/MoreDropdown.d.ts

@@ -0,0 +1,52 @@
+import { DropdownProps, ButtonProps } from '@bigbinary/neetoui';
+import React from 'react';
+
+type MenuItems = {
+  label: string;
+  onClick: () => void;
+  key: string;
+  isVisible?: boolean;
+  hasSubItems?: boolean;
+  dropdownProps?: DropdownProps;
+  menuItems?: MenuItems[];
+};
+type DropdownButtonProps = {
+  isRounded?: boolean;
+} & ButtonProps;
+/**
+ *
+ * Dropdown menu with a 3 dot trigger button, can be used as a more menu.
+ *
+ * @example 
+ *
+ * import MoreDropdown from "@bigbinary/neeto-molecules/MoreDropdown";
+ * 
+ * const Component = () => (
+ *   <MoreDropdown
+ *     menuItems={[
+ *       {
+ *         key: "edit-menu",
+ *         label: "Edit",
+ *         onClick: () => setIsEditMenuVisible(true),
+ *       },
+ *       {
+ *         key: "delete-menu",
+ *         label: "Delete",
+ *         onClick: () => setIsDeleteMenuVisible(true),
+ *       },
+ *     ]}
+ *   />
+ * );
+ * @endexample
+*/
+declare const MoreDropdown: React.FC<{
+  dropdownButtonProps?: DropdownButtonProps;
+  isVertical?: boolean;
+  isDisabled?: boolean;
+  dropdownProps?: DropdownProps;
+  menuTopChildren: React.ReactNode;
+  menuBottomChildren: React.ReactNode;
+  menuItems: MenuItems[];
+}>;
+
+export { MoreDropdown as default };

package/types/NavigationHeader.d.ts

@@ -0,0 +1,180 @@
+import React from 'react';
+import { ButtonProps } from '@bigbinary/neetoui';
+import Rename from './Rename.js';
+
+interface NavLinkProps {
+  activeClassName?: string | undefined;
+  activeStyle?: React.CSSProperties | undefined;
+  exact?: boolean | undefined;
+  strict?: boolean | undefined;
+  isActive?: () => boolean;
+}
+type TooltipPropType = {
+  content: string;
+  position: string;
+};
+type HomeButtonPropType = {
+  tooltip: TooltipPropType;
+  icon: React.ReactNode;
+};
+type HeaderLinkPropType = {
+  key: string;
+  to: string;
+  label: string;
+} & NavLinkProps;
+type RightActionBlockPropTypes = {
+  isDraftBlockHidden: boolean;
+  previewDraftUrl: string;
+  isResetDraftButtonVisible: boolean;
+  onResetClick: () => void;
+  isResetting: boolean;
+  isPublishDisabled: boolean;
+  isPublishing: boolean;
+  handlePublish: () => void;
+  isPublishPreviewDisabled: boolean;
+  previewPublishedUrl: string;
+  isPublishButtonVisible: boolean;
+  isResetAlertOpen: boolean;
+  setIsResetAlertOpen: () => void;
+  handleReset: () => void;
+  publishAlertTitle: string;
+  publishAlertDescription: string;
+  publishButtonProps: ButtonProps;
+};
+type NavigationLinkPropsType = {
+  headerLinks: HeaderLinkPropType[];
+  maxVisibleLinks?: number;
+};
+type LeftBlockPropTypes = {
+  homeButtonProps?: HomeButtonPropType;
+  homeUrl: string;
+  renameProps?: Rename;
+  children?: React.ReactNode;
+};
+/**
+ *
+ * A common component to use as navigation header.
+ *
+ * @example 
+ *
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *     rightActionBlock={
+ *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
+ *     }
+ *     navigationLinks={
+ *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
+ *     }
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the left side of the
+ *
+ * NavigationHeader.
+ *
+ * @example 
+ *
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={
+ *       <NavigationHeader.LeftActionBlock
+ *         homeButtonProps={{ tooltip: { position: "right" } }}
+ *         homeUrl={homeUrl}
+ *         renameProps={{
+ *           disabled: false,
+ *           dropdownItems: [{ label: "Clone", onClick: noop }],
+ *           placeholder: "Enter a name",
+ *           value: "Feedback form",
+ *           onRename: () => noop,
+ *         }}
+ *       />
+ *     }
+ *     rightActionBlock={
+ *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
+ *     }
+ *     navigationLinks={
+ *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
+ *     }
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered at the center of the NavigationHeader.
+ *
+ * @example 
+ *
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     navigationLinks={
+ *       <NavigationHeader.NavigationLinks
+ *         headerLinks={[
+ *           { key: "build", to: "/build", label: "Build" },
+ *           { key: "design", to: "/design", label: "Design" },
+ *           {
+ *             key: "configure",
+ *             to: "/configure",
+ *             label: "Configure",
+ *             exact: true, //Additional props passed to Navlink component.
+ *           },
+ *         ]}
+ *       />
+ *     }
+ *     rightActionBlock={
+ *       <NavigationHeader.RightActionBlock {...rightBlockProps} />
+ *     }
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the right side of the
+ *
+ * NavigationHeader
+ *
+ * @example 
+ *
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     rightActionBlock={
+ *       <NavigationHeader.RightActionBlock
+ *         isPublishButtonVisible={false}
+ *         previewDraftUrl="/preview/draft"
+ *         isDraftBlockHidden={false}
+ *         isResetDraftButtonVisible={true}
+ *         isResetting={false}
+ *         onResetClick={noop}
+ *         isPublishDisabled={true}
+ *         isPublishing={false}
+ *         handlePublish={noop}
+ *         isPublishPreviewDisabled={true}
+ *         previewPublishedUrl="/preview/published"
+ *         setIsResetAlertOpen={noop}
+ *         handleReset={noop}
+ *       />
+ *     }
+ *     navigationLinks={
+ *       <NavigationHeader.NavigationLinks {...navigationLinkProps} />
+ *     }
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+*/
+declare const NavigationHeader: React.FC<{
+  leftActionBlock?: React.ReactNode;
+  navigationLinks?: React.ReactNode;
+  rightActionBlock?: React.ReactNode;
+}> & {
+  RightActionBlock: React.FC<RightActionBlockPropTypes>;
+  NavigationLinks: React.FC<NavigationLinkPropsType>;
+  LeftActionBlock: React.FC<LeftBlockPropTypes>;
+};
+
+export { NavigationHeader as default };