@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/jsx/work/SearchResults/SearchResults.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.stories.jsx","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState, useMemo, useRef } from 'react';\n\nimport { Status, Text } from '@pega/cosmos-react-core';\nimport type { OmitStrict } from '@pega/cosmos-react-core';\nimport { CasePreview, SearchResults } from '@pega/cosmos-react-work';\nimport type { SearchResultsProps, FilterEvent, SearchResultProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\nimport { ColoredText } from './SearchResults.styles';\n\nexport default {\n  title: 'Work/SearchResults',\n  component: SearchResults,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\ninterface SearchResultsStoryProps {\n  withAppShell?: boolean;\n  loading?: boolean;\n}\n\nexport const SearchResultsDemo: StoryFn<SearchResultsStoryProps> = (\n  args: SearchResultsStoryProps\n) => {\n  const [preview, setPreview] = useState<undefined | ResultMeta>();\n  const [previewTabId, setPreviewTabId] = useState<undefined | string>();\n  const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);\n  const [results, setResults] = useState(initialResults);\n  const [filters, setFilters] = useState(initialFilters);\n  const [search, setSearch] = useState('');\n  const [limit, setLimit] = useState(2);\n  const [searchLoading, setSearchLoading] = useState(false);\n  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n\n  const getActiveFilters = () => {\n    return filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              groupName: group.name\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n  };\n\n  const getResults = (\n    searchStr: string,\n    activeFilters: { groupName: string; name: string; id: string }[]\n  ) => {\n    const filteredResults = initialResults.filter(result => {\n      const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;\n      const lastUpdatedFilterActive =\n        activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;\n\n      let matchesStatusFilter = !statusFilterActive;\n      let matchesLastUpdatedFilter = !lastUpdatedFilterActive;\n\n      activeFilters.forEach(filter => {\n        result.meta?.forEach(tag => {\n          if (tag) {\n            if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {\n              matchesStatusFilter = true;\n            }\n            if (\n              !matchesLastUpdatedFilter &&\n              filter.groupName === 'Last updated' &&\n              typeof tag === 'string' &&\n              ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||\n                (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||\n                (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||\n                (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))\n            ) {\n              matchesLastUpdatedFilter = true;\n            }\n          }\n        });\n      });\n\n      return matchesStatusFilter && matchesLastUpdatedFilter;\n    });\n\n    return filteredResults.filter(result => {\n      return (\n        result &&\n        (result.description?.toLowerCase().includes(searchStr.toLowerCase()) ||\n          result.title.toLowerCase().includes(searchStr.toLowerCase()) ||\n          result.id.toLowerCase().includes(searchStr.toLowerCase()))\n      );\n    });\n  };\n\n  useEffect(() => {\n    const activeFilters = getActiveFilters();\n\n    if (activeFilters.length > 0 || search !== '') {\n      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n      setSearchLoading(true);\n      searchTimeoutRef.current = setTimeout(() => {\n        setResults(getResults(search, activeFilters));\n        setSearchLoading(false);\n      }, 1500);\n    } else {\n      setResults([]);\n    }\n\n    return () => {\n      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n    };\n  }, [filters]);\n\n  const handleSearchSubmit = (value: string) => {\n    if (searchTimeoutRef?.current) clearTimeout(searchTimeoutRef?.current);\n    setSearchLoading(true);\n    searchTimeoutRef.current = setTimeout(() => {\n      setResults(getResults(value, getActiveFilters()));\n      setSearchLoading(false);\n    }, 1500);\n  };\n\n  const handleFilterChange = (changeEvent: FilterEvent) => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        const newFilter = { ...filter };\n        if (\n          newFilter.name === changeEvent.name &&\n          changeEvent.type === 'select' &&\n          newFilter.type === 'select'\n        ) {\n          newFilter.items = newFilter.items.map(item => {\n            const newItem = { ...item };\n            if (item.id === changeEvent.value.id) newItem.checked = changeEvent.value.checked;\n            else if (newFilter.selectType === 'single-select') newItem.checked = false;\n            return newItem;\n          });\n        }\n        return newFilter;\n      });\n    });\n  };\n\n  const clearAllFilters = () => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        if (filter.type === 'select') {\n          filter.items = filter.items.map(item => {\n            item.checked = false;\n            return item;\n          });\n        }\n        return filter;\n      });\n    });\n  };\n\n  const handleClearFilter = (filterName: string) => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        if (filter.name === filterName && filter.type === 'select') {\n          filter.items = filter.items.map(item => {\n            item.checked = false;\n            return item;\n          });\n        }\n        return filter;\n      });\n    });\n  };\n\n  const handleShowMore = () => {\n    if (limit < results.length) setLimit(curr => curr + 2);\n  };\n\n  const renderForDisplay = (\n    resultsToDisplay: SearchResultsProps['results']\n  ): SearchResultsProps['results'] => {\n    return resultsToDisplay.map(result => {\n      if (result.meta) {\n        const metaValues = [...result.meta];\n        const renderedMeta = metaValues.map(item => {\n          if (!Number.isNaN(Date.parse(item as string))) {\n            if (\n              Date.parse(item as string) >= Date.parse('12/01/20') &&\n              Date.parse(item as string) < Date.parse('12/25/20')\n            )\n              return 'Updated 1 month ago';\n            if (\n              Date.parse(item as string) >= Date.parse('12/25/20') &&\n              Date.parse(item as string) < Date.parse('12/31/20')\n            )\n              return 'Updated 1 week ago';\n            if (\n              Date.parse(item as string) >= Date.parse('12/31/20') &&\n              Date.parse(item as string) < Date.parse('01/01/21')\n            )\n              return 'Updated yesterday';\n            if (\n              Date.parse(item as string) >= Date.parse('01/01/21') &&\n              Date.parse(item as string) < Date.parse('01/01/21 07:00:00')\n            )\n              return 'Updated today';\n            return 'Updated just now';\n          }\n          switch (item) {\n            case 'Completed':\n              return <Status variant='success'>Completed</Status>;\n            case 'Ready':\n              return <Status variant='info'>Ready</Status>;\n            case 'Pending':\n              return <Status variant='pending'>Pending</Status>;\n            case 'Blocked':\n              return <Status variant='urgent'>Blocked</Status>;\n            case 'Low priority':\n              return <Text variant='secondary'>Low priority</Text>;\n            case 'Medium priority':\n              return (\n                <Text as={ColoredText} colorVariant='warn' variant='secondary'>\n                  Medium priority\n                </Text>\n              );\n            case 'High priority':\n              return (\n                <Text as={ColoredText} colorVariant='urgent' variant='secondary'>\n                  High priority\n                </Text>\n              );\n            default:\n              return item;\n          }\n        });\n        return { ...result, meta: renderedMeta };\n      }\n      return result;\n    });\n  };\n\n  const searchResults = (\n    <>\n      <SearchResults\n        results={\n          limit < results.length\n            ? renderForDisplay(results.slice(0, limit))\n            : renderForDisplay(results)\n        }\n        searchInputProps={{\n          value: search,\n          onSearchChange: setSearch,\n          onSearchSubmit: handleSearchSubmit,\n          searchInputAriaLabel: 'Search'\n        }}\n        count={results.length}\n        filters={filters}\n        onFilterChange={handleFilterChange}\n        onClearAllFilters={clearAllFilters}\n        onClearFilter={handleClearFilter}\n        onShowMore={limit < results.length ? handleShowMore : undefined}\n        loading={searchLoading}\n      />\n\n      <CasePreview\n        open={!!preview}\n        caseId={preview?.id || ''}\n        heading={preview?.title || ''}\n        tabs={{\n          items: [],\n          currentTabId: previewTabId || '',\n          onClick: (id: string) => setPreviewTabId(id)\n        }}\n        followed\n        summaryFields={{\n          secondary: [\n            {\n              name: 'Target Release',\n              value: '1.0.0'\n            },\n            {\n              name: 'Team',\n              value: 'Scrum Team A'\n            },\n            {\n              name: 'Description',\n              value: preview?.description,\n              variant: 'stacked'\n            }\n          ]\n        }}\n        onBeforeClose={() => {\n          setPreview(undefined);\n        }}\n      />\n    </>\n  );\n\n  return args.withAppShell ? (\n    <AppShellDemo appHeader main={searchResults} searchPage />\n  ) : (\n    searchResults\n  );\n};\n\nSearchResultsDemo.args = {\n  withAppShell: false\n};\n\nSearchResultsDemo.argTypes = {\n  withAppShell: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/SearchResults/SearchResults.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledSearchResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColoredText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    colorVariant: 'warn' | 'urgent';
+}, never>;
+//# sourceMappingURL=SearchResults.styles.d.ts.map

