npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.18.0 → 4.0.0-dev.18.2 - Mend

@pega/cosmos-react-demos 4.0.0-dev.18.0 → 4.0.0-dev.18.2

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileService.mock.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/FileService.mock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAET,iBAAiB,EAGjB,QAAQ,EACR,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,mBAAmB,~~EAInB~~,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,IAAI,GAAG,UAAU,CAAC,EACzD,UAAU,CAAC,mBAAmB,EAAE,IAAI,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;CACZ;AAKD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,CAAC,0BAA0B,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAC3D,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3D,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CAC5D;AAKD,eAAO,MAAM,kBAAkB,kDAM7B,CAAC;AAuDH,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,CAAC,EAMzF,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO,QAAQ,0BAA0B,EAAE,CA+BhF,CAAC;AAKF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,~~CA2FxD~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"FileService.mock.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/FileService.mock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAET,iBAAiB,EAGjB,QAAQ,EACR,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,mBAAmB,EAEnB,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,IAAI,GAAG,UAAU,CAAC,EACzD,UAAU,CAAC,mBAAmB,EAAE,IAAI,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;CACZ;AAKD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,CAAC,0BAA0B,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAC3D,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3D,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CAC5D;AAKD,eAAO,MAAM,kBAAkB,kDAM7B,CAAC;AAuDH,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,CAAC,EAMzF,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO,QAAQ,0BAA0B,EAAE,CA+BhF,CAAC;AAKF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAwFxD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,5 +1,5 @@
 import { createContext, useState, useCallback, useMemo } from 'react';
