@bigbinary/neeto-molecules 1.1.77 → 1.2.0-beta1

package/types/Builder.d.ts

@@ -3,51 +3,100 @@ type Element = {
   value: string;
   icon: React.ReactNode;
 };
-
 type ElementSection = {
   title: string;
   elements: Element[];
   key: string;
   isCreatable: (element: Element) => boolean;
 };
-
 type SelectedElement = {
   id: string;
   kind: string;
   position: number;
   label: string;
   icon: React.ReactNode;
+  isPending: boolean;
 };
-
 type dragResult = {
   index: number;
 };
-
 type SelectedElementAction = {
   label: string;
   key: string;
   onClick: (element: Element) => void;
+  isVisible?: boolean;
 };
-
-export const ElementsPanel: React.FC<{
+export
+/**
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Container from "@bigbinary/neeto-molecules/Container";
+ * import {
+ *   ElementsPanel,
+ *   PropertiesPanel,
+ * } from "@bigbinary/neeto-molecules/Builder";
+ * import Configure from "./Configure";
+ * 
+ * const Component = () => (
+ *   <Container isHeaderFixed>
+ *     <div className="flex h-full w-full justify-between">
+ *       <ElementsPanel
+ *         elementSections={sections}
+ *         {...{
+ *           handleAddElement,
+ *           isElementVisible,
+ *           selectedElements,
+ *           fixedFirstElement,
+ *           fixedLastElement,
+ *         }}
+ *         selectedElementActions={[
+ *           {
+ *             label: "Duplicate",
+ *             key: "duplicate",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *           {
+ *             label: "Delete",
+ *             key: "delete",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *         ]}
+ *       />
+ *       <PropertiesPanel
+ *         onClose={id => alert("The panel is closed :", id)}
+ *         id={selectedRecord.id}
+ *       >
+ *         {selectedRecord.id ? <Configure /> : <PropertiesPanel.EmptyProperty />}
+ *       </PropertiesPanel>
+ *     </div>
+ *   </Container>
+ * );
+ * @endexample
+*/
+const ElementsPanel: React.FC<{
   elementSections: ElementSection[];
   selectedElements: SelectedElement[];
   handleAddElement: (element: Element) => void;
   isElementVisible: (element: Element) => boolean;
   fixedFirstElement?: SelectedElement;
   fixedLastElement?: SelectedElement;
-  handleDragEnd?: ({ source: dragResult, destination: dragResult }) => void;
+  handleDragEnd?: ({
+    source: dragResult,
+    destination: dragResult
+  }) => void;
   isDragDisabled?: boolean;
   handleSelectElement: (index: number) => void;
-  selectedElementIndex: number;
-  fixedLastElementIndex: number;
-  selectedElementActions: SelectedElementAction[];
+  selectedElementId: string;
+  selectedElementActions: SelectedElementAction[] | ((element: Element) => SelectedElementAction[]);
   addAllElements: () => void;
   isAddingAllElements?: boolean;
   showElementsFillButton?: boolean;
   isAddingNewElement?: boolean;
 }>;
-
 export const PropertiesPanel: React.FC<{
   children: React.ReactNode;
-}>;
+  id: string;
+  onClose?: (id: string) => void;
+}>;

package/types/Columns.d.ts

@@ -6,6 +6,16 @@ type Column = {
   key: string;
   [key: string]: any;
 };
