@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/ShareViaEmail.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+
+/**
+ *
+ * A common component to share entities via email.
+ *
+ * ![ShareViaEmail](https://user-images.githubusercontent.com/66865722/229559580-b58d4418-8b03-4afc-9f63-c2dfa756c0fa.png|height=200|width=300)
+ *
+ * Simple:
+ *
+ * @example 
+ *
+ * import ShareViaEmail from "@bigbinary/neeto-molecules/ShareViaEmail";
+ * import Scrollable from "@bigbinary/neeto-molecules/Scrollable";
+ * 
+ * const ShareViaEmail = () => {
+ *   const handleSubmit = () => {
+ *     //api call
+ *   };
+ * 
+ *   return (
+ *     <Scrollable className="flex w-full flex-col p-0">
+ *       <ShareViaEmail
+ *         backToUrl="/home/share"
+ *         handleSubmit={handleSubmit}
+ *         description="Share form via email"
+ *       />
+ *     </Scrollable>
+ *   );
+ * };
+ * export default ShareViaEmail;
+ * @endexample
+ * With children and EmailPreview props:
+ *
+ * @example 
+ *
+ * import {useState} from "react";
+ * import ShareViaEmail from "@bigbinary/neeto-molecules/ShareViaEmail";
+ * import Scrollable from "@bigbinary/neeto-molecules/Scrollable";
+ * 
+ * const ShareViaEmail = () => {
+ *   const [startButtonText, setStartButtonText] = useState("")
+ * 
+ *   const handleSubmit = () => {
+ *     //custom validations and API call
+ *   };
+ * 
+ *   const StartButtonText => (
+ *     //input field
+ *   )
+ * 
+ *   return (
+ *     <Scrollable className="flex w-full flex-col p-0">
+ *       <ShareViaEmail
+ *         backToUrl="/home/share"
+ *         handleSubmit={handleSubmit}
+ *       >
+ *         <StartButtonText />
+ *         {other child components}
+ *       </ShareViaEmail>
+ *     </Scrollable>
+ *   );
+ * };
+ * export default ShareViaEmail;
+ * @endexample
+*/
+declare const ShareViaEmail: React.FC<{
+  backToUrl?: string;
+  children?: React.ReactNode;
+  description?: string;
+  disableReplyTo?: boolean;
+  showSendFromField?: boolean;
+  defaultValues?: {
+    sendFromEmail?: string;
+    replyToEmail?: string;
+    emailSubject?: string;
+    emailBody?: string;
+    actionButtonText?: string;
+  };
+  handleSubmit: (data: {
+    sendFromEmail: string;
+    replyToEmail: string;
+    notifyEmails: {
+      label: string;
+      value: string;
+      valid: boolean;
+    }[];
+    emailSubject: string;
+    emailBody: string;
+    isSendLaterEnabled: boolean;
+    sendEmailDatetime: string;
+    category: string;
+    actionButtonText: string;
+  }) => void;
+  showVideoEmbedInEditor?: boolean;
+  title?: string;
+}>;
+
+export { ShareViaEmail as default };

package/types/ShareViaLink.d.ts

