npm - @pega/cosmos-react-demos - Versions diffs - 2.1.0 → 2.1.4 - Mend

@pega/cosmos-react-demos 2.1.0 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (353) hide show

package/lib/work/Confirmation/Confirmation.stories.js CHANGED Viewed

@@ -1,16 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex } from '@pega/cosmos-react-core';
 import { Confirmation } from '@pega/cosmos-react-work';
 import { FieldValueListDemo } from '@pega/cosmos-react-demos/lib/core/FieldValueList/FieldValueList.stories';
 import { TaskListDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/TaskList.stories';
+import { StyledFlex } from './Confirmation.styles';
 export default {
     title: 'Work/Confirmation',
     component: Confirmation
 };
-export const ConfirmationDemo = ({ title }) => {
-    return (_jsx(Confirmation, { title: title || 'US-13371337 confirmation', details: _jsx(FieldValueListDemo, { name: 'Name', value: 'Value', fields: [] }, void 0), whatsNext: ['A little bit of this', 'A little bit of that'], tasks: _jsx(TaskListDemo, {}, void 0) }, void 0));
+export const ConfirmationDemo = (args) => {
+    const [showConfirmation, setShowConfirmation] = useState(true);
+    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos', fields: [] }, void 0), whatsNext: [
+                    'Send references',
+                    'Collect information on the case',
+                    'Prepare a demonstration'
+                ], tasks: _jsx(TaskListDemo, {}, void 0), onClose: () => setShowConfirmation(false) }, void 0)), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }, void 0))] }, void 0));
 };
 ConfirmationDemo.args = {
-    title: 'US-13371337 confirmation'
+    title: 'US-1337 confirmation'
 };
 ConfirmationDemo.argTypes = {
     title: { control: { type: 'text' } }

package/lib/work/Confirmation/Confirmation.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";~~AAEA~~,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yEAAyE,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AAExF,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,EAAE,~~KAAK,~~EAAE,EAAE,~~EAAE~~;~~IAC3E~~,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,~~KAAK,~~IAAI,~~0BAA0B~~,~~EAC1C~~,OAAO,EAAE,KAAC,kBAAkB,IAAC,IAAI,EAAC,~~MAAM~~,EAAC,KAAK,EAAC,~~OAAO~~,EAAC,MAAM,EAAE,EAAE,WAAI,~~EACrE~~,SAAS,EAAE,~~CAAC~~,~~sBAAsB~~,~~EAAE~~,~~sBAAsB~~,~~CAAC,EAC3D,~~KAAK,EAAE,KAAC,YAAY,aAAG,~~WACvB~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,~~0BAA0B~~;~~CAClC~~,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\nimport { FieldValueListDemo } from '@pega/cosmos-react-demos/lib/core/FieldValueList/FieldValueList.stories';\nimport { TaskListDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/TaskList.stories';\n\nexport default {\n title: 'Work/Confirmation',\n component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n title?: ConfirmationProps['title'];\n}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = ({ ~~title }~~) => {\n return (\n <~~Confirmation\n title~~={~~title~~ \|\| '~~US-13371337~~ ~~confirmation~~'}\n details={<FieldValueListDemo name='~~Name~~' value='~~Value~~' fields={[]} />}\n whatsNext={['A ~~little~~ ~~bit~~ of ~~this',~~ 'A ~~little~~ ~~bit of that~~']}\n tasks={<TaskListDemo />}\n />\n );\n};\n\nConfirmationDemo.args = {\n title: 'US-~~13371337~~ confirmation'\n};\n\nConfirmationDemo.argTypes = {\n title: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yEAAyE,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AAExF,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC9F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,EAAC,MAAM,EAAE,EAAE,WAAI,EAC9E,SAAS,EAAE;oBACT,iBAAiB;oBACjB,iCAAiC;oBACjC,yBAAyB;iBAC1B,EACD,KAAK,EAAE,KAAC,YAAY,aAAG,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,WACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,0CAA4B,CAC7E,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\nimport { FieldValueListDemo } from '@pega/cosmos-react-demos/lib/core/FieldValueList/FieldValueList.stories';\nimport { TaskListDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/TaskList.stories';\n\nimport { StyledFlex } from './Confirmation.styles';\n\nexport default {\n title: 'Work/Confirmation',\n component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n title: ConfirmationProps['title'];\n}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n const [showConfirmation, setShowConfirmation] = useState(true);\n\n return (\n <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n {showConfirmation && (\n <Confirmation\n title={args.title}\n details={<FieldValueListDemo name='Project' value='Pega Cosmos' fields={[]} />}\n whatsNext={[\n 'Send references',\n 'Collect information on the case',\n 'Prepare a demonstration'\n ]}\n tasks={<TaskListDemo />}\n onClose={() => setShowConfirmation(false)}\n />\n )}\n {!showConfirmation && (\n <Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>\n )}\n </Flex>\n );\n};\n\nConfirmationDemo.args = {\n title: 'US-1337 confirmation'\n};\n\nConfirmationDemo.argTypes = {\n title: { control: { type: 'text' } }\n};\n"]}

