@bigbinary/neeto-molecules 1.0.91-beta → 1.0.92-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.91-beta",
+  "version": "1.0.92-beta",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -8,7 +8,7 @@
   "scripts": {
     "prepare": "husky install",
     "sync_with_wheel": "./.scripts/sync_with_wheel.sh",
-    "test": "TZ=UTC jest",
+    "test": "TZ=UTC jest --runInBand",
     "bundle": "NODE_ENV=production rollup -c rollup.config.js && yarn build:jsdoc",
     "build": "NODE_ENV=production build-storybook",
     "serve": "node .storybook/db",
@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.19.0",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
     "@bigbinary/eslint-plugin-neeto": "^1.1.14",
-    "@bigbinary/neeto-commons-frontend": "2.0.119",
+    "@bigbinary/neeto-commons-frontend": "2.0.134",
     "@bigbinary/neeto-editor": "1.27.0-beta.1",
     "@bigbinary/neeto-filters-frontend": "^2.11.15",
     "@bigbinary/neeto-icons": "^1.14.0",
@@ -74,10 +74,10 @@
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.3",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "13.5.0",
-    "antd": "4.24.3",
+    "antd": "5.9.2",
     "autoprefixer": "^10.4.13",
     "axios": "^0.27.2",
     "babel-jest": "27.0.6",
@@ -104,7 +104,7 @@
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-unused-imports": "2.0.0",
-    "formik": "^2.2.9",
+    "formik": "2.4.5",
     "framer-motion": "^4.1.17",
     "husky": "^7.0.4",
     "i18next": "^22.5.1",
@@ -117,6 +117,7 @@
     "mixpanel-browser": "^2.45.0",
     "mousetrap": "^1.6.5",
     "mousetrap-global-bind": "^1.1.0",
+    "nock": "^13.3.3",
     "papaparse": "^5.4.0",
     "platform": "1.3.6",
     "postcss": "^8.4.17",
@@ -130,14 +131,15 @@
     "qs": "^6.11.0",
     "ramda": "^0.29.0",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
     "react-hotkeys-hook": "3.3.2",
     "react-i18next": "^12.3.1",
     "react-query": "^3.39.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.0.8",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.9",
@@ -163,21 +165,22 @@
     "@honeybadger-io/react": "2.0.1",
     "@neetohq/timezones": "latest",
     "@svgr/webpack": "^6.5.1",
-    "antd": "4.24.3",
+    "antd": "5.9.2",
     "axios": "^0.27.2",
     "cypress": "11.2.0",
     "dayjs": "1.11.1",
     "dotenv-webpack": "^8.0.1",
-    "formik": "^2.2.9",
+    "formik": "2.4.5",
     "i18next": "^22.5.1",
     "js-logger": "^1.6.1",
     "mixpanel-browser": "^2.45.0",
     "ramda": "^0.29.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^12.3.1",
     "react-query": "^3.39.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.0.8",
     "shakapacker": "^6.5.5",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",

package/src/translations/en.json

@@ -485,6 +485,9 @@
         "cc": "CC",
         "bCc": "BCC"
       },
+      "tooltips": {
+        "replyTo": "'Reply to' is the designated address where replies to the email should be sent."
+      },
       "placeholders": {
         "emailPlaceholder": "Write email address",
         "commaSeparatedEmails": "Use comma (‘) to add multiple email addresses"
@@ -498,6 +501,37 @@
       "input": {
         "editButtonDefaultTooltip": "Edit"
       }
+    },
+    "settingsPage": {
+      "noData": "No settings found"
+    },
+    "security": {
+      "labels": {
+        "notSecured": "Public, anyone can access {{name}}",
+        "passwordEnabled": "Secure {{name}} with password",
+        "otpEnabled": "Secure {{name}} by allowing emails with certain keywords",
+        "private": "Private, logged in members only",
+        "password": "Password",
+        "keyword": "Keyword",
+        "keywordForm": {
+          "KB": "Add keywords that must be present in the email address for it to be allowed access to KB. For example if you want to give access only to the folks whose email ends with @bigbinary.com then you can add @bigbinary as the keyword required. You can add as many keywords as you want.",
+          "Course": "Add keywords that must be present in the email address for it to be allowed access to the course."
+        },
+        "addKeyWord": "Add keyword"
+      },
+      "validation": {
+        "required": "{{what}} is required.",
+        "min": "{{entity}} should be more than or equal to {{min}} characters."
+      },
+      "placeholders": {
+        "exists": "{{what}} already exists",
+        "enterPassword": "Enter password",
+        "enterKeyword": "Enter keyword"
+      },
+      "appName": {
+        "KB": "KB",
+        "Course": "Course"
+      }
     }
   }
 }

