@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/FinderModal.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+
+interface Data {
+  [key: string]: Array<{
+    id: string;
+    url: string;
+    content?: string;
+    body?: string;
+    name?: string;
+  }>;
+}
+interface IconComponentMap {
+  [key: string]: React.ComponentType;
+}
+/**
+ *
+ * FinderModal is a component that can be used to search for items across the
+ *
+ * workspace.
+ *
+ * ![Screenshot](https://github.com/user-attachments/assets/0078c794-ba20-4657-91d1-89c2c761e31c|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * 
+ * import { Tickets, UserCircle } from "@bigbinary/neeto-icons";
+ * import FinderModal from "@bigbinary/neeto-molecules/FinderModal";
+ * 
+ * const App = () => {
+ *   const [searchTerm, setSearchTerm] = useState("");
+ *   const [isFinderModalOpen, setIsFinderModalOpen] = useState(false);
+ * 
+ *   const iconComponentMap = { tickets: Tickets, contacts: UserCircle };
+ * 
+ *   const { data: searchResults, isFetching } = useSearchApi({ searchTerm });
+ * 
+ *   return (
+ *     <FinderModal
+ *       data={searchResults}
+ *       iconComponentMap={iconComponentMap}
+ *       isFetching={isFetching}
+ *       isOpen={isFinderModalOpen}
+ *       setSearchTerm={setSearchTerm}
+ *       onClose={() => setIsFinderModalOpen(false)}
+ *       onGoToAdvanced={() => {
+ *         history.push("/advanced-search");
+ *       }}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const FinderModal: React.FC<{
+  enableAdvancedSearch?: boolean;
+  data: Data;
+  iconComponentMap: IconComponentMap;
+  isFetching: boolean;
+  isOpen: boolean;
+  searchTerm: string;
+  setSearchTerm: (searchTerm: string) => void;
+  onClose: () => void;
+  onGoToAdvanced?: () => void;
+}>;
+
+export { FinderModal as default };

package/types/FloatingActionMenu.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { AvatarProps } from '@bigbinary/neetoui';
+
+type LinkType = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  label?: React.ReactNode;
+  icon?: any;
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+interface ProfileInfo {
+  name?: string;
+  email?: string;
+  imageUrl?: string;
+}
+interface HelpLinks {
+  liveChatProps?: LinkType;
+  helpCenterProps?: LinkType;
+  engageProps?: EngagePropsType;
+  keyboardShortcutProps?: LinkType;
+}
+type FloatingActionMenuProps = {
+  profileInfoOverrides?: ProfileInfo & AvatarProps;
+  helpLinkOverrides?: HelpLinks;
+  showProductSwitcher?: boolean;
+  topLinks?: LinkType[];
+  bottomLinks?: LinkType[];
+  customContent?: React.ReactNode;
+  isThemeSwitcherEnabled?: boolean;
+  isOrganizationSwitcherEnabled?: boolean;
+};
+/**
+ *
+ * The FloatingActionMenu component provides access to options such as
+ *
+ * notifications, profile, app navigation links, what's new, product switcher and
+ *
+ * help center from anywhere in the app. The Product switcher UI & Engage display
+ *
+ * UI are all implemented internally in this component.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/07e3bcd1-ee9a-44cd-9230-017251627815|height=200|width=300)
+ *
+ * @example 
+ *
+ * import FloatingActionMenu from "@bigbinary/neeto-molecules/FloatingActionMenu";
+ * 
+ * const FloatingActionMenuContainer = ({ children }) => {
+ *   // custom app logic
+ *   return (
+ *     <div>
+ *       <FloatingActionMenu />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const FloatingActionMenu: React.FC<FloatingActionMenuProps>;
+
+export { FloatingActionMenu as default };

package/types/GoogleFontPicker.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SelectProps } from '@bigbinary/neetoui';
+
+declare type Category = "sans-serif" | "serif" | "display" | "handwriting" | "monospace";
+declare type Script = "arabic" | "bengali" | "chinese-simplified" | "chinese-traditional" | "cyrillic" | "cyrillic-ext" | "devanagari" | "greek" | "greek-ext" | "gujarati" | "gurmukhi" | "hebrew" | "japanese" | "kannada" | "khmer" | "korean" | "latin" | "latin-ext" | "malayalam" | "myanmar" | "oriya" | "sinhala" | "tamil" | "​telugu" | "thai" | "vietnamese";
+declare type SortOption = "alphabet" | "popularity";
+declare type Variant = "100" | "100italic" | "200" | "200italic" | "300" | "300italic" | "regular" | "italic" | "500" | "500italic" | "600" | "600italic" | "700" | "700italic" | "800" | "800italic" | "900" | "900italic";
+interface Font {
+    family: string;
+    id: string;
+    category: Category;
+    scripts: Script[];
+    variants: Variant[];
+    kind?: string;
+    version?: string;
+    lastModified?: string;
+    files?: Record<Variant, string>;
+}
+interface Options {
+    pickerId: string;
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+    sort: SortOption;
+}
+
+interface GoogleFontPickerProps extends SelectProps {
+  activeFontFamily?: string;
+  onChange?: (fontFamily: string) => void;
+  fontManagerOptions?: Options;
+}
+/**
+ *
+ * A component that allows users to choose an option from a list of font choices, presented as a dropdown menu.
+ *
+ * ![image](https://github.com/user-attachments/assets/72a74d39-0f73-4701-a324-6ae6a81791a9|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * import GoogleFontPicker from "@bigbinary/neeto-molecules/GoogleFontPicker";
+ * 
+ * const GoogleFontPickerContainer = () => {
+ *   const [selectedFont, setSelectedFont] = useState("Open Sans");
+ * 
+ *   const handleFontChange = (fontFamily) => {
+ *     setSelectedFont(fontFamily);
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <h2>Selected Font: {selectedFont}</h2>
+ *       <GoogleFontPicker
+ *         activeFontFamily={selectedFont}
+ *         fontManagerOptions={{ limit: 300 }}
+ *         onChange={handleFontChange}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const GoogleFontPicker: React.FC<GoogleFontPickerProps>;
+
+export { GoogleFontPicker as default };

package/types/Header.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SIZES } from 'components/Header/constants';
+import { PopoverProps } from 'neetoui';
+import MoreDropdown from './MoreDropdown.js';
+import '@bigbinary/neetoui';
+
+interface HeaderProps {
+  title?: React.ReactNode;
+  titleHelpPopoverProps?: PopoverProps;
+  className?: string;
+  actionBlock?: React.ReactNode;
+  searchProps?: object;
+  breadcrumbs?: {
+    text: string;
+    link?: string;
+  }[];
+  size?: keyof typeof SIZES;
+  renderDropdown?: (Dropdown: MoreDropdown) => JSX.Element;
+}
+/**
+ *
+ * The Header component can be used to display the page title and an action block
+ *
+ * to perform the main operations on the page.
+ *
+ * @example 
+ *
+ * import Header from "@bigbinary/neeto-molecules/Header";
+ * 
+ * const App = () => (
+ *   <Header title="Heading" actionBlock={<Button label="Primary action" />} />
+ * );
+ * @endexample
+*/
+declare const Header: React.FC<HeaderProps>;
+
+export { type HeaderProps, Header as default };

