@pega/cosmos-react-demos 2.0.0

package/lib/cs/TaskManager/TaskManager.mocks.js

@@ -0,0 +1,140 @@
+export const TaskPickerMockData = {
+    tasks: [
+        {
+            id: '1',
+            primary: 'Frequently performed',
+            selected: false,
+            items: [
+                {
+                    id: '1-1',
+                    primary: 'Address change',
+                    fields: [
+                        'Address line 1',
+                        'Address line 2',
+                        'Country',
+                        'City',
+                        'State',
+                        'Postal code',
+                        'Phone',
+                        'Cell',
+                        'FAX',
+                        'Email'
+                    ]
+                },
+                {
+                    id: '1-2',
+                    primary: 'Make payment',
+                    fields: ['Account number', 'Amount', 'Comments']
+                }
+            ]
+        },
+        {
+            id: '2',
+            primary: 'Account',
+            selected: false,
+            items: [
+                {
+                    id: '2-1',
+                    primary: 'Address change',
+                    fields: [
+                        'Address line 1',
+                        'Address line 2',
+                        'Country',
+                        'City',
+                        'State',
+                        'Postal code',
+                        'Phone',
+                        'Cell',
+                        'FAX',
+                        'Email'
+                    ]
+                },
+                {
+                    id: '2-2',
+                    primary: 'Close account',
+                    fields: ['Reason', 'Comments']
+                }
+            ]
+        },
+        {
+            id: '3',
+            primary: 'Contact',
+            selected: false,
+            items: [
+                {
+                    id: '3-1',
+                    primary: 'Modify account links',
+                    fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']
+                },
+                {
+                    id: '3-2',
+                    primary: 'Update contact profile',
+                    fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']
+                }
+            ]
+        },
+        {
+            id: '4',
+            primary: 'Sales and offers',
+            selected: false,
+            items: [
+                {
+                    id: '4-1',
+                    primary: 'Create lead',
+                    fields: [
+                        'Stage',
+                        'Phone',
+                        'Email',
+                        'Territory',
+                        'First name',
+                        'Last name',
+                        'Owner',
+                        'Rating',
+                        'Mobile'
+                    ]
+                },
+                {
+                    id: '4-2',
+                    primary: 'Create opportunity',
+                    fields: [
+                        'Amount',
+                        'Close date',
+                        'Probability',
+                        'Owner',
+                        'Name',
+                        'Territory',
+                        'Short name',
+                        'Primary contact',
+                        'Forecast category',
+                        'Stage',
+                        'Source',
+                        'Must win'
+                    ]
+                }
+            ]
+        },
+        {
+            id: '5',
+            primary: 'General',
+            selected: false,
+            items: [
+                {
+                    id: '5-1',
+                    primary: 'File a complaint',
+                    fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']
+                },
+                {
+                    id: '5-2',
+                    primary: 'Schedule activity',
+                    fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']
+                },
+                {
+                    id: '5-3',
+                    primary: 'Send correspondence',
+                    fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']
+                }
+            ]
+        }
+    ]
+};
+//# sourceMappingURL=TaskManager.mocks.js.map

