@pega/cosmos-react-demos 2.0.0

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

@@ -0,0 +1,99 @@
+import { useState } 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 = 'Katie Smith', username = 'katie_smith', content, attachments, timeElapsed: time, userStatus, renderFeed = true }) => {
+    const defaultContent = attachments
+        ? ''
+        : 'This reply mentions @deans:Seth DeAngelo:user: and also contains a 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 [timeElapsed, setTimeElapsed] = useState(time || '3 days ago');
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [popoverTarget, setPopoverTarget] = useState();
+    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
+    const getInitialLikes = () => {
+        if (likes.length)
+            return;
+        setLikes(renderFeed ? generatedLikes : []);
+    };
+    const generateNewLike = () => {
+        setTimeout(() => {
+            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);
+    };
+    const onMentionClick = ({ id, type }) => {
+        if (type === 'user') {
+            const user = userMentions.find(mention => mention.id === id);
+            if (user)
+                return <Glimpse {...user}/>;
+        }
+    };
+    const reply = (<>
+      <FeedReply id={key} key={key} info={{
+            timeElapsed,
+            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);
+            setTimeElapsed('Just now');
+        }} edited={edited} 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} 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 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/lib/social/Feed/FeedReply.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Avatar, CardContent, Popover, SummaryListItem, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReply,\n  FeedReplyProps,\n  HashtagButtonConfig,\n  MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport { Glimpse } 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\nexport const FeedReplyDemo = ({\n  fullname = 'Katie Smith',\n  username = 'katie_smith',\n  content,\n  attachments,\n  timeElapsed: time,\n  userStatus,\n  renderFeed = true\n}: {\n  fullname?: FeedReplyProps['info']['fullname'];\n  username?: FeedReplyProps['info']['username'];\n  content?: FeedReplyProps['info']['content'];\n  attachments?: FeedReplyProps['info']['attachments'];\n  timeElapsed?: FeedReplyProps['info']['timeElapsed'];\n  userStatus?: FeedReplyProps['info']['userStatus'];\n  renderFeed?: boolean;\n}) => {\n  const defaultContent = attachments\n    ? ''\n    : 'This reply mentions @deans:Seth DeAngelo:user: and also contains a 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 [timeElapsed, setTimeElapsed] = useState(time || '3 days ago');\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 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 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 reply = (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        info={{\n          timeElapsed,\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          setTimeElapsed('Just now');\n        }}\n        edited={edited}\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        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      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 = () => {\n  return <FeedReplyDemo userStatus='active' />;\n};\n"]}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import { FeedReplyInputProps, AttachedFiles } from '@pega/cosmos-react-social';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const FeedReplyInputDemo: ({ onSubmit, renderFeed }: {
+    onSubmit?: ((event: {
+        replyId: string;
+        value: string;
+        attachments: AttachedFiles[];
+        clear: () => void;
+    }) => void) | undefined;
+    renderFeed?: boolean | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=FeedReplyInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIxC,OAAO,EAGL,mBAAmB,EACnB,aAAa,EACd,MAAM,2BAA2B,CAAC;;AAKnC,wBAGU;AAEV,eAAO,MAAM,kBAAkB;;;;;;;;iBA2F9B,CAAC"}

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

@@ -0,0 +1,59 @@
+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 }) => {
+                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 = () => {
+                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 searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[replyInput]}/>) : (replyInput);
+};
+//# sourceMappingURL=FeedReplyInput.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReplyInput,\n  FeedReplyInputProps,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\nexport const FeedReplyInputDemo = ({\n  onSubmit,\n  renderFeed = true\n}: {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}) => {\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: 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        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      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/work/AppAnnouncement/AppAnnouncement.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { AppAnnouncementProps } from '@pega/cosmos-react-work';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AppAnnouncementDemo: Story<AppAnnouncementProps>;
+//# sourceMappingURL=AppAnnouncement.stories.d.ts.map

package/lib/work/AppAnnouncement/AppAnnouncement.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAa3D,CAAC"}

package/lib/work/AppAnnouncement/AppAnnouncement.stories.jsx

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { ToasterContext } from '@pega/cosmos-react-core';
+import { AppAnnouncement } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/AppAnnouncement',
+    component: AppAnnouncement
+};
+export const AppAnnouncementDemo = (args) => {
+    const { push } = useContext(ToasterContext);
+    return (<AppAnnouncement heading={args.heading} description={args.description} details={args.details} whatsNewLink={args.whatsNewLink} image={args.image} onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}/>);
+};
+AppAnnouncementDemo.args = {
+    heading: 'Pega Cosmos Design System',
+    description: 'We have launched a brand new experience to accelerate your workflow!',
+    details: [
+        'New React based UI rendering',
+        'Streamlined components for all business needs',
+        'Other improvements'
+    ],
+    whatsNewLink: 'https://www.pega.com',
+    image: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'
+};
+AppAnnouncementDemo.argTypes = {
+    heading: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    details: { control: { type: 'object' } },
+    whatsNewLink: { control: { type: 'text' } },
+    image: { control: { type: 'text' } }
+};
+//# sourceMappingURL=AppAnnouncement.stories.jsx.map

