@bigbinary/neeto-molecules 1.7.0-beta.1 → 1.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.2",
   "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>",
@@ -71,12 +71,14 @@
     "@bigbinary/neeto-cist": "^1.0.6",
     "@bigbinary/neeto-commons-frontend": "^3.1.11",
     "@bigbinary/neeto-editor": "^1.28.36",
-    "@bigbinary/neeto-filters-frontend": "^2.11.15",
+    "@bigbinary/neeto-filters-frontend": "3.1.2",
     "@bigbinary/neeto-hotkeys": "^1.0.1",
     "@bigbinary/neeto-icons": "^1.14.0",
     "@bigbinary/neeto-molecules": "^1.0.5",
     "@bigbinary/neeto-time-zones": "^0.5.0",
     "@bigbinary/neetoui": "^5.2.32",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@faker-js/faker": "7.6.0",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
@@ -119,6 +121,7 @@
     "classnames": "^2.3.2",
     "css-loader": "4.3.0",
     "dayjs": "1.11.1",
+    "emoji-mart": "^5.5.2",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
@@ -168,6 +171,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.58.1",
     "sass-loader": "10.0.2",
+    "shadow-dom-testing-library": "^1.11.2",
     "storybook": "^7.5.3",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.4.1",
@@ -184,6 +188,8 @@
     "@bigbinary/neeto-molecules": "latest",
     "@bigbinary/neeto-time-zones": "latest",
     "@bigbinary/neetoui": "latest",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
     "@fullcalendar/interaction": "^6.1.8",
@@ -195,6 +201,7 @@
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
     "dayjs": "1.11.1",
+    "emoji-mart": "^5.5.2",
     "formik": "2.4.5",
     "i18next": "^22.5.1",
     "js-logger": "^1.6.1",

package/src/translations/en.json

@@ -36,10 +36,12 @@
       },
       "download": "Download",
       "filter": "Filter",
-      "somethingWentWrong": "Something went wrong. Please try again."
+      "somethingWentWrong": "Something went wrong. Please try again.",
+      "currency": "Currency",
+      "emojiPicker": "Emoji picker"
     },
     "columns": {
-      "columns": "Columns",
+      "columns": "Show/hide columns",
       "noColumns": "No columns found!",
       "search": "Search columns"
     },
@@ -82,7 +84,18 @@
         "helpArticles": "Help articles"
       },
       "showMenu": "Expand sidebar",
-      "hideMenu": "Collapse sidebar"
+      "hideMenu": "Collapse sidebar",
+      "segments": {
+        "segment_one": "segment",
+        "segment_other": "segments",
+        "deleteAlertMessage": "You are permanently deleting the segment <strong>{{entity, anyCase}}</strong>. This can't be undone.",
+        "renameTitle": "Rename segment",
+        "renameFieldLabel": "Segment name",
+        "label": "Segment name",
+        "validations": {
+          "nameIsRequired": "'Segment name' is required"
+        }
+      }
     },
     "appSwitcher": {
       "noApps": "No apps found",
@@ -356,7 +369,7 @@
       "editUrl": {
         "title": "Change link",
         "inputLabel": "Link",
-        "description": "Once this link is edited, the current link will stop working. This can't be undone.",
+        "description": "Once this link is changed, the current link will stop working.",
         "submitButtonLabel": "Submit",
         "cancelButtonLabel": "Cancel",
         "validationError": "Please enter a valid path without special characters, except '/', '-' and '_'."
@@ -700,6 +713,9 @@
         "bottomRight": "Bottom Right",
         "bottomLeft": "Bottom Left"
       }
+    },
+    "reactions": {
+      "content": "{{groupedNames, anyCase}} reacted."
     }
   }
 }

package/types/Builder.d.ts

@@ -3,55 +3,94 @@ type Element = {
   value: string;
   icon: React.ReactNode;
 };
-
 type ElementSection = {
   title: string;
   elements: Element[];
   key: string;
   isCreatable: (element: Element) => boolean;
 };
-
 type SelectedElement = {
   id: string;
   kind: string;
   position: number;
   label: string;
   icon: React.ReactNode;
+  isPending: boolean;
 };
-
 type dragResult = {
   index: number;
 };
-
 type SelectedElementAction = {
   label: string;
   key: string;
   onClick: (element: Element) => void;
   isVisible?: boolean;
 };