-import { createUID, getKindFromMimeType, getMimeTypeFromFile, hasProp, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { createUID, hasProp, useAfterInitialEffect } from '@pega/cosmos-react-core';
 export const FileServiceContext = createContext({
     files: [],
     setFiles: () => { },
@@ -77,11 +77,7 @@ const Provider = ({ children }) => {
     const attachFile = useCallback((file) => {
         if (files.some(f => f.id === file.id))
             return;
-        const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');
-        if (type === 'image' && file.thumbnail)
-            setFiles(current => [file, ...current]);
-        else
-            setFiles(current => [...current, file]);
+        setFiles(current => [file, ...current]);
     }, [files]);
     const cancelFile = useCallback((id) => {
         if (uploadsInProgress[id]) {

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 getKindFromMimeType,\n getMimeTypeFromFile,\n hasProp,\n OmitStrict,\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 OmitStrict<FileUploadItemProps, 'id'> {\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"]}
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 OmitStrict,\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 OmitStrict<FileUploadItemProps, 'id'> {\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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAsB~~/C,OAAO,EAAS,UAAU,EAA0C,MAAM,yBAAyB,CAAC;;~~AAIpG~~,wBAGU;AAEV,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,~~CAoH5C~~,CAAC"}
1	+ {"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAW/C,OAAO,EAAS,UAAU,EAA0C,MAAM,yBAAyB,CAAC;;AAMpG,wBAGU;AAEV,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAkF5C,CAAC"}

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Button, MetaList, Text, Form, Input, TextArea, RadioCheckGroup, RadioButton, Checkbox, DateInput, NumberInput, FileInput, Status, Link, DateTimeDisplay, Flex } from '@pega/cosmos-react-core';
+import { MetaList, Text, Status, Link, DateTimeDisplay } from '@pega/cosmos-react-core';
 import { Tasks, tasksHelpers as helpers } from '@pega/cosmos-react-work';
+import { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';
 import viewGroups from './Tasks.mocks';
 export default {
     title: 'Work/Tasks',
@@ -9,29 +10,6 @@ export default {
 export const TasksDemo = (args) => {
     const [isLimited, setIsLimited] = useState(true);
     const [hasOpenTask, setHasOpenTask] = useState(false);
-    const DemoTaskForm = ({ onSubmit, onCancel }) => {
-        return (<Form actions={<>
-            <Button onClick={onCancel}>Cancel</Button>
-            <Button variant='primary' onClick={onSubmit}>
-              Submit
-            </Button>
-          </>}>
-        <Flex container={{ direction: 'column', itemGap: 2 }}>
-          <Input label='Text field 1' required/>
-          <Input label='Text field 2'/>
-          <NumberInput onChange={() => { }} label='Number field'/>
-          <Checkbox label='Boolean field' required/>
-          <RadioCheckGroup label='Picklist options' name='picklist-1'>
-            <RadioButton label='option 1' defaultChecked/>
-            <RadioButton label='option 2'/>
-            <RadioButton label='option 3'/>
-          </RadioCheckGroup>
-          <TextArea label='Text paragraph field' required/>
-          <FileInput label='File field'/>
-          <DateInput label='Datetime field'/>
-        </Flex>
-      </Form>);
-    };
     const [views, setViews] = useState(viewGroups);
     const activeView = helpers.getSelectedView(views);
     const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
@@ -64,11 +42,7 @@ export const TasksDemo = (args) => {
                     setHasOpenTask(true);
                 }
                 : undefined,
-            content: hasOpenTask ? (<DemoTaskForm onSubmit={() => {
-                    setHasOpenTask(false);
-                }} onCancel={() => {
-                    setHasOpenTask(false);
-                }}/>) : null
+            content: hasOpenTask ? (<AIButtonFormDemo onCancel={() => setHasOpenTask(false)} onSubmit={() => setHasOpenTask(false)}/>) : null
         };
     });
     return (<Tasks name={args.name ?? 'Tasks'} count={activeViewTaskCount} items={taskArray} avatar={args.showVisual && activeView ? { name: activeView.text } : undefined} viewSelector={args.showViewSelector

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,~~MAAM,EACN,~~QAAQ,EACR,IAAI,EACJ,~~IAAI,EACJ,KAAK,EACL,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,~~MAAM,EACN,IAAI,EACJ,eAAe,~~EAEf~~,~~IAAI,EACL,~~MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAA6B,YAAY,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAYV,MAAM,CAAC,MAAM,SAAS,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACzE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,~~YAAY,GAAG,~~CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAkD,EAAE,EAAE;QAC9F,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,EACE;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CACzC;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAC1C;;YACF,EAAE,MAAM,CACV;UAAA,GAAG,CACJ,CAED;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CACnD;UAAA,CAAC,KAAK,~~CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EACpC;UAAA,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAC3B;UAAA,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,~~EAAE,~~GAAE,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EACrD;UAAA,CAAC,~~QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,EACxC;UAAA,CAAC,eAAe,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CACzD;YAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,EAC5C;YAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,EAC7B;YAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,EAC/B;UAAA,EAAE,eAAe,CACjB;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,sBAAsB,CAAC,QAAQ,EAC/C;UAAA,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,EAC7B;UAAA,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,EACnC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/C,MAAM,UAAU,GAAG,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,EAAE,KAAK,IAAI,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAoB,KAAK,CAAC,IAAI,CAC3C;QACE,MAAM,EAAE,SAAS;YACf,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,mBAAmB,CAAC;YAChD,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,mBAAmB;KACtC,EACD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACP,MAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC3B,IAAI,MAAM,GAA2B,MAAM,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,MAAM,GAAG,QAAQ,CAAC;SACnB;aAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAClB,MAAM,GAAG,MAAM,CAAC;SACjB;QAED,OAAO;YACL,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YACrB,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,CACJ,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;oBACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;oBAC1C,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CACvB;oBAAI,CAAC,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,EACpE;cAAA,EAAE,IAAI,CAAC;oBACP,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC;iBAC3C,CAAC,EACF,CACH;YACD,MAAM,EACJ,IAAI,CAAC,aAAa,KAAK,KAAK;gBAC1B,CAAC,CAAC,GAAG,EAAE;oBACH,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;gBACH,CAAC,CAAC,SAAS;YACf,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CACrB,CAAC,~~YAAY~~,~~CACX~~,QAAQ,CAAC,CAAC,GAAG,EAAE~~;oBACb~~,cAAc,CAAC,KAAK,CAAC,CAAC~~;gBACxB~~,~~CAAC~~,~~CAAC,CACF,~~QAAQ,CAAC,CAAC,GAAG,EAAE~~;oBACb~~,cAAc,CAAC,KAAK,CAAC,CAAC~~;gBACxB~~,~~CAAC~~,~~CAAC,EACF,~~CACH,CAAC,CAAC,CAAC,IAAI;SACT,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CACJ,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,CAC3B,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAC3B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9E,YAAY,CAAC,CACX,IAAI,CAAC,gBAAgB;YACnB,CAAC,CAAC;gBACE,KAAK;gBACL,YAAY,EAAE,EAAE,CAAC,EAAE;oBACjB,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAsB,CAAC,CAAC;gBACpE,CAAC;aACF;YACH,CAAC,CAAC,SAAS,CACd,CACD,cAAc,CAAC,CACb,IAAI,CAAC,YAAY,IAAI,mBAAmB,GAAG,CAAC;YAC1C,CAAC,CAAC,GAAG,EAAE;gBACH,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC;YACH,CAAC,CAAC,SAAS,CACd,CACD,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EACrC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,IAAI;IACtB,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;IACnB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACzC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n ~~Button,\n~~ MetaList,\n Text,\n ~~Form,\n Input,\n TextArea,\n RadioCheckGroup,\n RadioButton,\n Checkbox,\n DateInput,\n NumberInput,\n FileInput,\n~~ Status,\n Link,\n DateTimeDisplay,\n StatusProps~~,\n Flex~~\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps, tasksHelpers as helpers } from '@pega/cosmos-react-work';\n\nimport viewGroups from './Tasks.mocks';\n\nexport default {\n title: 'Work/Tasks',\n component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n name?: TasksProps['name'];\n showVisual?: boolean;\n showViewSelector?: boolean;\n enableExpand?: boolean;\n count?: TasksProps['count'];\n openableTasks?: boolean;\n search?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n const [isLimited, setIsLimited] = useState(true);\n const [hasOpenTask, setHasOpenTask] = useState(false);\n\n const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n return (\n <Form\n actions={\n <>\n <Button onClick={onCancel}>Cancel</Button>\n <Button variant='primary' onClick={onSubmit}>\n Submit\n </Button>\n </>\n }\n >\n <Flex container={{ direction: 'column', itemGap: 2 }}>\n <Input label='Text field 1' required />\n <Input label='Text field 2' />\n <NumberInput onChange={() => {}} label='Number field' />\n <Checkbox label='Boolean field' required />\n <RadioCheckGroup label='Picklist options' name='picklist-1'>\n <RadioButton label='option 1' defaultChecked />\n <RadioButton label='option 2' />\n <RadioButton label='option 3' />\n </RadioCheckGroup>\n <TextArea label='Text paragraph field' required />\n <FileInput label='File field' />\n <DateInput label='Datetime field' />\n </Flex>\n </Form>\n );\n };\n\n const [views, setViews] = useState(viewGroups);\n\n const activeView = helpers.getSelectedView(views);\n const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n const taskArray: TaskItemProps[] = Array.from(\n {\n length: isLimited\n ? Math.min(3, args.count ?? activeViewTaskCount)\n : args.count ?? activeViewTaskCount\n },\n (_, i) => {\n const dueIn = 86400000 * i;\n let status: StatusProps['variant'] = 'info';\n\n if (i === 0) {\n status = 'urgent';\n } else if (i === 1) {\n status = 'warn';\n }\n\n return {\n id: `${i}`,\n name: `Task ${i + 1}`,\n processName: i % 2 ? 'Demo process' : undefined,\n meta: (\n <MetaList\n items={[\n <Status variant={status}>{status}</Status>,\n <Text variant='secondary'>\n Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n </Text>,\n <Link href='#demo'>Parent case link</Link>\n ]}\n />\n ),\n onOpen:\n args.openableTasks !== false\n ? () => {\n setHasOpenTask(true);\n }\n : undefined,\n content: hasOpenTask ? (\n <~~DemoTaskForm~~\n ~~onSubmit~~={() => ~~{\n~~ setHasOpenTask(false)~~;\n~~ }}\n ~~onCancel~~={() => ~~{\n~~ setHasOpenTask(false)~~;\n~~ }}\n />\n ) : null\n };\n }\n );\n\n return (\n <Tasks\n name={args.name ?? 'Tasks'}\n count={activeViewTaskCount}\n items={taskArray}\n avatar={args.showVisual && activeView ? { name: activeView.text } : undefined}\n viewSelector={\n args.showViewSelector\n ? {\n views,\n onViewSelect: id => {\n setViews(cur => helpers.selectView(cur, id) as typeof viewGroups);\n }\n }\n : undefined\n }\n onExpandToggle={\n args.enableExpand && activeViewTaskCount > 3\n ? () => {\n setIsLimited(cur => !cur);\n }\n : undefined\n }\n search={args.search ? {} : undefined}\n />\n );\n};\n\nTasksDemo.args = {\n name: 'Assignments',\n showVisual: true,\n showViewSelector: true,\n enableExpand: true,\n openableTasks: true,\n count: undefined,\n search: false\n};\n\nTasksDemo.argTypes = {\n name: { control: { type: 'text' } },\n showVisual: { control: { type: 'boolean' } },\n showViewSelector: { control: { type: 'boolean' } },\n enableExpand: { control: { type: 'boolean' } },\n count: { control: { type: 'number' } },\n openableTasks: { control: { type: 'boolean' } },\n search: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n MetaList,\n Text,\n Status,\n Link,\n DateTimeDisplay,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps, tasksHelpers as helpers } from '@pega/cosmos-react-work';\n\nimport { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';\n\nimport viewGroups from './Tasks.mocks';\n\nexport default {\n title: 'Work/Tasks',\n component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n name?: TasksProps['name'];\n showVisual?: boolean;\n showViewSelector?: boolean;\n enableExpand?: boolean;\n count?: TasksProps['count'];\n openableTasks?: boolean;\n search?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n const [isLimited, setIsLimited] = useState(true);\n const [hasOpenTask, setHasOpenTask] = useState(false);\n\n const [views, setViews] = useState(viewGroups);\n\n const activeView = helpers.getSelectedView(views);\n const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n const taskArray: TaskItemProps[] = Array.from(\n {\n length: isLimited\n ? Math.min(3, args.count ?? activeViewTaskCount)\n : args.count ?? activeViewTaskCount\n },\n (_, i) => {\n const dueIn = 86400000 * i;\n let status: StatusProps['variant'] = 'info';\n\n if (i === 0) {\n status = 'urgent';\n } else if (i === 1) {\n status = 'warn';\n }\n\n return {\n id: `${i}`,\n name: `Task ${i + 1}`,\n processName: i % 2 ? 'Demo process' : undefined,\n meta: (\n <MetaList\n items={[\n <Status variant={status}>{status}</Status>,\n <Text variant='secondary'>\n Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n </Text>,\n <Link href='#demo'>Parent case link</Link>\n ]}\n />\n ),\n onOpen:\n args.openableTasks !== false\n ? () => {\n setHasOpenTask(true);\n }\n : undefined,\n content: hasOpenTask ? (\n <AIButtonFormDemo\n onCancel={() => setHasOpenTask(false)}\n onSubmit={() => setHasOpenTask(false)}\n />\n ) : null\n };\n }\n );\n\n return (\n <Tasks\n name={args.name ?? 'Tasks'}\n count={activeViewTaskCount}\n items={taskArray}\n avatar={args.showVisual && activeView ? { name: activeView.text } : undefined}\n viewSelector={\n args.showViewSelector\n ? {\n views,\n onViewSelect: id => {\n setViews(cur => helpers.selectView(cur, id) as typeof viewGroups);\n }\n }\n : undefined\n }\n onExpandToggle={\n args.enableExpand && activeViewTaskCount > 3\n ? () => {\n setIsLimited(cur => !cur);\n }\n : undefined\n }\n search={args.search ? {} : undefined}\n />\n );\n};\n\nTasksDemo.args = {\n name: 'Assignments',\n showVisual: true,\n showViewSelector: true,\n enableExpand: true,\n openableTasks: true,\n count: undefined,\n search: false\n};\n\nTasksDemo.argTypes = {\n name: { control: { type: 'text' } },\n showVisual: { control: { type: 'boolean' } },\n showViewSelector: { control: { type: 'boolean' } },\n enableExpand: { control: { type: 'boolean' } },\n count: { control: { type: 'number' } },\n openableTasks: { control: { type: 'boolean' } },\n search: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/AIButton/AIButton.stories.d.ts CHANGED Viewed

@@ -4,7 +4,11 @@ declare const _default: Meta;
 export default _default;
 export declare const AIButtonDemo: Story<AIButtonProps>;
 interface AIButtonFormProps {
-    throwAIError: boolean;
+    throwAIError?: boolean;
+    showTitle?: boolean;
+    showDescription?: boolean;
+    onCancel?: () => void;
+    onSubmit?: () => void;
 }
 export declare const AIButtonFormDemo: Story<AIButtonFormProps>;
 export declare const AIButtonFormInModalDemo: Story<AIButtonFormProps>;

package/lib/core/AIButton/AIButton.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAqBd,MAAM,yBAAyB,CAAC;;~~AAIjC~~,wBAOU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAE7C,CAAC;AAYF,UAAU,iBAAiB;IACzB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,~~CA0MrD~~,CAAC;~~AAUF~~,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAAiB,~~CAiO5D~~,CAAC;AASF,UAAU,uBAAuB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,uBAAuB,CAuB/D,CAAC"}
1	+ {"version":3,"file":"AIButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAqBd,MAAM,yBAAyB,CAAC;;AAMjC,wBAOU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAE7C,CAAC;AAYF,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAsOrD,CAAC;AAcF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAAiB,CAsP5D,CAAC;AASF,UAAU,uBAAuB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,uBAAuB,CAuB/D,CAAC"}

package/lib/core/AIButton/AIButton.stories.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useReducer, useState } from 'react';
-import { AIButton, Banner, Button, Checkbox, CheckboxGroup, Configuration, ErrorState, Flex, Form, Grid, Input, Modal, Progress, RadioButton, RadioButtonGroup, Select, Option, TextArea, useModalContext, useModalManager, useToaster } from '@pega/cosmos-react-core';
+import { useEffect, useReducer, useRef, useState } from 'react';
+import { AIButton, Banner, Button, Checkbox, CheckboxGroup, Configuration, ErrorState, Flex, Form, Grid, Input, Modal, RadioButton, RadioButtonGroup, Select, Option, TextArea, useModalContext, useModalManager, useToaster } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
 import { AIValues, fieldReducer, initFields } from './AIButton.mocks';
 export default {
     title: 'Core/AIButton',
@@ -23,9 +24,10 @@ AIButtonDemo.argTypes = {
 };
 export const AIButtonFormDemo = (args) => {
     const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const [bannerMessages, setBannerMessages] = useState([]);
+    const [banner, setBanner] = useState();
     const [loadingMessage, setLoadingMessage] = useState('');
     const [submitting, setSubmitting] = useState(false);
+    const bannerHandleRef = useRef(null);
     const { push } = useToaster();
     const name = fields.find(field => field.name === 'name');
     const email = fields.find(field => field.name === 'email');
@@ -33,29 +35,32 @@ export const AIButtonFormDemo = (args) => {
     const meetings = fields.find(field => field.name === 'meetings');
     const meals = fields.find(field => field.name === 'meals');
     const notes = fields.find(field => field.name === 'notes');
+    useEffect(() => {
+        if (banner && bannerHandleRef.current)
+            bannerHandleRef.current.focus();
+    }, [banner]);
     if (!name || !email || !locations || !meetings || !meals || !notes)
         return _jsx(ErrorState, {});
-    const banners = bannerMessages.length > 0 ? _jsx(Banner, { variant: 'urgent', messages: bannerMessages }) : undefined;
     const clearForm = () => {
         fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));
     };
     const fillWithAI = () => {
         setLoadingMessage('AI is filling out the form...');
         setTimeout(() => {
+            setLoadingMessage('');
             if (args.throwAIError) {
-                setBannerMessages(curr => [
-                    'An error occurred while generating responses from the AI.',
-                    ...curr
-                ]);
+                setBanner(_jsx(Banner, { variant: 'urgent', messages: ['An error occurred while generating responses from the AI.'], onDismiss: () => {
+                        setBanner(undefined);
+                    }, handle: bannerHandleRef }));
             }
             else {
+                setBanner(undefined);
                 const values = AIValues[Math.floor(Math.random() * AIValues.length)];
                 Object.keys(values).forEach(field => {
                     setField({ type: 'ai', name: field, value: values[field] });
                 });
             }
-            setLoadingMessage('');
-        }, 2000);
+        }, loadingTimeoutMS);
     };
     const trySubmit = () => {
         const errors = [];
@@ -65,7 +70,6 @@ export const AIButtonFormDemo = (args) => {
             if (error)
                 errors.push(error);
         });
-        setBannerMessages(errors);
         if (errors.length === 0) {
             setSubmitting(true);
             setLoadingMessage('Submitting form...');
@@ -74,27 +78,42 @@ export const AIButtonFormDemo = (args) => {
                 setSubmitting(false);
                 push({ content: 'Form submitted!' });
                 clearForm();
-            }, 1000);
+                setBanner(undefined);
+                args.onSubmit?.();
+            }, loadingTimeoutMS);
+        }
+        else {
+            setBanner(_jsx(Banner, { variant: 'urgent', messages: errors, onDismiss: () => {
+                    setBanner(undefined);
+                }, handle: bannerHandleRef }));
         }
     };
-    return (_jsxs(Form, { heading: 'AI Form', description: 'The AI in this demo is a mock and not a functional AI.', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: clearForm, disabled: submitting, children: "Cancel" }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(AIButton, { label: 'Fill form with AI', onClick: fillWithAI, disabled: !!loadingMessage }), _jsx(Button, { variant: 'primary', disabled: !!loadingMessage, onClick: trySubmit, children: "Submit" })] })] }), banners: banners, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Progress, { visible: !!loadingMessage, focusOnVisible: true, message: loadingMessage }), _jsxs(Grid, { container: { gap: 1, cols: `repeat(2, minmax(0, 1fr))` }, children: [_jsx(Input, { name: name.name, label: name.label, required: name.required, info: name.info || name.help, value: name.value, status: name.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Input, { name: email.name, label: email.label, required: email.required, info: email.info || email.help, value: email.value, status: email.status, type: 'email', onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: locations.name, label: locations.label, required: locations.required, info: locations.info || locations.help, status: locations.status, children: ['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, value: office, checked: locations.value?.includes(office), onChange: (e) => setField({
-                                    type: 'change',
-                                    name: e.target.name,
-                                    value: e.target.value
-                                }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: meetings.name, label: meetings.label, required: meetings.required, info: meetings.info || meetings.help, status: meetings.status, children: ['Yes', 'No'].map(option => (_jsx(RadioButton, { label: option, value: option, checked: meetings.value === option, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }) }, option))) }) }), _jsxs(Select, { name: meals.name, label: meals.label, required: meals.required, info: meals.info || meals.help, value: meals.value || 'choose meal...', status: meals.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), children: [_jsx(Option, { children: "choose meal..." }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: notes.name, label: notes.label, required: notes.required, info: notes.info || notes.help, value: notes.value, status: notes.status, maxLength: 200, displayCharCount: true, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }) })] })] }));
+    return (_jsx(Form, { heading: args.showTitle ? 'AI Form' : undefined, description: args.showDescription ? 'The AI in this demo is a mock and not a functional AI.' : undefined, progress: loadingMessage, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
+                        clearForm();
+                        args.onCancel?.();
+                    }, disabled: submitting, children: "Cancel" }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(AIButton, { label: 'Fill form with AI', onClick: fillWithAI, disabled: !!loadingMessage }), _jsx(Button, { variant: 'primary', disabled: !!loadingMessage, onClick: trySubmit, children: "Submit" })] })] }), banners: banner, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(2, minmax(0, 1fr))` }, children: [_jsx(Input, { name: name.name, label: name.label, required: name.required, info: name.info || name.help, value: name.value, status: name.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Input, { name: email.name, label: email.label, required: email.required, info: email.info || email.help, value: email.value, status: email.status, type: 'email', onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: locations.name, label: locations.label, required: locations.required, info: locations.info || locations.help, status: locations.status, children: ['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, value: office, checked: locations.value?.includes(office), onChange: (e) => setField({
+                                type: 'change',
+                                name: e.target.name,
+                                value: e.target.value
+                            }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: meetings.name, label: meetings.label, required: meetings.required, info: meetings.info || meetings.help, status: meetings.status, children: ['Yes', 'No'].map(option => (_jsx(RadioButton, { label: option, value: option, checked: meetings.value === option, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }) }, option))) }) }), _jsxs(Select, { name: meals.name, label: meals.label, required: meals.required, info: meals.info || meals.help, value: meals.value || 'choose meal...', status: meals.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), children: [_jsx(Option, { children: "choose meal..." }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: notes.name, label: notes.label, required: notes.required, info: notes.info || notes.help, value: notes.value, status: notes.status, maxLength: 200, displayCharCount: true, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }) })] }) }));
 };
 AIButtonFormDemo.args = {
-    throwAIError: false
+    throwAIError: false,
+    showTitle: true,
+    showDescription: true
 };
 AIButtonFormDemo.argTypes = {
-    throwAIError: { control: { type: 'boolean' } }
+    throwAIError: { control: { type: 'boolean' } },
+    showTitle: { control: { type: 'boolean' }, table: { disable: true } },
+    showDescription: { control: { type: 'boolean' } }
 };
 export const AIButtonFormInModalDemo = (args) => {
     const AIModal = () => {
         const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-        const [bannerMessages, setBannerMessages] = useState([]);
+        const [banner, setBanner] = useState();
         const [loadingMessage, setLoadingMessage] = useState('');
         const [submitting, setSubmitting] = useState(false);
+        const bannerHandleRef = useRef(null);
         const { push } = useToaster();
         const { dismiss } = useModalContext();
         const name = fields.find(field => field.name === 'name');
@@ -103,26 +122,30 @@ export const AIButtonFormInModalDemo = (args) => {
         const meetings = fields.find(field => field.name === 'meetings');
         const meals = fields.find(field => field.name === 'meals');
         const notes = fields.find(field => field.name === 'notes');
+        useEffect(() => {
+            if (banner && bannerHandleRef.current)
+                bannerHandleRef.current.focus();
+        }, [banner]);
         if (!name || !email || !locations || !meetings || !meals || !notes)
             return _jsx(ErrorState, {});
-        const banners = bannerMessages.length > 0 ? _jsx(Banner, { variant: 'urgent', messages: bannerMessages }) : undefined;
         const fillWithAI = () => {
             setLoadingMessage('AI is filling out the form...');
             setTimeout(() => {
+                setLoadingMessage('');
                 if (args.throwAIError) {
-                    setBannerMessages(curr => [
-                        'An error occurred while generating responses from the AI.',
-                        ...curr
-                    ]);
+                    setBanner(_jsx(Banner, { variant: 'urgent', messages: ['An error occurred while generating responses from the AI.'], onDismiss: () => {
+                            setBanner(undefined);
+                        }, handle: bannerHandleRef }));
                 }
                 else {
+                    setBanner(undefined);
                     const values = AIValues[Math.floor(Math.random() * AIValues.length)];
                     Object.keys(values).forEach(field => {
                         setField({ type: 'ai', name: field, value: values[field] });
                     });
                 }
                 setLoadingMessage('');
-            }, 2000);
+            }, loadingTimeoutMS);
         };
         const trySubmit = () => {
             const errors = [];
@@ -132,7 +155,6 @@ export const AIButtonFormInModalDemo = (args) => {
                 if (error)
                     errors.push(error);
             });
-            setBannerMessages(errors);
             if (errors.length === 0) {
                 setSubmitting(true);
                 setLoadingMessage('Submitting form...');
@@ -140,11 +162,17 @@ export const AIButtonFormInModalDemo = (args) => {
                     setLoadingMessage('');
                     setSubmitting(false);
                     push({ content: 'Form submitted!' });
+                    setBanner(undefined);
                     dismiss();
-                }, 1000);
+                }, loadingTimeoutMS);
+            }
+            else {
+                setBanner(_jsx(Banner, { variant: 'urgent', messages: errors, onDismiss: () => {
+                        setBanner(undefined);
+                    }, handle: bannerHandleRef }));
             }
         };
-        return (_jsx(Modal, { heading: 'AI Form in a Modal', progress: loadingMessage ? { message: loadingMessage } : undefined, onRequestDismiss: () => !submitting, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, disabled: submitting, children: "Cancel" }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(AIButton, { label: 'Fill form with AI', onClick: fillWithAI, disabled: !!loadingMessage }), _jsx(Button, { variant: 'primary', disabled: !!loadingMessage, onClick: trySubmit, children: "Submit" })] })] }), children: _jsx(Form, { description: 'The AI in this demo is a mock and not a functional AI.', banners: banners, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(2, minmax(0, 1fr))` }, children: [_jsx(Input, { name: name.name, label: name.label, required: name.required, info: name.info || name.help, value: name.value, status: name.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Input, { name: email.name, label: email.label, required: email.required, info: email.info || email.help, value: email.value, status: email.status, type: 'email', onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: locations.name, label: locations.label, required: locations.required, info: locations.info || locations.help, status: locations.status, children: ['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, value: office, checked: locations.value?.includes(office), onChange: (e) => setField({
+        return (_jsx(Modal, { heading: 'AI Form in a Modal', progress: loadingMessage ? { message: loadingMessage } : undefined, onRequestDismiss: () => !submitting, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, disabled: submitting, children: "Cancel" }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(AIButton, { label: 'Fill form with AI', onClick: fillWithAI, disabled: !!loadingMessage }), _jsx(Button, { variant: 'primary', disabled: !!loadingMessage, onClick: trySubmit, children: "Submit" })] })] }), children: _jsx(Form, { description: 'The AI in this demo is a mock and not a functional AI.', banners: banner, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(2, minmax(0, 1fr))` }, children: [_jsx(Input, { name: name.name, label: name.label, required: name.required, info: name.info || name.help, value: name.value, status: name.status, onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Input, { name: email.name, label: email.label, required: email.required, info: email.info || email.help, value: email.value, status: email.status, type: 'email', onChange: (e) => setField({ type: 'change', name: e.target.name, value: e.target.value }), onBlur: (e) => setField({ type: 'blur', name: e.target.name, value: e.target.value }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: locations.name, label: locations.label, required: locations.required, info: locations.info || locations.help, status: locations.status, children: ['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, value: office, checked: locations.value?.includes(office), onChange: (e) => setField({
                                         type: 'change',
                                         name: e.target.name,
                                         value: e.target.value

package/lib/core/AIButton/AIButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIButton.stories.js","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useReducer, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n AIButton,\n AIButtonProps,\n Banner,\n Button,\n Checkbox,\n CheckboxGroup,\n Configuration,\n ErrorState,\n Flex,\n Form,\n Grid,\n Input,\n Modal,\n Progress,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n useModalContext,\n useModalManager,\n useToaster\n} from '@pega/cosmos-react-core';\n\nimport { AIValues, fieldReducer, initFields } from './AIButton.mocks';\n\nexport default {\n title: 'Core/AIButton',\n component: AIButton,\n excludeStories: ['ConfigurableAIButton'],\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const AIButtonDemo: Story<AIButtonProps> = (args: AIButtonProps) => {\n return <AIButton label={args.label} disabled={args.disabled} />;\n};\n\nAIButtonDemo.args = {\n label: 'Fill form with AI',\n disabled: false\n};\n\nAIButtonDemo.argTypes = {\n label: { control: { type: 'text' } },\n disabled: { control: { type: 'boolean' } }\n};\n\ninterface AIButtonFormProps {\n throwAIError: boolean;\n}\n\nexport const AIButtonFormDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [bannerMessages, setBannerMessages] = useState<string[]>([]);\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !locations \|\| !meetings \|\| !meals \|\| !notes) return <ErrorState />;\n\n const banners =\n bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages} /> : undefined;\n\n const clearForm = () => {\n fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));\n };\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n if (args.throwAIError) {\n setBannerMessages(curr => [\n 'An error occurred while generating responses from the AI.',\n ...curr\n ]);\n } else {\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n setLoadingMessage('');\n }, 2000);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() \|\| '';\n if (error) errors.push(error);\n });\n setBannerMessages(errors);\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n clearForm();\n }, 1000);\n }\n };\n\n return (\n <Form\n heading='AI Form'\n description='The AI in this demo is a mock and not a functional AI.'\n actions={\n <>\n <Button onClick={clearForm} disabled={submitting}>\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage} />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n banners={banners}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Progress visible={!!loadingMessage} focusOnVisible message={loadingMessage} />\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info \|\| name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info \|\| email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info \|\| locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info \|\| meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info \|\| meals.help}\n value={meals.value \|\| 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info \|\| notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n\nAIButtonFormDemo.args = {\n throwAIError: false\n};\n\nAIButtonFormDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } }\n};\n\nexport const AIButtonFormInModalDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const AIModal = () => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [bannerMessages, setBannerMessages] = useState<string[]>([]);\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const { push } = useToaster();\n const { dismiss } = useModalContext();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !locations \|\| !meetings \|\| !meals \|\| !notes) return <ErrorState />;\n\n const banners =\n bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages} /> : undefined;\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n if (args.throwAIError) {\n setBannerMessages(curr => [\n 'An error occurred while generating responses from the AI.',\n ...curr\n ]);\n } else {\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n setLoadingMessage('');\n }, 2000);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() \|\| '';\n if (error) errors.push(error);\n });\n setBannerMessages(errors);\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n dismiss();\n }, 1000);\n }\n };\n\n return (\n <Modal\n heading='AI Form in a Modal'\n progress={loadingMessage ? { message: loadingMessage } : undefined}\n onRequestDismiss={() => !submitting}\n actions={\n <>\n <Button onClick={dismiss} disabled={submitting}>\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton\n label='Fill form with AI'\n onClick={fillWithAI}\n disabled={!!loadingMessage}\n />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n >\n <Form\n description='The AI in this demo is a mock and not a functional AI.'\n banners={banners}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info \|\| name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info \|\| email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info \|\| locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info \|\| meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info \|\| meals.help}\n value={meals.value \|\| 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info \|\| notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(AIModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAIButtonFormInModalDemo.args = {\n throwAIError: false\n};\n\nAIButtonFormInModalDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } }\n};\ninterface ConfigurableButtonProps {\n borderWidth?: string;\n borderRadius?: number;\n color?: string;\n secondaryColor?: string;\n padding?: string;\n}\n\nexport const ConfigurableAIButton: Story<ConfigurableButtonProps> = (\n args: ConfigurableButtonProps\n) => {\n return (\n <Configuration\n theme={{\n base: {\n palette: {\n ai: args.color\n }\n },\n components: {\n button: {\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n padding: args.padding\n }\n }\n }}\n >\n <AIButton label='Configurable Button' />\n </Configuration>\n );\n};\n\nConfigurableAIButton.args = {\n borderWidth: '0.0625rem',\n borderRadius: 9999,\n color: '#681fc3',\n padding: '0rem 1rem'\n};\n\nConfigurableAIButton.argTypes = {\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n color: { control: { type: 'color' } },\n padding: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"AIButton.stories.js","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, ReactNode, useEffect, useReducer, useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n AIButton,\n AIButtonProps,\n Banner,\n Button,\n Checkbox,\n CheckboxGroup,\n Configuration,\n ErrorState,\n Flex,\n Form,\n Grid,\n Input,\n Modal,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n useModalContext,\n useModalManager,\n useToaster,\n BannerHandleValue\n} from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { AIValues, fieldReducer, initFields } from './AIButton.mocks';\n\nexport default {\n title: 'Core/AIButton',\n component: AIButton,\n excludeStories: ['ConfigurableAIButton'],\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const AIButtonDemo: Story<AIButtonProps> = (args: AIButtonProps) => {\n return <AIButton label={args.label} disabled={args.disabled} />;\n};\n\nAIButtonDemo.args = {\n label: 'Fill form with AI',\n disabled: false\n};\n\nAIButtonDemo.argTypes = {\n label: { control: { type: 'text' } },\n disabled: { control: { type: 'boolean' } }\n};\n\ninterface AIButtonFormProps {\n throwAIError?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n onCancel?: () => void;\n onSubmit?: () => void;\n}\n\nexport const AIButtonFormDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [banner, setBanner] = useState<ReactNode>();\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const bannerHandleRef = useRef<BannerHandleValue>(null);\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n useEffect(() => {\n if (banner && bannerHandleRef.current) bannerHandleRef.current.focus();\n }, [banner]);\n\n if (!name \|\| !email \|\| !locations \|\| !meetings \|\| !meals \|\| !notes) return <ErrorState />;\n\n const clearForm = () => {\n fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));\n };\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n setLoadingMessage('');\n if (args.throwAIError) {\n setBanner(\n <Banner\n variant='urgent'\n messages={['An error occurred while generating responses from the AI.']}\n onDismiss={() => {\n setBanner(undefined);\n }}\n handle={bannerHandleRef}\n />\n );\n } else {\n setBanner(undefined);\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n }, loadingTimeoutMS);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() \|\| '';\n if (error) errors.push(error);\n });\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n clearForm();\n setBanner(undefined);\n args.onSubmit?.();\n }, loadingTimeoutMS);\n } else {\n setBanner(\n <Banner\n variant='urgent'\n messages={errors}\n onDismiss={() => {\n setBanner(undefined);\n }}\n handle={bannerHandleRef}\n />\n );\n }\n };\n\n return (\n <Form\n heading={args.showTitle ? 'AI Form' : undefined}\n description={\n args.showDescription ? 'The AI in this demo is a mock and not a functional AI.' : undefined\n }\n progress={loadingMessage}\n actions={\n <>\n <Button\n onClick={() => {\n clearForm();\n args.onCancel?.();\n }}\n disabled={submitting}\n >\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage} />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n banners={banner}\n >\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info \|\| name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info \|\| email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info \|\| locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info \|\| meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info \|\| meals.help}\n value={meals.value \|\| 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info \|\| notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n\nAIButtonFormDemo.args = {\n throwAIError: false,\n showTitle: true,\n showDescription: true\n};\n\nAIButtonFormDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } },\n showTitle: { control: { type: 'boolean' }, table: { disable: true } },\n showDescription: { control: { type: 'boolean' } }\n};\n\nexport const AIButtonFormInModalDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const AIModal = () => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [banner, setBanner] = useState<ReactNode \| undefined>();\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const bannerHandleRef = useRef<BannerHandleValue>(null);\n const { push } = useToaster();\n const { dismiss } = useModalContext();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n useEffect(() => {\n if (banner && bannerHandleRef.current) bannerHandleRef.current.focus();\n }, [banner]);\n\n if (!name \|\| !email \|\| !locations \|\| !meetings \|\| !meals \|\| !notes) return <ErrorState />;\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n setLoadingMessage('');\n if (args.throwAIError) {\n setBanner(\n <Banner\n variant='urgent'\n messages={['An error occurred while generating responses from the AI.']}\n onDismiss={() => {\n setBanner(undefined);\n }}\n handle={bannerHandleRef}\n />\n );\n } else {\n setBanner(undefined);\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n setLoadingMessage('');\n }, loadingTimeoutMS);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() \|\| '';\n if (error) errors.push(error);\n });\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n setBanner(undefined);\n dismiss();\n }, loadingTimeoutMS);\n } else {\n setBanner(\n <Banner\n variant='urgent'\n messages={errors}\n onDismiss={() => {\n setBanner(undefined);\n }}\n handle={bannerHandleRef}\n />\n );\n }\n };\n\n return (\n <Modal\n heading='AI Form in a Modal'\n progress={loadingMessage ? { message: loadingMessage } : undefined}\n onRequestDismiss={() => !submitting}\n actions={\n <>\n <Button onClick={dismiss} disabled={submitting}>\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton\n label='Fill form with AI'\n onClick={fillWithAI}\n disabled={!!loadingMessage}\n />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n >\n <Form\n description='The AI in this demo is a mock and not a functional AI.'\n banners={banner}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info \|\| name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info \|\| email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info \|\| locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info \|\| meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info \|\| meals.help}\n value={meals.value \|\| 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info \|\| notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(AIModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAIButtonFormInModalDemo.args = {\n throwAIError: false\n};\n\nAIButtonFormInModalDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } }\n};\ninterface ConfigurableButtonProps {\n borderWidth?: string;\n borderRadius?: number;\n color?: string;\n secondaryColor?: string;\n padding?: string;\n}\n\nexport const ConfigurableAIButton: Story<ConfigurableButtonProps> = (\n args: ConfigurableButtonProps\n) => {\n return (\n <Configuration\n theme={{\n base: {\n palette: {\n ai: args.color\n }\n },\n components: {\n button: {\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n padding: args.padding\n }\n }\n }}\n >\n <AIButton label='Configurable Button' />\n </Configuration>\n );\n};\n\nConfigurableAIButton.args = {\n borderWidth: '0.0625rem',\n borderRadius: 9999,\n color: '#681fc3',\n padding: '0rem 1rem'\n};\n\nConfigurableAIButton.argTypes = {\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n color: { control: { type: 'color' } },\n padding: { control: { type: 'text' } }\n};\n"]}