@bigbinary/neeto-molecules 1.7.10 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.7.10",
+  "version": "1.8.0",
   "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>",
@@ -77,6 +77,8 @@
     "@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,7 +36,8 @@
       },
       "download": "Download",
       "filter": "Filter",
-      "somethingWentWrong": "Something went wrong. Please try again."
+      "somethingWentWrong": "Something went wrong. Please try again.",
+      "emojiPicker": "Emoji picker"
     },
     "columns": {
       "columns": "Columns",
@@ -711,6 +712,9 @@
         "bottomRight": "Bottom Right",
         "bottomLeft": "Bottom Left"
       }
+    },
+    "reactions": {
+      "content": "{{groupedNames, anyCase}} reacted."
     }
   }
 }

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/ProductEmbed.d.ts

@@ -30,6 +30,7 @@ const ProductEmbed: React.FC<{
   goBackLink?: string;
   customEmbedScriptPath?: string,
   customPreviewIframeUrl?: string,
+  extraArgs?: object,
   id: string;
   options?: {
     inline?: InlineProps;

package/types/Sidebar.d.ts

@@ -10,6 +10,7 @@ type NavLinkItemType = {
   count?: number;
   type?: string;
   filters?: filters;
+  checkpointKey?: string;
 } & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
 /**
  *