@pega/cosmos-react-demos 4.0.0-dev.9.1 → 4.0.0

package/jsx/work/ArticleList/ArticleList.stories.jsx

@@ -0,0 +1,313 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { createUID, menuHelpers, registerIcon, escapeRegExp } 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';
+export default {
+    title: 'Work/ArticleList',
+    component: ArticleList,
+    subcomponents: { ArticleSummary, ArticleListFilter },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);
+export const ArticleListDemo = (args) => {
+    const [searchVal, setSearchVal] = useState('');
+    const [activeTab, setActiveTab] = useState('Suggested');
+    const [loading, setLoading] = useState(false);
+    const [categoryList, setCategoryList] = useState([]);
+    const [sortBy, setSortBy] = useState([]);
+    const [articles, setArticles] = useState([]);
+    const [quickFilters, setQuickFilters] = useState([]);
+    const [loadingMore, isSetLoadMore] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [filterCategoryValue, setFilterCategoryValue] = useState('');
+    const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);
+    const selectSortByOption = useCallback((id) => {
+        setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const selectedCategory = useMemo(() => {
+        return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));
+    }, [categoryList]);
+    const categoryListToRender = useMemo(() => {
+        return menuHelpers.mapTree(categoryList, item => ({
+            ...item,
+            selected: !!item.selected
+        }));
+    }, [categoryList]);
+    const toggleItem = (id) => {
+        setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    const handleTabChange = (id) => {
+        setSearchVal('');
+        setActiveTab(id);
+        if (id !== 'Search') {
+            setQuickFilters([]);
+        }
+    };
+    const updateArticles = (mockArticles) => {
+        return mockArticles.map(({ isLiked = false, isFollowed = false, articleId = '', title, href = '/', abstract, meta, quickFilters: quickFilterTags }) => {
+            const actionObj = [{ id: '1', text: 'Edit' }];
+            if (isLiked) {
+                actionObj.push({ id: '3', text: 'Dislike' });
+            }
+            else {
+                actionObj.push({ id: '3', text: 'Like' });
+            }
+            if (isFollowed) {
+                actionObj.push({ id: '4', text: 'Unfollow' });
+            }
+            else {
+                actionObj.push({ id: '4', text: 'Follow' });
+            }
+            return {
+                articleId,
+                href,
+                title,
+                abstract,
+                onTitleClick: (id, e) => {
+                    e?.preventDefault();
+                },
+                primaryActions: actionObj,
+                meta,
+                quickFilters: args.showQuickFilters && quickFilterTags?.length
+                    ? quickFilterTags?.map(({ id, name }) => {
+                        return {
+                            id,
+                            name
+                        };
+                    })
+                    : []
+            };
+        });
+    };
+    const fetchArticleContent = () => {
+        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;
+            setTimeout(() => {
+                if (activeTabContent) {
+                    resolve({
+                        articles: updateArticles(activeTabContent.articles),
+                        category: activeTabContent.category || [],
+                        sortBy: activeTabContent.sortBy || []
+                    });
+                }
+            }, 1000);
+        });
+    };
+    useEffect(() => {
+        setLoading(true);
+        fetchArticleContent().then(res => {
+            setArticles(res.articles);
+            setCategoryList(res.category);
+            setSortBy(res.sortBy);
+            setLoading(false);
+        });
+    }, [activeTab, quickFilters, args.showQuickFilters]);
+    const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);
+    const categoryProps = {
+        label: 'Category',
+        placeholder: 'Select categories',
+        onChange: e => {
+            setFilterCategoryValue(e.target.value);
+        },
+        value: filterCategoryValue,
+        mode: 'multi-select',
+        selected: {
+            items: selectedCategory,
+            onRemove: toggleItem
+        },
+        menu: {
+            items: filterCategoryValue
+                ? menuHelpers.flatten(categoryList).filter(({ primary }) => {
+                    return filterRegex.toLowerCase().includes(primary.toLowerCase());
+                })
+                : categoryListToRender,
+            onItemClick: toggleItem
+        }
+    };
+    const sortByProps = {
+        label: 'Sort by',
+        placeholder: 'Select sort by',
+        selected: selectedSortByOption
+            ? {
+                items: {
+                    id: selectedSortByOption.id,
+                    text: selectedSortByOption.primary
+                }
+            }
+            : undefined,
+        menu: {
+            items: sortBy,
+            onItemClick: selectSortByOption
+        }
+    };
+    const searchOptions = {
+        placeholder: 'Search article',
+        filters: ['Help site 1', 'Help site 2', 'Help site 3'],
+        value: searchVal,
+        onSearchChange: (val) => {
+            setSearchVal(val);
+        },
+        onFilterChange: (val) => {
+            return val;
+        }
+    };
+    const actionOptions = [
+        {
+            id: '1',
+            text: 'Action 1',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        },
+        {
+            id: '2',
+            text: 'Action 2',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        },
+        {
+            id: '3',
+            text: 'Action 3',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        }
+    ];
+    const suggestNewArticleAction = {
+        id: 'Suggest action',
+        text: 'Suggest action',
+        onClick: (id) => action('onClick')(id),
+        icon: 'plus'
+    };
+    let actions;
+    if (args.showAction) {
+        if (args.isSuggestArticleAction) {
+            actions = [suggestNewArticleAction];
+        }
+        else {
+            actions = actionOptions;
+        }
+    }
+    const handleClearClick = () => {
+        setQuickFilters([]);
+        setSearchVal('');
+        setCategoryList(curr => {
+            return curr?.map(categoryListItem => {
+                return {
+                    ...categoryListItem,
+                    selected: false
+                };
+            });
+        });
+        setSortBy(curr => {
+            return curr?.map(sortByListItem => {
+                return {
+                    ...sortByListItem,
+                    selected: false
+                };
+            });
+        });
+    };
+    let timeoutId;
+    const stopTimeout = () => {
+        clearTimeout(timeoutId);
+    };
+    const onLoadMore = useCallback(() => {
+        if (!loading && !loadingMore && activeTab) {
+            isSetLoadMore(true);
+            setLoading(false);
+            timeoutId = setTimeout(() => {
+                isSetLoadMore(false);
+                setLoading(false);
+                setHasMore(true);
+                setArticles(prevArticles => [
+                    ...prevArticles,
+                    {
+                        articleId: createUID(),
+                        title: 'Last article alert!!!',
+                        href: 'design.pega.com',
+                        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 }
+                        },
+                        isFollowed: false,
+                        isLiked: true,
+                        quickFilters: [
+                            { id: '1', name: 'insurance' },
+                            { id: '2', name: 'policy' }
+                        ]
+                    }
+                ]);
+            }, 3000);
+        }
+    }, [loading, loadingMore, activeTab]);
+    useEffect(() => {
+        return () => stopTimeout();
+    }, []);
+    return (<div style={{
+            width: '25rem',
+            height: '80vh'
+        }}>
+      <ArticleList header={args.showHeader
+            ? {
+                title: 'Knowledge articles',
+                icon: args.showHeaderIcon ? 'book-open' : '',
+                actions
+            }
+            : undefined} activeTab={activeTab} onTabClick={handleTabChange} skeletonize={false} suggested={{
+            count: args.showCount ? suggestedMock.count : undefined,
+            articles
+        }} followed={{
+            count: args.showCount ? followedMock.count : undefined,
+            articles,
+            searchInput: searchOptions,
+            category: categoryProps,
+            sortBy: sortByProps,
+            onClearClick: handleClearClick,
+            showResults: args.showResults
+        }} search={{
+            count: args.showCount ? searchMock.count : undefined,
+            articles,
+            searchInput: searchOptions,
+            category: categoryProps,
+            sortBy: sortByProps,
+            onClearClick: handleClearClick,
+            quickFilters,
+            handleQuickFilterRemove: (id) => {
+                setQuickFilters(quickFilters.filter(item => item.id !== id));
+            },
+            showResults: args.showResults
+        }} onQuickFilterClick={(quickFilterParam) => {
+            handleTabChange('Search');
+            setQuickFilters([...quickFilters, quickFilterParam]);
+        }} loading={loading} loadingMore={loadingMore} onLoadMore={hasMore ? onLoadMore : undefined}/>
+    </div>);
+};
+ArticleListDemo.args = {
+    isSuggestArticleAction: true,
+    showAction: true,
+    showHeader: true,
+    showHeaderIcon: true,
+    showQuickFilters: true,
+    showCount: true,
+    showResults: true
+};
+ArticleListDemo.argTypes = {
+    isSuggestArticleAction: { control: { type: 'boolean' } },
+    showAction: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } },
+    showHeaderIcon: { control: { type: 'boolean' } },
+    showQuickFilters: { control: { type: 'boolean' } },
+    showCount: { control: { type: 'boolean' } },
+    showResults: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=ArticleList.stories.jsx.map

