@bigbinary/neeto-molecules 0.0.1

package/types/KeyboardShortcuts.d.ts

@@ -0,0 +1,147 @@
+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 "neetocommons/react-utils";
+ * 
+ * useHotKeys(
+ *   KeyboardShortcuts.GLOBAL_SHORTCUTS.GLOBAL.submitForm.sequence,
+ *   keyboardShortCutHandlers.SUBMIT_FORM,
+ *   { mode: "global" }
+ * );
+ * @endexample
+*/
+const KeyboardShortcuts: {
+  Pane: React.FC<{
+    productShortcuts?: ShortcutsObject;
+  }>;
+  usePaneState(): [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  GLOBAL_SHORTCUTS: ShortcutsObject;
+};
+export default KeyboardShortcuts;

package/types/LoginPage.d.ts

@@ -0,0 +1,43 @@
+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
+*/
+const LoginPage: React.FC<{
+  handleSubmit: (data: {
+    user: {
+      email: string;
+      password: string;
+    };
+  }) => any;
+}>;
+export default LoginPage;

package/types/MenuBar.d.ts

@@ -0,0 +1,125 @@
+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
+*/
+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

@@ -0,0 +1,41 @@
+import React from "react";
+type EmbedCode = React.FC<{
+  maxWidth?: string;
+  primaryApp?: string;
+  showSessionContext?: boolean;
+  showUserIdentity?: boolean;
+}>;
+/**
+ *
+ * This component can be accessed only in SSO mode. To access the component, run
+ *
+ * neetoAuth in the background and restart the application in SSO mode.
+ *
+ * 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.
+ *
+ * @example 
+ *
+ * <NeetoWidget.EmbedCode primaryApp={NeetoWidget.WIDGET_TYPES.chat} />
+ * @endexample
+*/
+const NeetoWidget: {
+  EmbedCode: EmbedCode;
+  WIDGET_TYPES: {
+    changelog: "changelog";
+    chat: "chat";
+    replay: "replay";
+  };
+};
+export default NeetoWidget;

package/types/PageLoader.d.ts

@@ -0,0 +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;
+}>;
+export default PageLoader;

package/types/PhoneNumber.d.ts

@@ -0,0 +1,106 @@
+import React from "react";
+import { InputProps, SelectProps, TypographyProps } from "@bigbinary/neetoui";
+import { CountryCode } from "libphonenumber-js";
+import { StringSchema } from "yup";
+export interface PhoneNumberInputProps extends InputProps {
+  value?: string;
+  onChange?: (value: string) => any;
+  className?: string;
+  selectProps?: SelectProps;
+  error?: string;
+  defaultCountry?: string;
+}
+export interface FormikPhoneNumberInputProps extends PhoneNumberInputProps {
+  name: string;
+}
+export interface PhoneNumberProps extends TypographyProps {
+  className?: string;
+  defaultCountry?: string;
+  children?: React.ReactNode;
+  showEmoji?: boolean;
+  value?: string;
+}
+export const PhoneNumberInput: React.ForwardRefExoticComponent<PhoneNumberInputProps>;
+export const FormikPhoneNumberInput: React.ForwardRefExoticComponent<FormikPhoneNumberInputProps>;
+export
+/**
+ *
+ * An input component to input and validate phone numbers with a country code
+ *
+ * picker.
+ *
+ * ![PhoneNumberInput](https://user-images.githubusercontent.com/35297280/231367938-93aa94b0-2a8c-44b3-b1c7-8c60843e40c4.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * 
+ * import { PhoneNumberInput } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => {
+ *   const [phoneNumber, setPhoneNumber] = useState("");
+ * 
+ *   return <PhoneNumberInput value={phoneNumber} onChange={setPhoneNumber} />;
+ * };
+ * @endexample
+ * A typography component to display phone numbers along with the flag of the
+ *
+ * country associated with it.
+ *
+ * ![PhoneNumber](https://user-images.githubusercontent.com/35297280/231367945-ee5f0921-92e3-4086-a8e2-f9ab63cf9a37.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { PhoneNumber } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => <PhoneNumber showEmoji value="+919988776655" />;
+ * @endexample
+ * The PhoneNumberInput component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import { FormikPhoneNumberInput, validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import { Form } from "@bigbinary/neetoui/formik";
+ * 
+ * const App = () => (
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { phoneNumber: "+919988776655" },
+ *         validationSchema: yup.object({ phoneNumber: validation().required() }),
+ *         onSubmit: ({ phoneNumber }) => alert(phoneNumber),
+ *       }}
+ *     >
+ *       <FormikPhoneNumberInput name="phoneNumber" />
+ *     </Form>
+ *   );
+ * );
+ * @endexample
+ * A utility function that exports a Yup validation schema to be used in Formik. It
+ *
+ * accepts a string as an optional argument to override the default validation
+ *
+ * message.
+ *
+ * @example 
+ *
+ * import { validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import * as yup from "yup";
+ * 
+ * const VALIDATION_SCHEMA = yup.object({
+ *   phoneNumber: validation("Phone number is invalid"),
+ * });
+ * @endexample
+ * A utility function to check whether a phone number is valid. It accepts a phone
+ *
+ * number and a default country as argument and returns a boolean value specifying
+ *
+ * whether the phone number is valid or not.
+ *
+*/
+const PhoneNumber: React.FC<PhoneNumberProps>;
+export const isPhoneNumberValid: (phoneNumber: string, defaultCountry?: CountryCode | {
+  defaultCountry?: CountryCode;
+  defaultCallingCode?: string;
+}) => boolean;
+export const validation: (message?: string) => StringSchema<any, any, any>;