-
-export const ElementsPanel: React.FC<{
+export
+/**
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Container from "@bigbinary/neeto-molecules/Container";
+ * import {
+ *   ElementsPanel,
+ *   PropertiesPanel,
+ * } from "@bigbinary/neeto-molecules/Builder";
+ * 
+ * const Component = () => (
+ *   <Container isHeaderFixed>
+ *     <div className="flex h-full w-full justify-between">
+ *       <ElementsPanel
+ *         elementSections={sections}
+ *         {...{
+ *           handleAddElement,
+ *           isElementVisible,
+ *           selectedElements,
+ *           fixedFirstElement,
+ *           fixedLastElement,
+ *         }}
+ *         selectedElementActions={[
+ *           {
+ *             label: "Duplicate",
+ *             key: "duplicate",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *           {
+ *             label: "Delete",
+ *             key: "delete",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *         ]}
+ *       />
+ *       <PropertiesPanel>
+ *         <PropertiesPanel.EmptyProperty />
+ *       </PropertiesPanel>
+ *     </div>
+ *   </Container>
+ * );
+ * @endexample
+*/
+const ElementsPanel: React.FC<{
   elementSections: ElementSection[];
   selectedElements: SelectedElement[];
   handleAddElement: (element: Element) => void;
   isElementVisible: (element: Element) => boolean;
   fixedFirstElement?: SelectedElement;
   fixedLastElement?: SelectedElement;
-  handleDragEnd?: ({ source: dragResult, destination: dragResult }) => void;
+  handleDragEnd?: ({
+    source: dragResult,
+    destination: dragResult
+  }) => void;
   isDragDisabled?: boolean;
   handleSelectElement: (index: number) => void;
-  selectedElementIndex: number;
-  fixedLastElementIndex: number;
+  selectedElementId: string;
   selectedElementActions: SelectedElementAction[] | ((element: Element) => SelectedElementAction[]);
   addAllElements: () => void;
   isAddingAllElements?: boolean;
   showElementsFillButton?: boolean;
   isAddingNewElement?: boolean;
-  returnElementOnSelect?: boolean;
 }>;
-
 export const PropertiesPanel: React.FC<{
   children: React.ReactNode;
-  id: string;
-  onClose?: (id: string) => void;
-}>;
+}>;

package/types/Columns.d.ts