+type getColumnDataType = {
+  columnData: any[];
+  isHidable?: boolean;
+  isReOrderable?: boolean;
+};
+type useColumnsType = {
+  localStorageKey: string;
+  initialHiddenColumns?: string[];
+  initialOrder?: string[];
+};
 /**
  *
  * It is a helper component that can be used along with the table component to hide
@@ -14,23 +24,43 @@ type Column = {
  *
  * ![image](https://user-images.githubusercontent.com/32426070/195069324-3cbb4c70-f62b-4080-b4ae-bdeabb449b23.png|height=200|width=300)
  *
+ * It's a helper hook used alongside Columns component. It allows you to to
+ *
+ * interact with the underlying zustand store to hide and show columns.
+ *
  * @example 
  *
  * import React, { useState } from "react";
  * 
  * import { Table } from "@bigbinary/neetoui";
- * import Columns from "@bigbinary/neeto-molecules/Columns";
+ * import Columns, { useHiddenColumns } from "@bigbinary/neeto-molecules/Columns";
  * 
- * import { DEFAULT_COLUMNS_DATA, DEFAULT_ROW_DATA } from "./constants";
+ * import { DEFAULT_ROW_DATA } from "./constants";
  * 
  * const App = () => {
- *   const [columns, setColumns] = useState(DEFAULT_COLUMNS_DATA);
+ *   const localStorageKey = "NEETO_APP_FEATURE_HIDDEN_COLUMNS";
+ *   const { hideColumn } = useHiddenColumns(localStorageKey);
+ *   const [columns, setColumns] = useState([]);
+ *   const DEFAULT_COLUMNS_DATA = [
+ *     { title: "Id", dataIndex: "id", key: "id", isHidable: false },
+ *     { title: "Name", dataIndex: "name", key: "name", isHidable: false },
+ *     {
+ *       title: () => (
+ *         <>
+ *           <span>Email</span>
+ *           <Button onClick={() => hideColumn("email")}>Hide</Button>
+ *         </>
+ *       ),
+ *       dataIndex: "email",
+ *       key: "email",
+ *     },
+ *   ];
  * 
  *   return (
  *     <div>
  *       <Columns
  *         columnData={DEFAULT_COLUMNS_DATA}
- *         localStorageKey="NEETO_APP_FEATURE_HIDDEN_COLUMNS"
+ *         localStorageKey={localStorageKey}
  *         onChange={setColumns}
  *       />
  *       <Table rowData={DEFAULT_ROW_DATA} columnData={columns} />
@@ -38,16 +68,93 @@ type Column = {
  *   );
  * };
  * @endexample
+ * It's a helper hook used alongside Columns component. It allows you to to
+ *
+ * interact with the underlying zustand store to hide/show columns and store the column order.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * 
+ * import { Table } from "@bigbinary/neetoui";
+ * import Columns, { useColumns } from "@bigbinary/neeto-molecules/Columns";
+ * 
+ * import { DEFAULT_ROW_DATA } from "./constants";
+ * 
+ * const App = () => {
+ *   const localStorageKey = "NEETO_APP_FEATURE_HIDDEN_COLUMNS";
+ *   const { hideColumn, getColumnData } = useColumns({
+ *     localStorageKey,
+ *     initialHiddenColumns,
+ *     initialOrder,
+ *   });
+ *   const [columns, setColumns] = useState([]);
+ *   const DEFAULT_COLUMNS_DATA = [
+ *     { title: "Id", dataIndex: "id", key: "id", isHidable: false },
+ *     { title: "Name", dataIndex: "name", key: "name", isHidable: false },
+ *     {
+ *       title: () => (
+ *         <>
+ *           <span>Email</span>
+ *           <Button onClick={() => hideColumn("email")}>Hide</Button>
+ *         </>
+ *       ),
+ *       dataIndex: "email",
+ *       key: "email",
+ *     },
+ *   ];
+ * 
+ *   const handleColumnReorder = columns => {
+ *     setColumnOrder(pluck("dataIndex", columns).filter(isNotEmpty));
+ *   };
+ * 
+ *   const columnData = getColumnData({
+ *     columnData: columns,
+ *     isReOrderable: true,
+ *     isHidable: true,
+ *   });
+ * 
+ *   return (
+ *     <div>
+ *       <Table rowData={DEFAULT_ROW_DATA} {...{ columnData }} onColumnUpdate={handleColumnReorder} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
 */
 const Columns: React.FC<{
   actionBlock?: React.ReactNode;
   checkboxProps?: CheckboxProps;
   columnData: Column[];
-  fixedColumns?: string[];
   isSearchable?: boolean;
   localStorageKey: string;
   noColumnMessage?: string;
   onChange: (columns: Column[], hiddenColumns: string[]) => any[];
   searchProps?: InputProps;
 } & DropdownProps>;
