npm - @pega/cosmos-react-demos - Versions diffs - 2.1.2 → 3.0.0-dev.2.0 - Mend

@pega/cosmos-react-demos 2.1.2 → 3.0.0-dev.2.0

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 (580) hide show

package/jsx/work/CaseView/FileService.mock.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileService.mock.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/FileService.mock.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n ReactNode,\n useState,\n FunctionComponent,\n useCallback,\n useMemo,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n createUID,\n FileUploadItemProps,\n hasProp,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\n// -----------------------------------------------------------------------------\n// MockFileResourceObject\n// -----------------------------------------------------------------------------\nexport interface MockFileAttachmentResource {\n id: string;\n name: string;\n category: string;\n thumbnail?: string;\n createDate?: number;\n modifiedDate?: number;\n}\n\n// -----------------------------------------------------------------------------\n// MockFileSelectionObject\n// -----------------------------------------------------------------------------\nexport interface MockFileUploadItem\n extends Pick<MockFileAttachmentResource, 'id' \| 'category'>,\n FileUploadItemProps {\n File: File;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContextValue\n// -----------------------------------------------------------------------------\nexport interface FileServiceContextValue {\n files: (MockFileAttachmentResource \| MockFileUploadItem)[];\n setFiles: Dispatch<SetStateAction<FileServiceContextValue['files']>>;\n attachFile: (file: MockFileUploadItem) => void;\n cancelFile: (id: MockFileAttachmentResource['id']) => void;\n deleteFile: (id: MockFileAttachmentResource['id']) => void;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContext\n// -----------------------------------------------------------------------------\nexport const FileServiceContext = createContext<FileServiceContextValue>({\n files: [],\n setFiles: () => {},\n attachFile: () => {},\n cancelFile: () => {},\n deleteFile: () => {}\n});\n\n// -----------------------------------------------------------------------------\n// FilePostArg\n// -----------------------------------------------------------------------------\ninterface FilePostArg {\n file: MockFileUploadItem;\n onLoadStart: (file: MockFileUploadItem, progress: number) => void;\n onProgress: (file: MockFileUploadItem, progress: number) => void;\n onLoad: (file: MockFileUploadItem) => void;\n}\n\n// -----------------------------------------------------------------------------\n// uploadsInProgress\n// -----------------------------------------------------------------------------\nconst uploadsInProgress: Record<string, XMLHttpRequest> = {};\n\n// -----------------------------------------------------------------------------\n// postFile\n// -----------------------------------------------------------------------------\nconst postFile = ({ file, onLoadStart, onProgress, onLoad }: FilePostArg) => {\n const xhr = new XMLHttpRequest();\n const fd = new FormData();\n\n uploadsInProgress[file.id] = xhr;\n\n xhr.upload.onloadstart = () => {\n onLoadStart(file, 0);\n };\n\n xhr.upload.onprogress = ({ lengthComputable, loaded, total }) => {\n if (lengthComputable) {\n onProgress(file, (loaded / total) * 100);\n }\n };\n\n xhr.upload.onload = () => {\n onLoad(file);\n };\n\n // This is a mock api used to demo upload progress\n xhr.open('POST', 'http://cosmos.eng.pega.com/attachments');\n xhr.setRequestHeader('Content-Type', 'multipart/form-data');\n fd.append('attachments', file.File);\n xhr.send(fd);\n\n return xhr;\n};\n\n// Mock date generator\nconst getMockPriorDate = (h: number) => {\n const d = new Date();\n return d.setHours(d.getHours() - h);\n};\n\nexport const mockCategories: ('HR' \| 'Marketing' \| 'Sales' \| 'Accounting' \| 'Engineering')[] = [\n 'HR',\n 'Marketing',\n 'Sales',\n 'Accounting',\n 'Engineering'\n];\n\nexport const mockAttachmentListRequest = (): Promise<MockFileAttachmentResource[]> => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve([\n {\n id: createUID(),\n name: 'File.doc',\n category: mockCategories[0],\n createDate: getMockPriorDate(1)\n },\n {\n id: createUID(),\n name: 'File.ppt',\n category: mockCategories[1],\n createDate: getMockPriorDate(4)\n },\n {\n id: createUID(),\n name: 'File.xls',\n category: mockCategories[2],\n createDate: getMockPriorDate(30)\n },\n {\n id: createUID(),\n name: 'emptyFile',\n category: '',\n createDate: getMockPriorDate(144)\n }\n ]);\n }, 1000);\n });\n};\n\n// -----------------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------------\nconst Provider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n const [files, setFiles] = useState<FileServiceContextValue['files']>([]);\n\n const attachFile = useCallback(\n (file: MockFileUploadItem) => {\n if (files.some(f => f.id === file.id)) return;\n setFiles(current => [file, ...current]);\n },\n [files]\n );\n\n // Remove a file from the state array\n const cancelFile = useCallback(\n (id: MockFileUploadItem['id']) => {\n if (uploadsInProgress[id]) {\n uploadsInProgress[id].abort();\n delete uploadsInProgress[id];\n }\n setFiles(current => current.filter(f => f.id !== id));\n },\n [uploadsInProgress]\n );\n\n // Mock an api request and remove a file from the state array\n const deleteFile = useCallback(\n async (id: MockFileUploadItem['id']) => {\n const file = files.find(f => f.id === id) as MockFileAttachmentResource;\n fetch(`http://cosmos.eng.pega.com/attachments/${file.id}`, { method: 'DELETE' }).then(() => {\n setFiles(current => current.filter(f => f.id !== file.id));\n });\n },\n [files]\n );\n\n const setProgress = useCallback((file: MockFileUploadItem, progress?: number) => {\n setFiles(current =>\n current.map(f => {\n if (file.id === f.id) {\n (f as MockFileUploadItem).progress = progress;\n }\n return f;\n })\n );\n }, []);\n\n useAfterInitialEffect(() => {\n files.forEach(file => {\n // Return if we have a mock attachment resource object or a File object that is currently uploading.\n if (!hasProp(file, 'File') \|\| typeof file.progress === 'number') return;\n\n // For each File in the array, not uploaded yet, make a POST to the mock service.\n postFile({\n file,\n onLoadStart: setProgress,\n onProgress: setProgress,\n onLoad(loadedFile) {\n delete uploadsInProgress[loadedFile.id];\n\n setFiles(cur => {\n return cur.map(f => {\n if (f.id === loadedFile.id) {\n return {\n ...loadedFile,\n id: createUID(),\n createDate: Date.now()\n };\n }\n\n return f;\n });\n });\n }\n });\n });\n }, [files.length, setProgress]);\n\n const value: FileServiceContextValue = useMemo(\n () => ({\n files,\n setFiles,\n attachFile,\n cancelFile,\n deleteFile\n }),\n [files, attachFile, cancelFile, deleteFile]\n );\n\n return <FileServiceContext.Provider value={value}>{children}</FileServiceContext.Provider>;\n};\n\nexport default Provider;\n"]}
1	+ {"version":3,"file":"FileService.mock.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/FileService.mock.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n ReactNode,\n useState,\n FunctionComponent,\n useCallback,\n useMemo,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n createUID,\n FileUploadItemProps,\n getKindFromMimeType,\n getMimeTypeFromFile,\n hasProp,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\n// -----------------------------------------------------------------------------\n// MockFileResourceObject\n// -----------------------------------------------------------------------------\nexport interface MockFileAttachmentResource {\n id: string;\n name: string;\n category: string;\n thumbnail?: string;\n createDate?: number;\n modifiedDate?: number;\n}\n\n// -----------------------------------------------------------------------------\n// MockFileSelectionObject\n// -----------------------------------------------------------------------------\nexport interface MockFileUploadItem\n extends Pick<MockFileAttachmentResource, 'id' \| 'category'>,\n FileUploadItemProps {\n File: File;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContextValue\n// -----------------------------------------------------------------------------\nexport interface FileServiceContextValue {\n files: (MockFileAttachmentResource \| MockFileUploadItem)[];\n setFiles: Dispatch<SetStateAction<FileServiceContextValue['files']>>;\n attachFile: (file: MockFileUploadItem) => void;\n cancelFile: (id: MockFileAttachmentResource['id']) => void;\n deleteFile: (id: MockFileAttachmentResource['id']) => void;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContext\n// -----------------------------------------------------------------------------\nexport const FileServiceContext = createContext<FileServiceContextValue>({\n files: [],\n setFiles: () => {},\n attachFile: () => {},\n cancelFile: () => {},\n deleteFile: () => {}\n});\n\n// -----------------------------------------------------------------------------\n// FilePostArg\n// -----------------------------------------------------------------------------\ninterface FilePostArg {\n file: MockFileUploadItem;\n onLoadStart: (file: MockFileUploadItem, progress: number) => void;\n onProgress: (file: MockFileUploadItem, progress: number) => void;\n onLoad: (file: MockFileUploadItem) => void;\n}\n\n// -----------------------------------------------------------------------------\n// uploadsInProgress\n// -----------------------------------------------------------------------------\nconst uploadsInProgress: Record<string, XMLHttpRequest> = {};\n\n// -----------------------------------------------------------------------------\n// postFile\n// -----------------------------------------------------------------------------\nconst postFile = ({ file, onLoadStart, onProgress, onLoad }: FilePostArg) => {\n const xhr = new XMLHttpRequest();\n const fd = new FormData();\n\n uploadsInProgress[file.id] = xhr;\n\n xhr.upload.onloadstart = () => {\n onLoadStart(file, 0);\n };\n\n xhr.upload.onprogress = ({ lengthComputable, loaded, total }) => {\n if (lengthComputable) {\n onProgress(file, (loaded / total) * 100);\n }\n };\n\n xhr.upload.onload = () => {\n onLoad(file);\n };\n\n // This is a mock api used to demo upload progress\n xhr.open('POST', 'http://cosmos.eng.pega.com/attachments');\n xhr.setRequestHeader('Content-Type', 'multipart/form-data');\n fd.append('attachments', file.File);\n xhr.send(fd);\n\n return xhr;\n};\n\n// Mock date generator\nconst getMockPriorDate = (h: number) => {\n const d = new Date();\n return d.setHours(d.getHours() - h);\n};\n\nexport const mockCategories: ('HR' \| 'Marketing' \| 'Sales' \| 'Accounting' \| 'Engineering')[] = [\n 'HR',\n 'Marketing',\n 'Sales',\n 'Accounting',\n 'Engineering'\n];\n\nexport const mockAttachmentListRequest = (): Promise<MockFileAttachmentResource[]> => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve([\n {\n id: createUID(),\n name: 'File.doc',\n category: mockCategories[0],\n createDate: getMockPriorDate(1)\n },\n {\n id: createUID(),\n name: 'File.ppt',\n category: mockCategories[1],\n createDate: getMockPriorDate(4)\n },\n {\n id: createUID(),\n name: 'File.xls',\n category: mockCategories[2],\n createDate: getMockPriorDate(30)\n },\n {\n id: createUID(),\n name: 'emptyFile',\n category: '',\n createDate: getMockPriorDate(144)\n }\n ]);\n }, 1000);\n });\n};\n\n// -----------------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------------\nconst Provider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n const [files, setFiles] = useState<FileServiceContextValue['files']>([]);\n\n const attachFile = useCallback(\n (file: MockFileUploadItem) => {\n if (files.some(f => f.id === file.id)) return;\n\n const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');\n if (type === 'image' && file.thumbnail) setFiles(current => [file, ...current]);\n else setFiles(current => [...current, file]);\n },\n [files]\n );\n\n // Remove a file from the state array\n const cancelFile = useCallback(\n (id: MockFileUploadItem['id']) => {\n if (uploadsInProgress[id]) {\n uploadsInProgress[id].abort();\n delete uploadsInProgress[id];\n }\n setFiles(current => current.filter(f => f.id !== id));\n },\n [uploadsInProgress]\n );\n\n // Mock an api request and remove a file from the state array\n const deleteFile = useCallback(\n async (id: MockFileUploadItem['id']) => {\n const file = files.find(f => f.id === id) as MockFileAttachmentResource;\n fetch(`http://cosmos.eng.pega.com/attachments/${file.id}`, { method: 'DELETE' }).then(() => {\n setFiles(current => current.filter(f => f.id !== file.id));\n });\n },\n [files]\n );\n\n const setProgress = useCallback((file: MockFileUploadItem, progress?: number) => {\n setFiles(current =>\n current.map(f => {\n if (file.id === f.id) {\n (f as MockFileUploadItem).progress = progress;\n }\n return f;\n })\n );\n }, []);\n\n useAfterInitialEffect(() => {\n files.forEach(file => {\n // Return if we have a mock attachment resource object or a File object that is currently uploading.\n if (!hasProp(file, 'File') \|\| typeof file.progress === 'number') return;\n\n // For each File in the array, not uploaded yet, make a POST to the mock service.\n postFile({\n file,\n onLoadStart: setProgress,\n onProgress: setProgress,\n onLoad(loadedFile) {\n delete uploadsInProgress[loadedFile.id];\n\n setFiles(cur => {\n return cur.map(f => {\n if (f.id === loadedFile.id) {\n return {\n ...loadedFile,\n id: createUID(),\n createDate: Date.now()\n };\n }\n\n return f;\n });\n });\n }\n });\n });\n }, [files.length, setProgress]);\n\n const value: FileServiceContextValue = useMemo(\n () => ({\n files,\n setFiles,\n attachFile,\n cancelFile,\n deleteFile\n }),\n [files, attachFile, cancelFile, deleteFile]\n );\n\n return <FileServiceContext.Provider value={value}>{children}</FileServiceContext.Provider>;\n};\n\nexport default Provider;\n"]}

