@bigbinary/neeto-molecules 0.0.1

package/types/BrowserSupport.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+type VersionLimits = {
+  softLimit?: number;
+  hardLimit?: number;
+};
+/**
+ *
+ * A wrapper that displays a callout message for partially supported browsers
+ *
+ * (below a soft limit) along with the site content. If the browser is an
+ *
+ * unsupported version (below a hard limit), it shows a full-page message to update
+ *
+ * the browser and does not display the site content. If the browser is in the list
+ *
+ * of unsupported browsers, it displays a full-page message that the browser is
+ *
+ * unsupported and does not display the site content.
+ *
+ * @example 
+ *
+ * import BrowserSupport from "@bigbinary/neeto-molecules/BrowserSupport";
+ * 
+ * const App = () => (
+ *   <BrowserSupport>
+ *     {children}
+ *   </BrowserSupport>
+ *   <Main />
+ * )
+ * @endexample
+ * Minimum supported browser version of a specific browser can be changed using the
+ *
+ * overrides prop like so:
+ *
+ * @example 
+ *
+ * <BrowserSupport
+ *   overrides={{
+ *     Chrome: { softLimit: 80, hardLimit: 60 },
+ *     Safari: { softLimit: 14.1, hardLimit: 13.5 },
+ *   }}
+ *   unsupportedBrowsers={["Firefox"]}
+ * />
+ * @endexample
+ * In the above code we have changed the minimum supported versions of Chrome &
+ *
+ * Safari. Now if a user has accessed the site using Chrome < 80 or Safari < 14.1
+ *
+ * the callout message will be displayed. If a user has accessed the site using
+ *
+ * Chrome < 60 or Safari < 13.5, a message will be displayed to update the browser
+ *
+ * and page contents will not be shown. If a user has accessed the site using any
+ *
+ * version of Firefox, a message will be displayed that the browser is unsupported
+ *
+ * and page contents will not be shown.
+ *
+ * The default supported browser names and their versions are given below:
+ *
+ * The default unsupported browsers are given below:
+ *
+ * Any other browser which is not in the above lists will be considered as unknown
+ *
+ * and a corresponding callout will be shown.
+ *
+*/
+const BrowserSupport: React.FC<{
+  overrides?: {
+    Chrome?: VersionLimits;
+    MicrosoftEdge?: VersionLimits;
+    Firefox?: VersionLimits;
+    IE?: VersionLimits;
+    Opera?: VersionLimits;
+    Safari?: VersionLimits;
+    AndroidBrowser?: VersionLimits;
+    OperaMini?: VersionLimits;
+    ChromeMobile?: VersionLimits;
+    FirefoxMobile?: VersionLimits;
+    UCBrowser?: VersionLimits;
+    SamsungInternet?: VersionLimits;
+  };
+  unsupportedBrowsers?: string[];
+  children?: React.ReactNode | React.ReactNode[];
+}>;
+export default BrowserSupport;

package/types/Columns.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { CheckboxProps, DropdownProps, InputProps } from "@bigbinary/neetoui";
+/**
+ *
+ * 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)
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * 
+ * import { Table } from "@bigbinary/neetoui";
+ * import Columns from "@bigbinary/neeto-molecules/Columns";
+ * 
+ * import { DEFAULT_COLUMNS_DATA, DEFAULT_ROW_DATA } from "./constants";
+ * 
+ * const App = () => {
+ *   const [columns, setColumns] = useState(DEFAULT_COLUMNS_DATA);
+ * 
+ *   return (
+ *     <div>
+ *       <Columns
+ *         columnData={DEFAULT_COLUMNS_DATA}
+ *         localStorageKey="NEETO_APP_FEATURE_HIDDEN_COLUMNS"
+ *         onChange={setColumns}
+ *       />
+ *       <Table rowData={DEFAULT_ROW_DATA} columnData={columns} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const Columns: React.FC<{
+  actionBlock?: React.ReactNode;
+  checkboxProps?: CheckboxProps;
+  columnData: {
+    title: string;
+    dataIndex: string;
+    key: string;
+    [key: string]: any;
+  }[];
+  dropdownProps?: DropdownProps;
+  fixedColumns?: string[];
+  isSearchable?: boolean;
+  localStorageKey: string;
+  noColumnMessage?: string;
+  onChange: (columns: any[]) => any[];
+  searchProps?: InputProps;
+}>;
+export default Columns;

package/types/Container.d.ts

@@ -0,0 +1,35 @@
+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
+*/
+const Container: React.FC<{
+  isHeaderFixed?: boolean;
+}>;
+export default Container;

