@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/build/AppShell/AppShell.stories.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Text, treeHelpers, TabbedPage as TabbedPageComp } from '@pega/cosmos-react-core';
+import { AppShell } from '@pega/cosmos-react-build';
+import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList } from './AppShell.mocks';
+export default {
+    title: 'Build/AppShell',
+    component: AppShell,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const getPath = (args) => {
+    const { showBreadcrumbs, pageContent: { data: { pageTitle, breadcrumbsPath } } } = args;
+    if (showBreadcrumbs) {
+        const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;
+        return path
+            ? path.split(',').map((crumb, i) => {
+                // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string
+                return {
+                    id: crumb,
+                    primary: crumb,
+                    href: i < 3 ? `#${crumb.replace(/\s/g, '-')}` : undefined
+                };
+            })
+            : [];
+    }
+};
+const TabbedPage = (args) => {
+    const [currentTabId, setCurrentTabId] = useState('1');
+    const [content, setContent] = useState('Tab 1 content');
+    const { pageContent, showBreadcrumbs } = args;
+    return (_jsx(TabbedPageComp, { a: _jsx(Text, { variant: 'h1', as: 'div', children: content }, void 0), path: getPath({ showBreadcrumbs, pageContent }), title: pageContent.data.pageTitle, tabs: {
+            tabs: pageContent.data.tabs.map((name, i) => {
+                const id = `${i + 1}`;
+                return { id, name };
+            }),
+            type: 'horizontal',
+            currentTabId,
+            onTabClick: id => {
+                setCurrentTabId(id);
+                setContent(`Tab ${id} content`);
+            }
+        } }, void 0));
+};
+export const AppShellDemo = (args) => {
+    const [currentNodeId, setCurrentNodeId] = useState('60');
+    const [allNodes, setAllNodes] = useState(treeHelpers.expandTo(appExplorerMenuList, currentNodeId));
+    const [currentDrawer, setCurrentDrawer] = useState('explorer');
+    const [currentUtil, setCurrentUtil] = useState('explorer');
+    const [pageContent, setPageContent] = useState(contents[0]);
+    const onNodeClick = (nodeId, activeDrawerId) => {
+        const clickedNode = treeHelpers.getNode(allNodes, nodeId);
+        if (!clickedNode?.nodes) {
+            setCurrentUtil(activeDrawerId);
+            setCurrentNodeId(nodeId);
+            setPageContent(contents.find(content => content.id === clickedNode?.id));
+            return;
+        }
+        setAllNodes(tree => treeHelpers.mapNode(tree, nodeId, node => {
+            return {
+                ...node,
+                expanded: !node.expanded
+            };
+        }));
+    };
+    const appHeader = {
+        brand: {
+            name: 'AppStudioX'
+        },
+        utils: {
+            avatar: { name: 'Alan' },
+            search: {
+                placeholder: 'Search anything, anywhere…'
+            },
+            branchName: 'test',
+            actions: [
+                {
+                    primary: 'Switch branch',
+                    id: 'switchbranch',
+                    onClick: () => action('Clicked switchbranch')()
+                },
+                {
+                    primary: 'Create branch',
+                    id: 'createbranch',
+                    onClick: () => action('Clicked createbranch')()
+                }
+            ],
+            onPreviewClick: args.showPreview ? args.onPreviewClick : undefined
+        },
+        links: [
+            {
+                id: '1',
+                name: 'Applications',
+                onClick: () => action('Clicked Applications')()
+            },
+            {
+                id: '2',
+                name: 'Shared resources',
+                onClick: () => action('Clicked Shared resources')()
+            },
+            {
+                id: '3',
+                name: 'Teams',
+                onClick: () => action('Clicked Teams')()
+            },
+            {
+                id: '4',
+                name: 'AI & Analytics',
+                onClick: () => action('Clicked AI & Analytics')()
+            },
+            {
+                id: '5',
+                name: 'Deploy',
+                onClick: () => action('Clicked Deploy')()
+            }
+        ]
+    };
+    return (_jsx(_Fragment, { children: _jsx(AppShell, { main: _jsx(TabbedPage, { ...{ ...args, pageContent } }, void 0), appHeader: appHeader, hideNav: args.hideNavigation, appInfo: {
+                text: 'U+ Desk',
+                visual: {
+                    icon: {
+                        name: 'phone-in-solid',
+                        bgColor: '#0ac7c8'
+                    }
+                }
+            }, navigation: {
+                nodes: allNodes,
+                currentNodeId,
+                onNodeClick: id => {
+                    onNodeClick(id, currentDrawer);
+                }
+            }, utils: {
+                onItemClick: id => {
+                    setCurrentDrawer(id);
+                    if (id === 'explorer') {
+                        const appExploreTree = currentNodeId
+                            ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)
+                            : appExplorerMenuList;
+                        setAllNodes(appExploreTree);
+                    }
+                    if (id === 'branches') {
+                        const branchTree = currentNodeId
+                            ? treeHelpers.expandTo(branchesMenuList, currentNodeId)
+                            : branchesMenuList;
+                        setAllNodes(branchTree);
+                    }
+                    if (id === 'records') {
+                        const recordTree = currentNodeId
+                            ? treeHelpers.expandTo(recordMenuList, currentNodeId)
+                            : recordMenuList;
+                        setAllNodes(recordTree);
+                    }
+                },
+                currentItemId: currentUtil,
+                items: [
+                    {
+                        label: 'App Explorer',
+                        id: 'explorer'
+                    },
+                    {
+                        label: 'Branches',
+                        id: 'branches'
+                    },
+                    {
+                        label: 'Records',
+                        id: 'records'
+                    }
+                ],
+                drawer: {
+                    onBeforeClose: () => {
+                        setCurrentDrawer('');
+                        setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);
+                    }
+                },
+                devMode: true
+            } }, void 0) }, void 0));
+};
+AppShellDemo.args = {
+    hideNavigation: false,
+    showBreadcrumbs: true,
+    showPreview: true,
+    onPreviewClick: action('Clicked preview button')
+};
+AppShellDemo.argTypes = {
+    hideNavigation: { control: { type: 'boolean' } },
+    showBreadcrumbs: { control: { type: 'boolean' } },
+    showPreview: { control: { type: 'boolean' } },
+    onPreviewClick: { table: { disable: true } }
+};
+//# sourceMappingURL=AppShell.stories.js.map