package/lib/cs/TaskManager/TaskManager.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.mocks.js","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,sBAAsB;YAC/B,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,gBAAgB;oBACzB,MAAM,EAAE;wBACN,gBAAgB;wBAChB,gBAAgB;wBAChB,SAAS;wBACT,MAAM;wBACN,OAAO;wBACP,aAAa;wBACb,OAAO;wBACP,MAAM;wBACN,KAAK;wBACL,OAAO;qBACR;iBACF;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,UAAU,CAAC;iBACjD;aACF;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,gBAAgB;oBACzB,MAAM,EAAE;wBACN,gBAAgB;wBAChB,gBAAgB;wBAChB,SAAS;wBACT,MAAM;wBACN,OAAO;wBACP,aAAa;wBACb,OAAO;wBACP,MAAM;wBACN,KAAK;wBACL,OAAO;qBACR;iBACF;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,eAAe;oBACxB,MAAM,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;iBAC/B;aACF;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,sBAAsB;oBAC/B,MAAM,EAAE,CAAC,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,cAAc,CAAC;iBACvF;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,wBAAwB;oBACjC,MAAM,EAAE,CAAC,aAAa,EAAE,oBAAoB,EAAE,WAAW,EAAE,gBAAgB,CAAC;iBAC7E;aACF;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,aAAa;oBACtB,MAAM,EAAE;wBACN,OAAO;wBACP,OAAO;wBACP,OAAO;wBACP,WAAW;wBACX,YAAY;wBACZ,WAAW;wBACX,OAAO;wBACP,QAAQ;wBACR,QAAQ;qBACT;iBACF;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,oBAAoB;oBAC7B,MAAM,EAAE;wBACN,QAAQ;wBACR,YAAY;wBACZ,aAAa;wBACb,OAAO;wBACP,MAAM;wBACN,WAAW;wBACX,YAAY;wBACZ,iBAAiB;wBACjB,mBAAmB;wBACnB,OAAO;wBACP,QAAQ;wBACR,UAAU;qBACX;iBACF;aACF;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,kBAAkB;oBAC3B,MAAM,EAAE,CAAC,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC;iBAClF;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,mBAAmB;oBAC5B,MAAM,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,iCAAiC,CAAC;iBAC7E;gBACD;oBACE,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,qBAAqB;oBAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,CAAC;iBACtE;aACF;SACF;KACF;CACF,CAAC","sourcesContent":["export const TaskPickerMockData = {\n  tasks: [\n    {\n      id: '1',\n      primary: 'Frequently performed',\n      selected: false,\n      items: [\n        {\n          id: '1-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '1-2',\n          primary: 'Make payment',\n          fields: ['Account number', 'Amount', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '2',\n      primary: 'Account',\n      selected: false,\n      items: [\n        {\n          id: '2-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '2-2',\n          primary: 'Close account',\n          fields: ['Reason', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '3',\n      primary: 'Contact',\n      selected: false,\n      items: [\n        {\n          id: '3-1',\n          primary: 'Modify account links',\n          fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']\n        },\n        {\n          id: '3-2',\n          primary: 'Update contact profile',\n          fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']\n        }\n      ]\n    },\n    {\n      id: '4',\n      primary: 'Sales and offers',\n      selected: false,\n      items: [\n        {\n          id: '4-1',\n          primary: 'Create lead',\n          fields: [\n            'Stage',\n            'Phone',\n            'Email',\n            'Territory',\n            'First name',\n            'Last name',\n            'Owner',\n            'Rating',\n            'Mobile'\n          ]\n        },\n        {\n          id: '4-2',\n          primary: 'Create opportunity',\n          fields: [\n            'Amount',\n            'Close date',\n            'Probability',\n            'Owner',\n            'Name',\n            'Territory',\n            'Short name',\n            'Primary contact',\n            'Forecast category',\n            'Stage',\n            'Source',\n            'Must win'\n          ]\n        }\n      ]\n    },\n    {\n      id: '5',\n      primary: 'General',\n      selected: false,\n      items: [\n        {\n          id: '5-1',\n          primary: 'File a complaint',\n          fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']\n        },\n        {\n          id: '5-2',\n          primary: 'Schedule activity',\n          fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']\n        },\n        {\n          id: '5-3',\n          primary: 'Send correspondence',\n          fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']\n        }\n      ]\n    }\n  ]\n};\n"]}

package/lib/cs/TaskManager/TaskManager.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").TaskManagerProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const TaskManagerDemo: () => JSX.Element;
+//# sourceMappingURL=TaskManager.stories.d.ts.map

package/lib/cs/TaskManager/TaskManager.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":";;;;;AAwBA,wBAGE;AAQF,eAAO,MAAM,eAAe,mBA0W3B,CAAC"}

package/lib/cs/TaskManager/TaskManager.stories.jsx

@@ -0,0 +1,314 @@
+import { useEffect, useRef, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { array, number, boolean } from '@storybook/addon-knobs';
+import { Button, createUID, DateInput, DateTimeInput, Form, Grid, Input, MenuButton, Text, TimeInput } from '@pega/cosmos-react-core';
+import { Timeline } from '@pega/cosmos-react-work';
+import { TaskManager, TaskView } from '@pega/cosmos-react-cs';
+import { activity } from '@pega/cosmos-react-demos/lib/work/Timeline/Timeline.mocks';
+import { TaskPickerMockData } from './TaskManager.mocks';
+export default {
+    title: 'Customer Service/TaskManager',
+    component: TaskManager
+};
+const WRAP_UP_TASK_ID = createUID();
+const TaskPickerData = TaskPickerMockData;
+export const TaskManagerDemo = () => {
+    const [serviceTasks, setServiceTasks] = useState([]);
+    const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState(false);
+    const formActionsElemRef = useRef(null);
+    const taskManagerRef = useRef(null);
+    const [activeTaskId, setActiveTaskId] = useState(undefined);
+    const addTaskButtonRef = useRef(null);
+    useEffect(() => {
+        if (formActionsElemRef.current) {
+            formActionsElemRef.current.focus();
+            formActionsElemRef.current.scrollIntoView(false);
+        }
+        else if (addTaskButtonRef.current) {
+            addTaskButtonRef.current.scrollIntoView(false);
+        }
+    }, [activeTaskId]);
+    const switchTab = (taskList, taskId) => {
+        const taskIndex = taskList.findIndex(task => {
+            return task.id === taskId;
+        });
+        let nextTaskId = '';
+        if (taskIndex >= 0 && taskIndex < taskList.length - 1) {
+            nextTaskId = taskList[taskIndex + 1].id;
+            setActiveTaskId(nextTaskId);
+        }
+        else if (taskIndex === taskList.length - 1 && taskList.length > 1) {
+            setActiveTaskId(taskList[0].id);
+        }
+        else
+            setActiveTaskId(undefined);
+    };
+    const performTaskAction = (taskId, taskAction) => {
+        if (taskId === WRAP_UP_TASK_ID) {
+            if (taskAction === 'cancel') {
+                setServiceTasks(prevTasks => {
+                    return prevTasks
+                        .filter(task => task.variant !== 'queued')
+                        .map(task => {
+                        if (task.variant !== 'resolved') {
+                            return {
+                                ...task,
+                                variant: 'cancelled',
+                                status: {
+                                    variant: 'urgent',
+                                    text: 'Resolve Rejected'
+                                }
+                            };
+                        }
+                        return task;
+                    });
+                });
+                setActiveTaskId(undefined);
+            }
+            else if (taskAction === 'submit') {
+                setServiceTasks(prevTasks => {
+                    return prevTasks
+                        .filter(task => task.variant !== 'queued')
+                        .map(task => {
+                        if (task.variant !== 'cancelled') {
+                            return {
+                                ...task,
+                                variant: 'resolved',
+                                status: {
+                                    variant: 'info',
+                                    text: 'Resolve Completed'
+                                }
+                            };
+                        }
+                        return task;
+                    });
+                });
+                setActiveTaskId(undefined);
+            }
+            else if (taskAction === 'launch') {
+                setActiveTaskId(WRAP_UP_TASK_ID);
+                setIsWrapUpTabVisible(true);
+            }
+        }
+        else if (taskAction === 'launch') {
+            setActiveTaskId(taskId);
+            setServiceTasks(prevTasks => {
+                return prevTasks.map(task => {
+                    if (task.id === taskId) {
+                        const variant = task.variant === 'queued' ? 'in-progress' : task.variant;
+                        return {
+                            ...task,
+                            icon: 'clipboard',
+                            variant,
+                            status: {
+                                variant: (variant === 'in-progress'
+                                    ? 'pending'
+                                    : task.status?.variant) || 'info',
+                                text: (variant === 'in-progress' ? 'In progress' : task.status?.text) || ''
+                            }
+                        };
+                    }
+                    return task;
+                });
+            });
+        }
+        else if (taskAction === 'cancel') {
+            switchTab(serviceTasks, taskId);
+            const taskIndex = serviceTasks.findIndex(task => {
+                return task.id === taskId;
+            });
+            const nextTaskId = taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;
+            setServiceTasks(prevTasks => {
+                return prevTasks.map(task => {
+                    if (task.id === taskId && task.variant !== 'resolved' && task.variant !== 'cancelled') {
+                        return {
+                            ...task,
+                            icon: 'check',
+                            variant: 'cancelled',
+                            status: {
+                                variant: 'urgent',
+                                text: 'Resolve Rejected'
+                            }
+                        };
+                    }
+                    if (task.id === nextTaskId &&
+                        task.variant !== 'resolved' &&
+                        task.variant !== 'cancelled') {
+                        const variant = task.variant === 'queued' ? 'in-progress' : task.variant;
+                        return {
+                            ...task,
+                            icon: 'clipboard',
+                            variant,
+                            status: {
+                                variant: 'pending',
+                                text: 'In Progress'
+                            }
+                        };
+                    }
+                    return task;
+                });
+            });
+        }
+        else if (taskAction === 'submit') {
+            switchTab(serviceTasks, taskId);
+            const taskIndex = serviceTasks.findIndex(task => {
+                return task.id === taskId;
+            });
+            const nextTaskId = taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;
+            setServiceTasks(prevTasks => {
+                return prevTasks.map(task => {
+                    if (task.id === taskId && task.variant !== 'resolved' && task.variant !== 'cancelled') {
+                        return {
+                            ...task,
+                            icon: 'check',
+                            variant: 'resolved',
+                            status: {
+                                variant: 'info',
+                                text: 'Resolve Completed'
+                            }
+                        };
+                    }
+                    if (task.id === nextTaskId &&
+                        task.variant !== 'resolved' &&
+                        task.variant !== 'cancelled') {
+                        const variant = task.variant === 'queued' ? 'in-progress' : task.variant;
+                        return {
+                            ...task,
+                            icon: 'clipboard',
+                            variant,
+                            status: {
+                                variant: 'pending',
+                                text: 'In Progress'
+                            }
+                        };
+                    }
+                    return task;
+                });
+            });
+        }
+        else if (taskAction === 'dismiss') {
+            setServiceTasks(prevTasks => {
+                return prevTasks.filter(task => task.id !== taskId);
+            });
+        }
+    };
+    const renderTasks = (selections) => {
+        const newTasks = selections.map((selection, i) => {
+            const taskId = createUID();
+            if (i === 0) {
+                return {
+                    id: taskId,
+                    icon: 'nothing',
+                    name: selection.primary,
+                    variant: 'in-progress',
+                    status: {
+                        variant: 'pending',
+                        text: 'In Progress'
+                    }
+                };
+            }
+            return {
+                id: taskId,
+                icon: 'clipboard',
+                name: selection.primary,
+                variant: 'queued',
+                status: {
+                    variant: 'success',
+                    text: 'Queued'
+                }
+            };
+        });
+        setServiceTasks(prevTasks => {
+            return [...newTasks, ...prevTasks];
+        });
+        if (newTasks.length > 0) {
+            performTaskAction(newTasks[0].id, 'launch');
+        }
+    };
+    const taskName = serviceTasks.find(task => task.id === activeTaskId)?.name ?? '';
+    const taskFields = TaskPickerData.tasks
+        .flatMap(task => task.items ?? [])
+        .find(({ primary }) => primary === taskName)?.fields ?? [];
+    const formElements = taskFields.map((field, i) => {
+        const lowerFieldName = field.toLocaleLowerCase();
+        if (lowerFieldName.includes('date') && lowerFieldName.includes('time')) {
+            return <DateTimeInput label={field} key={i}/>;
+        }
+        if (lowerFieldName.includes('date')) {
+            return <DateInput label={field} key={i}/>;
+        }
+        if (lowerFieldName.includes('time')) {
+            return <TimeInput label={field} key={i}/>;
+        }
+        return <Input label={field} key={i}/>;
+    });
+    const formFields = formElements.length <= 3 ? (<>{formElements}</>) : (<Grid container={{
+            cols: 'repeat(2, 1fr)',
+            colGap: number('colGap', 2),
+            rowGap: number('rowGap', 2)
+        }}>
+        {formElements}
+      </Grid>);
+    const serviceTasksEmpty = boolean('Tasks empty', false);
+    return (<TaskManager ref={taskManagerRef} tasks={serviceTasksEmpty
+            ? []
+            : serviceTasks.map(task => {
+                if (task.id === activeTaskId) {
+                    return {
+                        ...task,
+                        active: true
+                    };
+                }
+                return task;
+            })} emptyText='No tasks added' banner={{
+            icon: 'headset',
+            content: 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'
+        }} onTaskLaunch={(id) => {
+            performTaskAction(id, 'launch');
+        }} onTaskDismiss={(id) => {
+            performTaskAction(id, 'dismiss');
+        }} addTask={{
+            items: TaskPickerMockData.tasks,
+            onAdd: renderTasks
+        }} wrapUp={{
+            onWrapUp: () => {
+                performTaskAction(WRAP_UP_TASK_ID, 'launch');
+            },
+            active: activeTaskId === WRAP_UP_TASK_ID,
+            showTab: isWrapUpTabVisible
+        }} main={<TaskView header={<Text variant='h2'>
+              {activeTaskId === WRAP_UP_TASK_ID
+                    ? 'Wrap up'
+                    : serviceTasks.find(task => task.id === activeTaskId)?.name}
+            </Text>} actions={<MenuButton ref={formActionsElemRef} menu={{
+                    items: array('actions', [
+                        'Option Number 1',
+                        'Option Number 2',
+                        'Option Number 3'
+                    ]).map(name => ({
+                        primary: name,
+                        id: name,
+                        onClick: action(`Clicked ${name}`)
+                    }))
+                }} text='Actions'/>}>
+          <Form id='forming' actions={<>
+                <Button name='Cancel' onClick={() => {
+                    performTaskAction(activeTaskId, 'cancel');
+                }}>
+                  Cancel
+                </Button>
+                <div>
+                  <Button name='Submit' variant='primary' onClick={() => {
+                    performTaskAction(activeTaskId, 'submit');
+                }}>
+                    Submit
+                  </Button>
+                </div>
+              </>}>
+            <Grid container={{ rowGap: 2 }}>
+              {activeTaskId === WRAP_UP_TASK_ID ? (<Timeline activity={activity} currentTime={new Date()}/>) : (formFields)}
+            </Grid>
+          </Form>
+        </TaskView>}/>);
+};
+//# sourceMappingURL=TaskManager.stories.jsx.map

package/lib/cs/TaskManager/TaskManager.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.stories.jsx","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { array, number, boolean } from '@storybook/addon-knobs';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  DateTimeInput,\n  Form,\n  Grid,\n  Input,\n  MenuButton,\n  MenuItemProps,\n  StatusProps,\n  Text,\n  TimeInput\n} from '@pega/cosmos-react-core';\nimport { Timeline } from '@pega/cosmos-react-work';\nimport { TaskManager, TaskView, TaskProps } from '@pega/cosmos-react-cs';\nimport { activity } from '@pega/cosmos-react-demos/lib/work/Timeline/Timeline.mocks';\n\nimport { TaskPickerMockData } from './TaskManager.mocks';\n\nexport default {\n  title: 'Customer Service/TaskManager',\n  component: TaskManager\n};\n\nconst WRAP_UP_TASK_ID = createUID();\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nconst TaskPickerData = TaskPickerMockData;\n\nexport const TaskManagerDemo = () => {\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>([]);\n  const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState<boolean>(false);\n\n  const formActionsElemRef = useRef<HTMLButtonElement>(null);\n  const taskManagerRef = useRef<HTMLDivElement>(null);\n  const [activeTaskId, setActiveTaskId] = useState<string | undefined>(undefined);\n  const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (formActionsElemRef.current) {\n      formActionsElemRef.current.focus();\n      formActionsElemRef.current.scrollIntoView(false);\n    } else if (addTaskButtonRef.current) {\n      addTaskButtonRef.current.scrollIntoView(false);\n    }\n  }, [activeTaskId]);\n\n  const switchTab = (taskList: TaskProps[], taskId?: TaskProps['id']) => {\n    const taskIndex = taskList.findIndex(task => {\n      return task.id === taskId;\n    });\n    let nextTaskId = '';\n    if (taskIndex >= 0 && taskIndex < taskList.length - 1) {\n      nextTaskId = taskList[taskIndex + 1].id;\n      setActiveTaskId(nextTaskId);\n    } else if (taskIndex === taskList.length - 1 && taskList.length > 1) {\n      setActiveTaskId(taskList[0].id);\n    } else setActiveTaskId(undefined);\n  };\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WRAP_UP_TASK_ID) {\n      if (taskAction === 'cancel') {\n        setServiceTasks(prevTasks => {\n          return prevTasks\n            .filter(task => task.variant !== 'queued')\n            .map(task => {\n              if (task.variant !== 'resolved') {\n                return {\n                  ...task,\n                  variant: 'cancelled',\n                  status: {\n                    variant: 'urgent' as StatusProps['variant'],\n                    text: 'Resolve Rejected'\n                  }\n                };\n              }\n              return task;\n            });\n        });\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'submit') {\n        setServiceTasks(prevTasks => {\n          return prevTasks\n            .filter(task => task.variant !== 'queued')\n            .map(task => {\n              if (task.variant !== 'cancelled') {\n                return {\n                  ...task,\n                  variant: 'resolved',\n                  status: {\n                    variant: 'info' as StatusProps['variant'],\n                    text: 'Resolve Completed'\n                  }\n                };\n              }\n              return task;\n            });\n        });\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WRAP_UP_TASK_ID);\n        setIsWrapUpTabVisible(true);\n      }\n    } else if (taskAction === 'launch') {\n      setActiveTaskId(taskId);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            const variant = task.variant === 'queued' ? 'in-progress' : task.variant;\n            return {\n              ...task,\n              icon: 'clipboard',\n              variant,\n              status: {\n                variant:\n                  (variant === 'in-progress'\n                    ? ('pending' as StatusProps['variant'])\n                    : task.status?.variant) || ('info' as StatusProps['variant']),\n                text: (variant === 'in-progress' ? 'In progress' : task.status?.text) || ''\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'cancel') {\n      switchTab(serviceTasks, taskId);\n      const taskIndex = serviceTasks.findIndex(task => {\n        return task.id === taskId;\n      });\n      const nextTaskId =\n        taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId && task.variant !== 'resolved' && task.variant !== 'cancelled') {\n            return {\n              ...task,\n              icon: 'check',\n              variant: 'cancelled',\n              status: {\n                variant: 'urgent' as StatusProps['variant'],\n                text: 'Resolve Rejected'\n              }\n            };\n          }\n          if (\n            task.id === nextTaskId &&\n            task.variant !== 'resolved' &&\n            task.variant !== 'cancelled'\n          ) {\n            const variant = task.variant === 'queued' ? 'in-progress' : task.variant;\n            return {\n              ...task,\n              icon: 'clipboard',\n              variant,\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n\n          return task;\n        });\n      });\n    } else if (taskAction === 'submit') {\n      switchTab(serviceTasks, taskId);\n      const taskIndex = serviceTasks.findIndex(task => {\n        return task.id === taskId;\n      });\n      const nextTaskId =\n        taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId && task.variant !== 'resolved' && task.variant !== 'cancelled') {\n            return {\n              ...task,\n              icon: 'check',\n              variant: 'resolved',\n              status: {\n                variant: 'info' as StatusProps['variant'],\n                text: 'Resolve Completed'\n              }\n            };\n          }\n          if (\n            task.id === nextTaskId &&\n            task.variant !== 'resolved' &&\n            task.variant !== 'cancelled'\n          ) {\n            const variant = task.variant === 'queued' ? 'in-progress' : task.variant;\n            return {\n              ...task,\n              icon: 'clipboard',\n              variant,\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n\n          return task;\n        });\n      });\n    } else if (taskAction === 'dismiss') {\n      setServiceTasks(prevTasks => {\n        return prevTasks.filter(task => task.id !== taskId);\n      });\n    }\n  };\n\n  const renderTasks = (selections: MenuItemProps[]) => {\n    const newTasks = selections.map((selection, i) => {\n      const taskId = createUID();\n      if (i === 0) {\n        return {\n          id: taskId,\n          icon: 'nothing',\n          name: selection.primary,\n          variant: 'in-progress' as TaskProps['variant'],\n          status: {\n            variant: 'pending' as StatusProps['variant'],\n            text: 'In Progress'\n          }\n        };\n      }\n      return {\n        id: taskId,\n        icon: 'clipboard',\n        name: selection.primary,\n        variant: 'queued' as TaskProps['variant'],\n        status: {\n          variant: 'success' as StatusProps['variant'],\n          text: 'Queued'\n        }\n      };\n    });\n    setServiceTasks(prevTasks => {\n      return [...newTasks, ...prevTasks];\n    });\n    if (newTasks.length > 0) {\n      performTaskAction(newTasks[0].id, 'launch');\n    }\n  };\n  const taskName = serviceTasks.find(task => task.id === activeTaskId)?.name ?? '';\n\n  /* Preparing form fields from added task */\n\n  const taskFields =\n    TaskPickerData.tasks\n      .flatMap(task => task.items ?? [])\n      .find(({ primary }) => primary === taskName)?.fields ?? [];\n\n  const formElements = taskFields.map((field, i) => {\n    const lowerFieldName = field.toLocaleLowerCase();\n    if (lowerFieldName.includes('date') && lowerFieldName.includes('time')) {\n      /* eslint-disable react/no-array-index-key */\n      return <DateTimeInput label={field} key={i} />;\n    }\n    if (lowerFieldName.includes('date')) {\n      return <DateInput label={field} key={i} />;\n    }\n    if (lowerFieldName.includes('time')) {\n      return <TimeInput label={field} key={i} />;\n    }\n    return <Input label={field} key={i} />;\n    /* eslint-enable react/no-array-index-key */\n  });\n\n  const formFields =\n    formElements.length <= 3 ? (\n      <>{formElements}</>\n    ) : (\n      <Grid\n        container={{\n          cols: 'repeat(2, 1fr)',\n          colGap: number('colGap', 2),\n          rowGap: number('rowGap', 2)\n        }}\n      >\n        {formElements}\n      </Grid>\n    );\n\n  const serviceTasksEmpty = boolean('Tasks empty', false);\n  return (\n    <TaskManager\n      ref={taskManagerRef}\n      tasks={\n        serviceTasksEmpty\n          ? []\n          : serviceTasks.map(task => {\n              if (task.id === activeTaskId) {\n                return {\n                  ...task,\n                  active: true\n                };\n              }\n              return task;\n            })\n      }\n      emptyText='No tasks added'\n      banner={{\n        icon: 'headset',\n        content:\n          'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'\n      }}\n      onTaskLaunch={(id: string) => {\n        performTaskAction(id, 'launch');\n      }}\n      onTaskDismiss={(id: string) => {\n        performTaskAction(id, 'dismiss');\n      }}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={{\n        onWrapUp: () => {\n          performTaskAction(WRAP_UP_TASK_ID, 'launch');\n        },\n        active: activeTaskId === WRAP_UP_TASK_ID,\n        showTab: isWrapUpTabVisible\n      }}\n      main={\n        <TaskView\n          header={\n            <Text variant='h2'>\n              {activeTaskId === WRAP_UP_TASK_ID\n                ? 'Wrap up'\n                : serviceTasks.find(task => task.id === activeTaskId)?.name}\n            </Text>\n          }\n          actions={\n            <MenuButton\n              ref={formActionsElemRef}\n              menu={{\n                items: array('actions', [\n                  'Option Number 1',\n                  'Option Number 2',\n                  'Option Number 3'\n                ]).map(name => ({\n                  primary: name,\n                  id: name,\n                  onClick: action(`Clicked ${name}`)\n                }))\n              }}\n              text='Actions'\n            />\n          }\n        >\n          <Form\n            id='forming'\n            actions={\n              <>\n                <Button\n                  name='Cancel'\n                  onClick={() => {\n                    performTaskAction(activeTaskId, 'cancel');\n                  }}\n                >\n                  Cancel\n                </Button>\n                <div>\n                  <Button\n                    name='Submit'\n                    variant='primary'\n                    onClick={() => {\n                      performTaskAction(activeTaskId, 'submit');\n                    }}\n                  >\n                    Submit\n                  </Button>\n                </div>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              {activeTaskId === WRAP_UP_TASK_ID ? (\n                <Timeline activity={activity} currentTime={new Date()} />\n              ) : (\n                formFields\n              )}\n            </Grid>\n          </Form>\n        </TaskView>\n      }\n    />\n  );\n};\n"]}

package/lib/dnd/DragDropList/DragDropList.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: <T extends object = object>({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode, pushMode, as: Component, ...restProps }: import("@pega/cosmos-react-dnd").DragDropListProps<T> & import("@pega/cosmos-react-core").ForwardProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const DragDropListDemo: () => JSX.Element;
+//# sourceMappingURL=DragDropList.stories.d.ts.map

package/lib/dnd/DragDropList/DragDropList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":";;;;;;;;AAcA,wBAME;AAiHF,eAAO,MAAM,gBAAgB,mBAgE5B,CAAC"}