@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/Columns.d.ts

@@ -0,0 +1,168 @@
+import React from 'react';
+import { CheckboxProps, InputProps, DropdownProps } from '@bigbinary/neetoui';
+
+type Column = {
+  title: string;
+  dataIndex: string;
+  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
+ *
+ * and show columns.
+ *
+ * ![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 { useState } from "react";
+ * 
+ * import { Table } from "@bigbinary/neetoui";
+ * import Columns, { useHiddenColumns } from "@bigbinary/neeto-molecules/Columns";
+ * 
+ * import { DEFAULT_ROW_DATA } from "./constants";
+ * 
+ * const App = () => {
+ *   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={localStorageKey}
+ *         onChange={setColumns}
+ *       />
+ *       <Table rowData={DEFAULT_ROW_DATA} columnData={columns} />
+ *     </div>
+ *   );
+ * };
+ * @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 { 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
+*/
+declare const Columns: React.FC<{
+  actionBlock?: React.ReactNode;
+  checkboxProps?: CheckboxProps;
+  columnData: Column[];
+  isSearchable?: boolean;
+  localStorageKey: string;
+  noColumnMessage?: string;
+  onChange: (columns: Column[], hiddenColumns: string[]) => any[];
+  searchProps?: InputProps;
+} & DropdownProps>;
+declare function useHiddenColumns(localStorageKey: string, initialValue?: string[]): {
+  hiddenColumns: string[];
+  hideColumn: (dataIndex: string) => void;
+  showColumn: (dataIndex: string) => void;
+  getVisibleColumnData: (columnData: any[]) => any[];
+  onColumnDataChange: (columnData: any[]) => void;
+};
+declare 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 { Columns as default, useColumns, useHiddenColumns };

package/types/ConfigurePageSidebar.d.ts

@@ -0,0 +1,45 @@
+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
+*/
+declare const ConfigurePageSidebar: React.FC<{
+  label: React.ReactNode;
+  navLinks: NavLinkItemType[];
+  configurePageRoute: string;
+}>;
+
+export { ConfigurePageSidebar as default };

package/types/ConfirmationModal.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+
+/**
+ *
+ * When users have to delete an entity that is integral to the app, it is
+ *
+ * considered a best practice to add an extra step to confirm if they want to
+ *
+ * delete the entity. This modal contains an input field where you can ask the user
+ *
+ * to enter something in order to confirm if they want to delete that component. It
+ *
+ * can also be used to stress on the fact that the deletion is irreversible. This
+ *
+ * modal can be used for any other operations apart from deletion. You can see a
+ *
+ * similar modal being used by GitHub when you delete a repository. GitHub asks you
+ *
+ * to confirm the deletion by prompting you to enter the name of the repository in
+ *
+ * an input field.
+ *
+ * @example 
+ *
+ * import ConfirmationModal from "@bigbinary/neeto-molecules/ConfirmationModal";
+ * 
+ * import { deleteProject } from "apis/projectApi.js";
+ * 
+ * const SendToFieldsComponent = ({ project }) => {
+ *   const [isDeleting, setIsDeleting] = useState(false);
+ *   const [showModal, setShowModal] = useState(false);
+ * 
+ *   return (
+ *     <ConfirmationModal
+ *       buttonLabel="Delete Project"
+ *       confirmationText={project.name}
+ *       description="Once the project is deleted it cannot be restored. If you want to proceed, enter the name of the project below"
+ *       isOpen={showModal}
+ *       isSubmitting={isDeleting}
+ *       title="Confirm project deletion"
+ *       onClose={() => setShowModal(false)}
+ *       onSubmit={async () => {
+ *         setIsDeleting(true);
+ *         await deleteProject(project.name);
+ *         setShowModal(false);
+ *         setIsDeleting(false);
+ *       }}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const ConfirmationModal: React.FC<{
+  buttonLabel: string;
+  confirmationText: string;
+  description?: React.ReactNode | React.ReactNode[] | string;
+  isOpen?: boolean;
+  isSubmitting?: boolean;
+  title?: string;
+  onClose: Function;
+  onSubmit: Function;
+  deleteConfirmationMessage?: string;
+}>;
+
+export { ConfirmationModal as default };

package/types/Container.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+
+/**
+ *
+ * A container component to be used as a wrapper for the page content.
+ *
+ * @example 
+ *
+ * import Container from "@bigbinary/neeto-molecules/Container";
+ * 
+ * const App = () => (
+ *   <Container>
+ *     <div>Page content</div>
+ *   </Container>
+ * );
+ * @endexample
+ * When we are using the container with the header we can use the isHeaderFixed
+ *
+ * prop to remove the side padding.
+ *
+ * @example 
+ *
+ * import Container from "@bigbinary/neeto-molecules/Container";
+ * 
+ * const App = () => (
+ *   <Container isHeaderFixed>
+ *     <Header title="Title" />
+ *     <div>Page content</div>
+ *   </Container>
+ * );
+ * @endexample
+*/
+declare const Container: React.FC<{
+  isHeaderFixed?: boolean;
+  className?: string;
+}>;
+
+export { Container as default };

package/types/CopyToClipboardButton.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface CopyToClipboardButtonProps {
+  className?: string;
+  icon?: string | any;
+  label?: string;
+  successLabel?: string;
+  tooltipContent?: string;
+  successTooltipContent?: string;
+  value: string;
+  style?: "primary" | "secondary" | "text";
+}
+/**
+ *
+ * A button that copies the given value to the clipboard.
+ *
+ * @example 
+ *
+ * import CopyToClipboardButton from "@bigbinary/neeto-molecules/CopyToClipboardButton";
+ * 
+ * const CopyToClipboardDemo = ({ value }) => (
+ *   <CopyToClipboardButton label="Copy text" value={value} />
+ * );
+ * @endexample
+*/
+declare const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps>;
+
+export { type CopyToClipboardButtonProps, CopyToClipboardButton as default };

package/types/Currency.d.ts

@@ -0,0 +1,50 @@
+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
+*/
+declare const Currency: React.FC<CurrencyProps>;
+declare const FormikCurrency: React.FC<CurrencyProps>;
+
+export { Currency, FormikCurrency };

package/types/DateFormat.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TypographyProps, TooltipProps } from '@bigbinary/neetoui';
+import { timeFormat, DateTimeType } from '@bigbinary/neeto-commons-frontend/utils';
+
+declare const DateFormat: {
+  [key in Capitalize<keyof typeof timeFormat>]: React.FC<{
+    date: DateTimeType;
+    timerInterval?: number;
+    tooltipDateFormat?: keyof typeof timeFormat;
+    typographyProps?: Partial<TypographyProps>;
+    tooltipProps?: Partial<TooltipProps>;
+  }>;
+};
+
+export { DateFormat as default };

package/types/DateRangeFilter.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Dayjs } from 'dayjs';
+import { DatePickerProps } from '@bigbinary/neetoui';
+
+interface TimePeriodType {
+  startDate: Dayjs;
+  endDate: Dayjs;
+  rangeType: string;
+}
+/**
+ *
+ * A common component to manage your date range filters.
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/45137335/221573730-3195ac05-6cf2-4b45-bfe9-427b077cec07.png|height=200|width=300)
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/45137335/221578791-74b1c235-9287-4650-9d9b-6774df1d689d.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import DateRangeFilter from "@bigbinary/neeto-molecules/DateRangeFilter";
+ * const DateRangeFilterActionBlock = (
+ *   {
+ *     //pass the necessary props
+ *   }
+ * ) => {
+ *   const [timePeriod, setTimePeriod] = useState(INITIAL_TIME_PERIOD_VALUE);
+ *   //INITIAL_TIME_PERIOD_VALUE  will be an object with label,value and rangeType as keys
+ *   return (
+ *     <DateRangeFilter
+ *       timePeriod={timePeriod}
+ *       setTimePeriod={setTimePeriod}
+ *       timePeriodOptions={[
+ *         {
+ *           label: "New filter label",
+ *           value: {startDate:  pass dayjs object , endDate:  pass dayjs object , rangeType: "new_range_type"},
+ *         },
+ *       ]} // pass this prop only if you want to override default filters available
+ *     />
+ *   );
+ * };
+ * @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 DateRangeFilter: React.FC<{
+  timePeriod: TimePeriodType;
+  setTimePeriod: React.Dispatch<React.SetStateAction<TimePeriodType>>;
+  timePeriodOptions?: TimePeriodType[];
+  datePickerProps?: DatePickerProps;
+}>;
+
+export { DateRangeFilter as default };

package/types/DeleteArchiveModal.d.ts

@@ -0,0 +1,65 @@
+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 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
+*/
+declare 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 { DeleteArchiveModal as default };

