@bigbinary/neeto-molecules 3.15.41 → 3.15.43

package/types/Columns.d.ts

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

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

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

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

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

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

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

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

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

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

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

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