@pega/cosmos-react-demos 5.0.0-dev.1.0 → 5.0.0-dev.10.0

package/lib/work/ArticleList/ArticleList.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { createUID, menuHelpers, registerIcon, escapeRegExp } from '@pega/cosmos-react-core';
+import { createUID, menuHelpers, registerIcon, escapeRegExp, HTML } from '@pega/cosmos-react-core';
 import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
 import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
 import * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';
 import { ArticleList, ArticleSummary, ArticleListFilter } from '@pega/cosmos-react-work';
-import { suggestedMock, followedMock, searchMock } from './ArticleList.mocks';
+import { suggestedMock, followedMock, searchMock, ArticleBuddyMockData } from './ArticleList.mocks';
 export default {
     title: 'Work/ArticleList',
     component: ArticleList,
@@ -27,6 +27,8 @@ export const ArticleListDemo = (args) => {
     const [loadingMore, isSetLoadMore] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const [filterCategoryValue, setFilterCategoryValue] = useState('');
+    const [buddyContent, setBuddyContent] = useState();
+    const [buddyLoader, setBuddyLoader] = useState(false);
     const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);
     const selectSortByOption = useCallback((id) => {
         setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));
@@ -43,15 +45,46 @@ export const ArticleListDemo = (args) => {
     const toggleItem = (id) => {
         setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
     };
-    const handleTabChange = (id) => {
-        setSearchVal('');
-        setActiveTab(id);
-        if (id !== 'Search') {
-            setQuickFilters([]);
-        }
+    const onReaction = (articleId, reaction) => {
+        setArticles(prevArticles => {
+            const itemIndex = prevArticles.findIndex(article => article?.articleId === articleId);
+            const updatedData = [...prevArticles];
+            if (itemIndex !== -1) {
+                const currentItemFeedback = updatedData[itemIndex].feedback;
+                if (currentItemFeedback) {
+                    const likeValue = currentItemFeedback?.likes || 0;
+                    const dislikeValue = currentItemFeedback?.dislikes || 0;
+                    if (!reaction) {
+                        if (currentItemFeedback.reaction === 'liked') {
+                            currentItemFeedback.likes = likeValue - 1;
+                        }
+                        else {
+                            currentItemFeedback.dislikes = dislikeValue - 1;
+                        }
+                        currentItemFeedback.reaction = undefined;
+                    }
+                    if (reaction === 'liked') {
+                        if (currentItemFeedback?.reaction === 'disliked') {
+                            currentItemFeedback.dislikes = dislikeValue - 1;
+                        }
+                        currentItemFeedback.likes = likeValue + 1;
+                        currentItemFeedback.reaction = 'liked';
+                    }
+                    if (reaction === 'disliked') {
+                        if (currentItemFeedback.reaction === 'liked') {
+                            currentItemFeedback.likes = likeValue - 1;
+                        }
+                        currentItemFeedback.dislikes = dislikeValue + 1;
+                        currentItemFeedback.reaction = 'disliked';
+                    }
+                }
+            }
+            return updatedData;
+        });
     };
     const updateArticles = (mockArticles) => {
-        return mockArticles.map(({ isLiked = false, isFollowed = false, articleId = '', title, href = '/', abstract, meta, quickFilters: quickFilterTags }) => {
+        const data = Object.values(mockArticles);
+        return data.map(({ isLiked = false, isFollowed = false, articleId = '', title, href = '/', abstract, meta, feedback, quickFilters: quickFilterTags }) => {
             const actionObj = [{ id: '1', text: 'Edit' }];
             if (isLiked) {
                 actionObj.push({ id: '3', text: 'Dislike' });
@@ -75,6 +108,7 @@ export const ArticleListDemo = (args) => {
                 },
                 primaryActions: actionObj,
                 meta,
+                feedback,
                 quickFilters: args.showQuickFilters && quickFilterTags?.length
                     ? quickFilterTags?.map(({ id, name }) => {
                         return {
@@ -86,15 +120,15 @@ export const ArticleListDemo = (args) => {
             };
         });
     };
-    const fetchArticleContent = () => {
+    const fetchArticleContent = activeTabName => {
         return new Promise(resolve => {
             let activeTabContent = null;
-            if (!activeTab || activeTab === 'Search')
-                activeTabContent = searchMock;
-            else if (activeTab === 'Suggested')
-                activeTabContent = suggestedMock;
-            else if (activeTab === 'Followed')
-                activeTabContent = followedMock;
+            if (!activeTabName || activeTabName === 'Search')
+                activeTabContent = { ...searchMock };
+            else if (activeTabName === 'Suggested')
+                activeTabContent = { ...suggestedMock };
+            else if (activeTabName === 'Followed')
+                activeTabContent = { ...followedMock };
             setTimeout(() => {
                 if (activeTabContent) {
                     resolve({
@@ -103,18 +137,62 @@ export const ArticleListDemo = (args) => {
                         sortBy: activeTabContent.sortBy || []
                     });
                 }
-            }, 1000);
+            }, 500);
         });
     };
-    useEffect(() => {
+    searchMock.articles = searchMock.articles.map(article => {
+        return {
+            ...article,
+            feedback: {
+                ...article.feedback,
+                id: article.articleId,
+                onReaction
+            }
+        };
+    });
+    suggestedMock.articles = suggestedMock.articles.map(article => {
+        return {
+            ...article,
+            feedback: {
+                ...article.feedback,
+                id: article.articleId,
+                onReaction
+            }
+        };
+    });
+    followedMock.articles = followedMock.articles.map(article => {
+        return {
+            ...article,
+            feedback: {
+                ...article.feedback,
+                id: article.articleId,
+                onReaction
+            }
+        };
+    });
+    const handleTabChange = (id) => {
+        setArticles([]);
+        setCategoryList([]);
         setLoading(true);
-        fetchArticleContent().then(res => {
+        fetchArticleContent(id).then(res => {
             setArticles(res.articles);
             setCategoryList(res.category);
             setSortBy(res.sortBy);
             setLoading(false);
         });
-    }, [activeTab, quickFilters, args.showQuickFilters]);
+        setActiveTab(id);
+        setSearchVal('');
+        if (id !== 'Search') {
+            setQuickFilters([]);
+        }
+    };
+    useEffect(() => {
+        setLoading(true);
+        fetchArticleContent(activeTab).then(res => {
+            setLoading(false);
+            setArticles(res.articles);
+        });
+    }, [activeTab]);
     const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);
     const categoryProps = {
         label: 'Category',
@@ -125,8 +203,7 @@ export const ArticleListDemo = (args) => {
         value: filterCategoryValue,
         mode: 'multi-select',
         selected: {
-            items: selectedCategory,
-            onRemove: toggleItem
+            items: selectedCategory
         },
         menu: {
             items: filterCategoryValue
@@ -237,8 +314,15 @@ export const ArticleListDemo = (args) => {
                         abstract: 'Last article alert. This is the last article , hence the last index to be noted. This will be appended at the end of the list',
                         meta: {
                             category: 'Retail',
-                            publishedDate: '2023-04-06',
-                            feedback: { likes: 47, dislikes: 15 }
+                            publishedDate: '2023-04-06'
+                        },
+                        feedback: {
+                            articleId: createUID(),
+                            likes: 20,
+                            dislikes: 80,
+                            liked: true,
+                            disliked: false,
+                            onReaction: () => { }
                         },
                         isFollowed: false,
                         isLiked: true,
@@ -254,9 +338,41 @@ export const ArticleListDemo = (args) => {
     useEffect(() => {
         return () => stopTimeout();
     }, []);
+    const updateBuddyArticles = (mockBuddyArticle) => {
+        const actionItems = [
+            { id: '1', text: 'Share' },
+            { id: '2', text: 'Copy' }
+        ];
+        return {
+            title: mockBuddyArticle.title,
+            content: mockBuddyArticle.content,
+            references: mockBuddyArticle.references,
+            disclaimer: mockBuddyArticle.disclaimer,
+            actions: actionItems
+        };
+    };
+    const fetchBuddySearchResult = () => {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve({
+                    data: updateBuddyArticles(ArticleBuddyMockData)
+                });
+            }, 1000);
+        });
+    };
+    const getBuddyResults = async () => {
+        setBuddyLoader(true);
+        const res = await fetchBuddySearchResult();
+        setBuddyContent(res.data);
+        setBuddyLoader(false);
+    };
+    const buddyQuery = {
+        placeholder: 'Ask your question here...',
+        value: searchVal,
+        onChange: (e) => setSearchVal(e.target.value)
+    };
     return (_jsx("div", { style: {
-            width: '25rem',
-            height: '80vh'
+            width: '25rem'
         }, children: _jsx(ArticleList, { header: args.showHeader
                 ? {
                     title: 'Knowledge articles',
@@ -265,10 +381,46 @@ export const ArticleListDemo = (args) => {
                 }
                 : undefined, activeTab: activeTab, onTabClick: handleTabChange, skeletonize: false, suggested: {
                 count: args.showCount ? suggestedMock.count : undefined,
-                articles
+                articles: articles.map(article => {
+                    if (!article.feedback ||
+                        article.feedback.likes === undefined ||
+                        article.feedback.dislikes === undefined) {
+                        return article;
+                    }
+                    const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    return {
+                        ...article,
+                        feedback: {
+                            ...article.feedback,
+                            likes: likesValue,
+                            dislikes: disLikeValue
+                        }
+                    };
+                })
             }, followed: {
                 count: args.showCount ? followedMock.count : undefined,
-                articles,
+                articles: articles.map(article => {
+                    if (!article.feedback ||
+                        article.feedback.likes === undefined ||
+                        article.feedback.dislikes === undefined) {
+                        return article;
+                    }
+                    const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    return {
+                        ...article,
+                        feedback: {
+                            ...article.feedback,
+                            likes: likesValue,
+                            dislikes: disLikeValue
+                        }
+                    };
+                }),
                 searchInput: searchOptions,
                 category: categoryProps,
                 sortBy: sortByProps,
@@ -276,7 +428,25 @@ export const ArticleListDemo = (args) => {
                 showResults: args.showResults
             }, search: {
                 count: args.showCount ? searchMock.count : undefined,
-                articles,
+                articles: articles.map(article => {
+                    if (!article.feedback ||
+                        article.feedback.likes === undefined ||
+                        article.feedback.dislikes === undefined) {
+                        return article;
+                    }
+                    const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
+                        article.feedback.dislikes;
+                    return {
+                        ...article,
+                        feedback: {
+                            ...article.feedback,
+                            likes: likesValue,
+                            dislikes: disLikeValue
+                        }
+                    };
+                }),
                 searchInput: searchOptions,
                 category: categoryProps,
                 sortBy: sortByProps,
@@ -286,10 +456,25 @@ export const ArticleListDemo = (args) => {
                     setQuickFilters(quickFilters.filter(item => item.id !== id));
                 },
                 showResults: args.showResults
+            }, buddy: {
+                title: 'Ask buddy',
+                content: {
+                    query: buddyQuery,
+                    onSubmit: getBuddyResults,
+                    onClear: () => {
+                        setSearchVal('');
+                    },
+                    title: buddyContent?.title ?? '',
+                    actions: buddyContent?.actions ?? [],
+                    content: buddyContent?.content ? (_jsx(HTML, { content: ArticleBuddyMockData.content })) : (buddyContent?.content),
+                    references: buddyContent?.references,
+                    disclaimer: ArticleBuddyMockData.disclaimer,
+                    loading: buddyLoader
+                }
             }, onQuickFilterClick: (quickFilterParam) => {
                 handleTabChange('Search');
                 setQuickFilters([...quickFilters, quickFilterParam]);
-            }, loading: loading, loadingMore: loadingMore, onLoadMore: hasMore ? onLoadMore : undefined }) }));
+            }, loading: loading, loadingMore: loadingMore, onLoadMore: args.showLoadMore && hasMore ? onLoadMore : undefined }) }));
 };
 ArticleListDemo.args = {
     isSuggestArticleAction: true,
@@ -298,7 +483,8 @@ ArticleListDemo.args = {
     showHeaderIcon: true,
     showQuickFilters: true,
     showCount: true,
-    showResults: true
+    showResults: true,
+    showLoadMore: false
 };
 ArticleListDemo.argTypes = {
     isSuggestArticleAction: { control: { type: 'boolean' } },
@@ -307,6 +493,7 @@ ArticleListDemo.argTypes = {
     showHeaderIcon: { control: { type: 'boolean' } },
     showQuickFilters: { control: { type: 'boolean' } },
     showCount: { control: { type: 'boolean' } },
-    showResults: { control: { type: 'boolean' } }
+    showResults: { control: { type: 'boolean' } },
+    showLoadMore: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=ArticleList.stories.js.map

package/lib/work/ArticleList/ArticleList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/work/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MouseEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Action,\n  createUID,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  registerIcon,\n  SearchInputProps,\n  escapeRegExp\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';\nimport {\n  ArticleList,\n  ArticleSummary,\n  ArticleListFilter,\n  ArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from '@pega/cosmos-react-work';\n\nimport { suggestedMock, followedMock, searchMock } from './ArticleList.mocks';\n\nexport default {\n  title: 'Work/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListFilter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);\n\ninterface ArticleListDemoProps {\n  isSuggestArticleAction: boolean;\n  showAction: boolean;\n  showHeader: boolean;\n  showHeaderIcon: boolean;\n  showQuickFilters: boolean;\n  showCount: boolean;\n  showResults: boolean;\n}\n\ntype MockArticles = ArticleSummaryProps & {\n  isLiked: boolean;\n  isFollowed: boolean;\n};\n\nexport const ArticleListDemo: StoryFn<ArticleListDemoProps> = (args: ArticleListDemoProps) => {\n  const [searchVal, setSearchVal] = useState('');\n  const [activeTab, setActiveTab] = useState('Suggested');\n  const [loading, setLoading] = useState(false);\n  const [categoryList, setCategoryList] = useState<MenuProps['items']>([]);\n  const [sortBy, setSortBy] = useState<MenuProps['items']>([]);\n  const [articles, setArticles] = useState<ArticleSummaryProps[]>([]);\n  const [quickFilters, setQuickFilters] = useState<QuickFilter[]>([]);\n  const [loadingMore, isSetLoadMore] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [filterCategoryValue, setFilterCategoryValue] = useState('');\n\n  const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);\n\n  const selectSortByOption = useCallback((id: MenuItemProps['id']) => {\n    setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const selectedCategory = useMemo(() => {\n    return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));\n  }, [categoryList]);\n\n  const categoryListToRender = useMemo(() => {\n    return menuHelpers.mapTree(categoryList, item => ({\n      ...item,\n      selected: !!item.selected\n    }));\n  }, [categoryList]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const handleTabChange = (id: string) => {\n    setSearchVal('');\n    setActiveTab(id);\n    if (id !== 'Search') {\n      setQuickFilters([]);\n    }\n  };\n\n  const updateArticles = (mockArticles: MockArticles[]) => {\n    return mockArticles.map(\n      ({\n        isLiked = false,\n        isFollowed = false,\n        articleId = '',\n        title,\n        href = '/',\n        abstract,\n        meta,\n        quickFilters: quickFilterTags\n      }) => {\n        const actionObj = [{ id: '1', text: 'Edit' }];\n        if (isLiked) {\n          actionObj.push({ id: '3', text: 'Dislike' });\n        } else {\n          actionObj.push({ id: '3', text: 'Like' });\n        }\n        if (isFollowed) {\n          actionObj.push({ id: '4', text: 'Unfollow' });\n        } else {\n          actionObj.push({ id: '4', text: 'Follow' });\n        }\n        return {\n          articleId,\n          href,\n          title,\n          abstract,\n          onTitleClick: (id?: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            e?.preventDefault();\n          },\n          primaryActions: actionObj,\n          meta,\n          quickFilters:\n            args.showQuickFilters && quickFilterTags?.length\n              ? quickFilterTags?.map(({ id, name }) => {\n                  return {\n                    id,\n                    name\n                  };\n                })\n              : []\n        };\n      }\n    );\n  };\n\n  const fetchArticleContent: () => Promise<{\n    articles: ArticleSummaryProps[];\n    category: MenuProps['items'];\n    sortBy: MenuProps['items'];\n  }> = () => {\n    return new Promise(resolve => {\n      let activeTabContent: {\n        articles: MockArticles[];\n        category?: MenuProps['items'];\n        sortBy?: MenuProps['items'];\n      } | null = null;\n      if (!activeTab || activeTab === 'Search') activeTabContent = searchMock;\n      else if (activeTab === 'Suggested') activeTabContent = suggestedMock;\n      else if (activeTab === 'Followed') activeTabContent = followedMock;\n\n      setTimeout(() => {\n        if (activeTabContent) {\n          resolve({\n            articles: updateArticles(activeTabContent.articles),\n            category: activeTabContent.category || [],\n            sortBy: activeTabContent.sortBy || []\n          });\n        }\n      }, 1000);\n    });\n  };\n\n  useEffect(() => {\n    setLoading(true);\n    fetchArticleContent().then(res => {\n      setArticles(res.articles);\n      setCategoryList(res.category);\n      setSortBy(res.sortBy);\n      setLoading(false);\n    });\n  }, [activeTab, quickFilters, args.showQuickFilters]);\n\n  const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);\n\n  const categoryProps: Articles['category'] = {\n    label: 'Category',\n    placeholder: 'Select categories',\n    onChange: e => {\n      setFilterCategoryValue(e.target.value);\n    },\n    value: filterCategoryValue,\n    mode: 'multi-select',\n    selected: {\n      items: selectedCategory,\n      onRemove: toggleItem\n    },\n    menu: {\n      items: filterCategoryValue\n        ? menuHelpers.flatten(categoryList).filter(({ primary }: MenuItemProps) => {\n            return filterRegex.toLowerCase().includes(primary.toLowerCase());\n          })\n        : categoryListToRender,\n      onItemClick: toggleItem\n    }\n  };\n\n  const sortByProps: Articles['sortBy'] = {\n    label: 'Sort by',\n    placeholder: 'Select sort by',\n    selected: selectedSortByOption\n      ? {\n          items: {\n            id: selectedSortByOption.id,\n            text: selectedSortByOption.primary\n          }\n        }\n      : undefined,\n    menu: {\n      items: sortBy,\n      onItemClick: selectSortByOption\n    }\n  };\n\n  const searchOptions: SearchInputProps = {\n    placeholder: 'Search article',\n    filters: ['Help site 1', 'Help site 2', 'Help site 3'],\n    value: searchVal,\n    onSearchChange: (val: string) => {\n      setSearchVal(val);\n    },\n    onFilterChange: (val: string) => {\n      return val;\n    }\n  };\n\n  const actionOptions = [\n    {\n      id: '1',\n      text: 'Action 1',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '2',\n      text: 'Action 2',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '3',\n      text: 'Action 3',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    }\n  ];\n\n  const suggestNewArticleAction: Action = {\n    id: 'Suggest action',\n    text: 'Suggest action',\n    onClick: (id: string) => action('onClick')(id),\n    icon: 'plus'\n  };\n\n  let actions;\n  if (args.showAction) {\n    if (args.isSuggestArticleAction) {\n      actions = [suggestNewArticleAction];\n    } else {\n      actions = actionOptions;\n    }\n  }\n\n  const handleClearClick = () => {\n    setQuickFilters([]);\n    setSearchVal('');\n    setCategoryList(curr => {\n      return curr?.map(categoryListItem => {\n        return {\n          ...categoryListItem,\n          selected: false\n        };\n      });\n    });\n    setSortBy(curr => {\n      return curr?.map(sortByListItem => {\n        return {\n          ...sortByListItem,\n          selected: false\n        };\n      });\n    });\n  };\n\n  let timeoutId: ReturnType<typeof setTimeout>;\n  const stopTimeout = () => {\n    clearTimeout(timeoutId);\n  };\n  const onLoadMore = useCallback(() => {\n    if (!loading && !loadingMore && activeTab) {\n      isSetLoadMore(true);\n      setLoading(false);\n      timeoutId = setTimeout(() => {\n        isSetLoadMore(false);\n        setLoading(false);\n        setHasMore(true);\n        setArticles(prevArticles => [\n          ...prevArticles,\n          {\n            articleId: createUID(),\n            title: 'Last article alert!!!',\n            href: 'design.pega.com',\n            abstract:\n              'Last article alert. This is the last article , hence the last index to be noted. This will be appended at the end of the list',\n            meta: {\n              category: 'Retail',\n              publishedDate: '2023-04-06',\n              feedback: { likes: 47, dislikes: 15 }\n            },\n            isFollowed: false,\n            isLiked: true,\n            quickFilters: [\n              { id: '1', name: 'insurance' },\n              { id: '2', name: 'policy' }\n            ]\n          }\n        ]);\n      }, 3000);\n    }\n  }, [loading, loadingMore, activeTab]);\n\n  useEffect(() => {\n    return () => stopTimeout();\n  }, []);\n  return (\n    <div\n      style={{\n        width: '25rem',\n        height: '80vh'\n      }}\n    >\n      <ArticleList\n        header={\n          args.showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: args.showHeaderIcon ? 'book-open' : '',\n                actions\n              }\n            : undefined\n        }\n        activeTab={activeTab}\n        onTabClick={handleTabChange}\n        skeletonize={false}\n        suggested={{\n          count: args.showCount ? suggestedMock.count : undefined,\n          articles\n        }}\n        followed={{\n          count: args.showCount ? followedMock.count : undefined,\n          articles,\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          showResults: args.showResults\n        }}\n        search={{\n          count: args.showCount ? searchMock.count : undefined,\n          articles,\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          quickFilters,\n          handleQuickFilterRemove: (id: string) => {\n            setQuickFilters(quickFilters.filter(item => item.id !== id));\n          },\n          showResults: args.showResults\n        }}\n        onQuickFilterClick={(quickFilterParam: QuickFilter) => {\n          handleTabChange('Search');\n          setQuickFilters([...quickFilters, quickFilterParam]);\n        }}\n        loading={loading}\n        loadingMore={loadingMore}\n        onLoadMore={hasMore ? onLoadMore : undefined}\n      />\n    </div>\n  );\n};\n\nArticleListDemo.args = {\n  isSuggestArticleAction: true,\n  showAction: true,\n  showHeader: true,\n  showHeaderIcon: true,\n  showQuickFilters: true,\n  showCount: true,\n  showResults: true\n};\n\nArticleListDemo.argTypes = {\n  isSuggestArticleAction: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  showHeader: { control: { type: 'boolean' } },\n  showHeaderIcon: { control: { type: 'boolean' } },\n  showQuickFilters: { control: { type: 'boolean' } },\n  showCount: { control: { type: 'boolean' } },\n  showResults: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/work/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MouseEvent, ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { createUID, menuHelpers, registerIcon, escapeRegExp, HTML } from '@pega/cosmos-react-core';\nimport type {\n  Action,\n  MenuItemProps,\n  MenuProps,\n  SearchInputProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';\nimport { ArticleList, ArticleSummary, ArticleListFilter } from '@pega/cosmos-react-work';\nimport type {\n  ArticleSummaryProps,\n  Articles,\n  QuickFilter,\n  ArticleBuddyProps\n} from '@pega/cosmos-react-work';\n\nimport { suggestedMock, followedMock, searchMock, ArticleBuddyMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Work/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListFilter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);\n\ninterface ArticleListDemoProps {\n  isSuggestArticleAction: boolean;\n  showAction: boolean;\n  showHeader: boolean;\n  showHeaderIcon: boolean;\n  showQuickFilters: boolean;\n  showCount: boolean;\n  showResults: boolean;\n  showLoadMore: boolean;\n}\n\ntype MockArticles = ArticleSummaryProps & {\n  isLiked: boolean;\n  isFollowed: boolean;\n};\n\ntype MockBuddyArticles = OmitStrict<\n  ArticleBuddyProps,\n  'query' | 'loading' | 'onSubmit' | 'onClear'\n>;\n\nexport const ArticleListDemo: StoryFn<ArticleListDemoProps> = (args: ArticleListDemoProps) => {\n  const [searchVal, setSearchVal] = useState('');\n  const [activeTab, setActiveTab] = useState('Suggested');\n  const [loading, setLoading] = useState(false);\n  const [categoryList, setCategoryList] = useState<MenuProps['items']>([]);\n  const [sortBy, setSortBy] = useState<MenuProps['items']>([]);\n  const [articles, setArticles] = useState<ArticleSummaryProps[]>([]);\n  const [quickFilters, setQuickFilters] = useState<QuickFilter[]>([]);\n  const [loadingMore, isSetLoadMore] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [filterCategoryValue, setFilterCategoryValue] = useState('');\n  const [buddyContent, setBuddyContent] = useState<MockBuddyArticles>();\n  const [buddyLoader, setBuddyLoader] = useState(false);\n\n  const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);\n\n  const selectSortByOption = useCallback((id: MenuItemProps['id']) => {\n    setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const selectedCategory = useMemo(() => {\n    return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));\n  }, [categoryList]);\n\n  const categoryListToRender = useMemo(() => {\n    return menuHelpers.mapTree(categoryList, item => ({\n      ...item,\n      selected: !!item.selected\n    }));\n  }, [categoryList]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const onReaction: Required<ArticleSummaryProps>['feedback']['onReaction'] = (\n    articleId,\n    reaction\n  ) => {\n    setArticles(prevArticles => {\n      const itemIndex = prevArticles.findIndex(article => article?.articleId === articleId);\n      const updatedData = [...prevArticles];\n      if (itemIndex !== -1) {\n        const currentItemFeedback = updatedData[itemIndex].feedback;\n        if (currentItemFeedback) {\n          const likeValue = currentItemFeedback?.likes || 0;\n          const dislikeValue = currentItemFeedback?.dislikes || 0;\n\n          if (!reaction) {\n            if (currentItemFeedback.reaction === 'liked') {\n              currentItemFeedback.likes = likeValue - 1;\n            } else {\n              currentItemFeedback.dislikes = dislikeValue - 1;\n            }\n            currentItemFeedback.reaction = undefined;\n          }\n\n          if (reaction === 'liked') {\n            if (currentItemFeedback?.reaction === 'disliked') {\n              currentItemFeedback.dislikes = dislikeValue - 1;\n            }\n\n            currentItemFeedback.likes = likeValue + 1;\n            currentItemFeedback.reaction = 'liked';\n          }\n\n          if (reaction === 'disliked') {\n            if (currentItemFeedback.reaction === 'liked') {\n              currentItemFeedback.likes = likeValue - 1;\n            }\n            currentItemFeedback.dislikes = dislikeValue + 1;\n            currentItemFeedback.reaction = 'disliked';\n          }\n        }\n      }\n\n      return updatedData;\n    });\n  };\n\n  const updateArticles = (mockArticles: MockArticles[]) => {\n    const data = Object.values(mockArticles);\n    return data.map(\n      ({\n        isLiked = false,\n        isFollowed = false,\n        articleId = '',\n        title,\n        href = '/',\n        abstract,\n        meta,\n        feedback,\n        quickFilters: quickFilterTags\n      }) => {\n        const actionObj = [{ id: '1', text: 'Edit' }];\n        if (isLiked) {\n          actionObj.push({ id: '3', text: 'Dislike' });\n        } else {\n          actionObj.push({ id: '3', text: 'Like' });\n        }\n        if (isFollowed) {\n          actionObj.push({ id: '4', text: 'Unfollow' });\n        } else {\n          actionObj.push({ id: '4', text: 'Follow' });\n        }\n\n        return {\n          articleId,\n          href,\n          title,\n          abstract,\n          onTitleClick: (id?: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            e?.preventDefault();\n          },\n          primaryActions: actionObj,\n          meta,\n          feedback,\n          quickFilters:\n            args.showQuickFilters && quickFilterTags?.length\n              ? quickFilterTags?.map(({ id, name }) => {\n                  return {\n                    id,\n                    name\n                  };\n                })\n              : []\n        };\n      }\n    );\n  };\n\n  const fetchArticleContent: (activeTabName: string) => Promise<{\n    articles: ArticleSummaryProps[];\n    category: MenuProps['items'];\n    sortBy: MenuProps['items'];\n  }> = activeTabName => {\n    return new Promise(resolve => {\n      let activeTabContent: any = null;\n\n      if (!activeTabName || activeTabName === 'Search') activeTabContent = { ...searchMock };\n      else if (activeTabName === 'Suggested') activeTabContent = { ...suggestedMock };\n      else if (activeTabName === 'Followed') activeTabContent = { ...followedMock };\n\n      setTimeout(() => {\n        if (activeTabContent) {\n          resolve({\n            articles: updateArticles(activeTabContent.articles),\n            category: activeTabContent.category || [],\n            sortBy: activeTabContent.sortBy || []\n          });\n        }\n      }, 500);\n    });\n  };\n\n  searchMock.articles = searchMock.articles.map(article => {\n    return {\n      ...article,\n      feedback: {\n        ...article.feedback,\n        id: article.articleId,\n        onReaction\n      }\n    };\n  });\n\n  suggestedMock.articles = suggestedMock.articles.map(article => {\n    return {\n      ...article,\n      feedback: {\n        ...article.feedback,\n        id: article.articleId,\n        onReaction\n      }\n    };\n  });\n\n  followedMock.articles = followedMock.articles.map(article => {\n    return {\n      ...article,\n      feedback: {\n        ...article.feedback,\n        id: article.articleId,\n        onReaction\n      }\n    };\n  });\n\n  const handleTabChange = (id: string) => {\n    setArticles([]);\n    setCategoryList([]);\n    setLoading(true);\n    fetchArticleContent(id).then(res => {\n      setArticles(res.articles);\n      setCategoryList(res.category);\n      setSortBy(res.sortBy);\n      setLoading(false);\n    });\n\n    setActiveTab(id);\n    setSearchVal('');\n    if (id !== 'Search') {\n      setQuickFilters([]);\n    }\n  };\n\n  useEffect(() => {\n    setLoading(true);\n    fetchArticleContent(activeTab).then(res => {\n      setLoading(false);\n      setArticles(res.articles);\n    });\n  }, [activeTab]);\n\n  const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);\n\n  const categoryProps: Articles['category'] = {\n    label: 'Category',\n    placeholder: 'Select categories',\n    onChange: e => {\n      setFilterCategoryValue(e.target.value);\n    },\n    value: filterCategoryValue,\n    mode: 'multi-select',\n    selected: {\n      items: selectedCategory\n    },\n    menu: {\n      items: filterCategoryValue\n        ? menuHelpers.flatten(categoryList).filter(({ primary }: MenuItemProps) => {\n            return filterRegex.toLowerCase().includes(primary.toLowerCase());\n          })\n        : categoryListToRender,\n      onItemClick: toggleItem\n    }\n  };\n\n  const sortByProps: Articles['sortBy'] = {\n    label: 'Sort by',\n    placeholder: 'Select sort by',\n    selected: selectedSortByOption\n      ? {\n          items: {\n            id: selectedSortByOption.id,\n            text: selectedSortByOption.primary\n          }\n        }\n      : undefined,\n    menu: {\n      items: sortBy,\n      onItemClick: selectSortByOption\n    }\n  };\n\n  const searchOptions: SearchInputProps = {\n    placeholder: 'Search article',\n    filters: ['Help site 1', 'Help site 2', 'Help site 3'],\n    value: searchVal,\n    onSearchChange: (val: string) => {\n      setSearchVal(val);\n    },\n    onFilterChange: (val: string) => {\n      return val;\n    }\n  };\n\n  const actionOptions = [\n    {\n      id: '1',\n      text: 'Action 1',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '2',\n      text: 'Action 2',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '3',\n      text: 'Action 3',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    }\n  ];\n\n  const suggestNewArticleAction: Action = {\n    id: 'Suggest action',\n    text: 'Suggest action',\n    onClick: (id: string) => action('onClick')(id),\n    icon: 'plus'\n  };\n\n  let actions;\n  if (args.showAction) {\n    if (args.isSuggestArticleAction) {\n      actions = [suggestNewArticleAction];\n    } else {\n      actions = actionOptions;\n    }\n  }\n\n  const handleClearClick = () => {\n    setQuickFilters([]);\n    setSearchVal('');\n    setCategoryList(curr => {\n      return curr?.map(categoryListItem => {\n        return {\n          ...categoryListItem,\n          selected: false\n        };\n      });\n    });\n    setSortBy(curr => {\n      return curr?.map(sortByListItem => {\n        return {\n          ...sortByListItem,\n          selected: false\n        };\n      });\n    });\n  };\n\n  let timeoutId: ReturnType<typeof setTimeout>;\n  const stopTimeout = () => {\n    clearTimeout(timeoutId);\n  };\n\n  const onLoadMore = useCallback(() => {\n    if (!loading && !loadingMore && activeTab) {\n      isSetLoadMore(true);\n      setLoading(false);\n      timeoutId = setTimeout(() => {\n        isSetLoadMore(false);\n        setLoading(false);\n        setHasMore(true);\n        setArticles(prevArticles => [\n          ...prevArticles,\n          {\n            articleId: createUID(),\n            title: 'Last article alert!!!',\n            href: 'design.pega.com',\n            abstract:\n              'Last article alert. This is the last article , hence the last index to be noted. This will be appended at the end of the list',\n            meta: {\n              category: 'Retail',\n              publishedDate: '2023-04-06'\n            },\n            feedback: {\n              articleId: createUID(),\n              likes: 20,\n              dislikes: 80,\n              liked: true,\n              disliked: false,\n              onReaction: () => {}\n            },\n            isFollowed: false,\n            isLiked: true,\n            quickFilters: [\n              { id: '1', name: 'insurance' },\n              { id: '2', name: 'policy' }\n            ]\n          }\n        ]);\n      }, 3000);\n    }\n  }, [loading, loadingMore, activeTab]);\n\n  useEffect(() => {\n    return () => stopTimeout();\n  }, []);\n\n  const updateBuddyArticles = (mockBuddyArticle: MockBuddyArticles) => {\n    const actionItems = [\n      { id: '1', text: 'Share' },\n      { id: '2', text: 'Copy' }\n    ];\n\n    return {\n      title: mockBuddyArticle.title,\n      content: mockBuddyArticle.content,\n      references: mockBuddyArticle.references,\n      disclaimer: mockBuddyArticle.disclaimer,\n      actions: actionItems\n    };\n  };\n\n  const fetchBuddySearchResult: () => Promise<{\n    data: MockBuddyArticles;\n  }> = () => {\n    return new Promise(resolve => {\n      setTimeout(() => {\n        resolve({\n          data: updateBuddyArticles(ArticleBuddyMockData)\n        });\n      }, 1000);\n    });\n  };\n\n  const getBuddyResults = async () => {\n    setBuddyLoader(true);\n    const res = await fetchBuddySearchResult();\n    setBuddyContent(res.data);\n    setBuddyLoader(false);\n  };\n\n  const buddyQuery: ArticleBuddyProps['query'] = {\n    placeholder: 'Ask your question here...',\n    value: searchVal,\n    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => setSearchVal(e.target.value)\n  };\n\n  return (\n    <div\n      style={{\n        width: '25rem'\n      }}\n    >\n      <ArticleList\n        header={\n          args.showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: args.showHeaderIcon ? 'book-open' : '',\n                actions\n              }\n            : undefined\n        }\n        activeTab={activeTab}\n        onTabClick={handleTabChange}\n        skeletonize={false}\n        suggested={{\n          count: args.showCount ? suggestedMock.count : undefined,\n          articles: articles.map(article => {\n            if (\n              !article.feedback ||\n              article.feedback.likes === undefined ||\n              article.feedback.dislikes === undefined\n            ) {\n              return article;\n            }\n\n            const likesValue =\n              (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            const disLikeValue =\n              (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            return {\n              ...article,\n              feedback: {\n                ...article.feedback,\n                likes: likesValue,\n\n                dislikes: disLikeValue\n              }\n            };\n          })\n        }}\n        followed={{\n          count: args.showCount ? followedMock.count : undefined,\n          articles: articles.map(article => {\n            if (\n              !article.feedback ||\n              article.feedback.likes === undefined ||\n              article.feedback.dislikes === undefined\n            ) {\n              return article;\n            }\n\n            const likesValue =\n              (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            const disLikeValue =\n              (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            return {\n              ...article,\n              feedback: {\n                ...article.feedback,\n                likes: likesValue,\n\n                dislikes: disLikeValue\n              }\n            };\n          }),\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          showResults: args.showResults\n        }}\n        search={{\n          count: args.showCount ? searchMock.count : undefined,\n          articles: articles.map(article => {\n            if (\n              !article.feedback ||\n              article.feedback.likes === undefined ||\n              article.feedback.dislikes === undefined\n            ) {\n              return article;\n            }\n\n            const likesValue =\n              (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            const disLikeValue =\n              (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +\n              article.feedback.dislikes;\n            return {\n              ...article,\n              feedback: {\n                ...article.feedback,\n                likes: likesValue,\n\n                dislikes: disLikeValue\n              }\n            };\n          }),\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          quickFilters,\n          handleQuickFilterRemove: (id: string) => {\n            setQuickFilters(quickFilters.filter(item => item.id !== id));\n          },\n          showResults: args.showResults\n        }}\n        buddy={{\n          title: 'Ask buddy',\n          content: {\n            query: buddyQuery,\n            onSubmit: getBuddyResults,\n            onClear: () => {\n              setSearchVal('');\n            },\n            title: buddyContent?.title ?? '',\n            actions: buddyContent?.actions ?? [],\n            content: buddyContent?.content ? (\n              <HTML content={ArticleBuddyMockData.content} />\n            ) : (\n              buddyContent?.content\n            ),\n            references: buddyContent?.references,\n            disclaimer: ArticleBuddyMockData.disclaimer,\n            loading: buddyLoader\n          }\n        }}\n        onQuickFilterClick={(quickFilterParam: QuickFilter) => {\n          handleTabChange('Search');\n          setQuickFilters([...quickFilters, quickFilterParam]);\n        }}\n        loading={loading}\n        loadingMore={loadingMore}\n        onLoadMore={args.showLoadMore && hasMore ? onLoadMore : undefined}\n      />\n    </div>\n  );\n};\n\nArticleListDemo.args = {\n  isSuggestArticleAction: true,\n  showAction: true,\n  showHeader: true,\n  showHeaderIcon: true,\n  showQuickFilters: true,\n  showCount: true,\n  showResults: true,\n  showLoadMore: false\n};\n\nArticleListDemo.argTypes = {\n  isSuggestArticleAction: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  showHeader: { control: { type: 'boolean' } },\n  showHeaderIcon: { control: { type: 'boolean' } },\n  showQuickFilters: { control: { type: 'boolean' } },\n  showCount: { control: { type: 'boolean' } },\n  showResults: { control: { type: 'boolean' } },\n  showLoadMore: { control: { type: 'boolean' } }\n};\n"]}

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

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useCallback, useContext, useEffect, useRef, useMemo, forwardRef } from 'react';
 import { Button, FileInput, FileVisual, Progress, Modal, Text, SummaryList, ViewAll, getKindFromMimeType, getMimeTypeFromFile, Flex, Input, ComboBox, createUID, useModalManager, useModalContext, useToaster, DateTimeDisplay, MetaList, FormDialog } from '@pega/cosmos-react-core';
 import { loadingTimeoutMS } from '../../core/Progress/Progress.mocks';
-import { FileServiceContext, mockAttachmentListRequest, mockCategories } from './FileService.mock';
+import { FileServiceContext, mockAttachmentListRequest, mockCategories } from '../../core/File/FileService.mock';
 // ---------------------------------------------------------------------------------------------------------------------
 // getSummaryListItemProps
 // ---------------------------------------------------------------------------------------------------------------------