package/types/PublishBlock.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { AlertProps } from "@bigbinary/neetoui";
+interface PublishBlockProps {
+  renderDraftButtons: (props: {
+    ViewDraftButton: JSX.Element;
+    ResetDraftButton: JSX.Element;
+  }) => React.ReactNode;
+  renderPublishButtons: (props: {
+    PublishButton: JSX.Element;
+    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)
+ *
+ * @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}
+ *     />
+ *   );
+ * };
+ * @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";
+ * 
+ * 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
+*/
+const PublishBlock: React.FC<PublishBlockProps> & {
+  Alert: React.FC<AlertProps>;
+};
+export default PublishBlock;

package/types/Rename.d.ts

@@ -0,0 +1,60 @@
+import { ButtonProps, InputProps, TypographyProps } from "@bigbinary/neetoui";
+import React from "react";
+/**
+ *
+ * The Rename component is used to rename a resource on the page, It can be used as
+ *
+ * the title in the Header component and provides props for additional actions with
+ *
+ * the dropdown.
+ *
+ * @example 
+ *
+ * import Rename from "@bigbinary/neeto-molecules/Rename";
+ * 
+ * const App = () => {
+ *   const [value, setValue] = useState("Name");
+ *   return (
+ *     <Rename
+ *       value={value}
+ *       placeholder="Enter a name"
+ *       dropdownItems={[
+ *         {
+ *           label: "Clone",
+ *           onClick: () => alert("Clicked on clone"),
+ *         },
+ *       ]}
+ *       onRename={value => setValue(name)}
+ *       breadcrumbs={[
+ *         {
+ *           label: "Home",
+ *           link: "home",
+ *         },
+ *         {
+ *           label: "Contacts",
+ *           link: "contacts",
+ *         },
+ *       ]}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const Rename: React.FC<{
+  className?: string;
+  isOpen?: boolean;
+  value: string;
+  onRename?: (newName: string) => void;
+  isUpdating?: boolean;
+  placeholder?: string;
+  hideMenu?: boolean;
+  disabled?: boolean;
+  dropdownItems?: ButtonProps[];
+  textProps?: TypographyProps;
+  inputProps?: InputProps;
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+}>;
+export default Rename;

package/types/ResponsiveDevicePicker.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+type SelectedDeviceState = "desktop" | "tablet" | "mobile";
+/**
+ *
+ * A common component to switch between different device resolutions.
+ *
+ * ![image](https://user-images.githubusercontent.com/24496302/230879938-43f4a9bc-cb36-496a-be18-79d85fbffb3a.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import ResponsiveDevicePicker from "@bigbinary/neeto-molecules/ResponsiveDevicePicker";
+ * 
+ * const ResponsiveDevicePickerContainer = ({}) => {
+ *   const [selectedDevice, setSelectedDevice] = useState("desktop");
+ * 
+ *   return (
+ *     <ResponsiveDevicePicker
+ *       selectedDevice={selectedDevice}
+ *       onDeviceChange={setSelectedDevice}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const ResponsiveDevicePicker: React.FC<{
+  className?: string;
+  selectedDevice?: SelectedDeviceState;
+  onDeviceChange?: (device: SelectedDeviceState) => void;
+}>;
+export default ResponsiveDevicePicker;