package/lib/work/Confirmation/Confirmation.styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2	+ //# sourceMappingURL=Confirmation.styles.d.ts.map

package/lib/work/Confirmation/Confirmation.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Confirmation.styles.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yGAItB,CAAC"}

package/lib/work/Confirmation/Confirmation.styles.js ADDED Viewed

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const StyledFlex = styled.div `
+  article {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=Confirmation.styles.js.map

package/lib/work/Confirmation/Confirmation.styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Confirmation.styles.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFlex = styled.div`\n article {\n width: 100%;\n }\n`;\n"]}

package/lib/work/SearchResults/SearchResults.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.stories.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;~~AAuB~~/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;~~AAiBD~~,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,~~CA6O5D~~,CAAC"}
1	+ {"version":3,"file":"SearchResults.stories.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAgB/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA8O5D,CAAC"}

package/lib/work/SearchResults/SearchResults.stories.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Status, OneColumnPage, Text, Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Status, OneColumnPage, Text, Flex } from '@pega/cosmos-react-core';
 import { CasePreview, SearchResults } from '@pega/cosmos-react-work';
 import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
 import { getInitialResults, initialFilters } from './SearchResults.mocks';
+import { ColoredText, StyledSearchResults } from './SearchResults.styles';
 export default {
     title: 'Work/SearchResults',
     component: SearchResults,
@@ -12,12 +12,6 @@ export default {
         layout: 'fullscreen'
     }
 };
-const ColoredText = styled.span(({ colorVariant, theme: { base: { palette } } }) => {
-    return css `
-      color: ${palette[colorVariant]};
-    `;
-});
-ColoredText.defaultProps = defaultThemeProp;
 export const SearchResultsDemo = (args) => {
     const [preview, setPreview] = useState();
     const [previewTabId, setPreviewTabId] = useState();
@@ -178,7 +172,7 @@ export const SearchResultsDemo = (args) => {
             return result;
         });
     };
-    const searchResults = (_jsxs(_Fragment, { children: [_jsx(OneColumnPage, { title: 'Search results', a: _jsx(SearchResults, { results: limit < results.length
+    const searchResults = (_jsxs(_Fragment, { children: [_jsx(OneColumnPage, { as: StyledSearchResults, title: 'Search results', a: _jsx(SearchResults, { results: limit < results.length
                         ? renderForDisplay(results.slice(0, limit))
                         : renderForDisplay(results), searchInputProps: { value: search, onSearchChange: setSearch }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined }, void 0) }, void 0), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
                     items: [],

package/lib/work/SearchResults/SearchResults.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Status,\n OmitStrict,\n OneColumnPage,\n Text,\n Flex,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport {\n CasePreview,\n SearchResults,\n SearchResultsProps,\n FilterEvent,\n SearchResultProps\n} from '@pega/cosmos-react-work';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\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}\n\nconst 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\nexport const SearchResultsDemo: Story<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\n useEffect(() => {\n const activeFilters = 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 if (activeFilters.length > 0 \|\| search !== '') {\n setResults(() => {\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 if (\n result &&\n (result.description?.toLowerCase().includes(search.toLowerCase()) \|\|\n result.title.toLowerCase().includes(search.toLowerCase()) \|\|\n result.id.toLowerCase().includes(search.toLowerCase()))\n ) {\n return true;\n }\n\n return false;\n });\n });\n } else {\n setResults([]);\n }\n }, [search, filters]);\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 <OneColumnPage\n title='Search results'\n a={\n <SearchResults\n results={\n limit < results.length\n ? renderForDisplay(results.slice(0, limit))\n : renderForDisplay(results)\n }\n searchInputProps={{ value: search, onSearchChange: setSearch }}\n count={results.length}\n filters={filters}\n onFilterChange={handleFilterChange}\n onClearAllFilters={clearAllFilters}\n onClearFilter={handleClearFilter}\n onShowMore={limit < results.length ? handleShowMore : undefined}\n />\n }\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 summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>}\n onBeforeClose={() => {\n setPreview(undefined);\n }}\n />\n </>\n );\n\n return args.withAppShell ? <AppShellDemo appHeader main={searchResults} /> : searchResults;\n};\n\nSearchResultsDemo.args = {\n withAppShell: false\n};\n\nSearchResultsDemo.argTypes = {\n withAppShell: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useMemo } from 'react';\n\nimport { Status, OmitStrict, OneColumnPage, Text, Flex } from '@pega/cosmos-react-core';\nimport {\n CasePreview,\n SearchResults,\n SearchResultsProps,\n FilterEvent,\n SearchResultProps\n} from '@pega/cosmos-react-work';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\nimport { ColoredText, StyledSearchResults } 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}\n\nexport const SearchResultsDemo: Story<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\n useEffect(() => {\n const activeFilters = 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 if (activeFilters.length > 0 \|\| search !== '') {\n setResults(() => {\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 if (\n result &&\n (result.description?.toLowerCase().includes(search.toLowerCase()) \|\|\n result.title.toLowerCase().includes(search.toLowerCase()) \|\|\n result.id.toLowerCase().includes(search.toLowerCase()))\n ) {\n return true;\n }\n\n return false;\n });\n });\n } else {\n setResults([]);\n }\n }, [search, filters]);\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 <OneColumnPage\n as={StyledSearchResults}\n title='Search results'\n a={\n <SearchResults\n results={\n limit < results.length\n ? renderForDisplay(results.slice(0, limit))\n : renderForDisplay(results)\n }\n searchInputProps={{ value: search, onSearchChange: setSearch }}\n count={results.length}\n filters={filters}\n onFilterChange={handleFilterChange}\n onClearAllFilters={clearAllFilters}\n onClearFilter={handleClearFilter}\n onShowMore={limit < results.length ? handleShowMore : undefined}\n />\n }\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 summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>}\n onBeforeClose={() => {\n setPreview(undefined);\n }}\n />\n </>\n );\n\n return args.withAppShell ? <AppShellDemo appHeader main={searchResults} /> : searchResults;\n};\n\nSearchResultsDemo.args = {\n withAppShell: false\n};\n\nSearchResultsDemo.argTypes = {\n withAppShell: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/SearchResults/SearchResults.styles.d.ts ADDED Viewed

@@ -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/lib/work/SearchResults/SearchResults.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
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/lib/work/SearchResults/SearchResults.styles.js ADDED Viewed

@@ -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/lib/work/SearchResults/SearchResults.styles.js.map ADDED Viewed

@@ -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/lib/work/Stakeholders/Stakeholders.mocks.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+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'];
+/**
+ * A component that will be rendered internally by Stakeholders when adding or editing.
+ * If roles exists, the component will be passed the selected role as a prop.
+ * The return content of this will likely be a dynamically rendered view.
+ */
+export declare const AddAndEditForm: ({ selectedRoleName, firstName, lastName, email }: {
+    selectedRoleName?: string | undefined;
+    firstName?: string | undefined;
+    lastName?: string | undefined;
+    email?: string | undefined;
+}) => JSX.Element;
+export declare const useMockStakeholders: (cb: () => void) => [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>];
+export {};
+//# sourceMappingURL=Stakeholders.mocks.d.ts.map

package/lib/work/Stakeholders/Stakeholders.mocks.d.ts.map ADDED Viewed

@@ -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;AAG/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,wBAA0D,CAAC;AAMtF,eAAO,MAAM,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAQrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;;iBA2B1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,OAC1B,MAAM,IAAI,KACb,CAAC,qBAAqB,EAAE,EAAE,SAAS,eAAe,qBAAqB,EAAE,CAAC,CAAC,CAiB7E,CAAC"}

package/lib/work/Stakeholders/Stakeholders.mocks.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';
+import { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';
+export const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
+// Mock total count of Stakeholder resource.
+const count = Math.floor(Math.random() * 50) + 1;
+// Mock stakeholder roles.
+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.`
+}));
+/**
+ * A component that will be rendered internally by Stakeholders when adding or editing.
+ * If roles exists, the component will be passed the selected role as a prop.
+ * The return content of this will likely be a dynamically rendered view.
+ */
+export const AddAndEditForm = ({ selectedRoleName, firstName, lastName, email }) => {
+    const inputs = (_jsxs(Grid, { container: { cols: '1fr', gap: 2 }, children: [_jsx(Input, { label: 'First name', required: true, defaultValue: firstName }, void 0), _jsx(Input, { label: 'Last name', required: true, defaultValue: lastName }, void 0), _jsx(Input, { type: 'email', label: 'Email', required: true, defaultValue: email }, void 0), _jsx(Input, { label: 'Job title', defaultValue: firstName ? 'Vice president' : undefined }, void 0)] }, void 0));
+    return selectedRoleName ? (_jsx(FieldGroup, { name: `Fields for: ${selectedRoleName}`, children: inputs }, void 0)) : (inputs);
+};
+export const useMockStakeholders = (cb) => {
+    const [mockStakeholders, setMockStakeholders] = useState([]);
+    // Grab some mock data...
+    const [mockListData] = useMockListData(() => {
+        setMockStakeholders(mockListData);
+        cb();
+    }, { count });
+    return [
+        mockStakeholders.map(stakeholder => {
+            return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };
+        }),
+        setMockStakeholders
+    ];
+};
+//# sourceMappingURL=Stakeholders.mocks.js.map