package/types/Breadcrums.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+/**
+ *
+ * Component to show breadcrumbs
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Breadcrumbs from "@bigbinary/neeto-molecules/Breadcrumbs";
+ * 
+ * const SETTINGS_BREADCRUMBS = [
+ *   {
+ *     text: "Settings",
+ *     link: "/admin/settings",
+ *   },
+ * ];
+ * 
+ * const Page = () => <Breadcrumbs Breadcrumbs={SETTINGS_BREADCRUMBS} />;
+ * @endexample
+*/
+const Breadcrumbs: React.FC<{
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+}>;
+export default Breadcrumbs;

package/types/Codeblock.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { SyntaxHighlighterProps } from "react-syntax-highlighter";
+import { CopyToClipboardButtonProps } from "./CopyToClipboardButton";
+/**
+ *
+ * Codeblock can be used to render a block of code, with appropriate syntax
+ *
+ * highlighting, and a copy code button.
+ *
+ * Note: To use this component, you should install
+ *
+ * react-syntax-highlighter@^15.5.0 package.
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/ed5c589f-7086-46b9-b8b2-2746afa7e750|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Codeblock from "@bigbinary/neeto-molecules/Codeblock";
+ * import { generateEmbedCode } from "./utils";
+ * 
+ * const EmbedPage = () => (
+ *   <Codeblock
+ *     code={generateEmbedCode()}
+ *     codeblockProps={{ showLineNumbers: true }}
+ *   />
+ * );
+ * @endexample
+*/
+const Codeblock: React.FC<{
+  code: string;
+  showCopyButton?: boolean;
+  codeblockProps?: Partial<SyntaxHighlighterProps>;
+  copyButtonProps?: Partial<CopyToClipboardButtonProps>;
+}>;
+export default Codeblock;

package/types/CopyToClipboardButton.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export interface CopyToClipboardButtonProps {
+  className?: string;
+  icon?: string | any;
+  label?: string;
+  value: string;
+  style?: "primary" | "secondary" | "text";
+}
 /**
  *
  * A button that copies the given value to the clipboard.
@@ -12,11 +19,5 @@ import React from "react";
  * );
  * @endexample
 */
-const CopyToClipboardButton: React.FC<{
-  className?: string;
-  icon?: string | any;
-  label?: string;
-  value: string;
-  style?: 'primary' | 'secondary' | 'text';
-}>;
+const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps>;
 export default CopyToClipboardButton;

package/types/IntegrationCard.d.ts

@@ -1,5 +1,27 @@
 import { IconProps } from "neetoicons";
 import React, { ReactElement } from "react";
+export interface IntegrationCardProps {
+  icon: React.FC<IconProps>;
+  subIcons?: React.FC<IconProps>[];
+  label: string;
+  description: string;
+  className?: string;
+  onConnect: (...args: any[]) => any;
+  onDisconnect?: (...args: any[]) => any;
+  onManage?: (...args: any[]) => any;
+  onClick?: (...args: any[]) => any;
+  isLoading?: boolean;
+  isConnected?: boolean;
+  isFailed?: boolean;
+  isExpired?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  hideDisconnect?: boolean;
+  tooltipProps?: Partial<TooltipProps>;
+  customDropdown?: React.ReactNode;
+  children?: React.ReactNode;
+  dataCy?: string;
+}
 /**
  *
  * A common component used for integrations across neeto products.
@@ -30,25 +52,5 @@ import React, { ReactElement } from "react";
  * );
  * @endexample
 */
