@bigbinary/neeto-molecules 3.15.41 → 3.15.43

package/types/KeyboardShortcuts.d.ts

@@ -1,149 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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 };