@bigbinary/neeto-molecules 3.15.42 → 3.15.43

package/types/FinderModal.d.ts

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

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

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

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

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

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

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

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

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

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

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