+export function useHiddenColumns(localStorageKey: string, initialValue?: string[]): {
+  hiddenColumns: string[];
+  hideColumn: (dataIndex: string) => void;
+  showColumn: (dataIndex: string) => void;
+  getVisibleColumnData: (columnData: any[]) => any[];
+  onColumnDataChange: (columnData: any[]) => void;
+};
+export function useColumns({
+  localStorageKey,
+  initialHiddenColumns,
+  initialOrder
+}: useColumnsType): {
+  hiddenColumns: string[];
+  columnOrder: string[];
+  hideColumn: (dataIndex: string) => void;
+  showColumn: (dataIndex: string) => void;
+  getVisibleColumnData: (columnData: any[]) => any[];
+  onColumnDataChange: (columnData: any[]) => void;
+  getColumnData: ({
+    columnData,
+    isHidable,
+    isReOrderable
+  }: getColumnDataType) => any[];
+  setColumnOrder: (columns: string[]) => void;
+};
 export default Columns;

package/types/ConfigurePageSidebar.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+type NavLinkItemType = {
+  to: string;
+  label?: React.ReactNode;
+  isActive: () => boolean;
+  items: NavLinkItemType[];
+} & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
+/**
+ *
+ * The ConfigurePageSidebar component is used in Neeto products to display
+ *
+ * navigation links on configure pages with simplified UI for navigation. An
+ *
+ * example of its usage is the NeetoForm Configure page within the form builder.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/3e3f16f0-7296-476a-90c3-2f95846dae62|height=200|width=300)
+ *
+ * @example 
+ *
+ * import ConfigurePageSidebar from "@bigbinary/neeto-molecules/ConfigurePageSidebar";
+ * import { SIDEBAR_LINKS } from "components/constants";
+ * 
+ * const App = ({ children }) => {
+ *   // custom app logic
+ *   return (
+ *     <div>
+ *       <ConfigurePageSidebar
+ *         configurePageRoute={buildUrl(routes.form.configure.index, { formId })}
+ *         label="Configure"
+ *         navLinks={SIDEBAR_LINKS}
+ *       />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const ConfigurePageSidebar: React.FC<{
+  label: React.ReactNode;
+  navLinks: NavLinkItemType[];
+  configurePageRoute: string;
+}>;
+export default ConfigurePageSidebar;

package/types/CopyToClipboardButton.d.ts

@@ -3,6 +3,9 @@ export interface CopyToClipboardButtonProps {
   className?: string;
   icon?: string | any;
   label?: string;
+  successLabel?: string;
+  tooltipContent?: string;
+  successTooltipContent?: string;
   value: string;
   style?: "primary" | "secondary" | "text";
 }

package/types/Currency.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { SelectProps } from "@bigbinary/neetoui";
+type CurrencyProps = {
+  allowedCurrencies?: string[];
+} & SelectProps;
+/**
+ *
+ * A component that allows you to select a currency.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/10956193/422f706f-8873-4091-866f-f09c24958b69|height=200|width=300)
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * import { Currency } from "@bigbinary/neeto-molecules/Currency";
+ * 
+ * const CurrencyContainer = () => {
+ *   const [currency, setCurrency] = useState();
+ *   return <Currency onChange={setCurrency} />;
+ * };
+ * @endexample
+ * The Currency component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import * as yup from "yup";
+ * import { FormikCurrency } from "@bigbinary/neeto-molecules/Currency";
+ * 
+ * const FormikCurrencyContainer = () => {
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { currency: null },
+ *         validationSchema: yup.object().shape({
+ *           currency: yup.object().required(),
+ *         }),
+ *       }}
+ *     >
+ *       <FormikCurrency />
+ *       <Button className="mt-5" label="Submit" type="submit" />
+ *     </Form>
+ *   );
+ * };
+ * @endexample
+*/
+const Currency: React.FC<CurrencyProps>;
+const FormikCurrency: React.FC<CurrencyProps>;
+export { Currency, FormikCurrency };