package/types/HelpPopover.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ButtonProps, PopoverProps } from '@bigbinary/neetoui';
+
+interface HelpPopoverProps {
+  title?: string;
+  description?: React.ReactNode;
+  helpLinkProps?: ButtonProps;
+  popoverProps?: PopoverProps;
+  size?: "default" | "large";
+  className?: string;
+  icon?: React.ReactNode;
+  iconColor?: string;
+}
+/**
+ *
+ * Can be used to show contextual help information within a popover when a user
+ *
+ * hovers on the help icon. This component can be used to provide guidance,
+ *
+ * instructions, or additional context without cluttering the main interface. We
+ *
+ * can also direct the user to a separate page for more information.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/b5a8695a-9017-4a89-a138-425b0ef71835|height=200|width=300)
+ *
+ * @example 
+ *
+ * import HelpPopover from "@bigbinary/neeto-molecules/HelpPopover";
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <HelpPopover
+ *         title="What is KB keywords?"
+ *         description="Keywords represent the key concepts of an article. These will be
+ *             shown on the KB and will be used for SEO"
+ *         helpLinkProps={{ label: "KB", href: "https://google.com/kb" }}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const HelpPopover: React.FC<HelpPopoverProps>;
+
+export { type HelpPopoverProps, HelpPopover as default };

package/types/IconPicker.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ *
+ * A dropdown component that allows you to select an icon from a list of
+ *
+ * Google icons.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/243669467-148585f0-5499-4914-ba84-4284bda8e2d8.png|height=200|width=300)
+ *
+ * We make use of a feature called ligatures that convert the snake cased name of
+ *
+ * an icon to an actual icon. It is achieved like so. Note that the classname
+ *
+ * "material-symbols-rounded" is necessary for this conversion to work.
+ *
+ * @example 
+ *
+ * <span className="material-symbols-rounded">icon_name</span>
+ * @endexample
+ * @example 
+ *
+ * import IconPicker from "@bigbinary/neeto-molecules/IconPicker";
+ * 
+ * const App = () => {
+ *   const [value, setValue] = useState("home");
+ *   return (
+ *     <IconPicker
+ *       value={value}
+ *       label="Select an icon"
+ *       onClick={value => setValue(value)}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const IconPicker: React.FC<{
+  filled?: boolean;
+  value?: string;
+  label?: string;
+  onClick?: Function;
+  className?: string;
+}>;
+
+export { IconPicker as default };

package/types/ImageWithFallback.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+/**
+ *
+ * A component to display a fallback component in case no image is available.
+ *
+ * @example 
+ *
+ * import ImageWithFallback from "@bigbinary/neeto-molecules/ImageWithFallback";
+ * 
+ * const App = () => (
+ *   <ImageWithFallback
+ *     className="h-40 w-40"
+ *     src="https://randomuser.me/api/portraits/women/90.jpg"
+ *   />
+ * );
+ * @endexample
+*/
+declare const ImageWithFallback: React.FC<{
+  src: string;
+  fallback?: React.ReactNode;
+}>;
+
+export { ImageWithFallback as default };