package/lib/work/Stakeholders/Stakeholders.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Stakeholders.mocks.js","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;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAOlG,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtF,4CAA4C;AAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAEjD,0BAA0B;AAC1B,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;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aACtC,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,QAAC,YAAY,EAAE,SAAS,WAAI,EAC9D,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,YAAY,EAAE,QAAQ,WAAI,EAC5D,KAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,QAAC,YAAY,EAAE,KAAK,WAAI,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,WAAI,YAC9E,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,eAAe,gBAAgB,EAAE,YAAG,MAAM,WAAc,CAC3E,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;IACtF,yBAAyB;IACzB,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';\nimport { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n role?: Role;\n data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = Math.floor(Math.random() * 50) + 1;\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}`}>{inputs}</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/lib/work/Stakeholders/Stakeholders.stories.d.ts CHANGED Viewed

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import { StakeholdersProps } from '@pega/cosmos-react-work';
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<StakeholdersProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const StakeHoldersDemo: () => JSX.Element;
 //# sourceMappingURL=Stakeholders.stories.d.ts.map

package/lib/work/Stakeholders/Stakeholders.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":";~~AAIA~~,OAAO,~~EAAgB~~,~~iBAAiB~~,~~EAAqB~~,MAAM,~~yBAAyB~~,CAAC~~;;;;;AAG7F~~,~~wBAGE~~;~~AA8EF~~,eAAO,MAAM,gBAAgB,mBA8H5B,CAAC"}
1	+ {"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAYxC,wBAGU;AAEV,eAAO,MAAM,gBAAgB,mBA8H5B,CAAC"}