package/jsx/work/SearchResults/SearchResults.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAEF,eAAO,MAAM,WAAW;kBAA+B,MAAM,GAAG,QAAQ;SAWvE,CAAC"}

package/jsx/work/SearchResults/SearchResults.styles.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div `
+  height: 100vh;
+`;
+export const ColoredText = styled.span(({ colorVariant, theme: { base: { palette } } }) => {
+    return css `
+      color: ${palette[colorVariant]};
+    `;
+});
+ColoredText.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SearchResults.styles.js.map

package/jsx/work/SearchResults/SearchResults.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CACpC,CAAC,EACC,YAAY,EACZ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,OAAO,CAAC,YAAY,CAAC;KAC/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n  height: 100vh;\n`;\n\nexport const ColoredText = styled.span<{ colorVariant: 'warn' | 'urgent' }>(\n  ({\n    colorVariant,\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      color: ${palette[colorVariant]};\n    `;\n  }\n);\n\nColoredText.defaultProps = defaultThemeProp;\n"]}

package/jsx/work/Stages/Stages.mocks.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const defaultStageNames: string[];
+export declare const createStages: (stageNames: string[], current: number) => {
+    name: string;
+    id: string;
+    date: Date | undefined;
+    completed: boolean;
+}[];
+export declare const getSteps: (currentStageIndex: number, stageIndex: number) => {
+    name: string | import("react").JSX.Element;
+    completed: boolean;
+    id: string;
+}[];
+//# sourceMappingURL=Stages.mocks.d.ts.map