@@ -0,0 +1,183 @@
+import React from 'react';
+
+type SubtitleProps = {
+  subtitle: string;
+  dataCy?: string;
+  link?: string;
+  onClick?: func;
+};
+type MoreOptions = {
+  title: string;
+  link: Function;
+  icon: React.ReactNode;
+  onClick: Function;
+  dataCy: string;
+  subtitleProps?: SubtitleProps;
+};
+type RegenerateConfig = {
+  expiresInOptions: Array<{
+    label: string;
+    value: string;
+  }>;
+  helpUrl: string;
+};
+/**
+ *
+ * A common component to share the link in multiple ways.
+ *
+ * ![ShareViaLink](https://user-images.githubusercontent.com/35304653/261649701-932f0cbe-4e63-4041-957b-49ee67be7055.png|height=200|width=300)
+ *
+ * Regenerate URL enabled
+ *
+ * @example 
+ *
+ * import { useRegenerateUrl } from "hooks/reactQuery/useQuizzesApi";
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => {
+ *   const { mutate: regenerateURL, isPending: isRegenerating } =
+ *     useRegenerateUrl();
+ * 
+ *   return (
+ *     <ShareViaLink
+ *       enabledOptions={{ regenerate: true }}
+ *       entity={quiz}
+ *       entityName="quiz"
+ *       handleRegenerate={regenerateURL}
+ *       isLoading={isRegenerating}
+ *       socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *       url={quizUrl}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Regenerate URL and Edit URL enabled
+ *
+ * @example 
+ *
+ * import { useRegenerateUrl, useUpdateUrl } from "hooks/reactQuery/useQuizzesApi";
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => {
+ *   const { mutate: regenerateURL, isPending: isRegenerating } =
+ *     useRegenerateUrl();
+ * 
+ *   const { mutate: updateUrl, isPending: isUpdating } = useUpdateUrl();
+ * 
+ *   return (
+ *     <ShareViaLink
+ *       editUrlProps={{
+ *         prefix: `${window.location.origin}/`,
+ *         editablePath: window.location.pathname,
+ *       }}
+ *       enabledOptions={{ regenerate: true, edit: true }}
+ *       entity={quiz}
+ *       entityName="quiz"
+ *       handleEdit={updateUrl}
+ *       handleRegenerate={regenerateURL}
+ *       isLoading={isRegenerating || isUpdating}
+ *       socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *       url={quizUrl}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * Regenerate URL and Edit URL disabled
+ *
+ * @example 
+ *
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => (
+ *   <ShareViaLink
+ *     entity={quiz}
+ *     entityName="quiz"
+ *     socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *     url={quizUrl}
+ *   />
+ * );
+ * @endexample
+ * With preview URL
+ *
+ * @example 
+ *
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * 
+ * const Share = ({ quiz }) => (
+ *   <ShareViaLink
+ *     entity={quiz}
+ *     entityName="quiz"
+ *     previewUrl={quizPreviewUrl}
+ *     socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *     url={quizUrl}
+ *   />
+ * );
+ * @endexample
+ * With more share options
+ *
+ * @example 
+ *
+ * import ShareViaLink from "@bigbinary/neeto-molecules/ShareViaLink";
+ * import { Message, Notification } from "neetoicons";
+ * 
+ * const Share = ({ quiz }) => (
+ *   <ShareViaLink
+ *     entity={quiz}
+ *     entityName="quiz"
+ *     previewUrl={quizPreviewUrl}
+ *     socialMediaPostTitle="Hi, can you please attend this quiz?"
+ *     url={quizUrl}
+ *     moreOptions={[
+ *       {
+ *         title: "Invite via email",
+ *         link: "/",
+ *         icon: Message,
+ *         dataCy: "share-via-email-link",
+ *         subtitleProps: {
+ *           subtitle: "7 People invited.",
+ *           onClick: () => {
+ *             alert("7 People invited");
+ *           },
+ *         },
+ *       },
+ *       {
+ *         title: "Notify users",
+ *         onClick: () => {
+ *           alert("Notified users");
+ *         },
+ *         icon: Notification,
+ *         dataCy: "notify-users",
+ *       },
+ *     ]}
+ *   />
+ * );
+ * @endexample
+*/
+declare const ShareViaLink: React.FC<{
+  isLoading?: boolean;
+  enabledOptions?: {
+    regenerate?: boolean | RegenerateConfig;
+    edit?: boolean;
+  };
+  entity: {
+    id: string;
+    name: string;
+  };
+  entityName: string;
+  handleEdit?: Function;
+  handleRegenerate?: Function;
+  socialMediaPostTitle: string;
+  moreOptions?: MoreOptions[];
+  isOtherShareOptionsEnabled?: boolean;
+  disableShareSocialMedia?: boolean;
+  disableQRDownload?: boolean;
+  urls: {
+    prefix?: string;
+    editablePath?: string;
+    maxLength?: number;
+    url: string;
+    previewUrl?: string;
+  }[];
+}>;
+
+export { ShareViaLink as default };

package/types/Sidebar.d.ts

