@pega/cosmos-react-demos 4.0.0-dev.21.0 → 4.0.0-dev.22.1

package/jsx/social/Feed/FeedReply.stories.jsx

@@ -1,112 +0,0 @@
-import { useState, useCallback } from 'react';
-import { Avatar, CardContent, Popover, useUID } from '@pega/cosmos-react-core';
-import { Feed, FeedReply, HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
-import { Glimpse } from '@pega/cosmos-react-work';
-import { generatedLikes, userMentions } from './Feed.mocks';
-export default {
-    title: 'Social/Feed/FeedReply',
-    component: FeedReply
-};
-export const FeedReplyDemo = ({ fullname = 'Demo User', username = 'demo_user', content, attachments, postTimestamp = new Date(2022, 0, 1), userStatus, renderFeed = true }) => {
-    const defaultContent = attachments
-        ? ''
-        : "This reply mentions <pega-mention id='deans' text='Seth DeAngelo' type='user'/> and also contains a tag! <pega-tag tag='cosmos'/>";
-    const key = useUID();
-    const [likes, setLikes] = useState([]);
-    const [liked, setLiked] = useState(false);
-    const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);
-    const [replyContent, setReplyContent] = useState(content || defaultContent);
-    const [edited, setEdited] = useState(false);
-    const [editTimestamp, setEditTimestamp] = useState(new Date());
-    const [popoverOpen, setPopoverOpen] = useState(false);
-    const [popoverTarget, setPopoverTarget] = useState();
-    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
-    const getInitialLikes = () => {
-        if (likes.length)
-            return;
-        setLikes(renderFeed ? generatedLikes : []);
-    };
-    const [likesLoading, setLikesLoading] = useState(false);
-    const generateNewLike = useCallback(() => {
-        if (!likesLoading) {
-            setLikesLoading(true);
-            setTimeout(() => {
-                setLikesLoading(false);
-                setLikes(oldLikes => [
-                    ...oldLikes,
-                    {
-                        primary: 'Generated Like',
-                        secondary: ['This like was added after the onLoadMore callback triggered'],
-                        visual: <Avatar size='l' name='Generated Like'/>,
-                        id: 'generatedLike'
-                    }
-                ]);
-                setAdditionalLikeAdded(true);
-            }, 1000);
-        }
-    }, [likesLoading]);
-    const onMentionClick = ({ id, type, target, closeGlimpse }) => {
-        if (type === 'user') {
-            const user = userMentions.find(mention => mention.id === id);
-            if (user && target && closeGlimpse) {
-                const { primary, secondary, visual, ...restUser } = user;
-                return (<Glimpse {...restUser} heading={{
-                        primary,
-                        secondary: Array.isArray(secondary) ? secondary.join(', ') : secondary,
-                        visual
-                    }} target={target} onDismiss={() => {
-                        closeGlimpse();
-                    }} placement='right'/>);
-            }
-        }
-    };
-    const reply = (<>
-      <FeedReply id={key} key={key} info={{
-            postTimestamp,
-            content: replyContent,
-            attachments,
-            username,
-            fullname,
-            fullnameLabel: `${fullname}'s Profile`,
-            liked,
-            userStatus
-        }} interactionInfo={{
-            likes,
-            likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,
-            likeLabel: 'Like',
-            commentLabel: 'Comment'
-        }} maxContentHeight={40} menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => { } }]} onEditSubmit={({ value }) => {
-            setReplyContent(value);
-            setEdited(true);
-            setEditTimestamp(new Date());
-        }} edited={edited} editTimestamp={editTimestamp} onCommentClick={() => { }} 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} likesLoading={likesLoading} onUserClick={(_, clickEvent) => {
-            if (clickEvent) {
-                setPopoverTarget(clickEvent.target);
-                setPopoverOpen(curr => !curr);
-            }
-        }}/>
-      {popoverTarget && (<Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>
-          <CardContent>{fullname}</CardContent>
-        </Popover>)}
-    </>);
-    return renderFeed ? (<Feed title='Pulse' onMentionClick={onMentionClick} interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[reply]}/>) : (reply);
-};
-export const FeedReplyWithPresence = () => {
-    return <FeedReplyDemo userStatus='active'/>;
-};
-//# sourceMappingURL=FeedReply.stories.jsx.map