package/jsx/work/Stages/Stages.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Stages/Stages.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,iBAAiB,UAO7B,CAAC;AAEF,eAAO,MAAM,YAAY,eAAgB,MAAM,EAAE,WAAW,MAAM;;;;;GAajE,CAAC;AAEF,eAAO,MAAM,QAAQ,sBAAuB,MAAM,cAAc,MAAM;;;;GAcrE,CAAC"}

package/jsx/work/Stages/Stages.mocks.jsx

@@ -0,0 +1,40 @@
+import { Link } from '@pega/cosmos-react-core';
+export const defaultStageNames = [
+    'Initiate',
+    'Identify customer',
+    'Eligibility',
+    'Intake',
+    'Process requests',
+    'Merge'
+];
+export const createStages = (stageNames, current) => {
+    const now = new Date();
+    return stageNames.map((stageName, i) => {
+        const stageDate = new Date(now);
+        const completed = i + 1 <= current;
+        if (completed)
+            stageDate.setDate(now.getDate() + i - current);
+        return {
+            name: stageName,
+            id: `stage-${i + 1}`,
+            date: completed || i + 1 === current ? stageDate : undefined,
+            completed
+        };
+    });
+};
+export const getSteps = (currentStageIndex, stageIndex) => {
+    return [
+        'First step',
+        'Second step that contains much more text to demonstrate overflow handling',
+        <Link href='https://www.pega.com' target='_blank'>
+      Steps can be links as well
+    </Link>
+    ].map((step, i) => {
+        return {
+            name: step,
+            completed: stageIndex < currentStageIndex || (stageIndex === currentStageIndex && i === 0),
+            id: `step-${i + 1}`
+        };
+    });
+};
+//# sourceMappingURL=Stages.mocks.jsx.map

package/jsx/work/Stages/Stages.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.mocks.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,UAAU;IACV,mBAAmB;IACnB,aAAa;IACb,QAAQ;IACR,kBAAkB;IAClB,OAAO;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,UAAoB,EAAE,OAAe,EAAE,EAAE;IACpE,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC;QACnC,IAAI,SAAS;YAAE,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;QAC9D,OAAO;YACL,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,EAAE,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC5D,SAAS;SACV,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,iBAAyB,EAAE,UAAkB,EAAE,EAAE;IACxE,OAAO;QACL,YAAY;QACZ,2EAA2E;QAC3E,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;IACF,EAAE,IAAI,CAAC;KACR,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;QAChB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,UAAU,GAAG,iBAAiB,IAAI,CAAC,UAAU,KAAK,iBAAiB,IAAI,CAAC,KAAK,CAAC,CAAC;YAC1F,EAAE,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;SACpB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { Link } from '@pega/cosmos-react-core';\n\nexport const defaultStageNames = [\n  'Initiate',\n  'Identify customer',\n  'Eligibility',\n  'Intake',\n  'Process requests',\n  'Merge'\n];\n\nexport const createStages = (stageNames: string[], current: number) => {\n  const now = new Date();\n  return stageNames.map((stageName, i) => {\n    const stageDate = new Date(now);\n    const completed = i + 1 <= current;\n    if (completed) stageDate.setDate(now.getDate() + i - current);\n    return {\n      name: stageName,\n      id: `stage-${i + 1}`,\n      date: completed || i + 1 === current ? stageDate : undefined,\n      completed\n    };\n  });\n};\n\nexport const getSteps = (currentStageIndex: number, stageIndex: number) => {\n  return [\n    'First step',\n    'Second step that contains much more text to demonstrate overflow handling',\n    <Link href='https://www.pega.com' target='_blank'>\n      Steps can be links as well\n    </Link>\n  ].map((step, i) => {\n    return {\n      name: step,\n      completed: stageIndex < currentStageIndex || (stageIndex === currentStageIndex && i === 0),\n      id: `step-${i + 1}`\n    };\n  });\n};\n"]}

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

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import type { StagesProps } 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 StagesStoryProps {
+    caseTitle?: StagesProps['caseTitle'];
+    stageNames?: string[];
+    currentStage?: number;
+}
+export declare const StagesDemo: StoryFn<StagesStoryProps>;
+//# sourceMappingURL=Stages.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAI3D,wBAMU;AAEV,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAoChD,CAAC"}

package/jsx/work/Stages/Stages.stories.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'react';
+import { Stages } from '@pega/cosmos-react-work';
+import { defaultStageNames as stageNames, createStages, getSteps } from './Stages.mocks';
+export default {
+    title: 'Work/Stages',
+    component: Stages,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const StagesDemo = (args) => {
+    const [stages, setStages] = useState(createStages(args.stageNames ?? stageNames, args.currentStage ?? 0));
+    const timerRef = useRef();
+    const mountedRef = useRef(false);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return (<Stages stages={stages} current={`stage-${args.currentStage}`} caseTitle={args.caseTitle} onLoadStage={ids => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+                if (mountedRef.current) {
+                    setStages(prevStages => {
+                        return prevStages.map((stage, i) => {
+                            return ids.includes(stage.id)
+                                ? { ...stage, steps: getSteps((args.currentStage ?? 0) - 1, i) }
+                                : stage;
+                        });
+                    });
+                }
+            }, 1500);
+        }}/>);
+};
+StagesDemo.args = {
+    caseTitle: 'Demo',
+    currentStage: 3
+};
+StagesDemo.argTypes = {
+    caseTitle: { control: { type: 'text' } },
+    currentStage: { control: { type: 'number' } }
+};
+//# sourceMappingURL=Stages.stories.jsx.map