@@ -0,0 +1,51 @@
+import { filters } from '@bigbinary/neeto-filters-frontend';
+import React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+
+type NavLinkItemType = {
+  to?: string;
+  label?: React.ReactNode;
+  icon?: any;
+  description?: React.ReactNode;
+  isActive?: () => boolean;
+  count?: number;
+  type?: string;
+  filters?: filters;
+  checkpointKey?: string;
+  isConfigureNavLink?: boolean;
+  isCountsLoading?: boolean;
+} & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
+/**
+ *
+ * The Sidebar component is used in neeto products for showing navigation links
+ *
+ * that take the user to different parts of the app. The sidebar is collapsible and
+ *
+ * can be toggled by clicking on the chevron icon.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/9be99f89-97cf-4295-acbf-ec39c658f68f|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Sidebar from "@bigbinary/neeto-molecules/Sidebar";
+ * import { SIDEBAR_LINKS } from "components/constants";
+ * 
+ * const SidebarContainer = ({ children }) => {
+ *   // custom app logic
+ *   return (
+ *     <div>
+ *       <Sidebar navLinks={SIDEBAR_LINKS} />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const Sidebar: React.FC<{
+  navLinks?: NavLinkItemType[];
+  customLogo?: any;
+  isCountsLoading?: boolean;
+  showWorkspaceName?: boolean;
+}>;
+
+export { Sidebar as default };

package/types/StatusDropdown.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+
+/**
+ *
+ * The StatusDropdown component is used in neeto products for showing a dropdown
+ *
+ * to select the status of an item.
+ *
+ * ![Screenshot](https://github.com/user-attachments/assets/aed45df0-e216-4886-9013-7f4d4aa940bf|height=200|width=300)
+ *
+ * @example 
+ *
+ * import StatusDropdown from "@bigbinary/neeto-molecules/StatusDropdown";
+ * 
+ * const App = () => {
+ *   const [selectedStatus, setSelectedStatus] = React.useState("All");
+ * 
+ *   const options = [
+ *     { label: "All", value: "All", color: "red" },
+ *     { label: "Open", value: "Open", color: "green" },
+ *     { label: "In Progress", value: "In Progress", color: "yellow" },
+ *   ];
+ * 
+ *   return (
+ *     <div>
+ *       <StatusDropdown
+ *         shouldShowAllOptions
+ *         options={options}
+ *         selectedValue={selectedValue}
+ *         onItemClick={({ value }) => setSelectedStatus(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import StatusDropdown from "@bigbinary/neeto-molecules/StatusDropdown";
+ * 
+ * const App = () => {
+ *   const [selectedStatus, setSelectedStatus] = React.useState("All");
+ * 
+ *   const options = [
+ *     { label: "All", value: "All", color: "red" },
+ *     { label: "Open", value: "Open", color: "green" },
+ *     { label: "In Progress", value: "In Progress", color: "yellow" },
+ *   ];
+ * 
+ *   const hiddenStatuses = ["Open"];
+ * 
+ *   return (
+ *     <div>
+ *       <StatusDropdown
+ *         hiddenStatuses={hiddenStatuses}
+ *         options={options}
+ *         selectedValue={selectedValue}
+ *         onItemClick={({ value }) => setSelectedStatus(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+declare const StatusDropdown: React.FC<{
+  disabled?: boolean;
+  hiddenStatuses?: Array<string>;
+  isLoading?: boolean;
+  onItemClick: (status: object) => void;
+  options: Array<object>;
+  selectedValue: string;
+  shouldShowAllOptions?: boolean;
+}>;
+
+export { StatusDropdown as default };

package/types/StickyRibbonsContainer.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ *
+ * A container that displays the sticky ribbons configured for the current neeto
+ *
+ * application in neetoTower, if any. The sticky ribbons will be automatically
+ *
+ * fetched from neetoTower and displayed within the container.
+ *
+ * @example 
+ *
+ * import StickyRibbonsContainer from "@bigbinary/neeto-molecules/StickyRibbonsContainer";
+ * 
+ * const Main = () => (
+ *   <>
+ *     <ToastContainer />
+ *     <StickyRibbonsContainer />
+ *     <Switch>
+ *       <Route />
+ *     </Switch>
+ *   </>
+ * );
+ * @endexample
+*/
+declare const StickyRibbonsContainer: React.FC<{}>;
+
+export { StickyRibbonsContainer as default };

