@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/cs/TaskManager/TaskManager.stories.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 ?? '';
+    /* Preparing form fields from added task */
+    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')) {
+            /* eslint-disable react/no-array-index-key */
+            return _jsx(DateTimeInput, { label: field }, i);
+        }
+        if (lowerFieldName.includes('date')) {
+            return _jsx(DateInput, { label: field }, i);
+        }
+        if (lowerFieldName.includes('time')) {
+            return _jsx(TimeInput, { label: field }, i);
+        }
+        return _jsx(Input, { label: field }, i);
+        /* eslint-enable react/no-array-index-key */
+    });
+    const formFields = formElements.length <= 3 ? (_jsx(_Fragment, { children: formElements }, void 0)) : (_jsx(Grid, { container: {
+            cols: 'repeat(2, 1fr)',
+            colGap: number('colGap', 2),
+            rowGap: number('rowGap', 2)
+        }, children: formElements }, void 0));
+    const serviceTasksEmpty = boolean('Tasks empty', false);
+    return (_jsx(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: _jsx(TaskView, { header: _jsx(Text, { variant: 'h2', children: activeTaskId === WRAP_UP_TASK_ID
+                    ? 'Wrap up'
+                    : serviceTasks.find(task => task.id === activeTaskId)?.name }, void 0), actions: _jsx(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' }, void 0), children: _jsx(Form, { id: 'forming', actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', onClick: () => {
+                                performTaskAction(activeTaskId, 'cancel');
+                            }, children: "Cancel" }, void 0), _jsx("div", { children: _jsx(Button, { name: 'Submit', variant: 'primary', onClick: () => {
+                                    performTaskAction(activeTaskId, 'submit');
+                                }, children: "Submit" }, void 0) }, void 0)] }, void 0), children: _jsx(Grid, { container: { rowGap: 2 }, children: activeTaskId === WRAP_UP_TASK_ID ? (_jsx(Timeline, { activity: activity, currentTime: new Date() }, void 0)) : (formFields) }, void 0) }, void 0) }, void 0) }, void 0));
+};
+//# sourceMappingURL=TaskManager.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.stories.js","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.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
+export default {
+    title: 'DnD/DragDropList',
+    component: DragDropList,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+// Helper function to create demo arrays
+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%)`
+            }
+        };
+    });
+};
+// styled demo list component
+const StyledEmptyItem = styled.li `
+  display: grid;
+  padding: 1rem;
+  gap: 1rem;
+`;
+// Demo component used to render list items
+const EmptyItem = () => {
+    return _jsx(StyledEmptyItem, { children: "No Items" }, void 0);
+};
+// styled demo list component
+const StyledDemoDragDropList = styled.ul `
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+`;
+// styled demo list item component
+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;
+  }
+`;
+// Demo component used to render list items
+const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
+    return (_jsx(StyledDemoDragDropListItem, { ref: dragRef, style: {
+            opacity: isDragging ? '0.5' : undefined,
+            backgroundColor: data?.color ?? 'white'
+        }, ...restProps, children: data?.content }, void 0));
+};
+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');
+// -----------------------------------------------------------------------------
+// DragDropList
+// -----------------------------------------------------------------------------
+export const DragDropListDemo = () => {
+    const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });
+    const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });
+    const [arrayA, setArrayA] = useState(mockDataArrayA);
+    const [arrayB, setArrayB] = useState(mockDataArrayB);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: useCallback(() => {
+                    setArrayA(items => {
+                        return [...items, ...createMockDataArray(1, itemType, 'A-new')];
+                    });
+                }, []), children: "Add to List A" }, void 0), _jsx(Button, { onClick: useCallback(() => {
+                    setArrayB(items => {
+                        return [...items, ...createMockDataArray(1, itemType, 'B-new')];
+                    });
+                }, []), children: "Add to List B" }, void 0), _jsx(DragDropManager, { children: _jsxs(Flex, { container: true, style: { minHeight: '100vh' }, children: [_jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list1', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayA, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                                setArrayA(newArray);
+                                action('List A changed')(newArray);
+                            }, style: { background: 'palegreen' } }, void 0), _jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list2', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayB, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                                setArrayB(newArray);
+                                action('List B changed')(newArray);
+                            }, style: { background: 'lightblue' } }, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=DragDropList.stories.js.map

package/lib/dnd/DragDropList/DragDropList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.stories.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { optionsKnob } from '@storybook/addon-knobs';\nimport styled from 'styled-components';\n\nimport { Button, Flex, createUID } from '@pega/cosmos-react-core';\nimport {\n  DragDropManager,\n  DraggableItem,\n  DraggableProps,\n  DragDropList,\n  ItemRendererProps\n} from '@pega/cosmos-react-dnd';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\ninterface ItemData {\n  content: string;\n  color: string;\n}\n\n// Helper function to create demo arrays\nconst 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\n// styled demo list component\nconst StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\n// Demo component used to render list items\nconst EmptyItem = () => {\n  return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\n// styled demo list component\nconst StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\n// styled demo list item component\nconst StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n\n// Demo component used to render list items\nconst 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\nconst pullModes = {\n  remove: 'remove',\n  clone: 'clone'\n} as const;\n\nconst pushModes = {\n  insert: 'insert',\n  prepend: 'prepend',\n  append: 'append',\n  sort: 'sort'\n} as const;\n\nconst sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n  return a.data!.content.localeCompare(b.data!.content);\n};\n\nconst itemType = Symbol('');\nconst mockDataArrayA = createMockDataArray(10, itemType, 'A');\nconst mockDataArrayB = createMockDataArray(4, itemType, 'B');\n\n// -----------------------------------------------------------------------------\n// DragDropList\n// -----------------------------------------------------------------------------\nexport const DragDropListDemo = () => {\n  const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });\n  const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });\n\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n"]}