-const IntegrationCard: React.FC<{
-  icon: React.FC<IconProps>;
-  subIcons?: React.FC<IconProps>[];
-  label: string;
-  description: string;
-  className?: string;
-  onConnect: (...args: any[]) => any;
-  onDisconnect?: (...args: any[]) => any;
-  onManage?: (...args: any[]) => any;
-  onClick?: (...args: any[]) => any;
-  isLoading?: boolean;
-  isConnected?: boolean;
-  isFailed?: boolean;
-  isExpired?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-  hideDisconnect?: boolean;
-  tooltipProps?: Partial<TooltipProps>;
-  customDropdown?: React.ReactNode;
-  children?: React.ReactNode;
-}>;
+const IntegrationCard: React.FC<IntegrationCardProps>;
 export default IntegrationCard;

package/types/Security.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/**
+ *
+ * A common component to secure neeto applications.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Security from "@bigbinary/neeto-molecules/Security";
+ * 
+ * const SETTINGS_BREADCRUMBS = [
+ *   {
+ *     text: "Settings",
+ *     link: "/admin/settings",
+ *   },
+ * ];
+ * 
+ * const Security = () => (
+ *   <Security breadcrumbs={SETTINGS_BREADCRUMBS} title="Security" />
+ * );
+ * @endexample
+*/
+const Security: React.FC<{
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+  title: string;
+  url: string;
+  radioItems: {
+    label: string;
+    value: string;
+  }[];
+}>;
+export default Security;

package/types/Settings.d.ts

@@ -0,0 +1,95 @@
+import React, { ReactNode } from "react";
+import { IntegrationCardProps } from "./IntegrationCard";
+type SettingItem = {
+  label: string;
+  path: string;
+} & Partial<IntegrationCardProps>;
+type SettingCategory = {
+  id: string;
+  label: string;
+  isIntegration?: boolean;
+  items: SettingItem[];
+};
+/**
+ *
+ * Settings can be used to create a settings page card layout.
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/16af3d07-e96a-4b4e-8013-ed6fa577c7b8|height=200|width=300)
+ *
+ * @example 
+ *
+ * categories={[
+ *   {
+ *     id: "general-settings",
+ *     label: "General Settings",
+ *     items: [
+ *       {
+ *         label: 'Ticket tags',
+ *         description: 'Create and manage tags',
+ *         icon: TicketIcon,
+ *         path: '/settings/general/ticket_tags'
+ *         dataCy: 'Ticket tags' //dataCy can be passed here.
+ *         // other props will be passed on to the setting card.
+ *       }
+ *       ...
+ *       ...
+ *       //more items
+ *     ]
+ *   },
+ *   {
+ *     id: "integrations",
+ *     isIntegration: true //Integrations section MUST have 'isIntegration: true',
+ *     label: "Integrations",
+ *     items: [
+ *       {
+ *         label: 'Github',
+ *         description: 'Connect with github',
+ *         icon: GithubIcon
+ *         onConnect: () => setIsIntegrationModalOpen(true)
+ *         onDisconnect: ()=> setIsIntegrationDisconnectModalOpen(true)
+ *         ...
+ *         ...
+ *         //rest of the props for IntegrationCard should be passed here.
+ *         // other props will be passed on to the integration card.
+ *       }
+ *     ],
+ *   },
+ *   ...
+ *   ...
+ *   //more categories
+ * ]}
+ * @endexample
+ * Note: This component also supports "scroll-into-view" functionality to scroll
+ *
+ * specific setting categories into view, based on the query params. For example,
+ *
+ * the page will scroll to the "Integrations" category, when the query params
+ *
+ * contain ?category=integrations. The query param should be the id of the
+ *
+ * category.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import Settings from "@bigbinary/neeto-molecules/Settings";
+ * import { Modal as IntegrationModal } from "neetointegrations"
+ * import { getCategories } from "./utils";
+ * 
+ * const SettingsPage = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   return (
+ *     <div>
+ *       <Settings categories={getCategories({setIsIntegrationModalOpen: setIsOpen})} />
+ *       <IntegrationModal isOpen={isOpen}>
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const Settings: React.FC<{
+  categories: SettingCategory[];
+  className?: string;
+}>;
+export default Settings;

package/types/Sidebar.d.ts

@@ -6,6 +6,7 @@ type NavLinkItemType = {
   label?: React.ReactNode;
   icon?: any;
   description?: React.ReactNode;
+  isActive: () => boolean;
 } & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
 type LinkType = {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;