package/types/CopyToClipboardButton.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ *
+ * 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
+*/
+const CopyToClipboardButton: React.FC<{
+  className?: string;
+  icon?: string | any;
+  label?: string;
+  value: string;
+}>;
+export default CopyToClipboardButton;

package/types/CustomDomain.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ *
+ * A common component for managing custom domain. This component can be used when
+ *
+ * you have a single custom domain.
+ *
+ * @example 
+ *
+ * import CustomDomain from "@bigbinary/neeto-molecules/CustomDomain";
+ * 
+ * <CustomDomain url="api/v1/admin/custom_domain" iconOnly />;
+ * @endexample
+*/
+const CustomDomain: React.FC<{
+  url: string;
+  iconOnly: boolean;
+}>;
+export default CustomDomain;

package/types/CustomDomainDashboard.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+/**
+ *
+ * A full page common component for managing custom domains. This component can be
+ *
+ * used when you have multiple associated custom domains.
+ *
+ * @example 
+ *
+ * import CustomDomainDashboard from "@bigbinary/neeto-molecules/CustomDomainDashboard";
+ * 
+ * const SETTINGS_BREADCRUMBS = [
+ *   {
+ *     text: "Settings",
+ *     link: "/admin/settings",
+ *   },
+ * ];
+ * 
+ * <CustomDomainDashboard
+ *   headerProps={{ breadcrumbs: SETTINGS_BREADCRUMBS }}
+ *   url="api/v1/admin/custom_domains"
+ * />;
+ * @endexample
+ * ![Screenshot](https://user-images.githubusercontent.com/47141466/198322719-80cccd00-7bc3-44b6-845b-b3ad61e2635a.png|height=200|width=300)
+ *
+*/
+const CustomDomainDashboard: React.FC<{
+  headerProps: {
+    [key: string]: any;
+  };
+  url: string;
+}>;
+export default CustomDomainDashboard;

package/types/DateFormat.d.ts

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

package/types/DateRangeFilter.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+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.
+ *
+*/
+const DateRangeFilter: React.FC<{
+  timePeriod: TimePeriodType;
+  setTimePeriod: React.Dispatch<React.SetStateAction<TimePeriodType>>;
+  timePeriodOptions: TimePeriodType[];
+}>;
+export default DateRangeFilter;

package/types/DynamicVariables.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { DropdownProps } from "@bigbinary/neetoui";
+interface Variable {
+  label?: string;
+  key?: string;
+  value?: string;
+  category?: string;
+  variables?: Omit<Variable, "variables">[];
+}
+/**
+ *
+ * A common component for using dynamic variables.
+ *
+ * ![Screenshot](https://user-images.githubusercontent.com/70290286/223332469-21106919-637f-48b5-abec-a57306ca7005.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import DynamicVariables from "@bigbinary/neeto-molecules/DynamicVariables";
+ * import { Input } from "neetoui/formik";
+ * 
+ * const DynamicVariablesDemo = () => {
+ *   return (
+ *     <Input
+ *       label="Input with DynamicVariables"
+ *       name="subject"
+ *       suffix={
+ *         <DynamicVariables
+ *           dropdownProps={{ buttonStyle: "text" }}
+ *           variables={EDITOR_VARIABLES}
+ *           onVariableClick={variable => {
+ *             console.log(variable);
+ *           }}
+ *         />
+ *       }
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const DynamicVariables: React.FC<{
+  onVariableClick?: (variable: Variable) => void;
+  variables: Variable[];
+  dropdownProps?: DropdownProps;
+}>;
+export default DynamicVariables;

package/types/EmailPreview.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+/**
+ *
+ * A common component to preview emails.
+ *
+ * ![EmailPreview](https://user-images.githubusercontent.com/66865722/222370228-cda4ac74-8ec9-4288-ab88-a49b21cab284.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import { useFormikContext } from "formik";
+ * import EmailPreview from "@bigbinary/neeto-molecules/EmailPreview";
+ * const EmailShare = () => {
+ *   const { values } = useFormikContext();
+ *   return (
+ *     <div>
+ *       <EmailPreview
+ *         actionButtonText={values.startSurveyButtonText}
+ *         body={values.emailBody}
+ *         subject={values.emailSubject}
+ *         logo={values.logo}
+ *         to={values.notifyEmails}
+ *         from={values.emailsFrom}
+ *         productName="Form"
+ *       />
+ *     </div>
+ *   );
+ * };
+ * export default EmailShare;
+ * @endexample
+*/
+const EmailPreview: React.FC<{
+  to?: string[];
+  subject?: string;
+  body?: string;
+  from?: string;
+  logo?: string;
+  productName?: string;
+  actionButtonText?: string;
+}>;
+export default EmailPreview;