package/jsx/social/Feed/FeedReply.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useCallback } from 'react';\n\nimport { Avatar, CardContent, Popover, useUID } from '@pega/cosmos-react-core';\nimport type { SummaryListItem } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReply,\n  HashtagButtonConfig,\n  MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport type { FeedReplyProps } from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\nimport type { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { generatedLikes, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReply',\n  component: FeedReply\n} as Meta;\n\ninterface FeedReplyDemoProps {\n  fullname?: FeedReplyProps['info']['fullname'];\n  username?: FeedReplyProps['info']['username'];\n  content?: FeedReplyProps['info']['content'];\n  attachments?: FeedReplyProps['info']['attachments'];\n  postTimestamp?: FeedReplyProps['info']['postTimestamp'];\n  userStatus?: FeedReplyProps['info']['userStatus'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyDemo: StoryFn<FeedReplyDemoProps> = ({\n  fullname = 'Demo User',\n  username = 'demo_user',\n  content,\n  attachments,\n  postTimestamp = new Date(2022, 0, 1),\n  userStatus,\n  renderFeed = true\n}: FeedReplyDemoProps) => {\n  const defaultContent = attachments\n    ? ''\n    : \"This reply mentions <pega-mention id='deans' text='Seth DeAngelo' type='user'/> and also contains a tag! <pega-tag tag='cosmos'/>\";\n\n  const key = useUID();\n  const [likes, setLikes] = useState<SummaryListItem[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);\n  const [replyContent, setReplyContent] = useState(content || defaultContent);\n  const [edited, setEdited] = useState(false);\n  const [editTimestamp, setEditTimestamp] = useState(new Date());\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [popoverTarget, setPopoverTarget] = useState<Element>();\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes(renderFeed ? generatedLikes : []);\n  };\n\n  const [likesLoading, setLikesLoading] = useState(false);\n\n  const generateNewLike = useCallback(() => {\n    if (!likesLoading) {\n      setLikesLoading(true);\n      setTimeout(() => {\n        setLikesLoading(false);\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  }, [likesLoading]);\n\n  const onMentionClick = ({\n    id,\n    type,\n    target,\n    closeGlimpse\n  }: { id: string; type: string; closeGlimpse?: () => void } & Partial<\n    Pick<GlimpseProps, 'target'>\n  >) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user && target && closeGlimpse) {\n        const { primary, secondary, visual, ...restUser } = user;\n\n        return (\n          <Glimpse\n            {...restUser}\n            heading={{\n              primary,\n              secondary: Array.isArray(secondary) ? secondary.join(', ') : secondary,\n              visual\n            }}\n            target={target}\n            onDismiss={() => {\n              closeGlimpse();\n            }}\n            placement='right'\n          />\n        );\n      }\n    }\n  };\n\n  const reply = (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        info={{\n          postTimestamp,\n          content: replyContent,\n          attachments,\n          username,\n          fullname,\n          fullnameLabel: `${fullname}'s Profile`,\n          liked,\n          userStatus\n        }}\n        interactionInfo={{\n          likes,\n          likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n          likeLabel: 'Like',\n          commentLabel: 'Comment'\n        }}\n        maxContentHeight={40}\n        menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => {} }]}\n        onEditSubmit={({ value }) => {\n          setReplyContent(value);\n          setEdited(true);\n          setEditTimestamp(new Date());\n        }}\n        edited={edited}\n        editTimestamp={editTimestamp}\n        onCommentClick={() => {}}\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        likesLoading={likesLoading}\n        onUserClick={(_, clickEvent) => {\n          if (clickEvent) {\n            setPopoverTarget(clickEvent.target as Element);\n            setPopoverOpen(curr => !curr);\n          }\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      title='Pulse'\n      onMentionClick={onMentionClick}\n      interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[reply]}\n    />\n  ) : (\n    reply\n  );\n};\n\nexport const FeedReplyWithPresence: StoryFn = () => {\n  return <FeedReplyDemo userStatus='active' />;\n};\n"]}

package/jsx/social/Feed/FeedReplyInput.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { FeedReplyInputProps } from '@pega/cosmos-react-social';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface FeedReplyInputDemoProps {
-    onSubmit?: FeedReplyInputProps['onSubmit'];
-    renderFeed?: boolean;
-}
-export declare const FeedReplyInputDemo: StoryFn<FeedReplyInputDemoProps>;
-//# sourceMappingURL=FeedReplyInput.stories.d.ts.map

package/jsx/social/Feed/FeedReplyInput.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,2BAA2B,CAAC;;AAIpF,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CA2F/D,CAAC"}

package/jsx/social/Feed/FeedReplyInput.stories.jsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { useUID } from '@pega/cosmos-react-core';
-import { Feed, FeedReplyInput } from '@pega/cosmos-react-social';
-import { caseMentions, userMentions } from './Feed.mocks';
-export default {
-    title: 'Social/Feed/FeedReplyInput',
-    component: FeedReplyInput
-};
-export const FeedReplyInputDemo = ({ onSubmit, renderFeed = true }) => {
-    const key = useUID();
-    const [searchResults, setSearchResults] = useState([]);
-    const [attachments, setAttachments] = useState([]);
-    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, href }) => {
-                return {
-                    id,
-                    primary,
-                    secondary: secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,
-                    visual,
-                    href
-                };
-            });
-            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 = () => {
-                setAttachments(current => {
-                    return current.filter(x => x.name !== file.name);
-                });
-            };
-        });
-        setAttachments(files);
-    };
-    const replyInput = (<FeedReplyInput id={key} commentLabel='Send Comment' attachments={attachments} placeholder='Add a comment' onFilesAdded={onFilesAdded} onSubmit={replyEvent => {
-            onSubmit?.(replyEvent);
-            setAttachments([]);
-            replyEvent.clear();
-        }}/>);
-    return renderFeed ? (<Feed title='Pulse' searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[replyInput]}/>) : (replyInput);
-};
-//# sourceMappingURL=FeedReplyInput.stories.jsx.map

package/jsx/social/Feed/FeedReplyInput.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport { Feed, FeedReplyInput } from '@pega/cosmos-react-social';\nimport type { FeedReplyInputProps, AttachedFiles } from '@pega/cosmos-react-social';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: StoryFn<FeedReplyInputDemoProps> = ({\n  onSubmit,\n  renderFeed = true\n}: FeedReplyInputDemoProps) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\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 => {\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, href }) => {\n          return {\n            id,\n            primary,\n            secondary:\n              secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,\n            visual,\n            href\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        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(files);\n  };\n\n  const replyInput = (\n    <FeedReplyInput\n      id={key}\n      commentLabel='Send Comment'\n      attachments={attachments}\n      placeholder='Add a comment'\n      onFilesAdded={onFilesAdded}\n      onSubmit={replyEvent => {\n        onSubmit?.(replyEvent);\n        setAttachments([]);\n        replyEvent.clear();\n      }}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      title='Pulse'\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[replyInput]}\n    />\n  ) : (\n    replyInput\n  );\n};\n"]}

package/lib/social/Feed/FeedNewPost.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { FeedNewPostProps } from '@pega/cosmos-react-social';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface FeedNewPostDemoProps {
-    onPost?: FeedNewPostProps['onPost'];
-    renderFeed?: boolean;
-}
-export declare const FeedNewPostDemo: StoryFn<FeedNewPostDemoProps>;
-//# sourceMappingURL=FeedNewPost.stories.d.ts.map

package/lib/social/Feed/FeedNewPost.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedNewPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,KAAK,EAAE,gBAAgB,EAAkC,MAAM,2BAA2B,CAAC;;AAIlG,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,oBAAoB,CAwHzD,CAAC"}

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

@@ -1,83 +0,0 @@
-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, href }) => {
-                return {
-                    id,
-                    primary,
-                    secondary: secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,
-                    visual,
-                    href
-                };
-            });
-            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) }));
-    return renderFeed ? (_jsx(Feed, { title: 'Pulse', searchTypes: ['user', 'case'], onDecoratorSearch: onSearch, searchResults: searchResults, userInfo: { username: 'demo_user', fullname: 'Demo User' }, newPostRegion: newPost })) : (newPost);
-};
-//# sourceMappingURL=FeedNewPost.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FeedNewPost.stories.js","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { useUID } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { Feed, FeedNewPost } from '@pega/cosmos-react-social';\nimport type { FeedNewPostProps, RecipientOption, AttachedFiles } from '@pega/cosmos-react-social';\n\nimport { availableRecipients, caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedNewPost',\n  component: FeedNewPost\n} as Meta;\n\ninterface FeedNewPostDemoProps {\n  onPost?: FeedNewPostProps['onPost'];\n  renderFeed?: boolean;\n}\n\nexport const FeedNewPostDemo: StoryFn<FeedNewPostDemoProps> = ({\n  onPost = () => {},\n  renderFeed = true\n}: FeedNewPostDemoProps) => {\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 => {\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, href }) => {\n          return {\n            id,\n            primary,\n            secondary:\n              secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,\n            visual,\n            href\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      title='Pulse'\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.d.ts

@@ -1,8 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { FeedPostDemoProps } from './Feed.mocks';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const FeedPostDemo: StoryFn<FeedPostDemoProps>;
-export declare const FeedPostWithPresence: StoryFn;
-export declare const FeedPostWithJSX: StoryFn;
-//# sourceMappingURL=FeedPost.stories.d.ts.map

package/lib/social/Feed/FeedPost.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedPost.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AAEtD,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAoVnD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAElC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAgD7B,CAAC"}

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

@@ -1,259 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, 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 = 'Demo User', username = 'demo_user', icon, content, postType, recipients, attachments: postAttachments, replies, postTimestamp = new Date(2022, 0, 1), userStatus, likes: userLikes, likeCount: userLikeCount, onDelete = () => { }, renderFeed = true }) => {
-    const defaultContent = postAttachments
-        ? ''
-        : "This post mentions <pega-mention id='deans' text='Seth DeAngelo' type='user'/> and also contains a tag! <pega-tag 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 [editTimestamp, setEditTimestamp] = useState(new Date());
-    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, href }) => {
-                return {
-                    id,
-                    primary,
-                    secondary: secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,
-                    visual,
-                    href
-                };
-            });
-            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 [likesLoading, setLikesLoading] = useState(false);
-    const generateNewLike = useCallback(() => {
-        if (!likesLoading) {
-            setLikesLoading(true);
-            setTimeout(() => {
-                setLikesLoading(false);
-                setLikes(oldLikes => [
-                    ...oldLikes,
-                    {
-                        primary: 'Generated Like',
-                        secondary: ['This like was added after the onLoadMore callback triggered'],
-                        visual: _jsx(Avatar, { size: 'l', name: 'Generated Like' }),
-                        id: 'generatedLike'
-                    }
-                ]);
-                setAdditionalLikeAdded(true);
-            }, 1000);
-        }
-    }, [likesLoading]);
-    const getInitialRecipients = () => {
-        if (recipientsList.length)
-            return;
-        setRecipientsList(recipients ||
-            availableRecipients.slice(0, !allRecipientsVisible ? 10 : availableRecipients.length));
-    };
-    const [recipientsLoading, setRecipientsLoading] = useState(false);
-    const getAllRecipients = () => {
-        if (!recipientsLoading) {
-            setRecipientsLoading(true);
-            setTimeout(() => {
-                setRecipientsLoading(false);
-                setAllRecipientsVisible(true);
-                setRecipientsList(recipients || availableRecipients);
-            }, 1000);
-        }
-    };
-    const onMentionClick = ({ id, type, target, closeGlimpse }) => {
-        if (type === 'user') {
-            const user = userMentions.find(mention => mention.id === id);
-            if (user && target && closeGlimpse) {
-                const { primary, secondary, visual, ...restUser } = user;
-                return (_jsx(Glimpse, { ...restUser, heading: {
-                        primary,
-                        secondary: Array.isArray(secondary) ? secondary.join(', ') : secondary,
-                        visual
-                    }, target: target, onDismiss: () => {
-                        closeGlimpse();
-                    }, placement: 'right' }));
-            }
-        }
-    };
-    const post = (_jsxs(_Fragment, { children: [_jsx(FeedPost, { id: key, info: {
-                    fullname,
-                    username,
-                    icon,
-                    postTimestamp,
-                    content: postContent,
-                    postType,
-                    recipients: recipientsList,
-                    recipientsCount: recipients ? recipients.length : availableRecipients.length,
-                    attachments: postAttachments,
-                    liked,
-                    postContext: renderFeed ? _jsx(Link, { href: 'https://www.pega.com', children: "Pega" }) : 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, likesLoading: likesLoading, onLoadMoreLikes: !additionalLikeAdded ? generateNewLike : undefined, onRecipientInteraction: getInitialRecipients, recipientsLoading: recipientsLoading, 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);
-                    setEditTimestamp(new Date());
-                }, edited: edited, editTimestamp: editTimestamp, 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, postTimestamp: new Date(), 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', hideOnTargetHidden: true, children: _jsx(CardContent, { children: fullname }) }))] }));
-    return renderFeed ? (_jsx(Feed, { title: 'Pulse', searchTypes: ['user', 'case'], onDecoratorSearch: onSearch, searchResults: searchResults, onMentionClick: onMentionClick, interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], userInfo: { username: 'demo_user', fullname: 'Demo User' }, posts: [post] })) : (post);
-};
-export const FeedPostWithPresence = () => {
-    return _jsx(FeedPostDemo, { userStatus: 'active' });
-};
-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." }), _jsx("div", { children: "Cambridge, MA" })] })),
-            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, { title: 'Pulse', userInfo: { username: 'demo_user', fullname: 'Demo User' }, posts: [_jsx(FeedPostDemo, { content: _jsx(Table, { columns: columns, data: data }), replies: [] })] }));
-};
-//# sourceMappingURL=FeedPost.stories.js.map