@@ -32,8 +32,8 @@ type Column = {
  *   const { hideColumn } = useHiddenColumns(localStorageKey);
  *   const [columns, setColumns] = useState([]);
  *   const DEFAULT_COLUMNS_DATA = [
- *     { title: "Id", dataIndex: "id", key: "id" },
- *     { title: "Name", dataIndex: "name", key: "name" },
+ *     { title: "Id", dataIndex: "id", key: "id", isHidable: false },
+ *     { title: "Name", dataIndex: "name", key: "name", isHidable: false },
  *     {
  *       title: () => (
  *         <>
@@ -63,7 +63,6 @@ const Columns: React.FC<{
   actionBlock?: React.ReactNode;
   checkboxProps?: CheckboxProps;
   columnData: Column[];
-  fixedColumns?: string[];
   isSearchable?: boolean;
   localStorageKey: string;
   noColumnMessage?: string;

package/types/Currency.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { SelectProps } from "@bigbinary/neetoui";
+/**
+ *
+ * Used in neeto products to select currencies.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/10956193/422f706f-8873-4091-866f-f09c24958b69|height=200|width=300)
+ *
+ * @example 
+ *
+ * import * as yup from "yup";
+ * import Currency from "@bigbinary/neeto-molecules/Currency";
+ * 
+ * const CurrencyContainer = () => {
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { currency: null },
+ *         validationSchema: yup.object().shape({
+ *           currency: yup.object().required(),
+ *         }),
+ *       }}
+ *     >
+ *       <Currency />
+ *       <Button className="mt-5" label="Submit" type="submit" />
+ *     </Form>
+ *   );
+ * };
+ * @endexample
+*/
+const Currency: React.FC<{
+  standalone?: boolean;
+  allowedCurrencies?: string[];
+}> & SelectProps;
+export default Currency;

package/types/EmojiPicker.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { DropdownProps } from "neetoui";
+type Emoji = {
+  native: string;
+  unified: string;
+};
+/**
+ *
+ * Used in neeto products to pick emojis.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/6238f165-3a55-4e66-bf4f-101971f80c80|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiPicker from "@bigbinary/neeto-molecules/EmojiPicker";
+ * 
+ * const EmojiPickerContainer = () => {
+ *   const [emoji, setEmoji] = useState();
+ *   return (
+ *     <div>
+ *       <div>Selected Emoji: {emoji}</div>
+ *       <EmojiPicker onSelect={obj => setEmoji(obj.native)} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const EmojiPicker: React.FC<{
+  onSelect?: (emoji: Emoji) => void;
+  open?: boolean;
+  dropdownProps?: DropdownProps;
+}>;
+export default EmojiPicker;

package/types/EmojiReactions.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+type Emoji = {
+  native: string;
+  unified: string;
+};
+type Reaction = {
+  native: string;
+  unified: string;
+  userName: string;
+};
+/**
+ *
+ * Used in neeto products to group user selected emojis and display them.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-ui/assets/10956193/576abbd2-dd08-4535-a120-1e9b295850fb|height=200|width=300)
+ *
+ * @example 
+ *
+ * import EmojiReactions from "@bigbinary/neeto-molecules/EmojiReactions";
+ * const EmojiReactionsContainer = () => {
+ *   const [reactions, setReactions] = useState([
+ *     { native: "😃", unified: "1f603", userName: "User 1" },
+ *     { native: "😄", unified: "1f604", userName: "User 1" },
+ *   ]);
+ * 
+ *   const createReaction = emoji => ({
+ *     native: emoji.native,
+ *     unified: emoji.unified,
+ *     userName: user.name,
+ *     userId: user.id,
+ *   });
+ * 
+ *   const onReactionClick = emoji => {
+ *     const reaction = findBy(
+ *       { unified: emoji.unified, userId: user.id },
+ *       reactions
+ *     );
+ *     if (reaction) {
+ *       setReactions(reactions.filter(item => item.unified !== reaction.unified));
+ *     } else {
+ *       setReactions([...reactions, createReaction(emoji)]);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <EmojiReactions {...{ onReactionClick, reactions }} />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const EmojiReactions: React.FC<{
+  reactions: Reaction[];
+  onReactionClick?: (emoji: Emoji) => void;
+  emojiSize?: string;
+  emojiBoxStyle?: string;
+  isUpdating?: boolean;
+}>;
+export default EmojiReactions;

package/types/ErrorPage.d.ts

@@ -14,5 +14,6 @@ const ErrorPage: React.FC<{
   status?: number;
   backToHomeButtonProps?: Partial<ButtonProps>;
   children?: React.ReactNode | React.ReactNode[];
+  showNeetoChatWidget?: boolean;
 }>;
 export default ErrorPage;

package/types/HelpPopover.d.ts

@@ -35,5 +35,6 @@ const HelpPopover: React.FC<{
   helpLinkProps?: ButtonProps;
   popoverProps?: PopoverProps;
   size?: "default" | "large";
+  className?: string;
 }>;
 export default HelpPopover;

package/types/ProductEmbed.d.ts

@@ -28,6 +28,9 @@ interface ElementPopupProps {
 const ProductEmbed: React.FC<{
   className?: string;
   goBackLink?: string;
+  customEmbedScriptPath?: string,
+  customPreviewIframeUrl?: string,
+  extraArgs?: object,
   id: string;
   options?: {
     inline?: InlineProps;

package/types/Schedule.d.ts

@@ -130,6 +130,7 @@ const Schedule: React.FC<{
   handleSubmit?: Function;
   handleValuesChanged?: Function;
   showHeader?: boolean;
+  isEditable?: boolean;
   periods: {
     [key: string]: Array<any>;
   };

package/types/Sidebar.d.ts

@@ -1,11 +1,16 @@
+import { filters } from "@bigbinary/neeto-filters-frontend";
 import React from "react";
 import { NavLinkProps } from "react-router-dom";
 type NavLinkItemType = {
-  to: string;
+  to?: string;
   label?: React.ReactNode;
   icon?: any;
   description?: React.ReactNode;
-  isActive: () => boolean;
+  isActive?: () => boolean;
+  count?: number;
+  type?: string;
+  filters?: filters;
+  checkpointKey?: string;
 } & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
 /**
  *
@@ -15,6 +20,8 @@ type NavLinkItemType = {
  *
  * 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";
@@ -34,5 +41,6 @@ type NavLinkItemType = {
 const Sidebar: React.FC<{
   navLinks?: NavLinkItemType[];
   customLogo?: any;
+  isCountsLoading?: boolean;
 }>;
 export default Sidebar;

package/types/SubHeader.d.ts

@@ -19,7 +19,6 @@ type ColumnsButtonProps = {
   actionBlock?: React.ReactNode;
   checkboxProps?: Partial<CheckboxProps>;
   columnData?: ColumnData[];
-  fixedColumns?: string[];
   isSearchable?: boolean;
   localStorageKey?: string;
   initialValue?: string[];