package/lib/rte/Editor/Editor.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const EditorDemo: () => JSX.Element;
+export declare const EmptyEditorDemo: () => JSX.Element;
+export declare const ReadonlyFormField: () => JSX.Element;
+export declare const CustomComponentDemo: () => JSX.Element;
+export declare const RichTextEditorWithLogs: () => JSX.Element;
+export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+//# sourceMappingURL=Editor.stories.d.ts.map

package/lib/rte/Editor/Editor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}

package/lib/rte/Editor/Editor.stories.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { action } from '@storybook/addon-actions';
+import { Button, Card, CardContent, CardFooter, Flex, Text, TextArea } from '@pega/cosmos-react-core';
+import { Editor } from '@pega/cosmos-react-rte';
+export default {
+    title: 'RTE/Editor',
+    component: Editor
+};
+const label = 'Form field label';
+export const EditorDemo = () => {
+    const editorRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p></body>' }, void 0));
+};
+export const EmptyEditorDemo = () => {
+    const editorRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onImageAdded: onImageAdded, onFocus: action('Editor has focus'), onBlur: action('Editor has blurred'), placeholder: 'Type some stuff in here' }, void 0));
+};
+export const ReadonlyFormField = () => {
+    return (_jsx(Editor, { label: label, readOnly: true, defaultValue: `<article class="main-page-content" lang="en-US"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</p>
+      <p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
+      <p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <a href="/en-US/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/title"><code>&lt;title&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/progress"><code>&lt;progress&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a>, <a href="/en-US/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a> and many others.</p>
+      <p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<code>&lt;</code>" and "<code>&gt;</code>".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>
+
+      <div id="on-github" class="on-github"><h3>Found a problem with this page?</h3><ul><li><a href="https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md" title="You're going to need to sign in to GitHub first (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Edit on <b>GitHub</b></a></li><li><a href="https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md" title="Folder: en-us/web/html (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Source on <b>GitHub</b></a></li><li><a href="https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML" title="This will take you to https://github.com/mdn/content to file a new issue" target="_blank" rel="noopener noreferrer">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href="https://github.com/mdn/content/blob/main/README.md" target="_blank" rel="noopener noreferrer">our Contribution guide</a>.</li></ul></div>
+      ` }, void 0));
+};
+const PegaCustom = ({ children }) => {
+    return (_jsx("p", { style: { color: 'blue', textTransform: 'uppercase' }, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: children } }, void 0));
+};
+class PegaCustomElement extends HTMLElement {
+    removeElements() {
+        while (this.firstChild) {
+            this.removeChild(this.firstChild);
+        }
+    }
+    connectedCallback() {
+        const inner = this.innerHTML;
+        this.removeElements();
+        const mountPoint = document.createElement('span');
+        this.appendChild(mountPoint);
+        ReactDOM.render(_jsx(PegaCustom, { children: inner }, void 0), mountPoint);
+    }
+}
+export const CustomComponentDemo = () => {
+    const editorRef = useRef(null);
+    const [editor, setEditor] = useState({});
+    const onCustomAction = () => {
+        editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');
+    };
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'links', 'images'], defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>', customComponents: [{ customElement: PegaCustomElement, name: 'pega-custom' }], customActions: [
+            {
+                icon: 'pega',
+                text: 'Insert a custom element',
+                onMouseDown: () => {
+                    onCustomAction();
+                }
+            }
+        ], onInit: initializedEditor => {
+            setEditor(initializedEditor);
+        } }, void 0));
+};
+export const RichTextEditorWithLogs = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState();
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const showContent = (type) => {
+        if (type === 'html')
+            setContent(editorRef.current?.getHtml());
+        else if (type === 'plain_text')
+            setContent(editorRef.current?.getPlainText());
+        else if (type === 'rich_text')
+            setContent(editorRef.current?.getRichText());
+    };
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Editor, { ref: editorRef, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }, void 0), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }, void 0), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" }, void 0)] }, void 0), _jsx(Text, { children: content }, void 0)] }, void 0));
+};
+export const RichTextEditorHtmlParsingDemo = () => {
+    const [html, setHtml] = useState('<p>Hello world!</p>');
+    const rteRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }, void 0) }, void 0), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }, void 0) }, void 0)] }, void 0), _jsx(Editor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: label, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'] }, void 0)] }, void 0));
+};
+//# sourceMappingURL=Editor.stories.js.map