package/types/CustomDomain.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { onCreateCustomDomainCallback } from "./CustomDomainDashboard";
 /**
  *
  * A common component for managing custom domain. This component can be used when
@@ -15,5 +16,6 @@ import React from "react";
 const CustomDomain: React.FC<{
   url: string;
   iconOnly: boolean;
+  onCreate?: onCreateCustomDomainCallback;
 }>;
 export default CustomDomain;

package/types/CustomDomainDashboard.d.ts

@@ -1,4 +1,17 @@
 import React from "react";
+type customDomainFields = {
+  addedCnameAt: string;
+  cnameValidationParams: {
+    name: string;
+    value: string;
+  };
+  dnsTarget: string;
+  hostname: string;
+  id: string;
+  notice: string;
+  status: string;
+};
+export type onCreateCustomDomainCallback = (values: customDomainFields) => void;
 /**
  *
  * A full page common component for managing custom domains. This component can be
@@ -29,5 +42,6 @@ const CustomDomainDashboard: React.FC<{
     [key: string]: any;
   };
   url: string;
+  onCreate: onCreateCustomDomainCallback;
 }>;
 export default CustomDomainDashboard;

package/types/DateRangeFilter.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { Dayjs } from "dayjs";
+import { DatePickerProps } from "@bigbinary/neetoui";
 interface TimePeriodType {
   startDate: Dayjs;
   endDate: Dayjs;
@@ -48,5 +49,6 @@ const DateRangeFilter: React.FC<{
   timePeriod: TimePeriodType;
   setTimePeriod: React.Dispatch<React.SetStateAction<TimePeriodType>>;
   timePeriodOptions?: TimePeriodType[];
+  datePickerProps?: DatePickerProps;
 }>;
 export default DateRangeFilter;

package/types/DeleteArchiveModal.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+/**
+ *
+ * The DeleteArchiveModal component is designed to facilitate the deletion of an entity, emphasizing the irreversible nature of this action through a confirmation checkbox. Additionally, it provides an option to archive the entity instead of deleting it.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import DeleteArchiveModal from "@bigbinary/neeto-molecules/DeleteArchiveModal";
+ * 
+ * import { deleteProject, archiveProject } from "apis/projectApi.js";
+ * 
+ * const App = ({ project }) => {
+ *   const [isDeleting, setIsDeleting] = useState(false);
+ *   const [isArchiving, setIsArchiving] = useState(false);
+ *   const [showModal, setShowModal] = useState(false);
+ * 
+ *   return (
+ *     <DeleteArchiveModal
+ *       checkboxLabel="Yes, delete <Form_Name>"
+ *       description={
+ *         `The selected form <Form_Name> and all associated responses will be permanently deleted.
+ * 
+ *         Since, we won't be able to recover the deleted form we suggest you to archive the form.`
+ *       }
+ *       isArchiving={isArchiving}
+ *       isDeleting={isDeleting}
+ *       isOpen={showModal}
+ *       title="Delete form?"
+ *       onClose={() => setShowModal(false)}
+ *       onDelete={async () => {
+ *         setIsDeleting(true);
+ *         await deleteProject(project.name);
+ *         setShowModal(false);
+ *         setIsDeleting(false);
+ *       }}
+ *       onArchive={async () => {
+ *         setIsArchiving(true);
+ *         await archiveProject(project.name);
+ *         setShowModal(false);
+ *         setIsArchiving(false);
+ *       }}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const DeleteArchiveModal: React.FC<{
+  checkboxLabel: string;
+  className: string;
+  description: string;
+  isArchiving: boolean;
+  isDeleting: boolean;
+  isOpen: boolean;
+  onArchive: Function;
+  onClose: Function;
+  onDelete: Function;
+  title: string;
+}>;
+export default DeleteArchiveModal;

package/types/EmailForm.d.ts

@@ -28,7 +28,7 @@ type FieldOptions = {
  *   return (
  *     <EmailFormProvider>
  *       {({ values }) => (
- *         <div className="flex gap-2 p-6">
+ *         <div className="flex flex-col gap-2 p-6 md:flex-row">
  *           <EmailForm
  *             showReplyToField
  *             showSendToField

package/types/EmojiPicker.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { DropdownProps } from "neetoui";
+type Emoji = {
+  native: string;
+  unified: string;
+};
+/**
+ *
+ * A component to pick emojis.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/6238f165-3a55-4e66-bf4f-101971f80c80|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiPicker from "@bigbinary/neeto-molecules/EmojiPicker";
+ * 
+ * const EmojiPickerContainer = () => {
+ *   const [emoji, setEmoji] = useState();
+ *   return (
+ *     <div>
+ *       <div>Selected Emoji: {emoji}</div>
+ *       <EmojiPicker onSelect={obj => setEmoji(obj.native)} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const EmojiPicker: React.FC<{
+  onSelect?: (emoji: Emoji) => void;
+  open?: boolean;
+  dropdownProps?: DropdownProps;
+}>;
+export default EmojiPicker;

package/types/EmojiReactions.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+type Emoji = {
+  native: string;
+  unified: string;
+};
+type Reaction = {
+  native: string;
+  unified: string;
+  userName: string;
+};
+/**
+ *
+ * A component to group user selected emojis and display them.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/576abbd2-dd08-4535-a120-1e9b295850fb|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiReactions from "@bigbinary/neeto-molecules/EmojiReactions";
+ * const EmojiReactionsContainer = () => {
+ *   const [reactions, setReactions] = useState([
+ *     { native: "😃", unified: "1f603", userName: "User 1" },
+ *     { native: "😄", unified: "1f604", userName: "User 1" },
+ *   ]);
+ * 
+ *   const createReaction = emoji => ({
+ *     native: emoji.native,
+ *     unified: emoji.unified,
+ *     userName: user.name,
+ *     userId: user.id,
+ *   });
+ * 
+ *   const onReactionClick = emoji => {
+ *     const reaction = findBy(
+ *       { unified: emoji.unified, userId: user.id },
+ *       reactions
+ *     );
+ *     if (reaction) {
+ *       setReactions(reactions.filter(item => item.unified !== reaction.unified));
+ *     } else {
+ *       setReactions([...reactions, createReaction(emoji)]);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <EmojiReactions {...{ onReactionClick, reactions }} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const EmojiReactions: React.FC<{
+  reactions: Reaction[];
+  onReactionClick?: (emoji: Emoji) => void;
+  emojiSize?: string;
+  emojiBoxStyle?: string;
+  isUpdating?: boolean;
+}>;
+export default EmojiReactions;

package/types/ErrorPage.d.ts

@@ -14,5 +14,6 @@ const ErrorPage: React.FC<{
   status?: number;
   backToHomeButtonProps?: Partial<ButtonProps>;
   children?: React.ReactNode | React.ReactNode[];
+  showNeetoChatWidget?: boolean;
 }>;
 export default ErrorPage;

package/types/FloatingActionMenu.d.ts

@@ -0,0 +1,56 @@
+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;
+  changelogProps?: ChangeLogPropsType;
+  keyboardShortcutProps?: LinkType;
+}
+type FloatingActionMenuProps = {
+  profileInfoOverrides?: ProfileInfo & AvatarProps;
+  helpLinkOverrides?: HelpLinks;
+  showProductSwitcher?: boolean;
+  topLinks?: LinkType[];
+  bottomLinks?: LinkType[];
+  customContent?: React.ReactNode;
+  isThemeSwitcherEnabled?: 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 & Changelog
+ *
+ * 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
+*/
+const FloatingActionMenu: React.FC<FloatingActionMenuProps>;
+export default FloatingActionMenu;

package/types/Header.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SIZES } from "components/Header/constants";
 import { DropdownProps } from "neetoui";
+import MoreDropdown from "./MoreDropdown";
 /**
  *
  * The Header component can be used to display the page title and an action block
@@ -26,6 +27,6 @@ const Header: React.FC<{
     link?: string;
   }[];
   size?: keyof typeof SIZES;
-  renderDropdown?: (Dropdown: React.FC<DropdownProps>) => JSX.Element;
+  renderDropdown?: (Dropdown: MoreDropdown) => JSX.Element;
 }>;
 export default Header;