@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

@@ -1,35 +1,27 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { array, number, boolean } from '@storybook/addon-knobs';
-import styled, { css } from 'styled-components';
-import { Button, createUID, DateInput, DateTimeInput, Flex, Form, Grid, Input, MenuButton, Status, Text, TimeInput } from '@pega/cosmos-react-core';
+import { Button, createUID, DateInput, DateTimeInput, Flex, Form, Grid, Input, MenuButton, Text, TimeInput } from '@pega/cosmos-react-core';
 import { Timeline } from '@pega/cosmos-react-work';
-import { TaskManager as TaskManagerComp, TaskView } from '@pega/cosmos-react-cs';
+import { TaskManager, TaskView } from '@pega/cosmos-react-cs';
+import { EntityList } from '@pega/cosmos-react-social';
 import { activity } from '../../work/Timeline/Timeline.mocks';
-import { TaskPickerMockData } from './TaskManager.mocks';
+import { TaskPickerMockData, WrapUpTask, EntityListMock } from './TaskManager.mocks';
+import { StyledStatus } from './TaskManager.styles';
 export default {
     title: 'Customer Service/TaskManager',
-    component: TaskManagerComp
+    component: TaskManager
 };
-const TaskPickerData = TaskPickerMockData;
-const WrapUpTask = {
-    id: createUID(),
-    name: 'Wrap up',
-    status: 'In progress',
-    variant: 'pending'
-};
-const StyledStatus = styled(Status)(({ theme }) => {
-    return css `
-    margin-block-start: calc(0.25 * ${theme.base.spacing});
-  `;
-});
-export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, wrapUp }) => {
-    const [serviceTasks, setServiceTasks] = useState(initialTasks || []);
+export const TaskManagerDemo = (args) => {
+    const [serviceTasks, setServiceTasks] = useState(args.initialTasks || []);
     const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState(false);
     const [disableWrapUp, setDisableWrapUp] = useState(false);
     const formActionsElemRef = useRef(null);
     const taskManagerRef = useRef(null);
+    const handle = useRef(null);
     const [activeTaskId, setActiveTaskId] = useState(undefined);
+    useEffect(() => {
+        handle.current?.nudge();
+    }, []);
     const switchTab = (taskList, taskId) => {
         if (taskList.filter(task => !task.hideFromTab).length <= 1) {
             return isWrapUpTabVisible ? setActiveTaskId(WrapUpTask.id) : setActiveTaskId(undefined);
@@ -236,7 +228,7 @@ export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, w
         setDisableWrapUp(false);
     };
     const activeServiceTask = serviceTasks.find(task => task.id === activeTaskId) || {};
-    const taskFields = TaskPickerData.tasks
+    const taskFields = TaskPickerMockData.tasks
         .flatMap(task => task.items ?? [])
         .find(({ primary }) => primary === activeServiceTask?.name)?.fields ?? [];
     const getFormElements = (readOnly) => {
@@ -255,13 +247,12 @@ export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, w
         });
         return formElements.length <= 3 ? (<>{formElements}</>) : (<Grid container={{
                 cols: 'repeat(2, 1fr)',
-                colGap: number('colGap', 2),
-                rowGap: number('rowGap', 2)
+                colGap: args.colGap,
+                rowGap: args.rowGap
             }}>
         {formElements}
       </Grid>);
     };
-    const serviceTasksEmpty = boolean('Tasks empty', false);
     const handleLaunch = (id) => {
         performTaskAction(id, 'launch');
     };
@@ -271,31 +262,92 @@ export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, w
     const getTaskName = (taskName) => {
         return taskName === 'Address change' ? 'Address change details' : taskName;
     };
-    return (<TaskManagerComp ref={taskManagerRef} tasks={serviceTasksEmpty
-            ? []
-            : serviceTasks.map(task => {
-                if (task.id === activeTaskId) {
-                    return {
-                        ...task,
-                        active: true
-                    };
+    const itemCounter = useRef(3);
+    const imperativeHandle = useRef(null);
+    const handleRightClick = () => {
+        itemCounter.current += 1;
+        setTimeout(() => {
+            imperativeHandle.current?.setContextMenuItems([
+                {
+                    id: 'item_0',
+                    primary: 'Field 1',
+                    selected: itemCounter.current % 2 === 0
+                },
+                {
+                    id: 'item_1',
+                    primary: 'Field 2',
+                    selected: true
+                },
+                {
+                    id: 'item_2',
+                    primary: 'Field 3',
+                    selected: true
+                },
+                {
+                    id: `item_${itemCounter.current}`,
+                    primary: `Field ${itemCounter.current + 1}`,
+                    selected: 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={onTaskLaunch || handleLaunch} onTaskDismiss={onTaskDismiss || handleDismiss} addTask={{
+            ]);
+        }, 3000);
+    };
+    const [entityListMockData, setEntityListMock] = useState([]);
+    const [count, setCount] = useState(0);
+    const entityListMock = (<EntityList content={entityListMockData} contextMenu={{
+            onItemClick: action('onItemClick'),
+            onContextMenu: handleRightClick,
+            handle: imperativeHandle
+        }}/>);
+    const tasks = serviceTasks.map(task => {
+        if (task.id === activeTaskId) {
+            return {
+                ...task,
+                active: true
+            };
+        }
+        return task;
+    });
+    const wrapUp = {
+        disable: disableWrapUp,
+        onClick: () => {
+            performTaskAction(WrapUpTask.id, 'launch');
+            setDisableWrapUp(true);
+        },
+        active: activeTaskId === WrapUpTask.id,
+        showTab: isWrapUpTabVisible
+    };
+    const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;
+    useEffect(() => {
+        if (hasActiveTask) {
+            const interval = setInterval(() => {
+                setCount(prev => {
+                    if (prev === EntityListMock.length - 1) {
+                        clearInterval(interval);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, 3000);
+            return () => clearInterval(interval);
+        }
+    }, [hasActiveTask]);
+    useEffect(() => {
+        if (count > 0)
+            setEntityListMock([...entityListMockData, EntityListMock[count - 1]]);
+    }, [count]);
+    return (<TaskManager conversationAI={hasActiveTask
+            ? {
+                content: entityListMock,
+                entityCount: count
+            }
+            : undefined} ref={taskManagerRef} handle={handle} tasks={args.serviceTasksEmpty ? [] : tasks} emptyText='No tasks added' banner={{
+            icon: 'script',
+            content: 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct?',
+            verbatimStatus: args.verbatimStatus || 'pending'
+        }} onTaskLaunch={args.onTaskLaunch || handleLaunch} onTaskDismiss={args.onTaskDismiss || handleDismiss} addTask={{
             items: TaskPickerMockData.tasks,
             onAdd: renderTasks
-        }} wrapUp={wrapUp || {
-            disable: disableWrapUp,
-            onClick: () => {
-                performTaskAction(WrapUpTask.id, 'launch');
-                setDisableWrapUp(true);
-            },
-            active: activeTaskId === WrapUpTask.id,
-            showTab: isWrapUpTabVisible
-        }} main={main || (<TaskView header={<Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>
+        }} wrapUp={args.wrapUp || wrapUp} main={args.main || (<TaskView header={<Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>
                 <Text variant='h3'>
                   {activeTaskId === WrapUpTask.id
                     ? WrapUpTask.name
@@ -311,7 +363,7 @@ export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, w
                     : activeServiceTask.status && activeServiceTask.status.text}
                 </StyledStatus>
               </Flex>} actions={<MenuButton ref={formActionsElemRef} menu={{
-                    items: array('actions', ['Close task', 'Dismiss task', 'Resolve task']).map(name => ({
+                    items: ['Close task', 'Dismiss task', 'Resolve task'].map(name => ({
                         primary: name,
                         id: name,
                         onClick: action(`Clicked ${name}`)
@@ -343,4 +395,19 @@ export const TaskManager = ({ initialTasks, main, onTaskDismiss, onTaskLaunch, w
             </Form>
           </TaskView>)}/>);
 };
+TaskManagerDemo.args = {
+    serviceTasksEmpty: false,
+    colGap: 2,
+    rowGap: 2,
+    verbatimStatus: 'pending'
+};
+TaskManagerDemo.argTypes = {
+    serviceTasksEmpty: { control: { type: 'boolean' } },
+    colGap: { control: { type: 'number' } },
+    rowGap: { control: { type: 'number' } },
+    verbatimStatus: {
+        options: ['pending', 'spoken', 'undefined'],
+        control: { type: 'select' }
+    }
+};
 //# sourceMappingURL=TaskManager.stories.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.stories.jsx","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { array, number, boolean } from '@storybook/addon-knobs';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  DateTimeInput,\n  Flex,\n  Form,\n  Grid,\n  Input,\n  MenuButton,\n  MenuItemProps,\n  Status,\n  StatusProps,\n  Text,\n  TimeInput\n} from '@pega/cosmos-react-core';\nimport { Timeline } from '@pega/cosmos-react-work';\nimport {\n  TaskManager as TaskManagerComp,\n  TaskManagerProps,\n  TaskProps,\n  TaskView\n} from '@pega/cosmos-react-cs';\n\nimport { activity } from '../../work/Timeline/Timeline.mocks';\n\nimport { TaskPickerMockData } from './TaskManager.mocks';\n\nexport default {\n  title: 'Customer Service/TaskManager',\n  component: TaskManagerComp\n};\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nconst TaskPickerData = TaskPickerMockData;\n\nconst WrapUpTask = {\n  id: createUID(),\n  name: 'Wrap up',\n  status: 'In progress',\n  variant: 'pending'\n};\n\nexport interface TaskManagerStoryProps extends TaskManagerProps {\n  initialTasks?: TaskProps[];\n  main?: ReactNode;\n}\n\nconst StyledStatus = styled(Status)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nexport const TaskManager = ({\n  initialTasks,\n  main,\n  onTaskDismiss,\n  onTaskLaunch,\n  wrapUp\n}: TaskManagerStoryProps) => {\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>(initialTasks || []);\n  const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState<boolean>(false);\n  const [disableWrapUp, setDisableWrapUp] = 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\n  const switchTab = (taskList: TaskProps[], taskId?: TaskProps['id']) => {\n    if (taskList.filter(task => !task.hideFromTab).length <= 1) {\n      return isWrapUpTabVisible ? setActiveTaskId(WrapUpTask.id) : setActiveTaskId(undefined);\n    }\n    const taskIndex = taskList.findIndex(task => {\n      return task.id === taskId;\n    });\n\n    let nextTaskIndex = taskList.findIndex((task, i) => {\n      return i > taskIndex && !task.hideFromTab;\n    });\n\n    if (nextTaskIndex === -1) nextTaskIndex = taskList.findIndex(task => !task.hideFromTab);\n    setActiveTaskId(taskList[nextTaskIndex].id);\n  };\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WrapUpTask.id) {\n      if (taskAction === 'cancel') {\n        setIsWrapUpTabVisible(false);\n        const openTasks = serviceTasks.filter(task => !task.hideFromTab);\n        const lastTask = openTasks[openTasks.length - 1];\n        if (lastTask?.status?.text === 'Queued') {\n          setServiceTasks(prevTasks => {\n            return [\n              ...prevTasks.filter(task => task.id !== lastTask.id),\n              {\n                ...lastTask,\n                variant: 'In progress',\n                icon: 'clipboard',\n                status: {\n                  variant: 'pending',\n                  text: 'In progress'\n                }\n              }\n            ];\n          });\n        }\n        if (lastTask) {\n          setActiveTaskId(lastTask.id);\n        } else {\n          setActiveTaskId(undefined);\n        }\n        setDisableWrapUp(false);\n      } else if (taskAction === 'submit') {\n        setServiceTasks(prevTasks => {\n          return prevTasks\n            .filter(task => task?.status?.text !== 'Queued')\n            .map(task => {\n              if (task?.status?.text !== 'cancelled') {\n                return {\n                  ...task,\n                  isResolved: true,\n                  icon: 'check',\n                  hideFromTab: true,\n                  status: {\n                    variant: 'success' as StatusProps['variant'],\n                    text: 'Resolve-Completed'\n                  }\n                };\n              }\n              return task;\n            });\n        });\n        setIsWrapUpTabVisible(false);\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WrapUpTask.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 status = task?.status?.text === 'Queued' ? 'In progress' : task?.status?.text;\n            return {\n              ...task,\n              icon:\n                task.status?.text === 'Resolve-Completed' ||\n                task.status?.text === 'Resolve-Cancelled'\n                  ? 'check'\n                  : 'clipboard',\n              hideFromTab: false,\n              status: {\n                variant:\n                  (status === 'In progress'\n                    ? ('pending' as StatusProps['variant'])\n                    : task.status?.variant) || ('info' as StatusProps['variant']),\n                text: (status === '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) {\n            return {\n              ...task,\n              hideFromTab: true\n            };\n          }\n\n          if (\n            task.id === nextTaskId &&\n            task?.status?.text !== 'Resolve-Completed' &&\n            task?.status?.text !== 'Resolve-Cancelled'\n          ) {\n            return {\n              ...task,\n              icon: 'clipboard',\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      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) {\n            return {\n              ...task,\n              icon: 'check',\n              isResolved: true,\n              hideFromTab: true,\n              status: {\n                variant: 'success' as StatusProps['variant'],\n                text: 'Resolve-Completed'\n              }\n            };\n          }\n          if (\n            task.id === nextTaskId &&\n            task?.status?.text !== 'Resolve-Completed' &&\n            task?.status?.text !== 'Resolve-Cancelled'\n          ) {\n            return {\n              ...task,\n              icon: 'clipboard',\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n          return task;\n        });\n      });\n      switchTab(serviceTasks, taskId);\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: TaskProps[] = 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          secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n          isResolved: false,\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        secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n        isResolved: false,\n        status: {\n          variant: 'info' 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    setDisableWrapUp(false);\n  };\n  const activeServiceTask: TaskProps =\n    (serviceTasks.find(task => task.id === activeTaskId) as TaskProps) || {};\n\n  /* Preparing form fields from added task */\n\n  const taskFields =\n    TaskPickerData.tasks\n      .flatMap(task => task.items ?? [])\n      .find(({ primary }) => primary === activeServiceTask?.name)?.fields ?? [];\n\n  const getFormElements = (readOnly: boolean) => {\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 readOnly={readOnly} label={field} key={i} />;\n      }\n      if (lowerFieldName.includes('date')) {\n        return <DateInput readOnly={readOnly} label={field} key={i} />;\n      }\n      if (lowerFieldName.includes('time')) {\n        return <TimeInput readOnly={readOnly} label={field} key={i} />;\n      }\n      return <Input readOnly={readOnly} label={field} key={i} />;\n      /* eslint-enable react/no-array-index-key */\n    });\n\n    return 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\n  const serviceTasksEmpty = boolean('Tasks empty', false);\n  const handleLaunch = (id: string) => {\n    performTaskAction(id, 'launch');\n  };\n\n  const handleDismiss = (id: string) => {\n    performTaskAction(id, 'dismiss');\n  };\n\n  const getTaskName = (taskName: TaskProps['name']) => {\n    return taskName === 'Address change' ? 'Address change details' : taskName;\n  };\n\n  return (\n    <TaskManagerComp\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={onTaskLaunch || handleLaunch}\n      onTaskDismiss={onTaskDismiss || handleDismiss}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={\n        wrapUp || {\n          disable: disableWrapUp,\n          onClick: () => {\n            performTaskAction(WrapUpTask.id, 'launch');\n            setDisableWrapUp(true);\n          },\n          active: activeTaskId === WrapUpTask.id,\n          showTab: isWrapUpTabVisible\n        }\n      }\n      main={\n        main || (\n          <TaskView\n            header={\n              <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                <Text variant='h3'>\n                  {activeTaskId === WrapUpTask.id\n                    ? WrapUpTask.name\n                    : getTaskName(activeServiceTask?.name as TaskProps['name'])}\n                </Text>\n                <StyledStatus\n                  variant={\n                    activeTaskId === WrapUpTask.id\n                      ? WrapUpTask.variant\n                      : (activeServiceTask.status &&\n                          (activeServiceTask.status?.variant as StatusProps['variant'])) ||\n                        'info'\n                  }\n                >\n                  {activeTaskId === WrapUpTask.id\n                    ? WrapUpTask.status\n                    : activeServiceTask.status && activeServiceTask!.status!.text}\n                </StyledStatus>\n              </Flex>\n            }\n            actions={\n              <MenuButton\n                ref={formActionsElemRef}\n                menu={{\n                  items: array('actions', ['Close task', 'Dismiss task', 'Resolve task']).map(\n                    name => ({\n                      primary: name,\n                      id: name,\n                      onClick: action(`Clicked ${name}`)\n                    })\n                  )\n                }}\n                text='Actions'\n              />\n            }\n          >\n            <Form\n              id='forming'\n              actions={\n                activeServiceTask?.isResolved ? (\n                  <Flex container={{ justify: 'end' }} item={{ grow: 1 }}>\n                    <Button\n                      name='Close'\n                      variant='primary'\n                      onClick={() => {\n                        performTaskAction(activeTaskId, 'cancel');\n                      }}\n                    >\n                      Close\n                    </Button>\n                  </Flex>\n                ) : (\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            >\n              <Grid container={{ rowGap: 2 }}>\n                {activeTaskId === WrapUpTask.id ? (\n                  <Timeline activity={activity} currentTime={new Date()} />\n                ) : (\n                  getFormElements(activeServiceTask?.isResolved || false)\n                )}\n              </Grid>\n            </Form>\n          </TaskView>\n        )\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"TaskManager.stories.jsx","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  DateTimeInput,\n  Flex,\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 {\n  DialogueProps,\n  TaskManager,\n  TaskManagerProps,\n  TaskProps,\n  TaskView\n} from '@pega/cosmos-react-cs';\nimport { EntityList, EntityListProps } from '@pega/cosmos-react-social';\nimport { HandleValue } from '@pega/cosmos-react-cs/lib/components/TaskManager/TaskManager.types';\nimport { ContextMenuProps } from '@pega/cosmos-react-social/lib/components/Email/Email.types';\n\nimport { activity } from '../../work/Timeline/Timeline.mocks';\n\nimport { TaskPickerMockData, WrapUpTask, EntityListMock } from './TaskManager.mocks';\nimport { StyledStatus } from './TaskManager.styles';\n\nexport default {\n  title: 'Customer Service/TaskManager',\n  component: TaskManager\n} as Meta;\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nexport interface TaskManagerStoryProps extends TaskManagerProps {\n  initialTasks?: TaskProps[];\n  main?: ReactNode;\n  serviceTasksEmpty?: boolean;\n  colGap?: number;\n  rowGap?: number;\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}\n\nexport const TaskManagerDemo: Story<TaskManagerStoryProps> = (args: TaskManagerStoryProps) => {\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>(args.initialTasks || []);\n  const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState<boolean>(false);\n  const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n\n  const formActionsElemRef = useRef<HTMLButtonElement>(null);\n  const taskManagerRef = useRef<HTMLDivElement>(null);\n  const handle = useRef<HandleValue>(null);\n  const [activeTaskId, setActiveTaskId] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    handle.current?.nudge();\n  }, []);\n\n  const switchTab = (taskList: TaskProps[], taskId?: TaskProps['id']) => {\n    if (taskList.filter(task => !task.hideFromTab).length <= 1) {\n      return isWrapUpTabVisible ? setActiveTaskId(WrapUpTask.id) : setActiveTaskId(undefined);\n    }\n    const taskIndex = taskList.findIndex(task => {\n      return task.id === taskId;\n    });\n\n    let nextTaskIndex = taskList.findIndex((task, i) => {\n      return i > taskIndex && !task.hideFromTab;\n    });\n\n    if (nextTaskIndex === -1) nextTaskIndex = taskList.findIndex(task => !task.hideFromTab);\n    setActiveTaskId(taskList[nextTaskIndex].id);\n  };\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WrapUpTask.id) {\n      if (taskAction === 'cancel') {\n        setIsWrapUpTabVisible(false);\n        const openTasks = serviceTasks.filter(task => !task.hideFromTab);\n        const lastTask = openTasks[openTasks.length - 1];\n        if (lastTask?.status?.text === 'Queued') {\n          setServiceTasks(prevTasks => {\n            return [\n              ...prevTasks.filter(task => task.id !== lastTask.id),\n              {\n                ...lastTask,\n                variant: 'In progress',\n                icon: 'clipboard',\n                status: {\n                  variant: 'pending',\n                  text: 'In progress'\n                }\n              }\n            ];\n          });\n        }\n        if (lastTask) {\n          setActiveTaskId(lastTask.id);\n        } else {\n          setActiveTaskId(undefined);\n        }\n        setDisableWrapUp(false);\n      } else if (taskAction === 'submit') {\n        setServiceTasks(prevTasks => {\n          return prevTasks\n            .filter(task => task?.status?.text !== 'Queued')\n            .map(task => {\n              if (task?.status?.text !== 'cancelled') {\n                return {\n                  ...task,\n                  isResolved: true,\n                  icon: 'check',\n                  hideFromTab: true,\n                  status: {\n                    variant: 'success' as StatusProps['variant'],\n                    text: 'Resolve-Completed'\n                  }\n                };\n              }\n              return task;\n            });\n        });\n        setIsWrapUpTabVisible(false);\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WrapUpTask.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 status = task?.status?.text === 'Queued' ? 'In progress' : task?.status?.text;\n            return {\n              ...task,\n              icon:\n                task.status?.text === 'Resolve-Completed' ||\n                task.status?.text === 'Resolve-Cancelled'\n                  ? 'check'\n                  : 'clipboard',\n              hideFromTab: false,\n              status: {\n                variant:\n                  (status === 'In progress'\n                    ? ('pending' as StatusProps['variant'])\n                    : task.status?.variant) || ('info' as StatusProps['variant']),\n                text: (status === '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) {\n            return {\n              ...task,\n              hideFromTab: true\n            };\n          }\n\n          if (\n            task.id === nextTaskId &&\n            task?.status?.text !== 'Resolve-Completed' &&\n            task?.status?.text !== 'Resolve-Cancelled'\n          ) {\n            return {\n              ...task,\n              icon: 'clipboard',\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      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) {\n            return {\n              ...task,\n              icon: 'check',\n              isResolved: true,\n              hideFromTab: true,\n              status: {\n                variant: 'success' as StatusProps['variant'],\n                text: 'Resolve-Completed'\n              }\n            };\n          }\n          if (\n            task.id === nextTaskId &&\n            task?.status?.text !== 'Resolve-Completed' &&\n            task?.status?.text !== 'Resolve-Cancelled'\n          ) {\n            return {\n              ...task,\n              icon: 'clipboard',\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n          return task;\n        });\n      });\n      switchTab(serviceTasks, taskId);\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: TaskProps[] = 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          secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n          isResolved: false,\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        secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n        isResolved: false,\n        status: {\n          variant: 'info' 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    setDisableWrapUp(false);\n  };\n  const activeServiceTask: TaskProps =\n    (serviceTasks.find(task => task.id === activeTaskId) as TaskProps) || {};\n\n  /* Preparing form fields from added task */\n\n  const taskFields =\n    TaskPickerMockData.tasks\n      .flatMap(task => task.items ?? [])\n      .find(({ primary }) => primary === activeServiceTask?.name)?.fields ?? [];\n\n  const getFormElements = (readOnly: boolean) => {\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 readOnly={readOnly} label={field} key={i} />;\n      }\n      if (lowerFieldName.includes('date')) {\n        return <DateInput readOnly={readOnly} label={field} key={i} />;\n      }\n      if (lowerFieldName.includes('time')) {\n        return <TimeInput readOnly={readOnly} label={field} key={i} />;\n      }\n      return <Input readOnly={readOnly} label={field} key={i} />;\n      /* eslint-enable react/no-array-index-key */\n    });\n\n    return formElements.length <= 3 ? (\n      <>{formElements}</>\n    ) : (\n      <Grid\n        container={{\n          cols: 'repeat(2, 1fr)',\n          colGap: args.colGap,\n          rowGap: args.rowGap\n        }}\n      >\n        {formElements}\n      </Grid>\n    );\n  };\n\n  const handleLaunch = (id: string) => {\n    performTaskAction(id, 'launch');\n  };\n\n  const handleDismiss = (id: string) => {\n    performTaskAction(id, 'dismiss');\n  };\n\n  const getTaskName = (taskName: TaskProps['name']) => {\n    return taskName === 'Address change' ? 'Address change details' : taskName;\n  };\n\n  const itemCounter = useRef(3);\n  const imperativeHandle: ContextMenuProps['handle'] = useRef(null);\n\n  const handleRightClick = () => {\n    itemCounter.current += 1;\n    setTimeout(() => {\n      imperativeHandle.current?.setContextMenuItems([\n        {\n          id: 'item_0',\n          primary: 'Field 1',\n          selected: itemCounter.current % 2 === 0\n        },\n        {\n          id: 'item_1',\n          primary: 'Field 2',\n          selected: true\n        },\n        {\n          id: 'item_2',\n          primary: 'Field 3',\n          selected: true\n        },\n        {\n          id: `item_${itemCounter.current}`,\n          primary: `Field ${itemCounter.current + 1}`,\n          selected: true\n        }\n      ]);\n    }, 3000);\n  };\n\n  const [entityListMockData, setEntityListMock] = useState<EntityListProps['content']>([]);\n  const [count, setCount] = useState(0);\n  const entityListMock = (\n    <EntityList\n      content={entityListMockData}\n      contextMenu={{\n        onItemClick: action('onItemClick'),\n        onContextMenu: handleRightClick,\n        handle: imperativeHandle\n      }}\n    />\n  );\n\n  const tasks = serviceTasks.map(task => {\n    if (task.id === activeTaskId) {\n      return {\n        ...task,\n        active: true\n      };\n    }\n    return task;\n  });\n\n  const wrapUp = {\n    disable: disableWrapUp,\n    onClick: () => {\n      performTaskAction(WrapUpTask.id, 'launch');\n      setDisableWrapUp(true);\n    },\n    active: activeTaskId === WrapUpTask.id,\n    showTab: isWrapUpTabVisible\n  };\n\n  const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n\n  useEffect(() => {\n    if (hasActiveTask) {\n      const interval = setInterval(() => {\n        setCount(prev => {\n          if (prev === EntityListMock.length - 1) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev + 1;\n        });\n      }, 3000);\n      return () => clearInterval(interval);\n    }\n  }, [hasActiveTask]);\n\n  useEffect(() => {\n    if (count > 0) setEntityListMock([...entityListMockData, EntityListMock[count - 1]]);\n  }, [count]);\n\n  return (\n    <TaskManager\n      conversationAI={\n        hasActiveTask\n          ? {\n              content: entityListMock,\n              entityCount: count\n            }\n          : undefined\n      }\n      ref={taskManagerRef}\n      handle={handle}\n      tasks={args.serviceTasksEmpty ? [] : tasks}\n      emptyText='No tasks added'\n      banner={{\n        icon: 'script',\n        content:\n          'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct?',\n        verbatimStatus: args.verbatimStatus || 'pending'\n      }}\n      onTaskLaunch={args.onTaskLaunch || handleLaunch}\n      onTaskDismiss={args.onTaskDismiss || handleDismiss}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={args.wrapUp || wrapUp}\n      main={\n        args.main || (\n          <TaskView\n            header={\n              <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                <Text variant='h3'>\n                  {activeTaskId === WrapUpTask.id\n                    ? WrapUpTask.name\n                    : getTaskName(activeServiceTask?.name as TaskProps['name'])}\n                </Text>\n                <StyledStatus\n                  variant={\n                    activeTaskId === WrapUpTask.id\n                      ? WrapUpTask.variant\n                      : (activeServiceTask.status &&\n                          (activeServiceTask.status?.variant as StatusProps['variant'])) ||\n                        'info'\n                  }\n                >\n                  {activeTaskId === WrapUpTask.id\n                    ? WrapUpTask.status\n                    : activeServiceTask.status && activeServiceTask!.status!.text}\n                </StyledStatus>\n              </Flex>\n            }\n            actions={\n              <MenuButton\n                ref={formActionsElemRef}\n                menu={{\n                  items: ['Close task', 'Dismiss task', 'Resolve task'].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                activeServiceTask?.isResolved ? (\n                  <Flex container={{ justify: 'end' }} item={{ grow: 1 }}>\n                    <Button\n                      name='Close'\n                      variant='primary'\n                      onClick={() => {\n                        performTaskAction(activeTaskId, 'cancel');\n                      }}\n                    >\n                      Close\n                    </Button>\n                  </Flex>\n                ) : (\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            >\n              <Grid container={{ rowGap: 2 }}>\n                {activeTaskId === WrapUpTask.id ? (\n                  <Timeline activity={activity} currentTime={new Date()} />\n                ) : (\n                  getFormElements(activeServiceTask?.isResolved || false)\n                )}\n              </Grid>\n            </Form>\n          </TaskView>\n        )\n      }\n    />\n  );\n};\n\nTaskManagerDemo.args = {\n  serviceTasksEmpty: false,\n  colGap: 2,\n  rowGap: 2,\n  verbatimStatus: 'pending'\n};\n\nTaskManagerDemo.argTypes = {\n  serviceTasksEmpty: { control: { type: 'boolean' } },\n  colGap: { control: { type: 'number' } },\n  rowGap: { control: { type: 'number' } },\n  verbatimStatus: {\n    options: ['pending', 'spoken', 'undefined'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/jsx/cs/TaskManager/TaskManager.styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledStatus: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").StatusProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=TaskManager.styles.d.ts.map

package/jsx/cs/TaskManager/TaskManager.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,YAAY,sNAIvB,CAAC"}

package/jsx/cs/TaskManager/TaskManager.styles.js

@@ -0,0 +1,9 @@
+import styled, { css } from 'styled-components';
+import { Status, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledStatus = styled(Status)(({ theme }) => {
+    return css `
+    margin-block-start: calc(0.25 * ${theme.base.spacing});
+  `;
+});
+StyledStatus.defaultProps = defaultThemeProp;
+//# sourceMappingURL=TaskManager.styles.js.map

package/jsx/cs/TaskManager/TaskManager.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Status, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledStatus = styled(Status)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n"]}

package/jsx/dnd/DragDropList/DragDropList.mocks.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';
+interface ItemData {
+    content: string;
+    color: string;
+}
+export declare const createMockDataArray: (length: number, type: DraggableProps['type'], listId: string) => DraggableItem<ItemData>[];
+export declare const EmptyItem: () => JSX.Element;
+export declare const DemoListItem: ({ id, type, dragRef, data, isDragging, ...restProps }: ItemRendererProps<ItemData>) => JSX.Element;
+export declare const sort: (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>) => number;
+export declare const itemType: unique symbol;
+export declare const mockDataArrayA: DraggableItem<ItemData>[];
+export declare const mockDataArrayB: DraggableItem<ItemData>[];
+export {};
+//# sourceMappingURL=DragDropList.mocks.d.ts.map

package/jsx/dnd/DragDropList/DragDropList.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.mocks.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAI1F,UAAU,QAAQ;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,WACtB,MAAM,QACR,cAAc,CAAC,MAAM,CAAC,UACpB,MAAM,KACb,cAAc,QAAQ,CAAC,EAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAErB,CAAC;AAEF,eAAO,MAAM,YAAY,0DAOtB,kBAAkB,QAAQ,CAAC,gBAa7B,CAAC;AAEF,eAAO,MAAM,IAAI,MAAO,cAAc,QAAQ,CAAC,KAAK,cAAc,QAAQ,CAAC,KAAG,MAE7E,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAa,CAAC;AACnC,eAAO,MAAM,cAAc,2BAAyC,CAAC;AACrE,eAAO,MAAM,cAAc,2BAAwC,CAAC"}

package/jsx/dnd/DragDropList/DragDropList.mocks.jsx

@@ -0,0 +1,33 @@
+import { createUID } from '@pega/cosmos-react-core';
+import { StyledDemoDragDropListItem, StyledEmptyItem } from './DragDropList.styles';
+export const createMockDataArray = (length, type, listId) => {
+    return Array.from({ length }, (_, i) => {
+        const id = `${i}`;
+        return {
+            type,
+            id: createUID(),
+            data: {
+                content: `Item ${listId}:${id}`,
+                color: `hsl(${(i * 360) / length}deg, 100%, 66%)`
+            }
+        };
+    });
+};
+export const EmptyItem = () => {
+    return <StyledEmptyItem>No Items</StyledEmptyItem>;
+};
+export const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
+    return (<StyledDemoDragDropListItem ref={dragRef} style={{
+            opacity: isDragging ? '0.5' : undefined,
+            backgroundColor: data?.color ?? 'white'
+        }} {...restProps}>
+      {data?.content}
+    </StyledDemoDragDropListItem>);
+};
+export const sort = (a, b) => {
+    return a.data.content.localeCompare(b.data.content);
+};
+export const itemType = Symbol('');
+export const mockDataArrayA = createMockDataArray(10, itemType, 'A');
+export const mockDataArrayB = createMockDataArray(4, itemType, 'B');
+//# sourceMappingURL=DragDropList.mocks.jsx.map

package/jsx/dnd/DragDropList/DragDropList.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.mocks.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOpF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAc,EACd,IAA4B,EAC5B,MAAc,EACa,EAAE;IAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO;YACL,IAAI;YACJ,EAAE,EAAE,SAAS,EAAE;YACf,IAAI,EAAE;gBACJ,OAAO,EAAE,QAAQ,MAAM,IAAI,EAAE,EAAE;gBAC/B,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,iBAAiB;aAClD;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,GAAG,SAAS,EACgB,EAAE,EAAE;IAChC,OAAO,CACL,CAAC,0BAA0B,CACzB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACvC,eAAe,EAAE,IAAI,EAAE,KAAK,IAAI,OAAO;SACxC,CAAC,CACF,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,IAAI,EAAE,OAAO,CAChB;IAAA,EAAE,0BAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAA0B,EAAE,CAA0B,EAAU,EAAE;IACrF,OAAO,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\nimport { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropListItem, StyledEmptyItem } from './DragDropList.styles';\n\ninterface ItemData {\n  content: string;\n  color: string;\n}\n\nexport const createMockDataArray = (\n  length: number,\n  type: DraggableProps['type'],\n  listId: string\n): DraggableItem<ItemData>[] => {\n  return Array.from({ length }, (_, i) => {\n    const id = `${i}`;\n    return {\n      type,\n      id: createUID(),\n      data: {\n        content: `Item ${listId}:${id}`,\n        color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n      }\n    };\n  });\n};\n\nexport const EmptyItem = () => {\n  return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\nexport const DemoListItem = ({\n  id,\n  type,\n  dragRef,\n  data,\n  isDragging,\n  ...restProps\n}: ItemRendererProps<ItemData>) => {\n  return (\n    <StyledDemoDragDropListItem\n      ref={dragRef}\n      style={{\n        opacity: isDragging ? '0.5' : undefined,\n        backgroundColor: data?.color ?? 'white'\n      }}\n      {...restProps}\n    >\n      {data?.content}\n    </StyledDemoDragDropListItem>\n  );\n};\n\nexport const sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n  return a.data!.content.localeCompare(b.data!.content);\n};\n\nexport const itemType = Symbol('');\nexport const mockDataArrayA = createMockDataArray(10, itemType, 'A');\nexport const mockDataArrayB = createMockDataArray(4, itemType, 'B');\n"]}

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

@@ -1,11 +1,10 @@
-/// <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;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+import { DragDropListProps } from '@pega/cosmos-react-dnd';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DragDropListDemo: () => JSX.Element;
+interface DragDropListDemoProps {
+    pullMode?: DragDropListProps['pullMode'];
+    pushMode?: DragDropListProps['pushMode'] | 'sort';
+}
+export declare const DragDropListDemo: Story<DragDropListDemoProps>;
 //# sourceMappingURL=DragDropList.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"DragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAiC,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;;AAa1F,wBAMU;AAEV,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CA6DzD,CAAC"}

package/jsx/dnd/DragDropList/DragDropList.stories.jsx

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { optionsKnob } from '@storybook/addon-knobs';
-import styled from 'styled-components';
-import { Button, Flex, createUID } from '@pega/cosmos-react-core';
+import { Button, Flex } from '@pega/cosmos-react-core';
 import { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
+import { StyledDemoDragDropList } from './DragDropList.styles';
+import { createMockDataArray, DemoListItem, EmptyItem, itemType, mockDataArrayA, mockDataArrayB, sort } from './DragDropList.mocks';
 export default {
     title: 'DnD/DragDropList',
     component: DragDropList,
@@ -11,79 +11,7 @@ export default {
         layout: 'fullscreen'
     }
 };
-const createMockDataArray = (length, type, listId) => {
-    return Array.from({ length }, (_, i) => {
-        const id = `${i}`;
-        return {
-            type,
-            id: createUID(),
-            data: {
-                content: `Item ${listId}:${id}`,
-                color: `hsl(${(i * 360) / length}deg, 100%, 66%)`
-            }
-        };
-    });
-};
-const StyledEmptyItem = styled.li `
-  display: grid;
-  padding: 1rem;
-  gap: 1rem;
-`;
-const EmptyItem = () => {
-    return <StyledEmptyItem>No Items</StyledEmptyItem>;
-};
-const StyledDemoDragDropList = styled.ul `
-  list-style: none;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0.5rem;
-`;
-const StyledDemoDragDropListItem = styled.li `
-  border: 0.0625rem dashed gray;
-  margin: 0.5rem;
-  padding: 0.5rem;
-  background: white;
-  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
-  transition: transform 0.3s;
-
-  .handle {
-    background: pink;
-    width: 1rem;
-    height: 1rem;
-    display: inline-block;
-    margin-right: 0.0625rem;
-    cursor: move;
-  }
-`;
-const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
-    return (<StyledDemoDragDropListItem ref={dragRef} style={{
-            opacity: isDragging ? '0.5' : undefined,
-            backgroundColor: data?.color ?? 'white'
-        }} {...restProps}>
-      {data?.content}
-    </StyledDemoDragDropListItem>);
-};
-const pullModes = {
-    remove: 'remove',
-    clone: 'clone'
-};
-const pushModes = {
-    insert: 'insert',
-    prepend: 'prepend',
-    append: 'append',
-    sort: 'sort'
-};
-const sort = (a, b) => {
-    return a.data.content.localeCompare(b.data.content);
-};
-const itemType = Symbol('');
-const mockDataArrayA = createMockDataArray(10, itemType, 'A');
-const mockDataArrayB = createMockDataArray(4, itemType, 'B');
-export const DragDropListDemo = () => {
-    const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });
-    const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });
+export const DragDropListDemo = (args) => {
     const [arrayA, setArrayA] = useState(mockDataArrayA);
     const [arrayB, setArrayB] = useState(mockDataArrayB);
     return (<>
@@ -103,12 +31,12 @@ export const DragDropListDemo = () => {
       </Button>
       <DragDropManager>
         <Flex container style={{ minHeight: '100vh' }}>
-          <DragDropList as={StyledDemoDragDropList} id='list1' accept={itemType} pullMode={pullMode} pushMode={pushMode === 'sort' ? sort : pushMode} items={arrayA} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
+          <DragDropList as={StyledDemoDragDropList} id='list1' accept={itemType} pullMode={args.pullMode} pushMode={args.pushMode === 'sort' ? sort : args.pushMode} items={arrayA} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
             setArrayA(newArray);
             action('List A changed')(newArray);
         }} style={{ background: 'palegreen' }}/>
 
-          <DragDropList as={StyledDemoDragDropList} id='list2' accept={itemType} pullMode={pullMode} pushMode={pushMode === 'sort' ? sort : pushMode} items={arrayB} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
+          <DragDropList as={StyledDemoDragDropList} id='list2' accept={itemType} pullMode={args.pullMode} pushMode={args.pushMode === 'sort' ? sort : args.pushMode} items={arrayB} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
             setArrayB(newArray);
             action('List B changed')(newArray);
         }} style={{ background: 'lightblue' }}/>
@@ -116,4 +44,12 @@ export const DragDropListDemo = () => {
       </DragDropManager>
     </>);
 };
+DragDropListDemo.args = {
+    pullMode: 'remove',
+    pushMode: 'insert'
+};
+DragDropListDemo.argTypes = {
+    pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },
+    pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }
+};
 //# sourceMappingURL=DragDropList.stories.jsx.map