package/jsx/work/Confirmation/Confirmation.stories.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { ConfirmationProps } from '@pega/cosmos-react-work';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ConfirmationStoryProps {
-    title?: ConfirmationProps['title'];
+    title: ConfirmationProps['title'];
 }
 export declare const ConfirmationDemo: Story<ConfirmationStoryProps>;
 //# sourceMappingURL=Confirmation.stories.d.ts.map

package/jsx/work/Confirmation/Confirmation.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAE~~/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;~~AAI1E~~,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,~~CAAC,~~EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;~~CACpC~~;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,~~CAS1D~~,CAAC"}
1	+ {"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAM1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAuB1D,CAAC"}

package/jsx/work/Confirmation/Confirmation.stories.jsx CHANGED Viewed

@@ -1,15 +1,26 @@
+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 (<Confirmation title={title || 'US-13371337 confirmation'} details={<FieldValueListDemo name='Name' value='Value' fields={[]}/>} whatsNext={['A little bit of this', 'A little bit of that']} tasks={<TaskListDemo />}/>);
+export const ConfirmationDemo = (args) => {
+    const [showConfirmation, setShowConfirmation] = useState(true);
+    return (<Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>
+      {showConfirmation && (<Confirmation title={args.title} details={<FieldValueListDemo name='Project' value='Pega Cosmos' fields={[]}/>} whatsNext={[
+                'Send references',
+                'Collect information on the case',
+                'Prepare a demonstration'
+            ]} tasks={<TaskListDemo />} onClose={() => setShowConfirmation(false)}/>)}
+      {!showConfirmation && (<Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>)}
+    </Flex>);
 };
 ConfirmationDemo.args = {
-    title: 'US-13371337 confirmation'
+    title: 'US-1337 confirmation'
 };
 ConfirmationDemo.argTypes = {
     title: { control: { type: 'text' } }

package/jsx/work/Confirmation/Confirmation.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Confirmation.stories.jsx","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,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,~~KAAK,~~IAAI,~~0BAA0B~~,CAAC,~~CAC3C~~,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,~~MAAM~~,CAAC,KAAK,CAAC,~~OAAO~~,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC,~~CACtE~~,SAAS,CAAC,CAAC,CAAC,~~sBAAsB~~,~~EAAE~~,~~sBAAsB~~,CAAC,CAAC,~~CAC5D~~,KAAK,CAAC,CAAC,CAAC,~~YAAY~~,CAAC,~~AAAD~~,~~EAAG~~,CAAC,~~EACxB~~,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.jsx","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,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC3E;MAAA,CAAC,gBAAgB,IAAI,CACnB,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC,CAC/E,SAAS,CAAC,CAAC;gBACT,iBAAiB;gBACjB,iCAAiC;gBACjC,yBAAyB;aAC1B,CAAC,CACF,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,AAAD,EAAG,CAAC,CACxB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,EAC1C,CACH,CACD;MAAA,CAAC,CAAC,gBAAgB,IAAI,CACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAC7E,CACH;IAAA,EAAE,IAAI,CAAC,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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/work/Details/Details.stories.jsx CHANGED Viewed

@@ -9,17 +9,17 @@ export const DetailsDemo = () => {
             {
                 id: '1',
                 name: 'Statement balance',
-                value: <CurrencyDisplay value='1,289.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='1289.00' currencyISOCode='USD'/>
             },
             {
                 id: '2',
                 name: 'Total balance',
-                value: <CurrencyDisplay value='35,667.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='35667.00' currencyISOCode='USD'/>
             },
             {
                 id: '3',
                 name: 'Available credit',
-                value: <CurrencyDisplay value='5,813.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='5813.00' currencyISOCode='USD'/>
             },
             {
                 id: '4',

package/jsx/work/Details/Details.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,OAAO,CACL,CAAC,OAAO,CACN,iBAAiB,CAAC,CAAC;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,~~UAAU~~,CAAC,eAAe,CAAC,KAAK,EAAG;~~aAClE~~;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,~~WAAW~~,CAAC,eAAe,CAAC,KAAK,EAAG;~~aACnE~~;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,~~UAAU~~,CAAC,eAAe,CAAC,KAAK,EAAG;~~aAClE~~;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,CAAC,UAAU,CACT,KAAK,CAAC,yBAAyB,CAC/B,WAAW,CAAC,eAAe,CAC3B,OAAO,CAAC,MAAM,EACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAG;aAChC;SACF,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CACzB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;oBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAClD;wBACE,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,qBAAqB,EAAE,IAAI,CAAC;qBAC9E;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;YACb,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CACrB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN;wBACE,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,kDAAkD;qBAC1D;oBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAC/C;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,sBAAsB,EAAE,IAAI,CAAC;qBAChF;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;SACd,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n CurrencyDisplay,\n DateTimeDisplay,\n URLDisplay,\n BooleanDisplay,\n FieldGroup,\n FieldValueList,\n Link\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/Details',\n component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n return (\n <Details\n highlightedFields={[\n {\n id: '1',\n name: 'Statement balance',\n value: <CurrencyDisplay value='~~1,289~~.00' currencyISOCode='USD' />\n },\n {\n id: '2',\n name: 'Total balance',\n value: <CurrencyDisplay value='~~35,667~~.00' currencyISOCode='USD' />\n },\n {\n id: '3',\n name: 'Available credit',\n value: <CurrencyDisplay value='~~5,813~~.00' currencyISOCode='USD' />\n },\n {\n id: '4',\n name: 'Payment due date',\n value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n },\n {\n id: '5',\n name: 'Available benefits',\n value: (\n <URLDisplay\n value='https://www.google.com/'\n displayText='View benefits'\n variant='link'\n />\n )\n },\n {\n id: '6',\n name: 'Platinum member',\n value: <BooleanDisplay value />\n }\n ]}\n regions={[\n <FieldGroup name='Personal'>\n <FieldValueList\n fields={[\n { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },\n { name: 'Primary phone', value: '(617) 374-9637' },\n {\n name: 'Primary email',\n value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>\n }\n ]}\n />\n </FieldGroup>,\n <FieldGroup name='Work'>\n <FieldValueList\n fields={[\n {\n name: 'Work address',\n value: '1 Monolith Business Parkway, Milltown, NH, 02333'\n },\n { name: 'Work phone', value: '(800) 374-2200' },\n {\n name: 'Work email',\n value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>\n }\n ]}\n />\n </FieldGroup>\n ]}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,OAAO,CACL,CAAC,OAAO,CACN,iBAAiB,CAAC,CAAC;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAG;aACjE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAG;aACjE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,CAAC,UAAU,CACT,KAAK,CAAC,yBAAyB,CAC/B,WAAW,CAAC,eAAe,CAC3B,OAAO,CAAC,MAAM,EACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAG;aAChC;SACF,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CACzB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;oBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAClD;wBACE,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,qBAAqB,EAAE,IAAI,CAAC;qBAC9E;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;YACb,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CACrB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN;wBACE,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,kDAAkD;qBAC1D;oBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAC/C;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,sBAAsB,EAAE,IAAI,CAAC;qBAChF;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;SACd,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n CurrencyDisplay,\n DateTimeDisplay,\n URLDisplay,\n BooleanDisplay,\n FieldGroup,\n FieldValueList,\n Link\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/Details',\n component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n return (\n <Details\n highlightedFields={[\n {\n id: '1',\n name: 'Statement balance',\n value: <CurrencyDisplay value='1289.00' currencyISOCode='USD' />\n },\n {\n id: '2',\n name: 'Total balance',\n value: <CurrencyDisplay value='35667.00' currencyISOCode='USD' />\n },\n {\n id: '3',\n name: 'Available credit',\n value: <CurrencyDisplay value='5813.00' currencyISOCode='USD' />\n },\n {\n id: '4',\n name: 'Payment due date',\n value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n },\n {\n id: '5',\n name: 'Available benefits',\n value: (\n <URLDisplay\n value='https://www.google.com/'\n displayText='View benefits'\n variant='link'\n />\n )\n },\n {\n id: '6',\n name: 'Platinum member',\n value: <BooleanDisplay value />\n }\n ]}\n regions={[\n <FieldGroup name='Personal'>\n <FieldValueList\n fields={[\n { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },\n { name: 'Primary phone', value: '(617) 374-9637' },\n {\n name: 'Primary email',\n value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>\n }\n ]}\n />\n </FieldGroup>,\n <FieldGroup name='Work'>\n <FieldValueList\n fields={[\n {\n name: 'Work address',\n value: '1 Monolith Business Parkway, Milltown, NH, 02333'\n },\n { name: 'Work phone', value: '(800) 374-2200' },\n {\n name: 'Work email',\n value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>\n }\n ]}\n />\n </FieldGroup>\n ]}\n />\n );\n};\n"]}

package/jsx/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/jsx/work/SearchResults/SearchResults.stories.jsx CHANGED Viewed

@@ -1,9 +1,9 @@
 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,
@@ -11,12 +11,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();
@@ -182,7 +176,7 @@ export const SearchResultsDemo = (args) => {
         });
     };
     const searchResults = (<>
-      <OneColumnPage title='Search results' a={<SearchResults results={limit < results.length
+      <OneColumnPage as={StyledSearchResults} title='Search results' a={<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}/>}/>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/work/Stakeholders/Stakeholders.mocks.d.ts ADDED Viewed

@@ -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;
+}) => 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 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;AAOF,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/jsx/work/Stakeholders/Stakeholders.mocks.jsx ADDED Viewed

@@ -0,0 +1,32 @@
+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));
+const count = Math.floor(Math.random() * 50) + 1;
+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}`}>{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 ADDED Viewed

@@ -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;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;AAGtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAGjD,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,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,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;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';\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/jsx/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/jsx/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/jsx/work/Stakeholders/Stakeholders.stories.jsx CHANGED Viewed

@@ -1,40 +1,12 @@
 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));
-const count = Math.floor(Math.random() * 50) + 1;
-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.`
-}));
-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}`}>{inputs}</FieldGroup>) : (inputs);
-};
-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
-    ];
-};
 export const StakeHoldersDemo = () => {
     const [loading, setLoading] = useState(true);
     const [mode, setMode] = useState();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.stories.jsx","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.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAkC,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAGjE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,GAAG,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAErC,CAAC;IAGJ,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAoB,EAAE,EAAE;QACvB,OAAO,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC7B,OAAO;gBACL,GAAG,WAAW;gBACd,MAAM,EAAE,GAAG,EAAE;oBACX,cAAc,CAAC,IAAI,CAAC,CAAC;oBACrB,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC3B,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;oBACzE,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;gBACrD,CAAC;gBACD,QAAQ,EAAE,GAAG,EAAE;oBACb,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC5E,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,IAAI,GAA8B,OAAO,CAAC,GAAG,EAAE;QACnD,OAAO;YAEL,OAAO,EAAE,WAAW;YAEpB,KAAK,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAE7C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS;YAK1F,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC5C,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,MAAM,CAAC,yBAAyB,gBAAgB,EAAE,CAAC,CAAC;gBAEpD,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnC,CAAC;YACD,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC3B,SAAS,EAAE,CAAC;YACd,CAAC;YACD,YAAY,EAAE,GAAG,EAAE;gBAEjB,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,WAAW,CAAC,SAAS,CAAC,CAAC;gBACvB,OAAO,CAAC,SAAS,CAAC,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAiC,OAAO,CAAC,GAAG,EAAE;QACzD,IAAI,YAAY,GAAG,gBAAgB,CAAC;QAGpC,IAAI,kBAAkB,EAAE;YAEtB,MAAM,WAAW,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;YAExE,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAiB,CAAC,CAAC,CAAC;SAC9F;QAED,OAAO;YAEL,OAAO,EAAE,cAAc;YAEvB,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC;YAE/B,QAAQ,EAAE,qBAAqB;YAC/B,YAAY,EAAE,GAAG,EAAE;gBAEjB,IAAI,cAAc;oBAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,OAAO,CACZ,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAC9C,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC,CACF,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACrD,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,SAAS,CAAC,CAAC;YACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,EACjB,CACH,CAAC;AACJ,CAAC,CAAC","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/jsx/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/jsx/work/Timeline/Timeline.stories.jsx CHANGED Viewed

@@ -5,9 +5,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));