package/jsx/work/ArticleList/ArticleList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.stories.jsx","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"]}

package/jsx/work/Assignments/Assignments.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import type { AssignmentsProps } from '@pega/cosmos-react-work';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface AssignmentsStoryProps {
+    collapsed?: boolean;
+    count?: AssignmentsProps['count'];
+    openableTasks?: boolean;
+}
+export declare const AssignmentsDemo: StoryFn<AssignmentsStoryProps>;
+//# sourceMappingURL=Assignments.stories.d.ts.map

package/jsx/work/Assignments/Assignments.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Assignments/Assignments.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,MAAM,yBAAyB,CAAC;;AAK/E,wBAGU;AAEV,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CAqE1D,CAAC"}

package/jsx/work/Assignments/Assignments.stories.jsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { MetaList, Text, Link, DateTimeDisplay, Avatar } from '@pega/cosmos-react-core';
+import { Assignments, tasksHelpers as helpers } from '@pega/cosmos-react-work';
+import { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';
+import viewGroups from '../Tasks/Tasks.mocks';
+export default {
+    title: 'Work/Assignments',
+    component: Assignments
+};
+export const AssignmentsDemo = (args) => {
+    const [hasOpenTask, setHasOpenTask] = useState(false);
+    const [open, setOpen] = useState(true);
+    const activeView = helpers.getSelectedView(viewGroups);
+    const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
+    const taskArray = Array.from({
+        length: args.count ?? activeViewTaskCount
+    }, (_, i) => {
+        const dueIn = 86400000 * i;
+        return {
+            id: `${i}`,
+            name: `Task ${i + 1}`,
+            processName: i % 2 ? 'Demo process' : undefined,
+            avatar: !hasOpenTask && <Avatar name='James Gregory'/>,
+            meta: !hasOpenTask && (<MetaList items={[
+                    <Text variant='secondary'>
+                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn}/>
+              </Text>,
+                    <Link href='#demo'>Parent case link</Link>
+                ]}/>),
+            additionalActions: [
+                {
+                    id: '1',
+                    text: 'Action 1'
+                },
+                {
+                    id: '2',
+                    text: 'Action 2'
+                }
+            ],
+            onOpen: args.openableTasks !== false
+                ? () => {
+                    setHasOpenTask(true);
+                }
+                : undefined,
+            content: hasOpenTask ? (<AIButtonFormDemo onCancel={() => setHasOpenTask(false)} onSubmit={() => setHasOpenTask(false)}/>) : null
+        };
+    });
+    return (<Assignments count={activeViewTaskCount} items={taskArray} collapsed={args.collapsed !== false ? open : undefined} onToggleCollapsed={args.collapsed !== false
+            ? () => {
+                setOpen(cur => !cur);
+            }
+            : undefined}/>);
+};
+AssignmentsDemo.args = {
+    openableTasks: true,
+    count: undefined,
+    collapsed: true
+};
+AssignmentsDemo.argTypes = {
+    count: { control: { type: 'number' } },
+    openableTasks: { control: { type: 'boolean' } },
+    collapsed: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Assignments.stories.jsx.map

package/jsx/work/Assignments/Assignments.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.stories.jsx","sourceRoot":"","sources":["../../../src/work/Assignments/Assignments.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MetaList, Text, Link, DateTimeDisplay, Avatar } from '@pega/cosmos-react-core';\nimport { Assignments, tasksHelpers as helpers } from '@pega/cosmos-react-work';\nimport type { AssignmentsProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nimport { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';\nimport viewGroups from '../Tasks/Tasks.mocks';\n\nexport default {\n  title: 'Work/Assignments',\n  component: Assignments\n} as Meta;\n\ninterface AssignmentsStoryProps {\n  collapsed?: boolean;\n  count?: AssignmentsProps['count'];\n  openableTasks?: boolean;\n}\n\nexport const AssignmentsDemo: StoryFn<AssignmentsStoryProps> = (args: AssignmentsStoryProps) => {\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const activeView = helpers.getSelectedView(viewGroups);\n  const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n  const taskArray: TaskItemProps[] = Array.from(\n    {\n      length: args.count ?? activeViewTaskCount\n    },\n    (_, i) => {\n      const dueIn = 86400000 * i;\n\n      return {\n        id: `${i}`,\n        name: `Task ${i + 1}`,\n        processName: i % 2 ? 'Demo process' : undefined,\n        avatar: !hasOpenTask && <Avatar name='James Gregory' />,\n        meta: !hasOpenTask && (\n          <MetaList\n            items={[\n              <Text variant='secondary'>\n                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n              </Text>,\n              <Link href='#demo'>Parent case link</Link>\n            ]}\n          />\n        ),\n        additionalActions: [\n          {\n            id: '1',\n            text: 'Action 1'\n          },\n          {\n            id: '2',\n            text: 'Action 2'\n          }\n        ],\n        onOpen:\n          args.openableTasks !== false\n            ? () => {\n                setHasOpenTask(true);\n              }\n            : undefined,\n        content: hasOpenTask ? (\n          <AIButtonFormDemo\n            onCancel={() => setHasOpenTask(false)}\n            onSubmit={() => setHasOpenTask(false)}\n          />\n        ) : null\n      };\n    }\n  );\n\n  return (\n    <Assignments\n      count={activeViewTaskCount}\n      items={taskArray}\n      collapsed={args.collapsed !== false ? open : undefined}\n      onToggleCollapsed={\n        args.collapsed !== false\n          ? () => {\n              setOpen(cur => !cur);\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAssignmentsDemo.args = {\n  openableTasks: true,\n  count: undefined,\n  collapsed: true\n};\n\nAssignmentsDemo.argTypes = {\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } },\n  collapsed: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/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":";AA4fA,eAAO,MAAM,eAAe,mBAyH3B,CAAC"}
+{"version":3,"file":"Attachments.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":";AAggBA,eAAO,MAAM,eAAe,mBAkI3B,CAAC"}