package/types/SubHeader.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { DropdownProps, CheckboxProps, InputProps } from 'neetoui';
+import { Filters } from 'neetofilters';
+
+type ColumnData = {
+  dataIndex: string;
+  title: string;
+  key: string;
+};
+type DownloadButtonProps = {
+  count?: number;
+  onClick: () => void;
+  "data-cy"?: string;
+};
+type DataProps = {
+  totalCount?: number;
+};
+type ColumnsButtonProps = {
+  onChange: (columns: ColumnData[], hiddenColumns: string[]) => void;
+  actionBlock?: React.ReactNode;
+  checkboxProps?: Partial<CheckboxProps>;
+  columnData?: ColumnData[];
+  isSearchable?: boolean;
+  localStorageKey?: string;
+  initialValue?: string[];
+  noColumnMessage?: string;
+  searchProps?: Partial<InputProps>;
+};
+interface RightBlockComposition {
+  RightBlock: React.FC<{
+    downloadButtonProps?: DownloadButtonProps;
+    filterProps?: React.ComponentProps<typeof Filters>;
+    columnsButtonProps?: ColumnsButtonProps & DropdownProps;
+    dataProps?: DataProps;
+  }>;
+}
+/**
+ *
+ * The SubHeader component is used alongside the header component to display
+ *
+ * additional information or actions.
+ *
+ * @example 
+ *
+ * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
+ * 
+ * const App = () => (
+ *   <SubHeader
+ *     leftActionBlock={
+ *       <Typography component="h4" style="h4">
+ *         118 Contacts
+ *       </Typography>
+ *     }
+ *     rightActionBlock={
+ *       <>
+ *         <Button icon={Delete} label="Delete" style="secondary" />
+ *         <Button label="Disable" style="secondary" />
+ *       </>
+ *     }
+ *   />
+ * );
+ * @endexample
+ * @example 
+ *
+ * import SubHeader from "@bigbinary/neeto-molecules/SubHeader";
+ * 
+ * const App = () => (
+ *   <SubHeader
+ *     leftActionBlock={
+ *       <Typography component="h4" style="h4">
+ *         118 Contacts
+ *       </Typography>
+ *     }
+ *     rightActionBlock={
+ *       <SubHeader.RightBlock
+ *         downloadButtonProps={{
+ *           onClick: download(),
+ *         }}
+ *         filterProps={
+ *           {
+ *              NeetoFilters props 
+ *           }
+ *         }
+ *         columnsButtonProps={
+ *           {
+ *              Columns props 
+ *           }
+ *         }
+ *         dataProps={{
+ *           totalCount: 13,
+ *         }}
+ *       />
+ *     }
+ *   />
+ * );
+ * @endexample
+*/
+declare const SubHeader: React.FC<{
+  className?: string;
+  "data-cy"?: string;
+  leftActionBlock?: React.ReactNode;
+  rightActionBlock?: React.ReactNode;
+}> & RightBlockComposition;
+
+export { SubHeader as default };

package/types/SubscriptionNotificationsContainer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ *
+ * A container that shows subscription notifications for the current workspace, if available.
+ *
+ * Notifications are automatically fetched from NeetoAuth and displayed within the container.
+ *
+ * @example 
+ *
+ * import SubscriptionNotificationsContainer from "@bigbinary/neeto-molecules/SubscriptionNotificationsContainer";
+ * 
+ * const Main = () => (
+ *   <>
+ *     <ToastContainer />
+ *     <SubscriptionNotificationsContainer />
+ *     <Switch>
+ *       <Route />
+ *     </Switch>
+ *   </>
+ * );
+ * @endexample
+*/
+declare const SubscriptionNotificationsContainer: React.FC<{}>;
+
+export { SubscriptionNotificationsContainer as default };

package/types/SuffixedInput.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ *
+ * This component can be used to display an input where the value is customizable
+ *
+ * by the user, but not the suffix. eg: Emails, blog urls etc.
+ *
+ * @example 
+ *
+ * import SuffixedInput from "@bigbinary/neeto-molecules/SuffixedInput";
+ * 
+ * const MailboxConfiguration = () => {
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { email: "" },
+ *         onSubmit: noop,
+ *         onreset: noop,
+ *       }}
+ *     >
+ *       {({ values: { email } }) => (
+ *         <div className="w-full p-6">
+ *           <SuffixedInput {...{ ...args }} value={email} name="email" />
+ *         </div>
+ *       )}
+ *     </Form>
+ *   );
+ * };
+ * @endexample
+*/
+declare const SuffixedInput: React.FC<{
+  placeholder?: string;
+  helpUrl?: string;
+  helpIconTooltipContent?: string;
+  label: string;
+  value: string;
+  getInputRef?: (ref: HTMLInputElement | null) => void;
+  suffix: string;
+  isCopyToClipboardEnabled?: boolean;
+  name?: string;
+  inputProps?: object;
+}>;
+
+export { SuffixedInput as default };

package/types/TableWrapper.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+/**
+ *
+ * TableWrapper is used to wrap the table component. It is used to avoid the
+ *
+ * dynamic height calculation and inconsistency in heights for the parent container
+ *
+ * of the table component. TableWrapper is used to wrap the table component. It is
+ *
+ * used to avoid the dynamic height calculation and inconsistency in heights for
+ *
+ * the parent container of the table component.
+ *
+ * TableWrapper should be used only with Tables used in the listing layout as shown
+ *
+ * below.
+ *
+ * @example 
+ *
+ * import TableWrapper from "@bigbinary/neeto-molecules/TableWrapper";
+ * 
+ * const App = () => (
+ *   <Container>
+ *     <Header />
+ *     <SubHeader />
+ *     <TableWrapper>
+ *       <Table columnData={columnData} rowData={rowData} />
+ *     </TableWrapper>
+ *   </Container>
+ * );
+ * @endexample
+*/
+declare const TableWrapper: React.FC<{
+  hasPagination?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}>;
+
+export { TableWrapper as default };