@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/social/Feed/Feed.stories.js

@@ -0,0 +1,145 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { createUID, DateTimeDisplay, Lightbox, OneColumnPage } from '@pega/cosmos-react-core';
+import { Feed, MentionButtonConfig, HashtagButtonConfig } from '@pega/cosmos-react-social';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+import { FeedPostDemo } from './FeedPost.stories';
+import { FeedNewPostDemo } from './FeedNewPost.stories';
+import { caseMentions, feedPosts, userMentions } from './Feed.mocks';
+export default {
+    title: 'Social/Feed/Feed',
+    component: Feed
+};
+export const FeedDemo = ({ markdownMap }) => {
+    const [extraPosts, setExtraPosts] = useState(() => feedPosts);
+    const [searchResults, setSearchResults] = useState([]);
+    const [filters, setFilters] = useState(Array.from({ length: 10 }, (_, index) => {
+        return {
+            id: `filter-${index + 1}`,
+            label: `Filter ${index + 1}`
+        };
+    }));
+    const toggleFilter = (filterId) => {
+        const updatedFilters = [...filters];
+        const filterToUpdate = updatedFilters.find(x => x.id === filterId);
+        if (filterToUpdate)
+            filterToUpdate.on = !filterToUpdate.on;
+        setFilters(updatedFilters);
+    };
+    const onSearch = ({ type, search, mentionType }) => {
+        if (type === 'mention') {
+            const availableMentions = mentionType === 'case' ? caseMentions : userMentions;
+            const mentions = availableMentions
+                .filter((user) => {
+                const names = user.primary.toLowerCase().split(' ');
+                const searchWords = search.toLowerCase().split(' ');
+                return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
+            })
+                .map(({ id, primary, secondary, visual }) => {
+                return {
+                    id,
+                    primary,
+                    secondary,
+                    visual
+                };
+            });
+            setSearchResults(mentions);
+        }
+        else {
+            setSearchResults(['cosmos', 'hashtag', 'pega']
+                .filter(tag => {
+                return tag.toLowerCase().includes(search.toLowerCase());
+            })
+                .map(tag => ({ id: tag, primary: tag })));
+        }
+    };
+    const generateNewPost = () => {
+        setTimeout(() => {
+            setExtraPosts(posts => [
+                ...posts,
+                {
+                    id: createUID(),
+                    fullname: 'Demo User',
+                    username: 'demo_user',
+                    content: 'This post was loaded after the Feed was scrolled to the bottom!',
+                    attachments: [],
+                    replies: [],
+                    renderFeed: false
+                }
+            ]);
+        }, 1000);
+    };
+    const onMentionClick = ({ id, type }) => {
+        if (type === 'user') {
+            const user = userMentions.find(mention => mention.id === id);
+            if (user)
+                return _jsx(Glimpse, { ...user }, void 0);
+        }
+    };
+    const [lightboxImages, setLightboxImages] = useState(null);
+    const defaultLBIndex = useRef(0);
+    const renderLightbox = (attachments, name) => {
+        const images = attachments
+            .filter(attachment => attachment.type.includes('image') && attachment.thumbnail)
+            .map(image => {
+            return {
+                id: image.thumbnail,
+                name: image.name,
+                description: image.name,
+                src: image.thumbnail,
+                metadata: [image.type, _jsx(DateTimeDisplay, { value: new Date(), variant: 'date' }, void 0)]
+            };
+        });
+        const idx = images.findIndex(image => image.name === name);
+        defaultLBIndex.current = idx > -1 ? idx : 0;
+        setLightboxImages(images);
+    };
+    const deletePost = (index) => {
+        setExtraPosts(posts => {
+            const postsCopy = [...posts];
+            postsCopy.splice(index, 1);
+            return [...postsCopy];
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Feed, { title: 'Pulse', userInfo: { username: 'demo_user', fullname: 'Demo User' }, searchTypes: ['user', 'case'], onDecoratorSearch: onSearch, searchResults: searchResults, onMentionClick: onMentionClick, markdownMap: markdownMap, interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], filters: filters, onFilterChange: toggleFilter, onLoadMore: generateNewPost, newPostRegion: _jsx(FeedNewPostDemo, { onPost: postEvent => {
+                        const { value, attachments, recipients, clear } = postEvent;
+                        attachments.forEach(file => {
+                            delete file.onDelete;
+                            file.onPreview = file.type.includes('image')
+                                ? () => renderLightbox(attachments, file.name)
+                                : undefined;
+                            file.onDownload = () => { };
+                        });
+                        if (value || attachments.length > 0) {
+                            setExtraPosts(posts => [
+                                {
+                                    id: createUID(),
+                                    fullname: 'Demo User',
+                                    username: 'demo_user',
+                                    content: value,
+                                    attachments,
+                                    recipients,
+                                    postType: recipients.length ? 'private' : 'public',
+                                    replies: [],
+                                    timeElapsed: 'Just now',
+                                    renderFeed: false
+                                },
+                                ...posts
+                            ]);
+                            clear();
+                        }
+                    }, renderFeed: false }, void 0), posts: extraPosts.map((post, i) => {
+                    return _createElement(FeedPostDemo, { ...post, key: post.id, onDelete: () => deletePost(i) });
+                }) }, void 0), lightboxImages && (_jsx(Lightbox, { items: lightboxImages, defaultIndex: defaultLBIndex.current, onAfterClose: () => {
+                    setLightboxImages(null);
+                } }, void 0))] }, void 0));
+};
+export const FeedWithAppShell = () => {
+    return _jsx(AppShellDemo, { appHeader: true, main: _jsx(OneColumnPage, { title: 'Welcome', a: _jsx(FeedDemo, {}, void 0) }, void 0) }, void 0);
+};
+FeedWithAppShell.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Feed.stories.js.map