package/lib/build/AppShell/AppShell.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n    treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n  );\n  const [currentDrawer, setCurrentDrawer] = useState('explorer');\n  const [currentUtil, setCurrentUtil] = useState('explorer');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

package/lib/build/FlowModeller/AddNodeUtils.mocks.js

@@ -158,7 +158,7 @@ const graphData1 = {
 const onGetNewNode = metaData => {
     return {
         ...nodeDefaults,
-        id: `ph-n-${metaData.refId.join('_')}`
+        id: `ph-n-${metaData.refId.join('_')}` // ${createUID()}`
     };
 };
 const onGetNewConnector = (fromNodeId, toNodeId, metaData) => {

package/lib/build/FlowModeller/AddNodeUtils.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodeUtils.mocks.js","sourceRoot":"","sources":["../../../src/build/FlowModeller/AddNodeUtils.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps,\n  GraphData\n} from '@pega/cosmos-react-build';\n\nconst nodeDefaults = {\n  position: { x: 0, y: 0 },\n  dimensions: { width: 20, height: 20 }\n};\n\nconst connectorDefaults = {\n  points: []\n};\n\nconst graphData1: GraphData<RendererNodeProps, RendererConnectorProps> = {\n  nodes: [\n    {\n      ...nodeDefaults,\n      id: '100'\n    },\n    {\n      ...nodeDefaults,\n      id: '101'\n    },\n    {\n      ...nodeDefaults,\n      id: '102'\n    },\n    {\n      ...nodeDefaults,\n      id: '103'\n    },\n    {\n      ...nodeDefaults,\n      id: '104'\n    },\n    {\n      ...nodeDefaults,\n      id: '105'\n    },\n    {\n      ...nodeDefaults,\n      id: '106'\n    },\n    {\n      ...nodeDefaults,\n      id: '107'\n    },\n    {\n      ...nodeDefaults,\n      id: '108'\n    },\n    {\n      ...nodeDefaults,\n      id: '109'\n    },\n    {\n      ...nodeDefaults,\n      id: '110'\n    },\n    {\n      ...nodeDefaults,\n      id: '111'\n    }\n  ],\n  connectors: [\n    {\n      ...connectorDefaults,\n      id: '100-101',\n      fromNodeId: '100',\n      toNodeId: '101'\n    },\n    {\n      ...connectorDefaults,\n      id: '101-102',\n      fromNodeId: '101',\n      toNodeId: '102'\n    },\n    {\n      ...connectorDefaults,\n      id: '101-103',\n      fromNodeId: '101',\n      toNodeId: '103'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-104',\n      fromNodeId: '102',\n      toNodeId: '104'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-105',\n      fromNodeId: '102',\n      toNodeId: '105'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-106',\n      fromNodeId: '102',\n      toNodeId: '106'\n    },\n    {\n      ...connectorDefaults,\n      id: '103-107',\n      fromNodeId: '103',\n      toNodeId: '107'\n    },\n    {\n      ...connectorDefaults,\n      id: '103-108',\n      fromNodeId: '103',\n      toNodeId: '108'\n    },\n    {\n      ...connectorDefaults,\n      id: '104-109',\n      fromNodeId: '104',\n      toNodeId: '109'\n    },\n    {\n      ...connectorDefaults,\n      id: '104-110',\n      fromNodeId: '104',\n      toNodeId: '110'\n    },\n    {\n      ...connectorDefaults,\n      id: '105-111',\n      fromNodeId: '105',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '106-111',\n      fromNodeId: '106',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '107-111',\n      fromNodeId: '107',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '108-111',\n      fromNodeId: '108',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '109-111',\n      fromNodeId: '109',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '110-111',\n      fromNodeId: '110',\n      toNodeId: '111'\n    }\n  ]\n};\n\nconst onGetNewNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n  return {\n    ...nodeDefaults,\n    id: `ph-n-${(metaData.refId as string[]).join('_')}` // ${createUID()}`\n  };\n};\n\nconst onGetNewConnector: (\n  fromNodeId: string,\n  toNodeId: string,\n  metaData: AddNodeHandlerParams\n) => RendererConnectorProps = (fromNodeId, toNodeId, metaData) => {\n  return {\n    ...connectorDefaults,\n    id: `ph-c-${(metaData.refId as string[]).join('_')}`, // ${createUID()}`\n    fromNodeId,\n    toNodeId\n  };\n};\n\nconst result = {\n  nodes: [\n    { ...nodeDefaults, id: '100' },\n    { ...nodeDefaults, id: '101' },\n    { ...nodeDefaults, id: '102' },\n    { ...nodeDefaults, id: '103' },\n    { ...nodeDefaults, id: '104' },\n    { ...nodeDefaults, id: '105' },\n    { ...nodeDefaults, id: '106' },\n    { ...nodeDefaults, id: '107' },\n    { ...nodeDefaults, id: '108' },\n    { ...nodeDefaults, id: '109' },\n    { ...nodeDefaults, id: '110' },\n    { ...nodeDefaults, id: '111' },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111',\n      realConnectors: ['109-111', '110-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111_105-111_106-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-107-111_108-111',\n      realConnectors: ['107-111', '108-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111', '107-111', '108-111']\n    }\n  ],\n  connectors: [\n    { points: [], id: '100-101', fromNodeId: '100', toNodeId: '101' },\n    { points: [], id: '101-102', fromNodeId: '101', toNodeId: '102' },\n    { points: [], id: '101-103', fromNodeId: '101', toNodeId: '103' },\n    { points: [], id: '102-104', fromNodeId: '102', toNodeId: '104' },\n    { points: [], id: '102-105', fromNodeId: '102', toNodeId: '105' },\n    { points: [], id: '102-106', fromNodeId: '102', toNodeId: '106' },\n    { points: [], id: '103-107', fromNodeId: '103', toNodeId: '107' },\n    { points: [], id: '103-108', fromNodeId: '103', toNodeId: '108' },\n    { points: [], id: '104-109', fromNodeId: '104', toNodeId: '109' },\n    { points: [], id: '104-110', fromNodeId: '104', toNodeId: '110' },\n    {\n      points: [],\n      id: '105-111',\n      fromNodeId: '105',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111'\n    },\n    {\n      points: [],\n      id: '106-111',\n      fromNodeId: '106',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111'\n    },\n    {\n      points: [],\n      id: '107-111',\n      fromNodeId: '107',\n      toNodeId: 'ph-n-107-111_108-111'\n    },\n    {\n      points: [],\n      id: '108-111',\n      fromNodeId: '108',\n      toNodeId: 'ph-n-107-111_108-111'\n    },\n    {\n      points: [],\n      id: '109-111',\n      fromNodeId: '109',\n      toNodeId: 'ph-n-109-111_110-111'\n    },\n    {\n      points: [],\n      id: '110-111',\n      fromNodeId: '110',\n      toNodeId: 'ph-n-109-111_110-111'\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111',\n      fromNodeId: 'ph-n-109-111_110-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111',\n      realConnectors: ['109-111', '110-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111_105-111_106-111',\n      fromNodeId: 'ph-n-109-111_110-111_105-111_106-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-107-111_108-111',\n      fromNodeId: 'ph-n-107-111_108-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['107-111', '108-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111_105-111_106-111_107-111_108-111',\n      fromNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      toNodeId: '111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111', '107-111', '108-111']\n    }\n  ]\n};\n\nconst AddNodeUtilsMocks = {\n  graphData1,\n  onGetNewNode,\n  onGetNewConnector,\n  result\n};\n\nexport default AddNodeUtilsMocks;\n"]}
+{"version":3,"file":"AddNodeUtils.mocks.js","sourceRoot":"","sources":["../../../src/build/FlowModeller/AddNodeUtils.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps,\n  GraphData\n} from '@pega/cosmos-react-build';\n\nconst nodeDefaults = {\n  position: { x: 0, y: 0 },\n  dimensions: { width: 20, height: 20 }\n};\n\nconst connectorDefaults = {\n  points: []\n};\n\nconst graphData1: GraphData<RendererNodeProps, RendererConnectorProps> = {\n  nodes: [\n    {\n      ...nodeDefaults,\n      id: '100'\n    },\n    {\n      ...nodeDefaults,\n      id: '101'\n    },\n    {\n      ...nodeDefaults,\n      id: '102'\n    },\n    {\n      ...nodeDefaults,\n      id: '103'\n    },\n    {\n      ...nodeDefaults,\n      id: '104'\n    },\n    {\n      ...nodeDefaults,\n      id: '105'\n    },\n    {\n      ...nodeDefaults,\n      id: '106'\n    },\n    {\n      ...nodeDefaults,\n      id: '107'\n    },\n    {\n      ...nodeDefaults,\n      id: '108'\n    },\n    {\n      ...nodeDefaults,\n      id: '109'\n    },\n    {\n      ...nodeDefaults,\n      id: '110'\n    },\n    {\n      ...nodeDefaults,\n      id: '111'\n    }\n  ],\n  connectors: [\n    {\n      ...connectorDefaults,\n      id: '100-101',\n      fromNodeId: '100',\n      toNodeId: '101'\n    },\n    {\n      ...connectorDefaults,\n      id: '101-102',\n      fromNodeId: '101',\n      toNodeId: '102'\n    },\n    {\n      ...connectorDefaults,\n      id: '101-103',\n      fromNodeId: '101',\n      toNodeId: '103'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-104',\n      fromNodeId: '102',\n      toNodeId: '104'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-105',\n      fromNodeId: '102',\n      toNodeId: '105'\n    },\n    {\n      ...connectorDefaults,\n      id: '102-106',\n      fromNodeId: '102',\n      toNodeId: '106'\n    },\n    {\n      ...connectorDefaults,\n      id: '103-107',\n      fromNodeId: '103',\n      toNodeId: '107'\n    },\n    {\n      ...connectorDefaults,\n      id: '103-108',\n      fromNodeId: '103',\n      toNodeId: '108'\n    },\n    {\n      ...connectorDefaults,\n      id: '104-109',\n      fromNodeId: '104',\n      toNodeId: '109'\n    },\n    {\n      ...connectorDefaults,\n      id: '104-110',\n      fromNodeId: '104',\n      toNodeId: '110'\n    },\n    {\n      ...connectorDefaults,\n      id: '105-111',\n      fromNodeId: '105',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '106-111',\n      fromNodeId: '106',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '107-111',\n      fromNodeId: '107',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '108-111',\n      fromNodeId: '108',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '109-111',\n      fromNodeId: '109',\n      toNodeId: '111'\n    },\n    {\n      ...connectorDefaults,\n      id: '110-111',\n      fromNodeId: '110',\n      toNodeId: '111'\n    }\n  ]\n};\n\nconst onGetNewNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n  return {\n    ...nodeDefaults,\n    id: `ph-n-${(metaData.refId as string[]).join('_')}` // ${createUID()}`\n  };\n};\n\nconst onGetNewConnector: (\n  fromNodeId: string,\n  toNodeId: string,\n  metaData: AddNodeHandlerParams\n) => RendererConnectorProps = (fromNodeId, toNodeId, metaData) => {\n  return {\n    ...connectorDefaults,\n    id: `ph-c-${(metaData.refId as string[]).join('_')}`, // ${createUID()}`\n    fromNodeId,\n    toNodeId\n  };\n};\n\nconst result = {\n  nodes: [\n    { ...nodeDefaults, id: '100' },\n    { ...nodeDefaults, id: '101' },\n    { ...nodeDefaults, id: '102' },\n    { ...nodeDefaults, id: '103' },\n    { ...nodeDefaults, id: '104' },\n    { ...nodeDefaults, id: '105' },\n    { ...nodeDefaults, id: '106' },\n    { ...nodeDefaults, id: '107' },\n    { ...nodeDefaults, id: '108' },\n    { ...nodeDefaults, id: '109' },\n    { ...nodeDefaults, id: '110' },\n    { ...nodeDefaults, id: '111' },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111',\n      realConnectors: ['109-111', '110-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111_105-111_106-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-107-111_108-111',\n      realConnectors: ['107-111', '108-111']\n    },\n    {\n      ...nodeDefaults,\n      id: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111', '107-111', '108-111']\n    }\n  ],\n  connectors: [\n    { points: [], id: '100-101', fromNodeId: '100', toNodeId: '101' },\n    { points: [], id: '101-102', fromNodeId: '101', toNodeId: '102' },\n    { points: [], id: '101-103', fromNodeId: '101', toNodeId: '103' },\n    { points: [], id: '102-104', fromNodeId: '102', toNodeId: '104' },\n    { points: [], id: '102-105', fromNodeId: '102', toNodeId: '105' },\n    { points: [], id: '102-106', fromNodeId: '102', toNodeId: '106' },\n    { points: [], id: '103-107', fromNodeId: '103', toNodeId: '107' },\n    { points: [], id: '103-108', fromNodeId: '103', toNodeId: '108' },\n    { points: [], id: '104-109', fromNodeId: '104', toNodeId: '109' },\n    { points: [], id: '104-110', fromNodeId: '104', toNodeId: '110' },\n    {\n      points: [],\n      id: '105-111',\n      fromNodeId: '105',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111'\n    },\n    {\n      points: [],\n      id: '106-111',\n      fromNodeId: '106',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111'\n    },\n    {\n      points: [],\n      id: '107-111',\n      fromNodeId: '107',\n      toNodeId: 'ph-n-107-111_108-111'\n    },\n    {\n      points: [],\n      id: '108-111',\n      fromNodeId: '108',\n      toNodeId: 'ph-n-107-111_108-111'\n    },\n    {\n      points: [],\n      id: '109-111',\n      fromNodeId: '109',\n      toNodeId: 'ph-n-109-111_110-111'\n    },\n    {\n      points: [],\n      id: '110-111',\n      fromNodeId: '110',\n      toNodeId: 'ph-n-109-111_110-111'\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111',\n      fromNodeId: 'ph-n-109-111_110-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111',\n      realConnectors: ['109-111', '110-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111_105-111_106-111',\n      fromNodeId: 'ph-n-109-111_110-111_105-111_106-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-107-111_108-111',\n      fromNodeId: 'ph-n-107-111_108-111',\n      toNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      realConnectors: ['107-111', '108-111']\n    },\n    {\n      points: [],\n      id: 'ph-c-109-111_110-111_105-111_106-111_107-111_108-111',\n      fromNodeId: 'ph-n-109-111_110-111_105-111_106-111_107-111_108-111',\n      toNodeId: '111',\n      realConnectors: ['109-111', '110-111', '105-111', '106-111', '107-111', '108-111']\n    }\n  ]\n};\n\nconst AddNodeUtilsMocks = {\n  graphData1,\n  onGetNewNode,\n  onGetNewConnector,\n  result\n};\n\nexport default AddNodeUtilsMocks;\n"]}

package/lib/build/FlowModeller/FlowModeller.stories.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useEffect } from 'react';
+import { action } from '@storybook/addon-actions';
+import styled, { css } from 'styled-components';
+import { ModalManagerContext, Modal, Input, Table, Text, Button, Icon, Flex } from '@pega/cosmos-react-core';
+import { FlowModeller, DirectedGraph, FlowModellerHelper } from '@pega/cosmos-react-build';
+import { nodeLibrary, nodeActions, exampleCRMNodesData, exampleCRMConnectorsData, emptyNodesData, emptyConnectorsData } from './FlowModeller.mocks';
+export default {
+    title: 'Build/FlowModeller',
+    component: FlowModeller,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const StyledWrapper = styled.div(() => {
+    return css `
+    height: 100vh;
+    overflow: auto;
+  `;
+});
+const DELETE_ACTION_ID = 'action-1';
+const DecisionTable = ({ updatedData, connectors, onDeleteRow, onAddRow, node, update }) => {
+    const [tableData, setTableData] = useState(connectors);
+    const message = 'Please delete the nodes in the connector manually and delete this connector again';
+    const { create } = useContext(ModalManagerContext);
+    const onAddCondition = () => {
+        const label = 'otherwise';
+        const updatedGraphData = FlowModellerHelper.addBranch(updatedData, node.id, label);
+        const graph = new DirectedGraph(updatedGraphData);
+        const outConnectors = graph.getOutConnectors(node.id);
+        update({
+            node,
+            connectors: outConnectors,
+            updatedData: updatedGraphData
+        });
+        onAddRow(updatedGraphData);
+    };
+    const onDeleteCondition = (connector) => {
+        const updatedGraphData = FlowModellerHelper.deleteConnector(updatedData, connector);
+        if (updatedGraphData) {
+            const updatedGraph = new DirectedGraph(updatedGraphData);
+            const updatedOutConnectors = updatedGraph.getOutConnectors(node.id);
+            update({
+                node,
+                connectors: updatedOutConnectors,
+                updatedData: updatedGraphData
+            });
+            onDeleteRow(updatedGraphData);
+        }
+        else {
+            create(() => {
+                return (_jsx(Modal, { heading: 'Confirm', children: _jsx(Text, { children: message }, void 0) }, void 0));
+            }, { center: true });
+        }
+    };
+    const columns = [
+        {
+            renderer: connector => _jsx(Input, { value: connector.label, readOnly: true }, void 0),
+            label: 'Outcome'
+        },
+        { renderer: () => _jsx(Text, { children: "No value" }, void 0), label: 'Decision output' },
+        {
+            renderer: connector => {
+                return (_jsx(_Fragment, { children: _jsx(Button, { variant: 'simple', label: 'Delete', disabled: tableData.length < 3, icon: true, onClick: () => {
+                            onDeleteCondition(connector);
+                        }, children: _jsx(Icon, { name: 'trash' }, void 0) }, void 0) }, void 0));
+            },
+            label: 'Action'
+        }
+    ];
+    useEffect(() => {
+        setTableData(connectors);
+    }, [connectors]);
+    return (_jsxs(_Fragment, { children: [_jsx(Table, { title: 'Decision outcomes', hoverHighlight: true, data: tableData, columns: columns }, void 0), _jsx(Flex, { container: { pad: [1, 0] }, children: _jsx(Button, { variant: 'simple', onClick: onAddCondition, children: "Add Condition" }, void 0) }, void 0)] }, void 0));
+};
+export const EmptyFlowChartView = () => {
+    const [graphData, setGraphData] = useState({
+        nodes: emptyNodesData,
+        connectors: emptyConnectorsData
+    });
+    const { create } = useContext(ModalManagerContext);
+    const onTableActionClick = (updatedData) => {
+        setGraphData(updatedData);
+    };
+    const LaunchPropertyModal = ({ node, connectors, updatedData }) => {
+        const { ModalContext } = useContext(ModalManagerContext);
+        const { update } = useContext(ModalContext);
+        return (_jsxs(Modal, { heading: node.label, children: [_jsx(Input, { label: 'Description', defaultValue: node.description }, void 0), connectors.length > 1 && (_jsx(DecisionTable, { updatedData: updatedData, connectors: connectors, onDeleteRow: (data) => {
+                        onTableActionClick(data);
+                    }, node: node, onAddRow: (data) => {
+                        onTableActionClick(data);
+                    }, update: update }, void 0))] }, void 0));
+    };
+    const onNodeActionClick = (params) => {
+        if (params.actionId === DELETE_ACTION_ID) {
+            const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);
+            if (modifiedGraph) {
+                setGraphData(modifiedGraph);
+            }
+            else if (!modifiedGraph) {
+                // eslint-disable-next-line no-alert
+                alert('Deletion of this node is not supported ');
+            }
+        }
+        else if (params.actionId === 'action-2') {
+            action(`ressigned ${params.nodeId}`)();
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.warn(`Unknown action ${params.actionId}`);
+        }
+    };
+    const addNode = (nodeType, metaData) => {
+        const UpdatedData = FlowModellerHelper.addNode({
+            nodeType,
+            graphData,
+            metaData
+        });
+        if (UpdatedData) {
+            const newGraphData = UpdatedData;
+            setGraphData(newGraphData);
+        }
+    };
+    const selectNode = (nodeId) => {
+        const graph = new DirectedGraph(graphData);
+        const node = graph.getNode(nodeId);
+        const outConnectors = graph.getOutConnectors(nodeId);
+        // LaunchPropertyModal(node, outConnectors, graphData);
+        create(LaunchPropertyModal, {
+            node,
+            connectors: outConnectors,
+            updatedData: graphData
+        });
+    };
+    return (_jsx(StyledWrapper, { children: _jsx(FlowModeller, { graphData: graphData, nodeLibrary: nodeLibrary, onNodeAdd: addNode, onNodeClick: selectNode, actions: nodeActions, onNodeActionClick: onNodeActionClick }, void 0) }, void 0));
+};
+export const CRMFlowChartView = () => {
+    const [graphData, setGraphData] = useState({
+        nodes: exampleCRMNodesData,
+        connectors: exampleCRMConnectorsData
+    });
+    const { create } = useContext(ModalManagerContext);
+    const onTableActionClick = (updatedData) => {
+        setGraphData(updatedData);
+    };
+    const LaunchPropertyModal = ({ node, connectors, updatedData }) => {
+        const { ModalContext } = useContext(ModalManagerContext);
+        const { update } = useContext(ModalContext);
+        return (_jsxs(Modal, { heading: node.label, children: [_jsx(Input, { label: 'Description', defaultValue: node.description }, void 0), connectors.length > 1 && (_jsx(DecisionTable, { updatedData: updatedData, connectors: connectors, onDeleteRow: (data) => {
+                        onTableActionClick(data);
+                    }, node: node, onAddRow: (data) => {
+                        onTableActionClick(data);
+                    }, update: update }, void 0))] }, void 0));
+    };
+    const onNodeActionClick = (params) => {
+        if (params.actionId === DELETE_ACTION_ID) {
+            const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);
+            if (modifiedGraph) {
+                setGraphData(modifiedGraph);
+            }
+            else if (!modifiedGraph) {
+                // eslint-disable-next-line no-alert
+                alert('Deletion of this node is not supported ');
+            }
+        }
+        else if (params.actionId === 'action-2') {
+            action(`ressigned ${params.nodeId}`)();
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.warn(`Unknown action ${params.actionId}`);
+        }
+    };
+    const addNode = (nodeType, metaData) => {
+        const UpdatedData = FlowModellerHelper.addNode({
+            nodeType,
+            graphData,
+            metaData
+        });
+        if (UpdatedData) {
+            const newGraphData = UpdatedData;
+            setGraphData(newGraphData);
+        }
+    };
+    const selectNode = (nodeId) => {
+        const graph = new DirectedGraph(graphData);
+        const node = graph.getNode(nodeId);
+        const outConnectors = graph.getOutConnectors(nodeId);
+        create(LaunchPropertyModal, {
+            node,
+            connectors: outConnectors,
+            updatedData: graphData
+        });
+    };
+    return (_jsx(StyledWrapper, { children: _jsx(FlowModeller, { graphData: graphData, nodeLibrary: nodeLibrary, onNodeAdd: addNode, onNodeClick: selectNode, actions: nodeActions, onNodeActionClick: onNodeActionClick }, void 0) }, void 0));
+};
+//# sourceMappingURL=FlowModeller.stories.js.map