package/types/InlineInput.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { InputProps, ButtonProps } from '@bigbinary/neetoui';
+
+interface InlineInputProps extends InputProps {
+  className?: string;
+  value?: string;
+  nullable?: boolean;
+  isSaving?: boolean;
+  saveOnBlur?: boolean;
+  clearOnSave?: boolean;
+  submitButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  handleSubmit: (value: string) => void;
+  handleCancel: (value: string) => void;
+}
+interface FormikInlineInputProps extends InlineInputProps {
+  name: string;
+  handleSubmit?: (value: string) => void;
+  handleCancel?: (value: string) => void;
+}
+/**
+ *
+ * An input field with built-in functionality for handling saving and cancelling
+ *
+ * actions via buttons, keypress and blur handlers.
+ *
+ * @example 
+ *
+ * import InlineInput from "@bigbinary/neeto-molecules/InlineInput";
+ * 
+ * const TaskInput = () => {
+ *   const [taskName, setTaskName] = useState("Sample task");
+ *   const [isEditorOpen, setIsEditorOpen] = useState(false);
+ * 
+ *   return (
+ *     <div className="flex-grow">
+ *       {isEditorOpen ? (
+ *         <InlineInput
+ *           handleCancel={() => setIsEditorOpen(false)}
+ *           value={taskName}
+ *           handleSubmit={value => {
+ *             setTaskName(value);
+ *             setIsEditorOpen(false);
+ *           }}
+ *         />
+ *       ) : (
+ *         <Typography
+ *           className="flex-grow cursor-pointer"
+ *           style="h2"
+ *           weight="semibold"
+ *           onClick={() => setIsEditorOpen(true)}
+ *         >
+ *           {taskName}
+ *         </Typography>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * The InlineInput component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import { FormikInlineInput } from "@bigbinary/neeto-molecules/InlineInput";
+ * import { Form } from "@bigbinary/neetoui/formik";
+ * 
+ * const App = () => (
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { taskName: "task" },
+ *         validationSchema: yup.object({ taskName: yup
+ *         .string()
+ *         .matches(/^[a-z]+$/, "All letters should be lowercase") }),
+ *         onSubmit: handleSubmit,
+ *       }}
+ *     >
+ *       <FormikInlineInput name="taskName" />
+ *     </Form>
+ *   );
+ * );
+ * @endexample
+*/
+declare const InlineInput: React.ForwardRefExoticComponent<InlineInputProps>;
+declare const FormikInlineInput: React.ForwardRefExoticComponent<FormikInlineInputProps>;
+
+export { FormikInlineInput, type FormikInlineInputProps, InlineInput, type InlineInputProps };

package/types/Insights.d.ts