package/jsx/work/Stages/Stages.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,OAAO,EAAE,iBAAiB,IAAI,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,IAAsB,EAAE,EAAE;IAC9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,YAAY,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,EAAE,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CACpE,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,EAAiC,CAAC;IAEzD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,MAAM,CACL,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC,CACtC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,WAAW,CAAC,CAAC,GAAG,CAAC,EAAE;YACjB,IAAI,QAAQ,CAAC,OAAO;gBAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACrD,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACjC,IAAI,UAAU,CAAC,OAAO,EAAE;oBACtB,SAAS,CAAC,UAAU,CAAC,EAAE;wBACrB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;4BACjC,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gCAC3B,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE;gCAChE,CAAC,CAAC,KAAK,CAAC;wBACZ,CAAC,CAAC,CAAC;oBACL,CAAC,CAAC,CAAC;iBACJ;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,CAAC;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { Stages } from '@pega/cosmos-react-work';\nimport type { StagesProps } from '@pega/cosmos-react-work';\n\nimport { defaultStageNames as stageNames, createStages, getSteps } from './Stages.mocks';\n\nexport default {\n  title: 'Work/Stages',\n  component: Stages,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\ninterface StagesStoryProps {\n  caseTitle?: StagesProps['caseTitle'];\n  stageNames?: string[];\n  currentStage?: number;\n}\n\nexport const StagesDemo: StoryFn<StagesStoryProps> = (args: StagesStoryProps) => {\n  const [stages, setStages] = useState(\n    createStages(args.stageNames ?? stageNames, args.currentStage ?? 0)\n  );\n\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  return (\n    <Stages\n      stages={stages}\n      current={`stage-${args.currentStage}`}\n      caseTitle={args.caseTitle}\n      onLoadStage={ids => {\n        if (timerRef.current) clearTimeout(timerRef.current);\n        timerRef.current = setTimeout(() => {\n          if (mountedRef.current) {\n            setStages(prevStages => {\n              return prevStages.map((stage, i) => {\n                return ids.includes(stage.id)\n                  ? { ...stage, steps: getSteps((args.currentStage ?? 0) - 1, i) }\n                  : stage;\n              });\n            });\n          }\n        }, 1500);\n      }}\n    />\n  );\n};\n\nStagesDemo.args = {\n  caseTitle: 'Demo',\n  currentStage: 3\n};\n\nStagesDemo.argTypes = {\n  caseTitle: { control: { type: 'text' } },\n  currentStage: { control: { type: 'number' } }\n};\n"]}

package/jsx/work/Stakeholders/Stakeholders.mocks.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';
+interface MockStakeholderObject extends Stakeholder {
+    role?: Role;
+    data?: StakeholdersProps['form']['rendererProps'];
+}
+export declare const mockNetworkReq: () => Promise<unknown>;
+export declare const mockRoles: NonNullable<StakeholdersProps['form']>['roles'];
+export declare const AddAndEditForm: ({ selectedRoleName, firstName, lastName, email }: {
+    selectedRoleName?: string | undefined;
+    firstName?: string | undefined;
+    lastName?: string | undefined;
+    email?: string | undefined;
+}) => import("react").JSX.Element;
+export declare const useMockStakeholders: (cb: () => void) => [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>];
+export {};
+//# sourceMappingURL=Stakeholders.mocks.d.ts.map

package/jsx/work/Stakeholders/Stakeholders.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI/E,UAAU,qBAAsB,SAAQ,WAAW;IACjD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,wBAGvB,CAAC;AAML,eAAO,MAAM,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAQrE,CAAC;AAOF,eAAO,MAAM,cAAc;;;;;iCA6B1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,OAC1B,MAAM,IAAI,KACb,CAAC,qBAAqB,EAAE,EAAE,SAAS,eAAe,qBAAqB,EAAE,CAAC,CAAC,CAiB7E,CAAC"}

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';
+import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
+export const mockNetworkReq = () => new Promise(resolve => {
+    setTimeout(resolve, 2000);
+});
+const count = 20;
+export const mockRoles = Array.from({ length: 3 }, (_, i) => ({
+    name: `Role-${i + 1}`,
+    description: `This is a description of Role-${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`
+}));
+export const AddAndEditForm = ({ selectedRoleName, firstName, lastName, email }) => {
+    const inputs = (<Grid container={{ cols: '1fr', gap: 2 }}>
+      <Input label='First name' required defaultValue={firstName}/>
+      <Input label='Last name' required defaultValue={lastName}/>
+      <Input type='email' label='Email' required defaultValue={email}/>
+      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined}/>
+    </Grid>);
+    return selectedRoleName ? (<FieldGroup name={`Fields for: ${selectedRoleName}`} headingTag='h3'>
+      {inputs}
+    </FieldGroup>) : (inputs);
+};
+export const useMockStakeholders = (cb) => {
+    const [mockStakeholders, setMockStakeholders] = useState([]);
+    const [mockListData] = useMockListData(() => {
+        setMockStakeholders(mockListData);
+        cb();
+    }, { count });
+    return [
+        mockStakeholders.map(stakeholder => {
+            return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };
+        }),
+        setMockStakeholders
+    ];
+};
+//# sourceMappingURL=Stakeholders.mocks.jsx.map

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.mocks.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAO3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CACjC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;IACpB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAGL,MAAM,KAAK,GAAG,EAAE,CAAC;AAGjB,MAAM,CAAC,MAAM,SAAS,GAAoD,KAAK,CAAC,IAAI,CAClF,EAAE,MAAM,EAAE,CAAC,EAAE,EACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;IACrB,WAAW,EAAE,iCACX,CAAC,GAAG,CACN,6GAA6G;CAC9G,CAAC,CACH,CAAC;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EAC3D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EACzD;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,EAC/D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAClF;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,eAAe,gBAAgB,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAClE;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,EAAc,EACgE,EAAE;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAEtF,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,CACpC,GAAG,EAAE;QACH,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC;IACP,CAAC,EACD,EAAE,KAAK,EAAE,CACV,CAAC;IAEF,OAAO;QACL,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,OAAO,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,CAAC,CAAC;QACF,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useState } from 'react';\n\nimport { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';\nimport { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () =>\n  new Promise(resolve => {\n    setTimeout(resolve, 2000);\n  });\n\n// Mock total count of Stakeholder resource.\nconst count = 20;\n\n// Mock stakeholder roles.\nexport const mockRoles: NonNullable<StakeholdersProps['form']>['roles'] = Array.from(\n  { length: 3 },\n  (_, i) => ({\n    name: `Role-${i + 1}`,\n    description: `This is a description of Role-${\n      i + 1\n    }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`\n  })\n);\n\n/**\n * A component that will be rendered internally by Stakeholders when adding or editing.\n * If roles exists, the component will be passed the selected role as a prop.\n * The return content of this will likely be a dynamically rendered view.\n */\nexport const AddAndEditForm = ({\n  selectedRoleName,\n  firstName,\n  lastName,\n  email\n}: {\n  // Cosmos will pass the selectedRoleName\n  selectedRoleName?: Role['name'];\n  // Any prop passed to rendererProps will be forwarded here\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n}) => {\n  const inputs = (\n    <Grid container={{ cols: '1fr', gap: 2 }}>\n      <Input label='First name' required defaultValue={firstName} />\n      <Input label='Last name' required defaultValue={lastName} />\n      <Input type='email' label='Email' required defaultValue={email} />\n      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined} />\n    </Grid>\n  );\n\n  return selectedRoleName ? (\n    <FieldGroup name={`Fields for: ${selectedRoleName}`} headingTag='h3'>\n      {inputs}\n    </FieldGroup>\n  ) : (\n    inputs\n  );\n};\n\nexport const useMockStakeholders = (\n  cb: () => void\n): [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>] => {\n  const [mockStakeholders, setMockStakeholders] = useState<MockStakeholderObject[]>([]);\n  // Grab some mock data...\n  const [mockListData] = useMockListData(\n    () => {\n      setMockStakeholders(mockListData);\n      cb();\n    },\n    { count }\n  );\n\n  return [\n    mockStakeholders.map(stakeholder => {\n      return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };\n    }),\n    setMockStakeholders\n  ];\n};\n"]}

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

@@ -0,0 +1,5 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const StakeHoldersDemo: StoryFn;
+//# sourceMappingURL=Stakeholders.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAatD,wBAGU;AAEV,eAAO,MAAM,gBAAgB,EAAE,OA+H9B,CAAC"}

package/jsx/work/Stakeholders/Stakeholders.stories.jsx

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { createStringMatcher } from '@pega/cosmos-react-core';
+import { Stakeholders } from '@pega/cosmos-react-work';
+import { AddAndEditForm, mockNetworkReq, mockRoles, useMockStakeholders } from './Stakeholders.mocks';
+export default {
+    title: 'Work/Stakeholders',
+    component: Stakeholders
+};
+export const StakeHoldersDemo = () => {
+    const [loading, setLoading] = useState(true);
+    const [mode, setMode] = useState();
+    const [editing, setEditing] = useState(null);
+    const [formLoading, setFormLoading] = useState(false);
+    const [viewAllLoading, setViewAllLoading] = useState(false);
+    const [viewAllSearchValue, setViewAllSearchValue] = useState('');
+    const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {
+        setLoading(false);
+    });
+    const [editData, setEditData] = useState();
+    const addActions = useCallback((items) => {
+        return items.map(stakeholder => {
+            return {
+                ...stakeholder,
+                onEdit: () => {
+                    setFormLoading(true);
+                    setEditing(stakeholder.id);
+                    setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);
+                    mockNetworkReq().then(() => setFormLoading(false));
+                },
+                onRemove: () => {
+                    setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));
+                }
+            };
+        });
+    }, [mockStakeholders]);
+    const form = useMemo(() => {
+        return {
+            loading: formLoading,
+            roles: mode === 'add' ? mockRoles : undefined,
+            currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,
+            renderer: AddAndEditForm,
+            rendererProps: editData,
+            onSubmit: ({ selectedRoleName, closeForm }) => {
+                setFormLoading(true);
+                action(`The selected role is: ${selectedRoleName}`);
+                mockNetworkReq().then(closeForm);
+            },
+            onDismiss: ({ closeForm }) => {
+                closeForm();
+            },
+            onAfterClose: () => {
+                setFormLoading(false);
+                setEditing(null);
+                setEditData(undefined);
+                setMode(undefined);
+            }
+        };
+    }, [mode, formLoading, mockRoles, editing, editData]);
+    const viewAll = useMemo(() => {
+        let viewAllItems = mockStakeholders;
+        if (viewAllSearchValue) {
+            const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');
+            viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary));
+        }
+        return {
+            loading: viewAllLoading,
+            items: addActions(viewAllItems),
+            onSearch: setViewAllSearchValue,
+            onAfterClose: () => {
+                if (viewAllLoading)
+                    setViewAllLoading(false);
+                setViewAllSearchValue('');
+            }
+        };
+    }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);
+    useEffect(() => {
+    }, [mode]);
+    useEffect(() => {
+    }, [editing]);
+    return (<Stakeholders loading={loading} items={useMemo(() => addActions(mockStakeholders.slice(0, 3)), [addActions, mockStakeholders])} count={loading ? undefined : mockStakeholders.length} onAddNew={() => {
+            setMode('add');
+            setFormLoading(true);
+            mockNetworkReq().then(() => setFormLoading(false));
+        }} form={form} onViewAll={() => {
+            setMode('viewAll');
+            setViewAllLoading(true);
+            mockNetworkReq().then(() => setViewAllLoading(false));
+        }} viewAll={viewAll}/>);
+};
+//# sourceMappingURL=Stakeholders.stories.jsx.map