package/lib/work/AppAnnouncement/AppAnnouncement.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,OAAO,CACL,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC,EAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,OAAO,EAAE;QACP,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB;IACD,YAAY,EAAE,sBAAsB;IACpC,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport { ToasterContext } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useContext(ToasterContext);\n\n  return (\n    <AppAnnouncement\n      heading={args.heading}\n      description={args.description}\n      details={args.details}\n      whatsNewLink={args.whatsNewLink}\n      image={args.image}\n      onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}\n    />\n  );\n};\n\nAppAnnouncementDemo.args = {\n  heading: 'Pega Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  details: [\n    'New React based UI rendering',\n    'Streamlined components for all business needs',\n    'Other improvements'\n  ],\n  whatsNewLink: 'https://www.pega.com',\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  details: { control: { type: 'object' } },\n  whatsNewLink: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}

package/lib/work/CaseView/Attachments.mocks.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const AttachmentsMock: () => JSX.Element;
+//# sourceMappingURL=Attachments.mocks.d.ts.map

package/lib/work/CaseView/Attachments.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachments.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":";AA4fA,eAAO,MAAM,eAAe,mBAyH3B,CAAC"}

package/lib/work/CaseView/Attachments.mocks.jsx

@@ -0,0 +1,388 @@
+import { useState, useCallback, useContext, useEffect, useRef, useMemo, forwardRef } from 'react';
+import { Button, FileInput, FileVisual, Progress, Modal, ModalManagerContext, Text, ToasterContext, SummaryList, ViewAll, getKindFromMimeType, getMimeTypeFromFile, Popover, Flex, Input, ComboBox, createUID, useOuterEvent, hasProp, DateTimeDisplay, MetaList } from '@pega/cosmos-react-core';
+import { FileServiceContext, mockAttachmentListRequest, mockCategories } from './FileService.mock';
+const getSummaryListItemProps = ({ ref, file, editFile, cancelFile, deleteFile }) => {
+    let actions;
+    let visual;
+    if (hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100) {
+        visual = <Progress value={file.progress} placement='inline' variant='ring'/>;
+        actions = [
+            {
+                id: 'Cancel',
+                text: 'Cancel',
+                icon: 'times',
+                onClick: () => {
+                    cancelFile(file.id);
+                }
+            }
+        ];
+    }
+    else {
+        visual = (<FileVisual type={getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '')} thumbnail={file.thumbnail}/>);
+        actions = [
+            {
+                id: 'Edit',
+                text: 'Edit',
+                icon: 'pencil',
+                onClick: () => {
+                    editFile?.(file);
+                }
+            },
+            {
+                id: 'Download',
+                text: 'Download',
+                icon: 'download',
+                onClick: () => { }
+            },
+            {
+                id: 'Delete',
+                text: 'Delete',
+                icon: 'trash',
+                onClick: () => {
+                    deleteFile(file.id);
+                }
+            }
+        ];
+    }
+    return {
+        ref,
+        id: file.id,
+        visual,
+        primary: file.name,
+        secondary: (<Text variant='secondary'>
+        {hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100 ? (`Uploading…${Math.floor(file.progress)}%`) : (<MetaList items={[
+                    file.category,
+                    <>
+                Uploaded{' '}
+                <DateTimeDisplay variant='relative' value={file.createDate}/>
+              </>
+                ]}/>)}
+      </Text>),
+        actions
+    };
+};
+const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
+    const [name, setName] = useState(file.name);
+    const [error, setError] = useState('');
+    const [categories, setCategories] = useState(() => {
+        return [
+            { id: createUID(), primary: 'No category', selected: false },
+            ...mockCategories.map(category => {
+                return {
+                    id: createUID(),
+                    primary: category,
+                    selected: file.category === category
+                };
+            })
+        ];
+    });
+    const selectedCategory = useMemo(() => {
+        const sc = categories.find(c => c.selected);
+        return sc
+            ? {
+                items: {
+                    id: sc.id,
+                    text: sc.primary
+                }
+            }
+            : undefined;
+    }, [categories]);
+    return (<Popover ref={ref} target={target} style={{ width: '40ch' }} placement='bottom-start'>
+        <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>
+          <Text variant='h3'>Details</Text>
+
+          <Flex container={{ direction: 'column', gap: 2 }}>
+            <Input label='Name' placeholder='Enter name…' value={name} info={error} status={error ? 'error' : undefined} autoFocus required onChange={(e) => {
+            setName(e.target.value);
+            if (error && e.target.value) {
+                setError('');
+            }
+        }} onBlur={() => {
+            if (!name) {
+                setError('Name is required.');
+            }
+        }}/>
+            <ComboBox label='Category' placeholder='Choose…' selected={selectedCategory} menu={{
+            mode: 'single-select',
+            items: categories,
+            onItemClick: id => {
+                setCategories(cur => {
+                    return cur.map(category => {
+                        return {
+                            ...category,
+                            selected: category.id === id
+                        };
+                    });
+                });
+            }
+        }}/>
+          </Flex>
+
+          <Flex container={{ justify: 'between' }}>
+            <Button onClick={onCancel}>Cancel</Button>
+            <Button variant='primary' onClick={() => {
+            if (error)
+                return;
+            onSubmit({
+                name,
+                category: !selectedCategory || selectedCategory.items.text === 'No category'
+                    ? ''
+                    : selectedCategory.items.text
+            });
+        }}>
+              Submit
+            </Button>
+          </Flex>
+        </Flex>
+      </Popover>);
+});
+const AttachmentsModal = ({ defaultMode }) => {
+    const [mode, setMode] = useState(defaultMode);
+    const { push: pushToaster } = useContext(ToasterContext);
+    const { ModalContext } = useContext(ModalManagerContext);
+    const { dismiss } = useContext(ModalContext);
+    const { files, setFiles, cancelFile, attachFile, deleteFile } = useContext(FileServiceContext);
+    const [search, setSearch] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [newFiles, setNewFiles] = useState([]);
+    const attachSelected = useCallback(() => {
+        newFiles.forEach(attachFile);
+        dismiss();
+    }, [newFiles, attachFile]);
+    const listItemEls = useRef([]);
+    const [editFileIndex, setEditFileIndex] = useState(-1);
+    const editPopoverTargetLi = useMemo(() => {
+        return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;
+    }, [editFileIndex, listItemEls]);
+    const menuButton = useMemo(() => editPopoverTargetLi
+        ? editPopoverTargetLi.querySelector('button[aria-haspopup="menu"]')
+        : null, [editPopoverTargetLi]);
+    const handlePopoverClose = useCallback(() => {
+        if (!editPopoverTargetLi)
+            return;
+        setEditFileIndex(-1);
+        menuButton?.focus();
+    }, [menuButton, editPopoverTargetLi]);
+    const handleKeydown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            setEditFileIndex(-1);
+        }
+    }, []);
+    const editPopoverRef = useRef(null);
+    useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);
+    useEffect(() => {
+        if (mode === 'viewAll') {
+            const timeout = setTimeout(() => {
+                setLoading(false);
+            }, 1000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [mode]);
+    useEffect(() => {
+        if (!editPopoverTargetLi)
+            return;
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [editPopoverTargetLi]);
+    useEffect(() => {
+        listItemEls.current = [];
+    }, [mode]);
+    const onFilesAdded = useCallback((newlyAddedFiles) => {
+        setNewFiles(current => [
+            ...newlyAddedFiles.map((file, i) => {
+                const id = createUID();
+                return {
+                    id,
+                    name: file.name,
+                    category: '',
+                    File: file,
+                    ref: (el) => {
+                        listItemEls.current[i] = el;
+                    },
+                    onEdit: () => {
+                        setEditFileIndex(i);
+                    },
+                    onCancel: () => {
+                        setNewFiles(c => c.filter(f => f.id !== id));
+                    }
+                };
+            }),
+            ...current
+        ]);
+    }, [files]);
+    const actions = mode === 'addNew' ? (<>
+        <Button onClick={dismiss}>Cancel</Button>
+        <Button type='submit' variant='primary' onClick={attachSelected} disabled={newFiles.length === 0}>
+          Attach Files
+        </Button>
+      </>) : null;
+    const content = mode === 'addNew' ? (<FileInput multiple label='Select files to attach' onFilesAdded={onFilesAdded} files={newFiles.map(f => ({ ...f, meta: f.category || undefined }))}/>) : (<ViewAll loading={loading} items={(search ? files.filter(f => f.name.includes(search)) : files).map((file, i) => {
+            return getSummaryListItemProps({
+                ref: (el) => {
+                    listItemEls.current[i] = el;
+                },
+                file,
+                editFile: () => {
+                    setEditFileIndex(i);
+                },
+                cancelFile: id => {
+                    const canceledFile = files.find(f => f.id === id);
+                    cancelFile(id);
+                    pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });
+                },
+                deleteFile: async (id) => {
+                    const deletedFile = files.find(f => f.id === id);
+                    await deleteFile(id);
+                    pushToaster({ content: `${deletedFile.name} deleted` });
+                }
+            });
+        })} actions={[
+            {
+                id: 'addNewFile',
+                text: 'Add files',
+                onClick: () => {
+                    setMode('addNew');
+                }
+            },
+            {
+                id: 'addNewLink',
+                text: 'Add links',
+                onClick: () => {
+                    setMode('addNew');
+                }
+            }
+        ]} searchInputProps={{ onSearchChange: value => setSearch(value) }}/>);
+    return (<Modal as={mode === 'addNew' ? 'form' : undefined} heading={mode === 'addNew' ? 'Add attachments' : 'Attachments'} actions={actions} onRequestDismiss={() => {
+            return !editPopoverTargetLi;
+        }} onSubmit={mode === 'addNew'
+            ? (e) => {
+                e.preventDefault();
+            }
+            : undefined}>
+      <>
+        {content}
+        {editPopoverTargetLi && (<EditPopover ref={editPopoverRef} target={menuButton} file={mode === 'addNew' ? newFiles[editFileIndex] : files[editFileIndex]} onCancel={handlePopoverClose} onSubmit={({ name, category }) => {
+                handlePopoverClose();
+                if (mode === 'addNew') {
+                    setNewFiles(cur => {
+                        return cur.map((file, i) => {
+                            if (i === editFileIndex) {
+                                return {
+                                    ...file,
+                                    name,
+                                    category
+                                };
+                            }
+                            return file;
+                        });
+                    });
+                }
+                else {
+                    setFiles(cur => cur.map((file, i) => {
+                        if (i === editFileIndex) {
+                            return {
+                                ...file,
+                                name,
+                                category
+                            };
+                        }
+                        return file;
+                    }));
+                }
+            }}/>)}
+      </>
+    </Modal>);
+};
+export const AttachmentsMock = () => {
+    const { push: pushToaster } = useContext(ToasterContext);
+    const { create: createModal } = useContext(ModalManagerContext);
+    const [loading, setLoading] = useState(true);
+    const { files, setFiles, cancelFile, deleteFile } = useContext(FileServiceContext);
+    const listItemEls = useRef([]);
+    const [editFileIndex, setEditFileIndex] = useState(-1);
+    const editPopoverTargetLi = useMemo(() => {
+        return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;
+    }, [editFileIndex, listItemEls]);
+    const menuButton = useMemo(() => editPopoverTargetLi
+        ? editPopoverTargetLi.querySelector('button[aria-haspopup="menu"]')
+        : null, [editPopoverTargetLi]);
+    const handlePopoverClose = useCallback(() => {
+        if (!editPopoverTargetLi)
+            return;
+        setEditFileIndex(-1);
+        menuButton?.focus();
+    }, [menuButton, editPopoverTargetLi]);
+    const handleKeydown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            setEditFileIndex(-1);
+        }
+    }, []);
+    const editPopoverRef = useRef(null);
+    useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);
+    useEffect(() => {
+        mockAttachmentListRequest().then(attachments => {
+            setLoading(false);
+            setFiles(attachments);
+        });
+    }, []);
+    useEffect(() => {
+        if (!editPopoverTargetLi)
+            return;
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [editPopoverTargetLi]);
+    return (<>
+      <SummaryList icon='paper-clip' name='Attachments' loading={loading} count={!loading && Array.isArray(files) ? files.length : undefined} actions={[
+            {
+                text: 'Add attachments',
+                id: 'addNew',
+                icon: 'plus',
+                onClick() {
+                    createModal(AttachmentsModal, { defaultMode: 'addNew' });
+                }
+            }
+        ]} items={files.slice(0, 3).map((file, i) => {
+            return getSummaryListItemProps({
+                ref: (el) => {
+                    listItemEls.current[i] = el;
+                },
+                file,
+                editFile: () => {
+                    setEditFileIndex(i);
+                },
+                cancelFile: id => {
+                    const canceledFile = files.find(f => f.id === id);
+                    cancelFile(id);
+                    pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });
+                },
+                deleteFile: async (id) => {
+                    const deletedFile = files.find(f => f.id === id);
+                    await deleteFile(id);
+                    pushToaster({ content: `${deletedFile.name} deleted` });
+                }
+            });
+        })} onViewAll={() => {
+            createModal(AttachmentsModal, { defaultMode: 'viewAll' });
+        }}/>
+      {editPopoverTargetLi && (<EditPopover ref={editPopoverRef} target={menuButton} file={files[editFileIndex]} onCancel={handlePopoverClose} onSubmit={({ name, category }) => {
+                handlePopoverClose();
+                setFiles(cur => cur.map((file, i) => {
+                    if (i === editFileIndex) {
+                        return {
+                            ...file,
+                            name,
+                            category
+                        };
+                    }
+                    return file;
+                }));
+            }}/>)}
+    </>);
+};
+//# sourceMappingURL=Attachments.mocks.jsx.map