package/lib/work/Stakeholders/Stakeholders.stories.js CHANGED Viewed

@@ -1,44 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Input, Grid, FieldGroup, createStringMatcher } from '@pega/cosmos-react-core';
+import { createStringMatcher } from '@pega/cosmos-react-core';
 import { Stakeholders } from '@pega/cosmos-react-work';
-import { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';
+import { AddAndEditForm, mockNetworkReq, mockRoles, useMockStakeholders } from './Stakeholders.mocks';
 export default {
     title: 'Work/Stakeholders',
     component: Stakeholders
 };
-const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
-// Mock total count of Stakeholder resource.
-const count = Math.floor(Math.random() * 50) + 1;
-// Mock stakeholder roles.
-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.`
-}));
-/**
- * A component that will be rendered internally by Stakeholders when adding or editing.
- * If roles exists, the component will be passed the selected role as a prop.
- * The return content of this will likely be a dynamically rendered view.
- */
-const AddAndEditForm = ({ selectedRoleName, firstName, lastName, email }) => {
-    const inputs = (_jsxs(Grid, { container: { cols: '1fr', gap: 2 }, children: [_jsx(Input, { label: 'First name', required: true, defaultValue: firstName }, void 0), _jsx(Input, { label: 'Last name', required: true, defaultValue: lastName }, void 0), _jsx(Input, { type: 'email', label: 'Email', required: true, defaultValue: email }, void 0), _jsx(Input, { label: 'Job title', defaultValue: firstName ? 'Vice president' : undefined }, void 0)] }, void 0));
-    return selectedRoleName ? (_jsx(FieldGroup, { name: `Fields for: ${selectedRoleName}`, children: inputs }, void 0)) : (inputs);
-};
-const useMockStakeholders = (cb) => {
-    const [mockStakeholders, setMockStakeholders] = useState([]);
-    // Grab some mock data...
-    const [mockListData] = useMockListData(() => {
-        setMockStakeholders(mockListData);
-        cb();
-    }, { count });
-    return [
-        mockStakeholders.map(stakeholder => {
-            return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };
-        }),
-        setMockStakeholders
-    ];
-};
 export const StakeHoldersDemo = () => {
     const [loading, setLoading] = useState(true);
     const [mode, setMode] = useState();

package/lib/work/Stakeholders/Stakeholders.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.stories.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Input, Grid, FieldGroup, createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, StakeholdersProps, Role, Stakeholder } from '@pega/cosmos-react-work';\nimport { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';\n\nexport default {\n title: 'Work/Stakeholders',\n component: Stakeholders\n};\n\ninterface MockStakeholderObject extends Stakeholder {\n role?: Role;\n data?: StakeholdersProps['form']['rendererProps'];\n}\n\nconst mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = Math.floor(Math.random() * 50) + 1;\n\n// Mock stakeholder roles.\nconst 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 /\nconst 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}`}>{inputs}</FieldGroup>\n ) : (\n inputs\n );\n};\n\nconst 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\nexport const StakeHoldersDemo = () => {\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 }\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"]}
1	+ {"version":3,"file":"Stakeholders.stories.js","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 { Meta } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, 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 = () => {\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 }\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/lib/work/Timeline/Timeline.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,wBAGU;~~AAKV~~,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,~~CA0CrF~~,CAAC"}
1	+ {"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC"}