package/lib/social/Feed/Feed.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feed.stories.js","sourceRoot":"","sources":["../../../src/social/Feed/Feed.stories.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EACL,SAAS,EACT,eAAe,EACf,QAAQ,EAGR,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,IAAI,EAEJ,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,cAAc,CAAC;AAExF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAA2B,EAAE,EAAE;IACnE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IACnF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAExE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACtC,OAAO;YACL,EAAE,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE;YACzB,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE;SAC7B,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxC,MAAM,cAAc,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;QACpC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QAEnE,IAAI,cAAc;YAAE,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAE3D,UAAU,CAAC,cAAc,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,WAAW,EAKZ,EAAE,EAAE;QACH,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,iBAAiB,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;YAE/E,MAAM,QAAQ,GAAoB,iBAAiB;iBAChD,MAAM,CAAC,CAAC,IAAkB,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,IAAY,EAAE,EAAE,CAC1C,KAAK,CAAC,IAAI,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CACpD,CAAC;YACJ,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC1C,OAAO;oBACL,EAAE;oBACF,OAAO;oBACP,SAAS;oBACT,MAAM;iBACP,CAAC;YACJ,CAAC,CAAC,CAAC;YACL,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SAC5B;aAAM;YACL,gBAAgB,CACd,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;iBAC1B,MAAM,CAAC,GAAG,CAAC,EAAE;gBACZ,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YAC1D,CAAC,CAAC;iBACD,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAC3C,CAAC;SACH;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,UAAU,CAAC,GAAG,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,GAAG,KAAK;gBACR;oBACE,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,WAAW;oBACrB,QAAQ,EAAE,WAAW;oBACrB,OAAO,EAAE,iEAAiE;oBAC1E,WAAW,EAAE,EAAE;oBACf,OAAO,EAAE,EAAE;oBACX,UAAU,EAAE,KAAK;iBAClB;aACF,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAgC,EAAE,EAAE;QACpE,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAC7D,IAAI,IAAI;gBAAE,OAAO,KAAC,OAAO,OAAK,IAAI,WAAI,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAgC,IAAI,CAAC,CAAC;IAC1F,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAEjC,MAAM,cAAc,GAAG,CAAC,WAA4B,EAAE,IAAY,EAAE,EAAE;QACpE,MAAM,MAAM,GAA2B,WAAW;aAC/C,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC;aAC/E,GAAG,CAAC,KAAK,CAAC,EAAE;YACX,OAAO;gBACL,EAAE,EAAE,KAAK,CAAC,SAAmB;gBAC7B,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,WAAW,EAAE,KAAK,CAAC,IAAI;gBACvB,GAAG,EAAE,KAAK,CAAC,SAAmB;gBAC9B,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,IAAI,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,WAAG,CAAC;aAC9E,CAAC;QACJ,CAAC,CAAC,CAAC;QAEL,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QAC3D,cAAc,CAAC,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,aAAa,CAAC,KAAK,CAAC,EAAE;YACpB,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YAC7B,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAC3B,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,IAAI,IACH,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,EAC1D,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAC7B,iBAAiB,EAAE,QAAQ,EAC3B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,EAChE,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,YAAY,EAC5B,UAAU,EAAE,eAAe,EAC3B,aAAa,EACX,KAAC,eAAe,IACd,MAAM,EAAE,SAAS,CAAC,EAAE;wBAClB,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;wBAE5D,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;4BACzB,OAAO,IAAI,CAAC,QAAQ,CAAC;4BACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;gCAC1C,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;gCAC9C,CAAC,CAAC,SAAS,CAAC;4BACd,IAAI,CAAC,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;wBAC7B,CAAC,CAAC,CAAC;wBAEH,IAAI,KAAK,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;4BACnC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;gCACrB;oCACE,EAAE,EAAE,SAAS,EAAE;oCACf,QAAQ,EAAE,WAAW;oCACrB,QAAQ,EAAE,WAAW;oCACrB,OAAO,EAAE,KAAK;oCACd,WAAW;oCACX,UAAU;oCACV,QAAQ,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;oCAClD,OAAO,EAAE,EAAE;oCACX,WAAW,EAAE,UAAU;oCACvB,UAAU,EAAE,KAAK;iCAClB;gCACD,GAAG,KAAK;6BACT,CAAC,CAAC;4BACH,KAAK,EAAE,CAAC;yBACT;oBACH,CAAC,EACD,UAAU,EAAE,KAAK,WACjB,EAEJ,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;oBAChC,OAAO,eAAC,YAAY,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAAI,CAAC;gBACjF,CAAC,CAAC,WACF,EACD,cAAc,IAAI,CACjB,KAAC,QAAQ,IACP,KAAK,EAAE,cAAc,EACrB,YAAY,EAAE,cAAc,CAAC,OAAO,EACpC,YAAY,EAAE,GAAG,EAAE;oBACjB,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC,WACD,CACH,YACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,KAAC,YAAY,IAAC,SAAS,QAAC,IAAI,EAAE,KAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,CAAC,EAAE,KAAC,QAAQ,aAAG,WAAI,WAAI,CAAC;AAC9F,CAAC,CAAC;AAEF,gBAAgB,CAAC,UAAU,GAAG;IAC5B,MAAM,EAAE,YAAY;CACrB,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\n\nimport {\n  createUID,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  MenuItemProps,\n  OneColumnPage\n} from '@pega/cosmos-react-core';\nimport { MDMap } from '@pega/cosmos-react-rte';\nimport {\n  Feed,\n  Filter,\n  MentionButtonConfig,\n  HashtagButtonConfig,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { FeedPostDemo } from './FeedPost.stories';\nimport { FeedNewPostDemo } from './FeedNewPost.stories';\nimport { caseMentions, feedPosts, userMentions, FeedPostDemoProps } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/Feed',\n  component: Feed\n} as Meta;\n\nexport const FeedDemo = ({ markdownMap }: { markdownMap?: MDMap }) => {\n  const [extraPosts, setExtraPosts] = useState<FeedPostDemoProps[]>(() => feedPosts);\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n\n  const [filters, setFilters] = useState<Filter[]>(\n    Array.from({ length: 10 }, (_, index) => {\n      return {\n        id: `filter-${index + 1}`,\n        label: `Filter ${index + 1}`\n      };\n    })\n  );\n\n  const toggleFilter = (filterId: string) => {\n    const updatedFilters = [...filters];\n    const filterToUpdate = updatedFilters.find(x => x.id === filterId);\n\n    if (filterToUpdate) filterToUpdate.on = !filterToUpdate.on;\n\n    setFilters(updatedFilters);\n  };\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const generateNewPost = () => {\n    setTimeout(() => {\n      setExtraPosts(posts => [\n        ...posts,\n        {\n          id: createUID(),\n          fullname: 'Demo User',\n          username: 'demo_user',\n          content: 'This post was loaded after the Feed was scrolled to the bottom!',\n          attachments: [],\n          replies: [],\n          renderFeed: false\n        }\n      ]);\n    }, 1000);\n  };\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const [lightboxImages, setLightboxImages] = useState<LightboxProps['items'] | null>(null);\n  const defaultLBIndex = useRef(0);\n\n  const renderLightbox = (attachments: AttachedFiles[], name: string) => {\n    const images: LightboxProps['items'] = attachments\n      .filter(attachment => attachment.type.includes('image') && attachment.thumbnail)\n      .map(image => {\n        return {\n          id: image.thumbnail as string,\n          name: image.name,\n          description: image.name,\n          src: image.thumbnail as string,\n          metadata: [image.type, <DateTimeDisplay value={new Date()} variant='date' />]\n        };\n      });\n\n    const idx = images.findIndex(image => image.name === name);\n    defaultLBIndex.current = idx > -1 ? idx : 0;\n    setLightboxImages(images);\n  };\n\n  const deletePost = (index: number) => {\n    setExtraPosts(posts => {\n      const postsCopy = [...posts];\n      postsCopy.splice(index, 1);\n      return [...postsCopy];\n    });\n  };\n\n  return (\n    <>\n      <Feed\n        title='Pulse'\n        userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n        searchTypes={['user', 'case']}\n        onDecoratorSearch={onSearch}\n        searchResults={searchResults}\n        onMentionClick={onMentionClick}\n        markdownMap={markdownMap}\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        filters={filters}\n        onFilterChange={toggleFilter}\n        onLoadMore={generateNewPost}\n        newPostRegion={\n          <FeedNewPostDemo\n            onPost={postEvent => {\n              const { value, attachments, recipients, clear } = postEvent;\n\n              attachments.forEach(file => {\n                delete file.onDelete;\n                file.onPreview = file.type.includes('image')\n                  ? () => renderLightbox(attachments, file.name)\n                  : undefined;\n                file.onDownload = () => {};\n              });\n\n              if (value || attachments.length > 0) {\n                setExtraPosts(posts => [\n                  {\n                    id: createUID(),\n                    fullname: 'Demo User',\n                    username: 'demo_user',\n                    content: value,\n                    attachments,\n                    recipients,\n                    postType: recipients.length ? 'private' : 'public',\n                    replies: [],\n                    timeElapsed: 'Just now',\n                    renderFeed: false\n                  },\n                  ...posts\n                ]);\n                clear();\n              }\n            }}\n            renderFeed={false}\n          />\n        }\n        posts={extraPosts.map((post, i) => {\n          return <FeedPostDemo {...post} key={post.id} onDelete={() => deletePost(i)} />;\n        })}\n      />\n      {lightboxImages && (\n        <Lightbox\n          items={lightboxImages}\n          defaultIndex={defaultLBIndex.current}\n          onAfterClose={() => {\n            setLightboxImages(null);\n          }}\n        />\n      )}\n    </>\n  );\n};\n\nexport const FeedWithAppShell = () => {\n  return <AppShellDemo appHeader main={<OneColumnPage title='Welcome' a={<FeedDemo />} />} />;\n};\n\nFeedWithAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/social/Feed/FeedNewPost.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useUID } from '@pega/cosmos-react-core';
+import { Feed, FeedNewPost } from '@pega/cosmos-react-social';
+import { availableRecipients, caseMentions, userMentions } from './Feed.mocks';
+export default {
+    title: 'Social/Feed/FeedNewPost',
+    component: FeedNewPost
+};
+export const FeedNewPostDemo = ({ onPost = () => { }, renderFeed = true }) => {
+    const key = useUID();
+    const [searchResults, setSearchResults] = useState([]);
+    const [attachments, setAttachments] = useState([]);
+    const [filterValue, setFilterValue] = useState('');
+    const [itemsToRender, setItemsToRender] = useState(availableRecipients);
+    const onSearch = ({ type, search, mentionType }) => {
+        if (type === 'mention') {
+            const availableMentions = mentionType === 'case' ? caseMentions : userMentions;
+            const mentions = availableMentions
+                .filter((user) => {
+                const names = user.primary.toLowerCase().split(' ');
+                const searchWords = search.toLowerCase().split(' ');
+                return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
+            })
+                .map(({ id, primary, secondary, visual }) => {
+                return {
+                    id,
+                    primary,
+                    secondary,
+                    visual
+                };
+            });
+            setSearchResults(mentions);
+        }
+        else {
+            setSearchResults(['cosmos', 'hashtag', 'pega']
+                .filter(tag => {
+                return tag.toLowerCase().includes(search.toLowerCase());
+            })
+                .map(tag => ({ id: tag, primary: tag })));
+        }
+    };
+    const onFilesAdded = (files) => {
+        files.forEach(file => {
+            if (file.type.split('/')[0] === 'image')
+                file.thumbnail = URL.createObjectURL(file);
+            if (file.size / 1000000 > 100) {
+                file.meta = 'File size cannot exceed 100MB';
+                file.error = true;
+            }
+            file.onDelete = () => {
+                setAttachments(current => {
+                    return current.filter(x => x.name !== file.name);
+                });
+            };
+        });
+        setAttachments(current => [...current, ...files]);
+    };
+    useEffect(() => {
+        // Synthetic delay to mimic async request
+        const timeout = setTimeout(() => {
+            const newItems = availableRecipients.filter(({ primary, secondary }) => {
+                return (primary.toLowerCase().includes(filterValue) ||
+                    secondary.find(x => x.toLowerCase().includes(filterValue)));
+            });
+            setItemsToRender(newItems);
+        }, 500);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [filterValue]);
+    const newPost = (_jsx(FeedNewPost, { id: key, attachments: attachments, interactionInfo: {
+            textAreaPlaceholder: 'Start a conversation',
+            postLabel: 'Post'
+        }, onFilesAdded: onFilesAdded, onPost: postEvent => {
+            onPost?.(postEvent);
+            setAttachments([]);
+            postEvent.clear();
+        }, recipients: itemsToRender, onRecipientSearch: (newSearch) => setFilterValue(newSearch) }, void 0));
+    return renderFeed ? (_jsx(Feed, { searchTypes: ['user', 'case'], onDecoratorSearch: onSearch, searchResults: searchResults, userInfo: { username: 'demo_user', fullname: 'Demo User' }, newPostRegion: newPost }, void 0)) : (newPost);
+};
+//# sourceMappingURL=FeedNewPost.stories.js.map

package/lib/social/Feed/FeedNewPost.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedNewPost.stories.js","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedNewPost,\n  FeedNewPostProps,\n  RecipientOption,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { availableRecipients, caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedNewPost',\n  component: FeedNewPost\n} as Meta;\n\nexport const FeedNewPostDemo = ({\n  onPost = () => {},\n  renderFeed = true\n}: {\n  onPost?: FeedNewPostProps['onPost'];\n  renderFeed?: boolean;\n}) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n  const [filterValue, setFilterValue] = useState('');\n  const [itemsToRender, setItemsToRender] = useState<RecipientOption[]>(availableRecipients);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      if (file.size / 1000000 > 100) {\n        file.meta = 'File size cannot exceed 100MB';\n        file.error = true;\n      }\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(current => [...current, ...files]);\n  };\n\n  useEffect(() => {\n    // Synthetic delay to mimic async request\n    const timeout = setTimeout(() => {\n      const newItems = availableRecipients.filter(({ primary, secondary }) => {\n        return (\n          primary.toLowerCase().includes(filterValue) ||\n          secondary.find(x => x.toLowerCase().includes(filterValue))\n        );\n      });\n\n      setItemsToRender(newItems);\n    }, 500);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [filterValue]);\n\n  const newPost = (\n    <FeedNewPost\n      id={key}\n      attachments={attachments}\n      interactionInfo={{\n        textAreaPlaceholder: 'Start a conversation',\n        postLabel: 'Post'\n      }}\n      onFilesAdded={onFilesAdded}\n      onPost={postEvent => {\n        onPost?.(postEvent);\n        setAttachments([]);\n        postEvent.clear();\n      }}\n      recipients={itemsToRender}\n      onRecipientSearch={(newSearch: string) => setFilterValue(newSearch)}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      newPostRegion={newPost}\n    />\n  ) : (\n    newPost\n  );\n};\n"]}

package/lib/social/Feed/FeedPost.stories.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Avatar, CardContent, Link, Popover, Table, useUID } from '@pega/cosmos-react-core';
+import { HashtagButtonConfig, MentionButtonConfig, Feed, FeedPost } from '@pega/cosmos-react-social';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { FeedReplyDemo } from './FeedReply.stories';
+import { generatedLikes, caseMentions, userMentions, availableRecipients } from './Feed.mocks';
+export default {
+    title: 'Social/Feed/FeedPost',
+    component: FeedPost
+};
+export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith', content, postType, recipients, attachments: postAttachments, replies, timeElapsed: time, userStatus, likes: userLikes, likeCount: userLikeCount, onDelete = () => { }, renderFeed = true }) => {
+    const defaultContent = postAttachments
+        ? ''
+        : 'This post mentions @deans:Seth DeAngelo:user: and also contains a tag! #cosmos:';
+    const defaultReplies = Array.from(Array(12).keys(), index => {
+        return (_jsx(FeedReplyDemo, { fullname: fullname, content: `This is reply number ${index + 1}!`, renderFeed: false }, `reply-story-${index + 1}`));
+    });
+    const key = useUID();
+    const [postContent, setPostContent] = useState(content || defaultContent);
+    const [searchResults, setSearchResults] = useState([]);
+    const [likes, setLikes] = useState([]);
+    const [liked, setLiked] = useState(false);
+    const [likeCount, setLikeCount] = useState(userLikeCount || (renderFeed ? generatedLikes.length : 0));
+    const [recipientsList, setRecipientsList] = useState([]);
+    const [edited, setEdited] = useState(false);
+    const [timeElapsed, setTimeElapsed] = useState(time || '4 days ago');
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [popoverTarget, setPopoverTarget] = useState();
+    const [extraReplies, setExtraReplies] = useState([]);
+    const [replyAttachments, setReplyAttachments] = useState([]);
+    const [replyCount, setReplyCount] = useState(replies ? replies.length : defaultReplies.length);
+    const [repliesLoading, setRepliesLoading] = useState(false);
+    const [repliesShown, setRepliesShown] = useState(3);
+    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
+    const [allRecipientsVisible, setAllRecipientsVisible] = useState(false);
+    const onShowMoreReplies = () => {
+        setRepliesLoading(true);
+        setTimeout(() => {
+            setRepliesShown(curr => {
+                if (curr + 3 <= defaultReplies.length)
+                    return curr + 3;
+                return defaultReplies.length;
+            });
+            setRepliesLoading(false);
+        }, 1000);
+    };
+    const onShowLessReplies = () => {
+        setRepliesLoading(true);
+        setTimeout(() => {
+            setRepliesShown(3);
+            setRepliesLoading(false);
+        }, 1000);
+    };
+    const onSearch = ({ type, search, mentionType }) => {
+        if (type === 'mention') {
+            const availableMentions = mentionType === 'case' ? caseMentions : userMentions;
+            const mentions = availableMentions
+                .filter((user) => {
+                const names = user.primary.toLowerCase().split(' ');
+                const searchWords = search.toLowerCase().split(' ');
+                return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
+            })
+                .map(({ id, primary, secondary, visual }) => {
+                return {
+                    id,
+                    primary,
+                    secondary,
+                    visual
+                };
+            });
+            setSearchResults(mentions);
+        }
+        else {
+            setSearchResults(['cosmos', 'hashtag', 'pega']
+                .filter(tag => {
+                return tag.toLowerCase().includes(search.toLowerCase());
+            })
+                .map(tag => ({ id: tag, primary: tag })));
+        }
+    };
+    const onFilesAdded = (files) => {
+        files.forEach(file => {
+            if (file.type.split('/')[0] === 'image')
+                file.thumbnail = URL.createObjectURL(file);
+            file.onDelete = () => {
+                setReplyAttachments?.(current => {
+                    return current.filter(x => x.name !== file.name);
+                });
+            };
+        });
+        setReplyAttachments(files);
+    };
+    const getInitialLikes = () => {
+        if (likes.length)
+            return;
+        setLikes(userLikes || (renderFeed ? generatedLikes : []));
+    };
+    const generateNewLike = () => {
+        setTimeout(() => {
+            setLikes(oldLikes => [
+                ...oldLikes,
+                {
+                    primary: 'Generated Like',
+                    secondary: ['This like was added after the onLoadMore callback triggered'],
+                    visual: _jsx(Avatar, { size: 'l', name: 'Generated Like' }, void 0),
+                    id: 'generatedLike'
+                }
+            ]);
+            setAdditionalLikeAdded(true);
+        }, 1000);
+    };
+    const getInitialRecipients = () => {
+        if (recipientsList.length)
+            return;
+        setRecipientsList(recipients ||
+            availableRecipients.slice(0, !allRecipientsVisible ? 10 : availableRecipients.length));
+    };
+    const getAllRecipients = () => {
+        setTimeout(() => {
+            setAllRecipientsVisible(true);
+            setRecipientsList(recipients || availableRecipients);
+        }, 1000);
+    };
+    const onMentionClick = ({ id, type }) => {
+        if (type === 'user') {
+            const user = userMentions.find(mention => mention.id === id);
+            if (user)
+                return _jsx(Glimpse, { ...user }, void 0);
+        }
+    };
+    const post = (_jsxs(_Fragment, { children: [_jsx(FeedPost, { id: key, info: {
+                    fullname,
+                    username,
+                    timeElapsed,
+                    content: postContent,
+                    postType,
+                    recipients: recipientsList,
+                    recipientsCount: recipients ? recipients.length : availableRecipients.length,
+                    attachments: postAttachments,
+                    liked,
+                    postContext: renderFeed ? (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Pega" }, void 0)) : undefined,
+                    userStatus
+                }, interactionInfo: {
+                    likeLabel: 'Like',
+                    likes,
+                    likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,
+                    commentLabel: 'Comment'
+                }, maxContentHeight: 80, onLikeClick: ({ user }) => {
+                    const userLikedIndex = likes.findIndex(x => x.id === user.id);
+                    if (userLikedIndex !== -1) {
+                        setLikes(oldLikes => {
+                            const oldLikesArr = [...oldLikes];
+                            oldLikesArr.splice(userLikedIndex, 1);
+                            return oldLikesArr;
+                        });
+                        setLikeCount(curr => curr - 1);
+                    }
+                    else {
+                        setLikes(oldLikes => [user, ...oldLikes]);
+                        setLikeCount(curr => curr + 1);
+                    }
+                    setLiked(curr => !curr);
+                }, onLikeCountInteraction: getInitialLikes, onLoadMoreLikes: !additionalLikeAdded ? generateNewLike : undefined, onRecipientInteraction: getInitialRecipients, onLoadMoreRecipients: !allRecipientsVisible ? getAllRecipients : undefined, onUserClick: (_, clickEvent) => {
+                    if (clickEvent) {
+                        setPopoverTarget(clickEvent.target);
+                        setPopoverOpen(curr => !curr);
+                    }
+                }, menuItems: [
+                    { primary: 'Custom action', id: 'custom', onClick: () => { } },
+                    { primary: 'Delete', id: 'delete', onClick: onDelete }
+                ], onEditSubmit: ({ value }) => {
+                    setPostContent(value);
+                    setEdited(true);
+                    setTimeElapsed('Just now');
+                }, edited: edited, replies: replies
+                    ? [...replies, ...extraReplies]
+                    : [...defaultReplies.slice(-repliesShown), ...extraReplies], replyCount: replyCount, repliesLoading: repliesLoading, onShowMoreReplies: onShowMoreReplies, onShowLessReplies: repliesShown > 3 ? onShowLessReplies : undefined, replyInput: {
+                    commentLabel: 'Send Comment',
+                    attachments: replyAttachments,
+                    onFilesAdded,
+                    onSubmit: replyEvent => {
+                        setReplyAttachments([]);
+                        replyEvent.attachments.forEach(file => {
+                            delete file.onDelete;
+                            file.onPreview = () => { };
+                            file.onDownload = () => { };
+                        });
+                        setExtraReplies(oldReplies => [
+                            ...oldReplies,
+                            _jsx(FeedReplyDemo, { fullname: 'Demo User', username: 'demo_user', content: replyEvent.value, attachments: replyEvent.attachments, timeElapsed: 'Just now', renderFeed: false }, `replies-${oldReplies.length}`)
+                        ]);
+                        setReplyCount(oldReplyCount => oldReplyCount + 1);
+                        replyEvent.clear();
+                    },
+                    placeholder: 'Add a comment'
+                } }, key), popoverTarget && (_jsx(Popover, { show: popoverOpen, target: popoverTarget, placement: 'bottom', portal: true, children: _jsx(CardContent, { children: fullname }, void 0) }, void 0))] }, void 0));
+    return renderFeed ? (_jsx(Feed, { searchTypes: ['user', 'case'], onDecoratorSearch: onSearch, searchResults: searchResults, onMentionClick: onMentionClick, interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], userInfo: { username: 'demo_user', fullname: 'Demo User' }, posts: [post] }, void 0)) : (post);
+};
+export const FeedPostWithPresence = () => {
+    return _jsx(FeedPostDemo, { userStatus: 'active' }, void 0);
+};
+export const FeedPostWithJSX = () => {
+    const data = [
+        {
+            id: '123',
+            name: 'Jane Smith',
+            dob: '12/31/1990',
+            address: 'Boston, MA',
+            email: 'jsmith@email.com',
+            balance: '$2,200'
+        },
+        {
+            id: '456',
+            name: 'Joe Smith',
+            dob: '01/01/1980',
+            address: '',
+            email: 'joe.smith@email.com',
+            balance: '$1,350'
+        },
+        {
+            id: '789',
+            name: 'Mirian Lou',
+            dob: '02/29/1985',
+            address: (_jsxs(_Fragment, { children: [_jsx("div", { children: "100 Main St." }, void 0), _jsx("div", { children: "Cambridge, MA" }, void 0)] }, void 0)),
+            email: '',
+            balance: '$10'
+        }
+    ];
+    const columns = [
+        { renderer: 'name', label: 'Name' },
+        { renderer: 'dob', label: 'Date of Birth' },
+        { renderer: 'address', label: 'Address' },
+        { renderer: 'email', label: 'Email' },
+        { renderer: 'balance', label: 'Account Balance', align: 'right' }
+    ];
+    return (_jsx(Feed, { userInfo: { username: 'demo_user', fullname: 'Demo User' }, posts: [_jsx(FeedPostDemo, { content: _jsx(Table, { columns: columns, data: data }, void 0), replies: [] }, void 0)] }, void 0));
+};
+//# sourceMappingURL=FeedPost.stories.js.map

package/lib/social/Feed/FeedPost.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedPost.stories.js","sourceRoot":"","sources":["../../../src/social/Feed/FeedPost.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Avatar,\n  CardContent,\n  Link,\n  MenuItemProps,\n  Popover,\n  SummaryListItem,\n  Table,\n  ColumnProps,\n  useUID\n} from '@pega/cosmos-react-core';\nimport {\n  HashtagButtonConfig,\n  MentionButtonConfig,\n  Feed,\n  FeedPost,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { FeedReplyDemo } from './FeedReply.stories';\nimport {\n  generatedLikes,\n  caseMentions,\n  userMentions,\n  availableRecipients,\n  FeedPostDemoProps\n} from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedPost',\n  component: FeedPost\n} as Meta;\n\nexport const FeedPostDemo = ({\n  fullname = 'Katie Smith',\n  username = 'katie_smith',\n  content,\n  postType,\n  recipients,\n  attachments: postAttachments,\n  replies,\n  timeElapsed: time,\n  userStatus,\n  likes: userLikes,\n  likeCount: userLikeCount,\n  onDelete = () => {},\n  renderFeed = true\n}: FeedPostDemoProps) => {\n  const defaultContent = postAttachments\n    ? ''\n    : 'This post mentions @deans:Seth DeAngelo:user: and also contains a tag! #cosmos:';\n\n  const defaultReplies = Array.from(Array(12).keys(), index => {\n    return (\n      <FeedReplyDemo\n        key={`reply-story-${index + 1}`}\n        fullname={fullname}\n        content={`This is reply number ${index + 1}!`}\n        renderFeed={false}\n      />\n    );\n  });\n\n  const key = useUID();\n  const [postContent, setPostContent] = useState(content || defaultContent);\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n\n  const [likes, setLikes] = useState<SummaryListItem[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState<number>(\n    userLikeCount || (renderFeed ? generatedLikes.length : 0)\n  );\n  const [recipientsList, setRecipientsList] = useState<MenuItemProps[]>([]);\n  const [edited, setEdited] = useState(false);\n  const [timeElapsed, setTimeElapsed] = useState(time || '4 days ago');\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [popoverTarget, setPopoverTarget] = useState<Element>();\n\n  const [extraReplies, setExtraReplies] = useState<any[]>([]);\n  const [replyAttachments, setReplyAttachments] = useState<AttachedFiles[]>([]);\n  const [replyCount, setReplyCount] = useState<number>(\n    replies ? replies.length : defaultReplies.length\n  );\n  const [repliesLoading, setRepliesLoading] = useState(false);\n  const [repliesShown, setRepliesShown] = useState(3);\n\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n  const [allRecipientsVisible, setAllRecipientsVisible] = useState(false);\n\n  const onShowMoreReplies = () => {\n    setRepliesLoading(true);\n    setTimeout(() => {\n      setRepliesShown(curr => {\n        if (curr + 3 <= defaultReplies.length) return curr + 3;\n        return defaultReplies.length;\n      });\n      setRepliesLoading(false);\n    }, 1000);\n  };\n\n  const onShowLessReplies = () => {\n    setRepliesLoading(true);\n    setTimeout(() => {\n      setRepliesShown(3);\n      setRepliesLoading(false);\n    }, 1000);\n  };\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      file.onDelete = () => {\n        setReplyAttachments?.(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setReplyAttachments(files);\n  };\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes(userLikes || (renderFeed ? generatedLikes : []));\n  };\n\n  const generateNewLike = () => {\n    setTimeout(() => {\n      setLikes(oldLikes => [\n        ...oldLikes,\n        {\n          primary: 'Generated Like',\n          secondary: ['This like was added after the onLoadMore callback triggered'],\n          visual: <Avatar size='l' name='Generated Like' />,\n          id: 'generatedLike'\n        }\n      ]);\n      setAdditionalLikeAdded(true);\n    }, 1000);\n  };\n\n  const getInitialRecipients = () => {\n    if (recipientsList.length) return;\n\n    setRecipientsList(\n      recipients ||\n        availableRecipients.slice(0, !allRecipientsVisible ? 10 : availableRecipients.length)\n    );\n  };\n\n  const getAllRecipients = () => {\n    setTimeout(() => {\n      setAllRecipientsVisible(true);\n      setRecipientsList(recipients || availableRecipients);\n    }, 1000);\n  };\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const post = (\n    <>\n      <FeedPost\n        id={key}\n        key={key}\n        info={{\n          fullname,\n          username,\n          timeElapsed,\n          content: postContent,\n          postType,\n          recipients: recipientsList,\n          recipientsCount: recipients ? recipients.length : availableRecipients.length,\n          attachments: postAttachments,\n          liked,\n          postContext: renderFeed ? (\n            <Link href='https://www.pega.com' target='_blank'>\n              Pega\n            </Link>\n          ) : undefined,\n          userStatus\n        }}\n        interactionInfo={{\n          likeLabel: 'Like',\n          likes,\n          likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n          commentLabel: 'Comment'\n        }}\n        maxContentHeight={80}\n        onLikeClick={({ user }) => {\n          const userLikedIndex = likes.findIndex(x => x.id === user.id);\n          if (userLikedIndex !== -1) {\n            setLikes(oldLikes => {\n              const oldLikesArr = [...oldLikes];\n              oldLikesArr.splice(userLikedIndex, 1);\n              return oldLikesArr;\n            });\n            setLikeCount(curr => curr - 1);\n          } else {\n            setLikes(oldLikes => [user, ...oldLikes]);\n            setLikeCount(curr => curr + 1);\n          }\n          setLiked(curr => !curr);\n        }}\n        onLikeCountInteraction={getInitialLikes}\n        onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined}\n        onRecipientInteraction={getInitialRecipients}\n        onLoadMoreRecipients={!allRecipientsVisible ? getAllRecipients : undefined}\n        onUserClick={(_, clickEvent) => {\n          if (clickEvent) {\n            setPopoverTarget(clickEvent.target as Element);\n            setPopoverOpen(curr => !curr);\n          }\n        }}\n        menuItems={[\n          { primary: 'Custom action', id: 'custom', onClick: () => {} },\n          { primary: 'Delete', id: 'delete', onClick: onDelete }\n        ]}\n        onEditSubmit={({ value }) => {\n          setPostContent(value);\n          setEdited(true);\n          setTimeElapsed('Just now');\n        }}\n        edited={edited}\n        replies={\n          replies\n            ? [...replies, ...extraReplies]\n            : [...defaultReplies.slice(-repliesShown), ...extraReplies]\n        }\n        replyCount={replyCount}\n        repliesLoading={repliesLoading}\n        onShowMoreReplies={onShowMoreReplies}\n        onShowLessReplies={repliesShown > 3 ? onShowLessReplies : undefined}\n        replyInput={{\n          commentLabel: 'Send Comment',\n          attachments: replyAttachments,\n          onFilesAdded,\n          onSubmit: replyEvent => {\n            setReplyAttachments([]);\n\n            replyEvent.attachments.forEach(file => {\n              delete file.onDelete;\n              file.onPreview = () => {};\n              file.onDownload = () => {};\n            });\n\n            setExtraReplies(oldReplies => [\n              ...oldReplies,\n              <FeedReplyDemo\n                key={`replies-${oldReplies.length}`}\n                fullname='Demo User'\n                username='demo_user'\n                content={replyEvent.value}\n                attachments={replyEvent.attachments}\n                timeElapsed='Just now'\n                renderFeed={false}\n              />\n            ]);\n            setReplyCount(oldReplyCount => oldReplyCount + 1);\n            replyEvent.clear();\n          },\n          placeholder: 'Add a comment'\n        }}\n      />\n      {popoverTarget && (\n        <Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>\n          <CardContent>{fullname}</CardContent>\n        </Popover>\n      )}\n    </>\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      onMentionClick={onMentionClick}\n      interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[post]}\n    />\n  ) : (\n    post\n  );\n};\n\nexport const FeedPostWithPresence = () => {\n  return <FeedPostDemo userStatus='active' />;\n};\n\nexport const FeedPostWithJSX = () => {\n  const data = [\n    {\n      id: '123',\n      name: 'Jane Smith',\n      dob: '12/31/1990',\n      address: 'Boston, MA',\n      email: 'jsmith@email.com',\n      balance: '$2,200'\n    },\n    {\n      id: '456',\n      name: 'Joe Smith',\n      dob: '01/01/1980',\n      address: '',\n      email: 'joe.smith@email.com',\n      balance: '$1,350'\n    },\n    {\n      id: '789',\n      name: 'Mirian Lou',\n      dob: '02/29/1985',\n      address: (\n        <>\n          <div>100 Main St.</div>\n          <div>Cambridge, MA</div>\n        </>\n      ),\n      email: '',\n      balance: '$10'\n    }\n  ];\n\n  const columns: ColumnProps<typeof data[number]>[] = [\n    { renderer: 'name', label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    { renderer: 'email', label: 'Email' },\n    { renderer: 'balance', label: 'Account Balance', align: 'right' }\n  ];\n\n  return (\n    <Feed\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[<FeedPostDemo content={<Table columns={columns} data={data} />} replies={[]} />]}\n    />\n  );\n};\n"]}