package/types/DeviceIncompatibilityMessage.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ *
+ * Used to indicate screen incompatibility on smaller devices.
+ *
+ * @example 
+ *
+ * import DeviceIncompatibilityMessage from "@bigbinary/neeto-molecules/DeviceIncompatibilityMessage";
+ * 
+ * const App = () => <DeviceIncompatibilityMessage />;
+ * @endexample
+*/
+declare const DeviceIncompatibilityMessage: React.FC<{
+  description?: React.ReactNode;
+  className?: string;
+}>;
+
+export { DeviceIncompatibilityMessage as default };

package/types/DocumentEditor.d.ts

@@ -0,0 +1,61 @@
+import { attachment, FormikEditorProps } from '@bigbinary/neeto-editor';
+import { TextareaProps } from '@bigbinary/neetoui';
+
+/**
+ *
+ * NeetoEditor with a better writing experience.
+ *
+ * @example 
+ *
+ * import DocumentEditor from "@bigbinary/neeto-molecules/DocumentEditor";
+ * 
+ * const Component = () => (
+ *   <Container isHeaderFixed>
+ *     <FormikFormWrapper
+ *       className="flex h-full w-full flex-grow"
+ *       formikProps={{
+ *         enableReinitialize: true,
+ *         initialValues: initialFormValues,
+ *         onSubmit: handleSubmit,
+ *         validationSchema,
+ *       }}
+ *     >
+ *       <DocumentEditor
+ *         attachments={attachments}
+ *         onAttachmentChange={handleAttachmentChange}
+ *         onContentChange={handleContentChange}
+ *         onTitleChange={handleTitleChange}
+ *         getTitleRef={setTitleRef}
+ *         getEditorRef={setEditorRef}
+ *         editorProps={{
+ *           editorSecrets,
+ *           uploadEndpoint,
+ *           openImageInNewTab: false,
+ *           key: "document-editor",
+ *         }}
+ *         titleProps={{
+ *           autoFocus: true,
+ *           placeholder: "Document title",
+ *         }}
+ *       />
+ *     </FormikFormWrapper>
+ *   </Container>
+ * );
+ * @endexample
+*/
+declare const DocumentEditor: React.FC<{
+  attachments: attachment[];
+  onContentChange?: (content: string) => void;
+  onAttachmentChange?: (attachments: attachment[]) => void;
+  onTitleChange?: (title: string) => void;
+  getTitleRef?: (ref: HTMLTextAreaElement | null) => void;
+  getEditorRef?: (ref: any) => void;
+  editorContentFieldName?: string;
+  titleFieldName?: string;
+  editorProps?: FormikEditorProps;
+  titleProps?: TextareaProps;
+  menuClassName?: string;
+  children?: React.ReactNode;
+}>;
+
+export { DocumentEditor as default };

package/types/DownloadMobileAppCallout.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ *
+ * A component to render warning callout when the application is accessed from a
+ *
+ * mobile browser.
+ *
+ * @example 
+ *
+ * import DownloadMobileAppCallout from "@bigbinary/neeto-molecules/DownloadMobileAppCallout";
+ * 
+ * const App = () => (
+ *   <DownloadMobileAppCallout />
+ *   <Main />
+ * )
+ * @endexample
+ * The excludePathRegex can be specified like this:
+ *
+ * @example 
+ *
+ * const PUBLIC_ROUTE_REGEX = new RegExp(/^\/public/)
+ * 
+ * <DownloadMobileAppCallout excludePathRegex={PUBLIC_ROUTE_REGEX} />
+ * @endexample
+ * With this change, the DownloadMobileAppCallout component won't display callout
+ *
+ * for any path that starts with "/public".
+ *
+*/
+declare const DownloadMobileAppCallout: React.FC<{
+  excludePathRegex?: RegExp;
+}>;
+
+export { DownloadMobileAppCallout as default };