@pega/cosmos-react-demos 5.0.0-dev.2.0 → 5.0.0-dev.3.0

package/jsx/build/LifeCycle/LifeCycle.stories.jsx

@@ -1,873 +0,0 @@
-import { memo, useEffect, useMemo, useState } from 'react';
-import { LifeCycle, Workbench, ObjectSelect } from '@pega/cosmos-react-build';
-import { Input, Option, Select, menuHelpers } from '@pega/cosmos-react-core';
-import { getInitConditionForLhs } from '@pega/cosmos-react-condition-builder';
-import { ConfigurationContent, dataPages, demoDateFunctions, demoFields } from '../ObjectSelect/ObjectSelect.mocks';
-import { lifeCycleEmptyData, lifeCycleEmptyPlanViewData, lifeCyclePlanViewData, lifeCycleWorkFlowData, planViewNodeLibrary, workFlowNodeLibrary } from './LifeCycle.mocks';
-import { addStepCallback, deleteStepCallback, addTaskCallback, deleteTaskCallback, addStageCallback, deleteStageCallback, updateStageCallback, updateStepCallback, updateTaskCallback } from './utils';
-export default {
-    title: 'Build/LifeCycle',
-    component: LifeCycle,
-    argTypes: {
-        readOnly: {
-            control: { type: 'boolean' }
-        }
-    },
-    args: {
-        readOnly: false
-    }
-};
-export const PlanView = (args) => {
-    const workFlowState = {
-        activeElementId: '',
-        data: lifeCyclePlanViewData
-    };
-    const [planViewData, setPlanViewData] = useState(workFlowState);
-    const addStep = (stepData, libItem) => {
-        const newStep = {
-            id: libItem.id,
-            label: libItem.primary,
-            visual: {
-                color: libItem.type.color,
-                icon: libItem.type.icon
-            },
-            error: '',
-            status: { label: '' }
-        };
-        const updatedTask = {
-            ...stepData.task,
-            steps: [...stepData.task.steps, newStep]
-        };
-        const updatedData = { ...stepData, task: updatedTask };
-        const changedData = addStepCallback(updatedData, planViewData);
-        setPlanViewData(changedData.dataClone);
-    };
-    const deleteStep = (stepData) => {
-        const changedData = deleteStepCallback(stepData, planViewData);
-        setPlanViewData(changedData);
-    };
-    const addTask = (taskData) => {
-        const changedData = addTaskCallback(taskData, planViewData);
-        setPlanViewData(changedData.dataClone);
-    };
-    const deleteTask = (taskData) => {
-        const changedData = deleteTaskCallback(taskData, planViewData);
-        setPlanViewData(changedData);
-    };
-    const onAddStage = () => {
-        const changedData = addStageCallback(planViewData, 'stages');
-        setPlanViewData(changedData.dataClone);
-    };
-    const onAddAlternateStage = () => {
-        const changedData = addStageCallback(planViewData, 'alternateStages');
-        setPlanViewData(changedData.dataClone);
-    };
-    const onDeleteStage = param => {
-        const changedData = deleteStageCallback(param, planViewData);
-        if (changedData === 'firstStage') {
-            alert("you can't delete the create stage");
-        }
-        else {
-            setPlanViewData(changedData);
-        }
-    };
-    useEffect(() => {
-        if (planViewData.activeElementId) {
-            const elementId = document.getElementById(`${planViewData.activeElementId}`);
-            if (elementId) {
-                elementId.focus();
-            }
-        }
-    });
-    const stages = planViewData.data.stages;
-    const alternateStages = planViewData.data.alternateStages;
-    const categories = planViewData.data.categories;
-    const channelActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete channel',
-                id: 'delete5',
-                icon: 'trash',
-                onClick: deleteStep
-            }
-        ], [args.readOnly]);
-    const dataSourceActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete data source',
-                id: 'delete6',
-                icon: 'trash',
-                onClick: deleteStep
-            }
-        ], [args.readOnly]);
-    const personaActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete persona',
-                id: 'delete2',
-                icon: 'trash',
-                onClick: deleteTask
-            }
-        ], [args.readOnly]);
-    const dataActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete data',
-                id: 'delete4',
-                icon: 'trash',
-                onClick: deleteTask
-            }
-        ], [args.readOnly]);
-    const stageActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage },
-            { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-        ], [args.readOnly]);
-    const alternateStageActions = useMemo(() => args.readOnly
-        ? []
-        : [{ text: 'Delete Stage', id: 'delete11', icon: 'trash', onClick: onDeleteStage }], [args.readOnly]);
-    return (<LifeCycle items={stages} alternateItems={alternateStages} categories={categories} task={[
-            {
-                actions: personaActions,
-                addStepTitle: 'channels',
-                addTask: {
-                    title: 'Persona',
-                    showOnce: false,
-                    onAddTask: addTask
-                },
-                onAddStep: addStep,
-                nodeLibrary: planViewNodeLibrary
-            },
-            {
-                actions: dataActions,
-                addStepTitle: 'Data and Systems',
-                addTask: {
-                    title: 'Data',
-                    showOnce: false,
-                    onAddTask: addTask
-                },
-                onAddStep: addStep,
-                nodeLibrary: planViewNodeLibrary
-            }
-        ]} step={[
-            {
-                actions: channelActions
-            },
-            {
-                actions: dataSourceActions
-            }
-        ]} stage={{
-            actions: stageActions
-        }} alternateStage={{
-            actions: alternateStageActions
-        }} onAddStage={onAddStage} onAddAlternateStage={onAddAlternateStage} readOnly={args.readOnly}/>);
-};
-export const EmptyPlanView = (args) => {
-    const emptyPlanView = {
-        activeElementId: '',
-        data: lifeCycleEmptyPlanViewData
-    };
-    const [emptyplanViewData, setPlanViewData] = useState(emptyPlanView);
-    const addStep = (stepData, libItem) => {
-        const newStep = {
-            id: libItem.id,
-            label: libItem.primary,
-            visual: {
-                color: libItem.type.color,
-                icon: libItem.type.icon
-            },
-            error: '',
-            status: { label: '' }
-        };
-        const updatedTask = {
-            ...stepData.task,
-            steps: [...stepData.task.steps, newStep]
-        };
-        const updatedData = { ...stepData, task: updatedTask };
-        const changedData = addStepCallback(updatedData, emptyplanViewData);
-        setPlanViewData(changedData.dataClone);
-    };
-    const deleteStep = (stepData) => {
-        const changedData = deleteStepCallback(stepData, emptyplanViewData);
-        setPlanViewData(changedData);
-    };
-    const addTask = (taskData) => {
-        const changedData = addTaskCallback(taskData, emptyplanViewData);
-        setPlanViewData(changedData.dataClone);
-    };
-    const deleteTask = (taskData) => {
-        const changedData = deleteTaskCallback(taskData, emptyplanViewData);
-        setPlanViewData(changedData);
-    };
-    const onAddStage = () => {
-        const changedData = addStageCallback(emptyplanViewData, 'stages');
-        setPlanViewData(changedData.dataClone);
-    };
-    const onAddAlternateStage = () => {
-        const changedData = addStageCallback(emptyplanViewData, 'alternateStages');
-        setPlanViewData(changedData.dataClone);
-    };
-    const onDeleteStage = param => {
-        const changedData = deleteStageCallback(param, emptyplanViewData);
-        if (changedData === 'firstStage') {
-            alert("you can't delete the create stage");
-        }
-        else {
-            setPlanViewData(changedData);
-        }
-    };
-    useEffect(() => {
-        if (emptyplanViewData.activeElementId) {
-            const elementId = document.getElementById(`${emptyplanViewData.activeElementId}`);
-            if (elementId) {
-                elementId.focus();
-            }
-        }
-    });
-    const stages = emptyplanViewData.data.stages;
-    const alternateStages = emptyplanViewData.data.alternateStages;
-    const categories = emptyplanViewData.data.categories;
-    const channelActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete channel',
-                id: 'delete5',
-                icon: 'trash',
-                onClick: deleteStep
-            }
-        ], [args.readOnly]);
-    const dataSourceActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete data source',
-                id: 'delete6',
-                icon: 'trash',
-                onClick: deleteStep
-            }
-        ], [args.readOnly]);
-    const personaActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete persona',
-                id: 'delete2',
-                icon: 'trash',
-                onClick: deleteTask
-            }
-        ], [args.readOnly]);
-    const dataActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            {
-                text: 'Delete data',
-                id: 'delete4',
-                icon: 'trash',
-                onClick: deleteTask
-            }
-        ], [args.readOnly]);
-    const stageActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage },
-            { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-        ], [args.readOnly]);
-    const alternateStageActions = useMemo(() => args.readOnly
-        ? []
-        : [{ text: 'Delete Stage', id: 'delete11', icon: 'trash', onClick: onDeleteStage }], [args.readOnly]);
-    return (<LifeCycle items={stages} alternateItems={alternateStages} categories={categories} task={[
-            {
-                actions: personaActions,
-                addStepTitle: 'channels',
-                addTask: {
-                    title: 'Persona',
-                    showOnce: false,
-                    onAddTask: addTask
-                },
-                onAddStep: addStep,
-                nodeLibrary: planViewNodeLibrary
-            },
-            {
-                actions: dataActions,
-                addStepTitle: 'Data and Systems',
-                addTask: {
-                    title: 'Data',
-                    showOnce: false,
-                    onAddTask: addTask
-                },
-                onAddStep: addStep,
-                nodeLibrary: workFlowNodeLibrary
-            }
-        ]} step={[
-            {
-                actions: channelActions
-            },
-            {
-                actions: dataSourceActions
-            }
-        ]} stage={{
-            actions: stageActions
-        }} alternateStage={{
-            actions: alternateStageActions
-        }} onAddStage={onAddStage} onAddAlternateStage={onAddAlternateStage} readOnly={args.readOnly}/>);
-};
-export const WorkFlowView = (args) => {
-    const workFlowState = {
-        activeElementId: '',
-        data: lifeCycleWorkFlowData
-    };
-    const [workFlowData, setWorkFlowData] = useState(workFlowState);
-    const [activeFieldItem, setActiveFieldItem] = useState();
-    const [open, setOpen] = useState(false);
-    const [inputError, setInputError] = useState(false);
-    const [inputValue, setInputValue] = useState();
-    const [selectedOptionValue, setSelectedOptionValue] = useState({ id: 0, value: 'Choose' });
-    const selectOptions = [
-        { id: 0, value: 'Choose' },
-        { id: 1, value: 'Me' },
-        { id: 2, value: 'Current User' },
-        { id: 3, value: 'Work Queue' }
-    ];
-    useEffect(() => {
-        setInputValue(activeFieldItem?.value);
-    }, [activeFieldItem]);
-    const addProcessStep = (stepData, libItem) => {
-        const newStep = {
-            id: libItem.id,
-            label: libItem.primary,
-            visual: {
-                color: libItem.type.color,
-                icon: libItem.type.icon
-            },
-            error: '',
-            status: { label: '' }
-        };
-        const updatedTask = {
-            ...stepData.task,
-            steps: [...stepData.task.steps, newStep]
-        };
-        const updatedData = { ...stepData, task: updatedTask };
-        const changedData = addStepCallback(updatedData, workFlowData);
-        setActiveFieldItem({ ...changedData.newStepData, type: 'Step' });
-        setWorkFlowData(changedData.dataClone);
-        setInputError(false);
-        setOpen(true);
-    };
-    const deleteProcessStep = (stepData) => {
-        const changedData = deleteStepCallback(stepData, workFlowData);
-        if (stepData?.step?.id === activeFieldItem?.id) {
-            setActiveFieldItem(undefined);
-            setOpen(false);
-        }
-        setWorkFlowData(changedData);
-    };
-    const addProcess = (taskData) => {
-        const changedData = addTaskCallback(taskData, workFlowData);
-        setActiveFieldItem({ ...changedData.newTaskData, type: 'Task' });
-        setWorkFlowData(changedData.dataClone);
-        setInputError(false);
-        setOpen(true);
-    };
-    const addParallelProcess = (taskData) => {
-        const changedData = addTaskCallback(taskData, workFlowData, true);
-        setActiveFieldItem({ ...changedData.newTaskData, type: 'Task' });
-        setWorkFlowData(changedData.dataClone);
-        setOpen(true);
-    };
-    const deleteProcess = (taskData) => {
-        const changedData = deleteTaskCallback(taskData, workFlowData);
-        if (taskData?.task?.id === activeFieldItem?.id) {
-            setActiveFieldItem(undefined);
-            setOpen(false);
-        }
-        setWorkFlowData(changedData);
-    };
-    const onAddStage = () => {
-        const changedData = addStageCallback(workFlowData, 'stages');
-        setActiveFieldItem({ ...changedData.newStageData, type: 'Stage' });
-        setWorkFlowData(changedData.dataClone);
-        setInputError(false);
-        setOpen(true);
-    };
-    const onAddAlternateStage = () => {
-        const changedData = addStageCallback(workFlowData, 'alternateStages');
-        setActiveFieldItem({ ...changedData.newStageData, type: 'Alternate Stage' });
-        setWorkFlowData(changedData.dataClone);
-        setInputError(false);
-        setOpen(true);
-    };
-    const onDeleteStage = (stageData) => {
-        const changedData = deleteStageCallback(stageData, workFlowData);
-        if (changedData === 'firstStage') {
-            alert("you can't delete the create stage");
-        }
-        else {
-            if (stageData?.stage?.id === activeFieldItem?.id) {
-                setActiveFieldItem(undefined);
-                setOpen(false);
-            }
-            setWorkFlowData(changedData);
-        }
-    };
-    const onOpenProcess = () => { };
-    const onSelectedItem = (selectedData) => {
-        setSelectedOptionValue({ id: 0, value: 'Choose' });
-        switch (selectedData.type) {
-            case 'Step':
-                setActiveFieldItem({ ...selectedData, id: selectedData?.step?.id });
-                if (selectedData.step?.error !== '') {
-                    setInputError(true);
-                    setInputValue('');
-                }
-                else {
-                    setInputError(false);
-                }
-                break;
-            case 'Task':
-                setActiveFieldItem({ ...selectedData, id: selectedData?.task?.id });
-                if (selectedData.task?.error !== '') {
-                    setInputError(true);
-                    setInputValue('');
-                }
-                else {
-                    setInputError(false);
-                }
-                break;
-            case 'Stage':
-                setActiveFieldItem({ ...selectedData, id: selectedData?.stage?.id });
-                if (selectedData.stage?.error !== '') {
-                    setInputError(true);
-                    setInputValue('');
-                }
-                else {
-                    setInputError(false);
-                }
-                break;
-            default:
-                setActiveFieldItem(undefined);
-        }
-        setOpen(true);
-    };
-    const onSelectedUpdateData = () => {
-        let changedData;
-        const cloneData = { ...activeFieldItem };
-        let errorMessage;
-        if (inputValue === '') {
-            errorMessage = 'Name cannot be empty';
-            if (activeFieldItem?.type === 'Stage' && cloneData.stage) {
-                cloneData.stage.error = errorMessage;
-                cloneData.stage.label = inputValue;
-                changedData = updateStageCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            else if (activeFieldItem?.type === 'Step' && cloneData.step) {
-                cloneData.step.error = errorMessage;
-                changedData = updateStepCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            else {
-                if (cloneData.task) {
-                    cloneData.task.error = errorMessage;
-                    cloneData.task.label = inputValue;
-                }
-                changedData = updateTaskCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            setWorkFlowData(changedData);
-        }
-        else {
-            errorMessage = '';
-            if ((activeFieldItem?.type === 'Stage' || activeFieldItem?.type === 'Alternate Stage') &&
-                cloneData.stage) {
-                cloneData.stage.error = errorMessage;
-                cloneData.stage.label = `${inputValue}`;
-                changedData = updateStageCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            else if (activeFieldItem?.type === 'Step' && cloneData.step) {
-                cloneData.step.error = errorMessage;
-                changedData = updateStepCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            else {
-                if (cloneData.task) {
-                    cloneData.task.error = errorMessage;
-                    cloneData.task.label = `${inputValue}`;
-                }
-                changedData = updateTaskCallback(cloneData, workFlowData);
-                setActiveFieldItem(cloneData);
-            }
-            setWorkFlowData(changedData);
-        }
-    };
-    const WorkbenchContent = memo(() => {
-        const onInputBlur = (e) => {
-            if (e.target.value === '') {
-                setInputError(true);
-                setActiveFieldItem({ ...activeFieldItem, value: e.target.value });
-            }
-            else {
-                setInputError(false);
-                setActiveFieldItem({ ...activeFieldItem, value: e.target.value });
-            }
-        };
-        const onSelectChange = (e) => {
-            setSelectedOptionValue({ id: e.target.selectedIndex, value: e.target.value });
-        };
-        const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
-            const setRhsTypes = new Set();
-            if (useLiteralRHSType)
-                setRhsTypes.add('LITERAL');
-            if (useFieldRHSType)
-                setRhsTypes.add('FIELD');
-            if (dateFunctions)
-                setRhsTypes.add('DATE_FUNCTION');
-            if (useRelativeDatesType)
-                setRhsTypes.add('RELATIVE_DATE');
-            return setRhsTypes;
-        };
-        const validRHSTypes = convertRhsTypes(true, true, true, demoDateFunctions);
-        const [condition, setCondition] = useState(() => getInitConditionForLhs({ field: 'details.age' }, demoFields, validRHSTypes, undefined, demoDateFunctions));
-        const [value, setValue] = useState();
-        const [dataPagesDelayed, setDataPagesDelayed] = useState([]);
-        useEffect(() => {
-            const timeout = setTimeout(() => setDataPagesDelayed(dataPages), 2000);
-            return () => clearTimeout(timeout);
-        }, []);
-        return (<>
-        <Input type='text' defaultValue={inputValue} label={`${activeFieldItem?.type} name`} labelHidden={false} info={inputError ? 'Cannot be blank' : ''} placeholder='' status={inputError ? 'error' : undefined} required readOnly={args.readOnly} onBlur={onInputBlur}/>
-        <Select label='Route to' labelHidden={false} value={selectedOptionValue.value} onChange={onSelectChange} readOnly={args.readOnly}>
-          {selectOptions.map(_eachOption => {
-                return <Option key={_eachOption.id}>{_eachOption.value}</Option>;
-            })}
-        </Select>
-        <ObjectSelect label='Validation for entering step' createConfiguration={{ href: 'https://www.pega.com' }} loading={dataPagesDelayed.length === 0} placeholder='Select...' onChange={id => {
-                const data = menuHelpers.getItem(dataPages, id);
-                if (data) {
-                    setValue({
-                        id: data.id,
-                        primary: data.primary,
-                        meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
-                    });
-                }
-                else
-                    setValue(undefined);
-            }} items={dataPagesDelayed} configuration={{
-                label: 'Edit Configuration',
-                heading: 'Map Parameters',
-                onSubmit: () => null,
-                onClose: () => null,
-                children: (<ConfigurationContent {...args} popoverContent='simple' condition={condition} setCondition={setCondition} validRHSTypes={validRHSTypes}/>)
-            }} value={value}/>
-      </>);
-    });
-    useEffect(() => {
-        if (workFlowData.activeElementId) {
-            const elementId = document.getElementById(`${workFlowData.activeElementId}`);
-            if (elementId) {
-                elementId.focus();
-            }
-        }
-    });
-    const stages = workFlowData.data.stages;
-    const alternateStages = workFlowData.data.alternateStages;
-    const categories = lifeCycleWorkFlowData.categories;
-    const stepActions = useMemo(() => {
-        return args.readOnly
-            ? []
-            : [
-                {
-                    text: 'Delete',
-                    id: 'delete10',
-                    icon: 'trash',
-                    onClick: deleteProcessStep
-                }
-            ];
-    }, [args.readOnly]);
-    const taskActions = useMemo(() => {
-        return args.readOnly
-            ? [
-                {
-                    text: 'Open Process',
-                    id: 'layers2',
-                    icon: 'layers',
-                    onClick: onOpenProcess
-                }
-            ]
-            : [
-                {
-                    text: 'Delete Process',
-                    id: 'delete9',
-                    icon: 'trash',
-                    onClick: deleteProcess
-                },
-                {
-                    text: 'Open Process',
-                    id: 'layers2',
-                    icon: 'layers',
-                    onClick: onOpenProcess
-                }
-            ];
-    }, [args.readOnly]);
-    const StageActions = useMemo(() => {
-        return args.readOnly
-            ? {
-                start: [],
-                default: [],
-                'default-wait': [],
-                resolution: [],
-                alternate: [],
-                'alternate-wait': []
-            }
-            : {
-                start: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-                    { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage }
-                ],
-                default: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-                    { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                'default-wait': [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                resolution: [],
-                alternate: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                'alternate-wait': [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ]
-            };
-    }, [args.readOnly]);
-    const alternateStageActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            { text: 'Add Process', id: 'add1', onClick: addProcess },
-            { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-            { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-        ], [args.readOnly]);
-    return (<Workbench initiallyVisiblePanelId={undefined} configurationPanel={{
-            open,
-            content: <WorkbenchContent />,
-            header: (activeFieldItem?.value || activeFieldItem?.type),
-            onDismiss: () => {
-                onSelectedUpdateData();
-                setOpen(false);
-                setInputError(false);
-                setActiveFieldItem(undefined);
-            }
-        }}>
-      <LifeCycle items={stages} alternateItems={alternateStages} categories={categories} task={[
-            {
-                actions: taskActions,
-                addStepTitle: 'step',
-                addTask: {
-                    title: 'Process',
-                    showOnce: true,
-                    onAddTask: addProcess
-                },
-                onClick: onSelectedItem,
-                onAddStep: addProcessStep,
-                nodeLibrary: workFlowNodeLibrary
-            }
-        ]} step={[
-            {
-                actions: stepActions,
-                onClick: onSelectedItem
-            }
-        ]} stage={{
-            actions: StageActions,
-            onClick: onSelectedItem
-        }} alternateStage={{
-            actions: alternateStageActions,
-            onClick: onSelectedItem
-        }} onAddStage={onAddStage} onAddAlternateStage={onAddAlternateStage} selectedItemId={activeFieldItem?.id} readOnly={args.readOnly}/>
-    </Workbench>);
-};
-export const EmptyWorkFlowView = (args) => {
-    const emptyState = {
-        activeElementId: '',
-        data: lifeCycleEmptyData
-    };
-    const [emptyStateData, setEmptyStateData] = useState(emptyState);
-    const addProcessStep = (stepData, libItem) => {
-        const newStep = {
-            id: libItem.id,
-            label: libItem.primary,
-            visual: {
-                color: libItem.type.color,
-                icon: libItem.type.icon
-            },
-            error: '',
-            status: { label: '' }
-        };
-        const updatedTask = {
-            ...stepData.task,
-            steps: [...stepData.task.steps, newStep]
-        };
-        const updatedData = { ...stepData, task: updatedTask };
-        const changedData = addStepCallback(updatedData, emptyStateData);
-        setEmptyStateData(changedData.dataClone);
-    };
-    const deleteProcessStep = (stepData) => {
-        const changedData = deleteStepCallback(stepData, emptyStateData);
-        setEmptyStateData(changedData);
-    };
-    const addProcess = (taskData) => {
-        const changedData = addTaskCallback(taskData, emptyStateData);
-        setEmptyStateData(changedData.dataClone);
-    };
-    const addParallelProcess = (taskData) => {
-        const changedData = addTaskCallback(taskData, emptyStateData, true);
-        setEmptyStateData(changedData.dataClone);
-    };
-    const deleteProcess = (taskData) => {
-        const changedData = deleteTaskCallback(taskData, emptyStateData);
-        setEmptyStateData(changedData);
-    };
-    const onAddStage = () => {
-        const changedData = addStageCallback(emptyStateData, 'stages');
-        setEmptyStateData(changedData.dataClone);
-    };
-    const onAddAlternateStage = () => {
-        const changedData = addStageCallback(emptyStateData, 'alternateStages');
-        setEmptyStateData(changedData.dataClone);
-    };
-    const onDeleteStage = param => {
-        const changedData = deleteStageCallback(param, emptyStateData);
-        if (changedData === 'firstStage') {
-            alert("you can't delete the create stage");
-        }
-        else {
-            setEmptyStateData(changedData);
-        }
-    };
-    const onOpenProcess = () => { };
-    useEffect(() => {
-        if (emptyStateData.activeElementId) {
-            const elementId = document.getElementById(`${emptyStateData.activeElementId}`);
-            if (elementId) {
-                elementId.focus();
-            }
-        }
-    });
-    const stages = emptyStateData.data.stages;
-    const alternateStages = emptyStateData.data.alternateStages;
-    const categories = lifeCycleEmptyData.categories;
-    const stepActions = useMemo(() => {
-        return args.readOnly
-            ? []
-            : [
-                {
-                    text: 'Delete step',
-                    id: 'delete10',
-                    icon: 'trash',
-                    onClick: deleteProcessStep
-                }
-            ];
-    }, [args.readOnly]);
-    const taskActions = useMemo(() => {
-        return args.readOnly
-            ? [
-                {
-                    text: 'Open Process',
-                    id: 'layers2',
-                    icon: 'layers',
-                    onClick: onOpenProcess
-                }
-            ]
-            : [
-                {
-                    text: 'Delete Process',
-                    id: 'delete9',
-                    icon: 'trash',
-                    onClick: deleteProcess
-                },
-                {
-                    text: 'Open Process',
-                    id: 'layers2',
-                    icon: 'layers',
-                    onClick: onOpenProcess
-                }
-            ];
-    }, [args.readOnly]);
-    const StageActions = useMemo(() => {
-        return args.readOnly
-            ? {
-                start: [],
-                default: [],
-                'default-wait': [],
-                resolution: [],
-                alternate: [],
-                'alternate-wait': []
-            }
-            : {
-                start: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-                    { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage }
-                ],
-                default: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-                    { text: 'Add Alternate Stage', id: 'add2', onClick: onAddAlternateStage },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                'default-wait': [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                resolution: [],
-                alternate: [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ],
-                'alternate-wait': [
-                    { text: 'Add Process', id: 'add1', onClick: addProcess },
-                    { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-                ]
-            };
-    }, [args.readOnly]);
-    const alternateStageActions = useMemo(() => args.readOnly
-        ? []
-        : [
-            { text: 'Add Process', id: 'add1', onClick: addProcess },
-            { text: 'Add Parallel Process', id: 'add3', onClick: addParallelProcess },
-            { text: 'Delete Stage', id: 'delete11', onClick: onDeleteStage }
-        ], [args.readOnly]);
-    return (<LifeCycle items={stages} alternateItems={alternateStages} categories={categories} task={[
-            {
-                actions: taskActions,
-                addStepTitle: 'step',
-                addTask: {
-                    title: 'Process',
-                    showOnce: true,
-                    onAddTask: addProcess
-                },
-                onAddStep: addProcessStep,
-                nodeLibrary: workFlowNodeLibrary
-            }
-        ]} step={[
-            {
-                actions: stepActions
-            }
-        ]} stage={{
-            actions: StageActions
-        }} alternateStage={{
-            actions: alternateStageActions
-        }} onAddStage={onAddStage} onAddAlternateStage={onAddAlternateStage} readOnly={args.readOnly}/>);
-};
-//# sourceMappingURL=LifeCycle.stories.jsx.map