package/lib/work/Timeline/Timeline.stories.js CHANGED Viewed

@@ -6,9 +6,9 @@ export default {
     title: 'Work/Timeline',
     component: Timeline
 };
-const INITIAL_CHUNK_SIZE = 7;
-const APPEND_CHUNK_SIZE = 3;
 export const TimelineDemo = (args) => {
+    const INITIAL_CHUNK_SIZE = 7;
+    const APPEND_CHUNK_SIZE = 3;
     const [loading, setLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const [items, setItems] = useState(() => activity.slice(0, INITIAL_CHUNK_SIZE));

package/lib/work/Timeline/Timeline.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,~~kBAAkB~~,~~GAAG~~,~~CAAC~~,~~CAAC~~;~~AAC7B~~,MAAM,~~iBAAiB~~,GAAG,CAAC,CAAC;~~AAE5B~~,MAAM,~~CAAC~~,~~MAAM~~,~~YAAY~~,~~GAAiE,CACxF,IAA2D,EAC3D,EAAE~~;~~IACF~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,KAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,IAAI,IAAI,EAAE,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,WACxC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n title: 'Work/Timeline',\n component: Timeline\n} as Meta;\n\~~nconst INITIAL_CHUNK_SIZE = 7;\nconst APPEND_CHUNK_SIZE = 3;\n\~~nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' \| 'currentTime'>> = (\n args: OmitStrict<TimelineProps, 'activity' \| 'currentTime'>\n) => {\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<TimelineProps['activity']>(() =>\n activity.slice(0, INITIAL_CHUNK_SIZE)\n );\n\n const loadMore = useCallback(() => {\n if (!loading) {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n\n setItems(prevItems => {\n const previousItemsLength = prevItems.length;\n const newItems = activity.slice(\n previousItemsLength,\n previousItemsLength + APPEND_CHUNK_SIZE\n );\n\n if (newItems.length === 0) {\n setHasMore(false);\n }\n\n return [...prevItems, ...newItems];\n });\n }, 2000);\n }\n }, [loading]);\n\n return (\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={args.sortOrder}\n groupBy={args.groupBy}\n loading={loading}\n loadMore={hasMore ? loadMore : undefined}\n />\n );\n};\n\nTimelineDemo.args = {\n sortOrder: 'descending',\n groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n groupBy: {\n options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n control: { type: 'select' }\n }\n};\n"]}
1	+ {"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAiE,CACxF,IAA2D,EAC3D,EAAE;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAC;IAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,KAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,IAAI,IAAI,EAAE,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,WACxC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n title: 'Work/Timeline',\n component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' \| 'currentTime'>> = (\n args: OmitStrict<TimelineProps, 'activity' \| 'currentTime'>\n) => {\n const INITIAL_CHUNK_SIZE = 7;\n const APPEND_CHUNK_SIZE = 3;\n\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<TimelineProps['activity']>(() =>\n activity.slice(0, INITIAL_CHUNK_SIZE)\n );\n\n const loadMore = useCallback(() => {\n if (!loading) {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n\n setItems(prevItems => {\n const previousItemsLength = prevItems.length;\n const newItems = activity.slice(\n previousItemsLength,\n previousItemsLength + APPEND_CHUNK_SIZE\n );\n\n if (newItems.length === 0) {\n setHasMore(false);\n }\n\n return [...prevItems, ...newItems];\n });\n }, 2000);\n }\n }, [loading]);\n\n return (\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={args.sortOrder}\n groupBy={args.groupBy}\n loading={loading}\n loadMore={hasMore ? loadMore : undefined}\n />\n );\n};\n\nTimelineDemo.args = {\n sortOrder: 'descending',\n groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n groupBy: {\n options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n control: { type: 'select' }\n }\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "2.1.0",
-    "@pega/cosmos-react-condition-builder": "2.1.0",
-    "@pega/cosmos-react-core": "2.1.0",
-    "@pega/cosmos-react-cs": "2.1.0",
-    "@pega/cosmos-react-dnd": "2.1.0",
-    "@pega/cosmos-react-rte": "2.1.0",
-    "@pega/cosmos-react-social": "2.1.0",
-    "@pega/cosmos-react-work": "2.1.0",
+    "@pega/cosmos-react-build": "2.1.4",
+    "@pega/cosmos-react-condition-builder": "2.1.4",
+    "@pega/cosmos-react-core": "2.1.4",
+    "@pega/cosmos-react-cs": "2.1.4",
+    "@pega/cosmos-react-dnd": "2.1.4",
+    "@pega/cosmos-react-rte": "2.1.4",
+    "@pega/cosmos-react-social": "2.1.4",
+    "@pega/cosmos-react-work": "2.1.4",
     "emoji-mart": "^3.0.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",