package/lib/build/FlowModeller/FlowModeller.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.stories.js","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,mBAAmB,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EAEL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,YAAY,EAIZ,aAAa,EAGb,kBAAkB,EAEnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,cAAc,EACd,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpC,OAAO,GAAG,CAAA;;;GAGT,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAapC,MAAM,aAAa,GAAG,CAAC,EACrB,WAAW,EACX,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACa,EAAE,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAmB,UAAU,CAAC,CAAC;IACzE,MAAM,OAAO,GACX,mFAAmF,CAAC;IACtF,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEnD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,KAAK,GAAG,WAAW,CAAC;QAC1B,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACnF,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACtD,MAAM,CAAC;YACL,IAAI;YACJ,UAAU,EAAE,aAAa;YACzB,WAAW,EAAE,gBAAgB;SAC9B,CAAC,CAAC;QACH,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,SAAyB,EAAE,EAAE;QACtD,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,eAAe,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACpF,IAAI,gBAAgB,EAAE;YACpB,MAAM,YAAY,GAAG,IAAI,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACzD,MAAM,oBAAoB,GAAG,YAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACpE,MAAM,CAAC;gBACL,IAAI;gBACJ,UAAU,EAAE,oBAAoB;gBAChC,WAAW,EAAE,gBAAgB;aAC9B,CAAC,CAAC;YACH,WAAW,CAAC,gBAAgB,CAAC,CAAC;SAC/B;aAAM;YACL,MAAM,CACJ,GAAG,EAAE;gBACH,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YACtB,KAAC,IAAI,cAAE,OAAO,WAAQ,WAChB,CACT,CAAC;YACJ,CAAC,EACD,EAAE,MAAM,EAAE,IAAI,EAAE,CACjB,CAAC;SACH;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAkC;QAC7C;YACE,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,KAAC,KAAK,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,QAAQ,iBAAG;YACjE,KAAK,EAAE,SAAS;SACjB;QACD,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAC,IAAI,mCAAgB,EAAE,KAAK,EAAE,iBAAiB,EAAE;QACnE;YACE,QAAQ,EAAE,SAAS,CAAC,EAAE;gBACpB,OAAO,CACL,4BACE,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,EAC9B,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,SAAS,CAAC,CAAC;wBAC/B,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,WACR,CACJ,CAAC;YACJ,CAAC;YACD,KAAK,EAAE,QAAQ;SAChB;KACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BACE,KAAC,KAAK,IAAC,KAAK,EAAC,mBAAmB,EAAC,cAAc,QAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,WAAI,EACrF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAC9B,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,sCAEvC,WACJ,YACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAe;QACvD,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,mBAAmB;KAChC,CAAC,CAAC;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEnD,MAAM,kBAAkB,GAAG,CAAC,WAAyB,EAAE,EAAE;QACvD,YAAY,CAAC,WAAW,CAAC,CAAC;IAC5B,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAc,EAAE,EAAE;QAC5E,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;QACzD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;QAC5C,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,aACxB,KAAC,KAAK,IAAC,KAAK,EAAC,aAAa,EAAC,YAAY,EAAE,IAAI,CAAC,WAAW,WAAI,EAC5D,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,IAAkB,EAAE,EAAE;wBAClC,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAAkB,EAAE,EAAE;wBAC/B,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,EACD,MAAM,EAAE,MAAM,WACd,CACH,YACK,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,MAAoB,EAAE,EAAE;QACjD,IAAI,MAAM,CAAC,QAAQ,KAAK,gBAAgB,EAAE;YACxC,MAAM,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;YAE9E,IAAI,aAAa,EAAE;gBACjB,YAAY,CAAC,aAAa,CAAC,CAAC;aAC7B;iBAAM,IAAI,CAAC,aAAa,EAAE;gBACzB,oCAAoC;gBACpC,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAClD;SACF;aAAM,IAAI,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE;YACzC,MAAM,CAAC,aAAa,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC;SACxC;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,kBAAkB,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,QAAkB,EAAE,QAA8B,EAAE,EAAE;QACrE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC;YAC7C,QAAQ;YACR,SAAS;YACT,QAAQ;SACT,CAAC,CAAC;QACH,IAAI,WAAW,EAAE;YACf,MAAM,YAAY,GAAyC,WAAW,CAAC;YACvE,YAAY,CAAC,YAAY,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACrD,uDAAuD;QACvD,MAAM,CAAC,mBAAmB,EAAE;YAC1B,IAAI;YACJ,UAAU,EAAE,aAAa;YACzB,WAAW,EAAE,SAAS;SACvB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,cACZ,KAAC,YAAY,IACX,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,OAAO,EAClB,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAE,iBAAiB,WACpC,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAuC;QAC/E,KAAK,EAAE,mBAAmB;QAC1B,UAAU,EAAE,wBAAwB;KACrC,CAAC,CAAC;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEnD,MAAM,kBAAkB,GAAG,CAAC,WAAyB,EAAE,EAAE;QACvD,YAAY,CAAC,WAAW,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAc,EAAE,EAAE;QAC5E,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;QACzD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;QAC5C,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,aACxB,KAAC,KAAK,IAAC,KAAK,EAAC,aAAa,EAAC,YAAY,EAAE,IAAI,CAAC,WAAW,WAAI,EAC5D,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,IAAkB,EAAE,EAAE;wBAClC,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAAkB,EAAE,EAAE;wBAC/B,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,EACD,MAAM,EAAE,MAAM,WACd,CACH,YACK,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,MAAoB,EAAE,EAAE;QACjD,IAAI,MAAM,CAAC,QAAQ,KAAK,gBAAgB,EAAE;YACxC,MAAM,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;YAE9E,IAAI,aAAa,EAAE;gBACjB,YAAY,CAAC,aAAa,CAAC,CAAC;aAC7B;iBAAM,IAAI,CAAC,aAAa,EAAE;gBACzB,oCAAoC;gBACpC,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAClD;SACF;aAAM,IAAI,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE;YACzC,MAAM,CAAC,aAAa,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC;SACxC;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,kBAAkB,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,QAAkB,EAAE,QAA8B,EAAE,EAAE;QACrE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC;YAC7C,QAAQ;YACR,SAAS;YACT,QAAQ;SACT,CAAC,CAAC;QACH,IAAI,WAAW,EAAE;YACf,MAAM,YAAY,GAAyC,WAAW,CAAC;YACvE,YAAY,CAAC,YAAY,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACrD,MAAM,CAAC,mBAAmB,EAAE;YAC1B,IAAI;YACJ,UAAU,EAAE,aAAa;YACzB,WAAW,EAAE,SAAS;SACvB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,cACZ,KAAC,YAAY,IACX,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,OAAO,EAClB,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAE,iBAAiB,WACpC,WACY,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useContext, useState, useEffect } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ModalManagerContext,\n  Modal,\n  Input,\n  Table,\n  ColumnProps,\n  Text,\n  Button,\n  Icon,\n  Flex,\n  ModalMethods\n} from '@pega/cosmos-react-core';\nimport {\n  FlowModeller,\n  ActionParams,\n  NodeProps,\n  NodeType,\n  DirectedGraph,\n  GraphData,\n  ConnectorProps,\n  FlowModellerHelper,\n  AddNodeHandlerParams\n} from '@pega/cosmos-react-build';\n\nimport {\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData,\n  exampleCRMConnectorsData,\n  emptyNodesData,\n  emptyConnectorsData\n} from './FlowModeller.mocks';\n\nexport default {\n  title: 'Build/FlowModeller',\n  component: FlowModeller,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nconst StyledWrapper = styled.div(() => {\n  return css`\n    height: 100vh;\n    overflow: auto;\n  `;\n});\n\ninterface NodeDataType {\n  nodes: NodeProps[];\n  connectors: ConnectorProps[];\n}\n\nconst DELETE_ACTION_ID = 'action-1';\n\ninterface ModalProps {\n  updatedData: NodeDataType;\n  connectors: ConnectorProps[];\n  node: NodeProps;\n}\n\ninterface DecisionTableProps extends ModalProps {\n  onDeleteRow: (data: NodeDataType) => void;\n  onAddRow: (data: NodeDataType) => void;\n  update: ModalMethods['update'];\n}\nconst DecisionTable = ({\n  updatedData,\n  connectors,\n  onDeleteRow,\n  onAddRow,\n  node,\n  update\n}: DecisionTableProps) => {\n  const [tableData, setTableData] = useState<ConnectorProps[]>(connectors);\n  const message =\n    'Please delete the nodes in the connector manually and delete this connector again';\n  const { create } = useContext(ModalManagerContext);\n\n  const onAddCondition = () => {\n    const label = 'otherwise';\n    const updatedGraphData = FlowModellerHelper.addBranch(updatedData, node.id, label);\n    const graph = new DirectedGraph(updatedGraphData);\n    const outConnectors = graph.getOutConnectors(node.id);\n    update({\n      node,\n      connectors: outConnectors,\n      updatedData: updatedGraphData\n    });\n    onAddRow(updatedGraphData);\n  };\n\n  const onDeleteCondition = (connector: ConnectorProps) => {\n    const updatedGraphData = FlowModellerHelper.deleteConnector(updatedData, connector);\n    if (updatedGraphData) {\n      const updatedGraph = new DirectedGraph(updatedGraphData);\n      const updatedOutConnectors = updatedGraph.getOutConnectors(node.id);\n      update({\n        node,\n        connectors: updatedOutConnectors,\n        updatedData: updatedGraphData\n      });\n      onDeleteRow(updatedGraphData);\n    } else {\n      create(\n        () => {\n          return (\n            <Modal heading='Confirm'>\n              <Text>{message}</Text>\n            </Modal>\n          );\n        },\n        { center: true }\n      );\n    }\n  };\n\n  const columns: ColumnProps<ConnectorProps>[] = [\n    {\n      renderer: connector => <Input value={connector.label} readOnly />,\n      label: 'Outcome'\n    },\n    { renderer: () => <Text>No value</Text>, label: 'Decision output' },\n    {\n      renderer: connector => {\n        return (\n          <>\n            <Button\n              variant='simple'\n              label='Delete'\n              disabled={tableData.length < 3}\n              icon\n              onClick={() => {\n                onDeleteCondition(connector);\n              }}\n            >\n              <Icon name='trash' />\n            </Button>\n          </>\n        );\n      },\n      label: 'Action'\n    }\n  ];\n\n  useEffect(() => {\n    setTableData(connectors);\n  }, [connectors]);\n\n  return (\n    <>\n      <Table title='Decision outcomes' hoverHighlight data={tableData} columns={columns} />\n      <Flex container={{ pad: [1, 0] }}>\n        <Button variant='simple' onClick={onAddCondition}>\n          Add Condition\n        </Button>\n      </Flex>\n    </>\n  );\n};\n\nexport const EmptyFlowChartView = () => {\n  const [graphData, setGraphData] = useState<NodeDataType>({\n    nodes: emptyNodesData,\n    connectors: emptyConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === DELETE_ACTION_ID) {\n      const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);\n\n      if (modifiedGraph) {\n        setGraphData(modifiedGraph);\n      } else if (!modifiedGraph) {\n        // eslint-disable-next-line no-alert\n        alert('Deletion of this node is not supported ');\n      }\n    } else if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    // LaunchPropertyModal(node, outConnectors, graphData);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n      />\n    </StyledWrapper>\n  );\n};\n\nexport const CRMFlowChartView = () => {\n  const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n    nodes: exampleCRMNodesData,\n    connectors: exampleCRMConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === DELETE_ACTION_ID) {\n      const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);\n\n      if (modifiedGraph) {\n        setGraphData(modifiedGraph);\n      } else if (!modifiedGraph) {\n        // eslint-disable-next-line no-alert\n        alert('Deletion of this node is not supported ');\n      }\n    } else if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n      />\n    </StyledWrapper>\n  );\n};\n"]}