@@ -0,0 +1,112 @@
+import { TooltipProps } from '@bigbinary/neetoui';
+import React from 'react';
+
+interface Time {
+  h: number;
+  m: number;
+  s: number;
+}
+interface Devices {
+  desktop: number;
+  smartphone: number;
+  [key: string]: number;
+}
+interface OperatingSystems {
+  mac: number;
+  windows: number;
+  [key: string]: number;
+}
+interface Browsers {
+  chrome: number;
+  safari: number;
+  [key: string]: number;
+}
+interface InsightsData {
+  visitCount: number;
+  startCount: number;
+  submissionCount: number;
+  completionRate: number;
+  averageSubmissionTime: Time;
+  devices: Devices;
+  operatingSystems: OperatingSystems;
+  browsers: Browsers;
+}
+interface TimePeriodValue {
+  startDate: Dayjs;
+  endDate: Dayjs;
+  rangeType: string;
+}
+interface TimePeriod {
+  label: string;
+  value: TimePeriodValue;
+}
+interface HelpTexts {
+  visitCount?: string;
+  startCount?: string;
+  submissions?: string;
+  completionRate?: string;
+  averageSubmissionTime?: string;
+}
+/**
+ *
+ * The Insights molecule displays key record insights, including a date range
+ *
+ * filter, offering a quick overview of user engagement in a user-friendly format.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/52269241/f733bf16-5d70-406d-9076-fd0e41c13bcd|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Insights from "@bigbinary/neeto-molecules/Insights";
+ * 
+ * const DEFAULT_DATE_RANGE = {
+ *   label: "All time",
+ *   value: { startDate: null, endDate: null, rangeType: "all" },
+ * };
+ * 
+ * const Summary = () => {
+ *   const [timePeriod, setTimePeriod] = useState(DEFAULT_DATE_RANGE);
+ * 
+ *   return (
+ *     <Insights
+ *       {...{ setTimePeriod, timePeriod, isLoading }}
+ *       showWarningMessage
+ *       insightsData={{
+ *         visitCount: 6,
+ *         startCount: 6,
+ *         submissionCount: 6,
+ *         completionRate: 100,
+ *         averageSubmissionTime: { h: 0, m: 11, s: 37 },
+ *         devices: { desktop: 80, smartphone: 20 },
+ *         operatingSystems: { mac: 40, windows: 40, android: 15, ios: 5 },
+ *         browsers: { chrome: 60, safari: 30, opera: 10 },
+ *       }}
+ *       helpTexts={{
+ *         averageSubmissionTime:
+ *           "Average time updates only with time duration feature enabled.",
+ *       }}
+ *     />
+ *   );
+ * };
+ * 
+ * export default Summary;
+ * @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.
+ *
+*/
+declare const Insights: React.FC<{
+  title?: string;
+  tooltipProps?: Partial<TooltipProps>;
+  insightsData: InsightsData;
+  isLoading: boolean;
+  timePeriod: TimePeriod;
+  setTimePeriod: (timePeriod: TimePeriod) => void;
+  helpTexts?: HelpTexts;
+  showWarningMessage: boolean;
+}>;
+
+export { Insights as default };

package/types/IntegrationCard.d.ts

@@ -0,0 +1,60 @@
+import { IconProps } from 'neetoicons';
+import React from 'react';
+
+interface IntegrationCardProps {
+  icon: React.FC<IconProps>;
+  subIcons?: React.FC<IconProps>[];
+  label: string;
+  description: string;
+  className?: string;
+  onConnect: (...args: any[]) => any;
+  onDisconnect?: (...args: any[]) => any;
+  onManage?: (...args: any[]) => any;
+  onClick?: (...args: any[]) => any;
+  isLoading?: boolean;
+  isConnected?: boolean;
+  isFailed?: boolean;
+  isExpired?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  hideDisconnect?: boolean;
+  tooltipProps?: Partial<TooltipProps>;
+  customDropdown?: React.ReactNode;
+  children?: React.ReactNode;
+  dataCy?: string;
+  connectPath?: string;
+  connectUrl?: string;
+}
+/**
+ *
+ * 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";
+ * 
+ * return (
+ *   <IntegrationCard
+ *     Icon={SlackIcon}
+ *     description="Integrate with Slack"
+ *     isConnected={isConnected}
+ *     label="Slack"
+ *     customDropdown={
+ *       <Dropdown buttonStyle="text" icon={MenuVertical}>
+ *         <Menu>
+ *           <MenuItem.Button>Custom Option</MenuItem.Button>
+ *         </Menu>
+ *       </Dropdown>
+ *     }
+ *     onConnect={handleConnect}
+ *     onDisconnect={handleDisconnect}
+ *     onManage={handleManage}
+ *   />
+ * );
+ * @endexample
+*/
+declare const IntegrationCard: React.FC<IntegrationCardProps>;
+
+export { type IntegrationCardProps, IntegrationCard as default };

package/types/IpRestriction.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ *
+ * A common component to restrict IPs in neeto applications.
+ *
+ * ![Ip](https://user-images.githubusercontent.com/49012815/279694376-0db130f0-1a54-4bd4-8456-1c5e6865856f.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
+*/
+declare const IpRestriction: React.FC<{}>;
+
+export { IpRestriction as default };