package/jsx/work/Stakeholders/Stakeholders.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders } from '@pega/cosmos-react-work';\nimport type { StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n  AddAndEditForm,\n  mockNetworkReq,\n  mockRoles,\n  useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n  title: 'Work/Stakeholders',\n  component: Stakeholders\n} as Meta;\n\nexport const StakeHoldersDemo: StoryFn = () => {\n  const [loading, setLoading] = useState(true);\n  const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n  const [editing, setEditing] = useState<Stakeholder['id'] | null>(null);\n  const [formLoading, setFormLoading] = useState(false);\n  const [viewAllLoading, setViewAllLoading] = useState(false);\n  const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n  // Grab some mock data...\n  const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n    setLoading(false);\n  });\n\n  const [editData, setEditData] = useState<\n    StakeholdersProps['form']['rendererProps'] | undefined\n  >();\n\n  // Merges built-in available actions with stakeholder objects.\n  const addActions = useCallback(\n    (items: Stakeholder[]) => {\n      return items.map(stakeholder => {\n        return {\n          ...stakeholder,\n          onEdit: () => {\n            setFormLoading(true);\n            setEditing(stakeholder.id);\n            setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n            mockNetworkReq().then(() => setFormLoading(false));\n          },\n          onRemove: () => {\n            setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n          }\n        };\n      });\n    },\n    [mockStakeholders]\n  );\n\n  const form: StakeholdersProps['form'] = useMemo(() => {\n    return {\n      // Set this to true when fetching view metadata for the form or during submit validation.\n      loading: formLoading,\n      // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n      roles: mode === 'add' ? mockRoles : undefined,\n      // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n      currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n      /**\n       * A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n       * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n       */\n      renderer: AddAndEditForm,\n      rendererProps: editData,\n      onSubmit: ({ selectedRoleName, closeForm }) => {\n        setFormLoading(true);\n        action(`The selected role is: ${selectedRoleName}`);\n        // Create or update the stakeholder resource.\n        mockNetworkReq().then(closeForm);\n      },\n      onDismiss: ({ closeForm }) => {\n        closeForm();\n      },\n      onAfterClose: () => {\n        // Clean up loading state when the form is closed.\n        setFormLoading(false);\n        setEditing(null);\n        setEditData(undefined);\n        setMode(undefined);\n      }\n    };\n  }, [mode, formLoading, mockRoles, editing, editData]);\n\n  const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n    let viewAllItems = mockStakeholders;\n\n    // When the user has entered a search value we can filter the array or api request.\n    if (viewAllSearchValue) {\n      // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n      const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n      // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n      viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n    }\n\n    return {\n      // Set this to true when fetching data for the view all modal.\n      loading: viewAllLoading,\n      // Even when loading is true this must be an array, empty or not.\n      items: addActions(viewAllItems),\n      // The search string will be handed back as the arg, pass a state setter and filter off of that.\n      onSearch: setViewAllSearchValue,\n      onAfterClose: () => {\n        // Clean up loading state when the modal is closed.\n        if (viewAllLoading) setViewAllLoading(false);\n        setViewAllSearchValue('');\n      }\n    };\n  }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n  useEffect(() => {\n    // Orchestrate based on mode state if needed.\n  }, [mode]);\n\n  useEffect(() => {\n    // Orchestrate based on editing state if needed.\n  }, [editing]);\n\n  return (\n    <Stakeholders\n      loading={loading}\n      items={useMemo(\n        () => addActions(mockStakeholders.slice(0, 3)),\n        [addActions, mockStakeholders]\n      )}\n      count={loading ? undefined : mockStakeholders.length}\n      onAddNew={() => {\n        setMode('add');\n        setFormLoading(true);\n        mockNetworkReq().then(() => setFormLoading(false));\n      }}\n      form={form}\n      onViewAll={() => {\n        setMode('viewAll');\n        setViewAllLoading(true);\n        mockNetworkReq().then(() => setViewAllLoading(false));\n      }}\n      viewAll={viewAll}\n    />\n  );\n};\n"]}

package/jsx/work/Tags/Tags.mocks.d.ts

@@ -0,0 +1,3 @@
+export declare const getMockAvailableTags: () => string[];
+export declare const addNewMockTag: (tag: string) => void;
+//# sourceMappingURL=Tags.mocks.d.ts.map

package/jsx/work/Tags/Tags.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Tags/Tags.mocks.ts"],"names":[],"mappings":"AAqEA,eAAO,MAAM,oBAAoB,gBAEhC,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAGxC,CAAC"}

package/jsx/work/Tags/Tags.mocks.js

@@ -0,0 +1,76 @@
+const tags = [
+    'afternoon',
+    'airplane',
+    'animal',
+    'balloon',
+    'beach',
+    'birthday',
+    'bread',
+    'cabin',
+    'camp',
+    'color',
+    'desert',
+    'dishes',
+    'dragon',
+    'earth',
+    'family',
+    'fishing',
+    'forest',
+    'grandparent',
+    'hair',
+    'heat',
+    'hour',
+    'island',
+    'igloo',
+    'joker',
+    'kitten',
+    'kite',
+    'lady',
+    'life',
+    'lunch',
+    'mail',
+    'merry',
+    'mouse',
+    'music',
+    'news',
+    'noise',
+    'number',
+    'orange',
+    'owl',
+    'paint',
+    'penny',
+    'person',
+    'plane',
+    'pocket',
+    'queen',
+    'ready',
+    'river',
+    'run',
+    'salt',
+    'sending',
+    'sit',
+    'song',
+    'space',
+    'stick',
+    'table',
+    'teeth',
+    'tonight',
+    'turn',
+    'under',
+    'violin',
+    'wagon',
+    'weather',
+    'window',
+    'world',
+    'xylophone',
+    'yard',
+    'zebra'
+];
+export const getMockAvailableTags = () => {
+    return tags;
+};
+export const addNewMockTag = (tag) => {
+    tags.push(tag);
+    tags.sort();
+};
+//# sourceMappingURL=Tags.mocks.js.map

package/jsx/work/Tags/Tags.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.mocks.js","sourceRoot":"","sources":["../../../src/work/Tags/Tags.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,WAAW;IACX,UAAU;IACV,QAAQ;IACR,SAAS;IACT,OAAO;IACP,UAAU;IACV,OAAO;IACP,OAAO;IACP,MAAM;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,aAAa;IACb,MAAM;IACN,MAAM;IACN,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,MAAM;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,OAAO;IACP,OAAO;IACP,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,SAAS;IACT,KAAK;IACL,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,SAAS;IACT,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;IACP,SAAS;IACT,QAAQ;IACR,OAAO;IACP,WAAW;IACX,MAAM;IACN,OAAO;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAC3C,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;AACd,CAAC,CAAC","sourcesContent":["const tags = [\n  'afternoon',\n  'airplane',\n  'animal',\n  'balloon',\n  'beach',\n  'birthday',\n  'bread',\n  'cabin',\n  'camp',\n  'color',\n  'desert',\n  'dishes',\n  'dragon',\n  'earth',\n  'family',\n  'fishing',\n  'forest',\n  'grandparent',\n  'hair',\n  'heat',\n  'hour',\n  'island',\n  'igloo',\n  'joker',\n  'kitten',\n  'kite',\n  'lady',\n  'life',\n  'lunch',\n  'mail',\n  'merry',\n  'mouse',\n  'music',\n  'news',\n  'noise',\n  'number',\n  'orange',\n  'owl',\n  'paint',\n  'penny',\n  'person',\n  'plane',\n  'pocket',\n  'queen',\n  'ready',\n  'river',\n  'run',\n  'salt',\n  'sending',\n  'sit',\n  'song',\n  'space',\n  'stick',\n  'table',\n  'teeth',\n  'tonight',\n  'turn',\n  'under',\n  'violin',\n  'wagon',\n  'weather',\n  'window',\n  'world',\n  'xylophone',\n  'yard',\n  'zebra'\n];\n\nexport const getMockAvailableTags = () => {\n  return tags;\n};\n\nexport const addNewMockTag = (tag: string) => {\n  tags.push(tag);\n  tags.sort();\n};\n"]}

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

@@ -0,0 +1,10 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface TagsStoryProps {
+    error?: string;
+    displayRetry?: boolean;
+    editError?: string;
+}
+export declare const TagsDemo: StoryFn<TagsStoryProps>;
+//# sourceMappingURL=Tags.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAGU;AAEV,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,cAAc,CA+D5C,CAAC"}

package/jsx/work/Tags/Tags.stories.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { Tags } from '@pega/cosmos-react-work';
+import { addNewMockTag, getMockAvailableTags } from './Tags.mocks';
+export default {
+    title: 'Work/Tags',
+    component: Tags
+};
+export const TagsDemo = (args) => {
+    const [loading, setLoading] = useState(true);
+    const [availableTags, setAvailableTags] = useState();
+    const [filterValue, setFilterValue] = useState('');
+    const [tags, setTags] = useState([
+        'Pega',
+        'Constellation',
+        'Design_system',
+        'animal',
+        'bread',
+        'hour',
+        'music',
+        'paint',
+        'space',
+        'weather'
+    ]);
+    useEffect(() => {
+        const allTags = getMockAvailableTags();
+        setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);
+    }, [filterValue]);
+    useEffect(() => {
+        let mounted = true;
+        setTimeout(() => {
+            if (mounted)
+                setLoading(false);
+        }, 1000);
+        return () => {
+            mounted = false;
+        };
+    }, []);
+    const handleEditTags = (selectedTags) => {
+        return new Promise((resolve, reject) => {
+            if (args.editError) {
+                reject(new Error(args.editError));
+            }
+            else {
+                setTags(selectedTags.map(tag => {
+                    if (tag.newTag) {
+                        addNewMockTag(tag.text);
+                    }
+                    return tag.text;
+                }));
+                resolve();
+            }
+        });
+    };
+    return (<Tags tags={tags} availableTags={availableTags} loading={loading} error={args.displayRetry ? { message: args.error, onRetry: () => { } } : args.error} onSearch={(query) => setFilterValue(query)} onEditTags={handleEditTags}/>);
+};
+TagsDemo.args = {
+    error: '',
+    displayRetry: false,
+    editError: ''
+};
+TagsDemo.argTypes = {
+    error: { control: { type: 'text' } },
+    displayRetry: { control: { type: 'boolean' } },
+    editError: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Tags.stories.jsx.map

package/jsx/work/Tags/Tags.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Tags } from '@pega/cosmos-react-work';\nimport type { SelectedTag, TagsProps } from '@pega/cosmos-react-work';\n\nimport { addNewMockTag, getMockAvailableTags } from './Tags.mocks';\n\nexport default {\n  title: 'Work/Tags',\n  component: Tags\n} as Meta;\n\ninterface TagsStoryProps {\n  error?: string;\n  displayRetry?: boolean;\n  editError?: string;\n}\n\nexport const TagsDemo: StoryFn<TagsStoryProps> = (args: TagsStoryProps) => {\n  const [loading, setLoading] = useState(true);\n  const [availableTags, setAvailableTags] = useState<TagsProps['availableTags']>();\n  const [filterValue, setFilterValue] = useState('');\n  const [tags, setTags] = useState<TagsProps['tags']>([\n    'Pega',\n    'Constellation',\n    'Design_system',\n    'animal',\n    'bread',\n    'hour',\n    'music',\n    'paint',\n    'space',\n    'weather'\n  ]);\n\n  useEffect(() => {\n    const allTags = getMockAvailableTags();\n    setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);\n  }, [filterValue]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    setTimeout(() => {\n      // Avoids: Warning: Can't perform a React state update on an unmounted component.\n      if (mounted) setLoading(false);\n    }, 1000);\n\n    return () => {\n      mounted = false;\n    };\n  }, []);\n\n  const handleEditTags = (selectedTags: SelectedTag[]) => {\n    return new Promise<void>((resolve, reject) => {\n      if (args.editError) {\n        reject(new Error(args.editError));\n      } else {\n        setTags(\n          selectedTags.map(tag => {\n            if (tag.newTag) {\n              addNewMockTag(tag.text);\n            }\n            return tag.text;\n          })\n        );\n        resolve();\n      }\n    });\n  };\n\n  return (\n    <Tags\n      tags={tags}\n      availableTags={availableTags}\n      loading={loading}\n      error={args.displayRetry ? { message: args.error, onRetry: () => {} } : args.error}\n      onSearch={(query: string) => setFilterValue(query)}\n      onEditTags={handleEditTags}\n    />\n  );\n};\n\nTagsDemo.args = {\n  error: '',\n  displayRetry: false,\n  editError: ''\n};\n\nTagsDemo.argTypes = {\n  error: { control: { type: 'text' } },\n  displayRetry: { control: { type: 'boolean' } },\n  editError: { control: { type: 'text' } }\n};\n"]}

package/jsx/work/Tasks/TaskList.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const TaskListDemo: StoryFn;
+//# sourceMappingURL=TaskList.stories.d.ts.map

package/jsx/work/Tasks/TaskList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAMtD,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,OAY1B,CAAC"}