package/types/ErrorPage.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ *
+ * A fallback page for handling 404, 403 and 500 errors.
+ *
+ * The component also has a "contact us" link that opens the chat widget for
+ *
+ * further communication.
+ *
+*/
+const ErrorPage: React.FC<{
+  homeUrl?: string;
+  status?: number;
+}>;
+export default ErrorPage;

package/types/Header.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { DropdownProps } from "neetoui";
+/**
+ *
+ * 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
+*/
+const Header: React.FC<{
+  title?: React.ReactNode;
+  className?: string;
+  actionBlock?: React.ReactNode;
+  searchProps?: object;
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+  dropdownProps?: DropdownProps;
+  menuBarToggle?: (...args: any[]) => any;
+}>;
+export default Header;

package/types/IconPicker.d.ts

@@ -0,0 +1,43 @@
+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
+*/
+const IconPicker: React.FC<{
+  filled?: boolean;
+  value?: string;
+  label?: string;
+  onClick?: Function;
+  className?: string;
+}>;
+export default IconPicker;

package/types/IntegrationCard.d.ts

@@ -0,0 +1,45 @@
+import { IconProps } from "neetoicons";
+import React, { ReactElement } from "react";
+/**
+ *
+ * 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
+*/
+const IntegrationCard: React.FC<{
+  label: string;
+  description: string;
+  Icon: React.FC<IconProps>;
+  className?: string;
+  isConnected: boolean;
+  isStatusLoading?: boolean;
+  customDropdown?: React.ReactNode;
+  onDisconnect?: (...args: any[]) => any;
+  onConnect: (...args: any[]) => any;
+  onManage?: (...args: any[]) => any;
+}>;
+export default IntegrationCard;

package/types/IntegrationDisconnectAlert.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+/**
+ *
+ * A common component used for disconnect UI of integrations across neeto products.
+ *
+ * ![Integration](https://github.com/bigbinary/neeto-molecules/assets/49012815/864c1407-a6c8-4b53-ab01-364db42d2a80|height=200|width=300)
+ *
+ * @example 
+ *
+ * import IntegrationDisconnectAlert from "@bigbinary/neeto-molecules/IntegrationDisconnectAlert";
+ * 
+ * const Integration = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [isDisconnecting, setIsDisconnecting] = useState(false);
+ * 
+ *   return (
+ *     <IntegrationDisconnectAlert
+ *       isOpen={isOpen}
+ *       isDisconnecting={isDisconnecting}
+ *       title="Disconnect Slack"
+ *       message="You will be disconnected from Slack."
+ *       onClose={() => setIsOpen(false)}
+ *       onDisconnect={() => console.log("Disconnect the integration")}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const IntegrationDisconnectAlert: React.FC<{
+  isOpen: boolean;
+  isDisconnecting: boolean;
+  title: string;
+  message?: string;
+  onClose: (...args: any[]) => any;
+  onDisconnect: (...args: any[]) => any;
+}>;
+export default IntegrationDisconnectAlert;

package/types/IntegrationWalkthroughModal.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+/**
+ *
+ * A component used to display walkthrough video of integration.
+ *
+ * ![IntegrationWalkthroughModal](https://user-images.githubusercontent.com/89389135/243562250-9cdd99cf-ee7e-42b5-b578-ca57db5fc94a.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import IntegrationWalkthroughModal from "@bigbinary/neeto-molecules/IntegrationWalkthroughModal";
+ * 
+ * const Finish = () => {
+ *   const [isModalOpen, setIsModalOpen] = useState(true);
+ * 
+ *   return (
+ *     <IntegrationWalkthroughModal
+ *       isOpen={isModalOpen}
+ *       onClose={() => setIsModalOpen(false)}
+ *       videoUrl="https://user-images.githubusercontent.com/39831309/232906732-43e139ac-4af8-4a59-9f4f-e96ebf436f75.mov"
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const IntegrationWalkthroughModal: React.FC<{
+  videoUrl: string;
+  isOpen: boolean;
+  onClose: Function;
+}>;
+export default IntegrationWalkthroughModal;

package/types/IpRestriction.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+/**
+ *
+ * A common component to restrict IPs in neeto applications.
+ *
+ * ![Ip](https://user-images.githubusercontent.com/49012815/246818619-209f616c-cfc4-4e98-b137-96d305a71bd8.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
+*/
+const IpRestriction: React.FC<{}>;
+export default IpRestriction;