@bigbinary/neeto-molecules 3.15.38 → 3.15.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.15.38",
+  "version": "3.15.40",
   "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>",

package/src/translations/en.json

@@ -37,6 +37,7 @@
         "share": "Share",
         "done": "Done"
       },
+      "reacted": "Reacted",
       "record": "record",
       "or": "or",
       "name": "name",

package/types/Engagements.d.ts

@@ -0,0 +1,131 @@
+import { ENGAGEMENT_TYPES } from 'components/Engagements/constants';
+
+type Emoji = {
+  native: string;
+  unified: string;
+};
+type MenuItems = {
+  label: string;
+  onClick: () => void;
+  key: string;
+  isVisible?: boolean;
+  hasSubItems?: boolean;
+  dropdownProps?: DropdownProps;
+  menuItems?: MenuItems[];
+};
+type UserData = {
+  name: string;
+  profileImageUrl?: string;
+};
+type CommentData = {
+  id: string;
+  createdAt?: string;
+  commenter?: UserData;
+  [key: string]: any;
+};
+type ActivityData = {
+  id: string;
+  creator?: UserData;
+  [key: string]: any;
+};
+type EngagementType = typeof ENGAGEMENT_TYPES[number];
+/**
+ *
+ * The Engagements component renders the general layout for comments and
+ *
+ * activities to show user engagement timeline.
+ *
+ * The main container component for the Engagements components that wraps the
+ *
+ * items.
+ *
+ * A wrapper component to be used within the Engagements to render individual
+ *
+ * comment.
+ *
+ * A wrapper component to be used within the Engagements to render individual
+ *
+ * activity.
+ *
+ * @example 
+ *
+ * import { useState } from "react";
+ * import { User } from "neetoicons";
+ * import { Typography } from "neetoui";
+ * 
+ * import Engagements from "neetomolecules/Engagements";
+ * 
+ * const Timeline = () => {
+ *   const [data] = useState([
+ *     {
+ *       id: "comment-1",
+ *       content: "Hi world!",
+ *       commenter: { name: "Oliver Smith" },
+ *       createdAt: Date().toString(),
+ *     },
+ *     {
+ *       id: "comment-2",
+ *       content: "Hi Oliver!",
+ *       commenter: { name: "Lily James" },
+ *       createdAt: Date().toString(),
+ *     },
+ *     {
+ *       id: "activity-1",
+ *       type: "USER_EXIT",
+ *       creator: { name: "Oliver Smith" },
+ *       createdAt: Date().toString(),
+ *     },
+ *   ]);
+ * 
+ *   return (
+ *     <Engagements
+ *       {...{ data }}
+ *       isActivitiesEnabled
+ *       renderActivity={engagement => (
+ *         <Engagements.Activity icon={<User />} user={engagement.creator}>
+ *           <Typography style="body2">
+ *             {engagement.type === "USER_EXIT" &&
+ *               `${engagement.creator.name} left this conversation`}
+ *           </Typography>
+ *         </Engagements.Activity>
+ *       )}
+ *       renderComment={engagement => (
+ *         <Engagements.Comment
+ *           comment={engagement}
+ *           info="messaged"
+ *           user={engagement.commenter}
+ *         >
+ *           <Typography style="body2">{engagement.content}</Typography>
+ *         </Engagements.Comment>
+ *       )}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const Engagements: React.FC<{
+  data: Array<CommentData | ActivityData>;
+  isActivitiesEnabled?: boolean;
+  matchType?: (engagement: CommentData | ActivityData) => EngagementType;
+  renderComment: (engagement: CommentData, index: number) => React.ReactNode;
+  renderActivity: (engagement: ActivityData, index: number) => React.ReactNode;
+}> & {
+  Comment: React.FC<{
+    user: UserData;
+    comment: CommentData;
+    reactions?: boolean | Emoji[];
+    info?: string;
+    actions?: MenuItems[];
+    className?: string;
+    onAddReaction: (emoji: Emoji) => void;
+    onRemoveReaction: (emoji: Emoji) => void;
+  }>;
+  Activity: React.FC<{
+    user: UserData;
+    icon: React.ReactNode;
+    unread?: boolean;
+    className?: string;
+  }>;
+};
+
+export { Engagements as default };