@pega/cosmos-react-demos 2.1.4 → 3.0.0-dev.10.0

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

@@ -1,9 +1,9 @@
 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 { treeHelpers } from '@pega/cosmos-react-core';
 import { AppShell } from '@pega/cosmos-react-build';
-import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList } from './AppShell.mocks';
+import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList, TabbedPageComp } from './AppShell.mocks';
 export default {
     title: 'Build/AppShell',
     component: AppShell,
@@ -11,45 +11,12 @@ export default {
         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 [pageContent, setPageContent] = useState(contents[19]);
     const onNodeClick = (nodeId, activeDrawerId) => {
         const clickedNode = treeHelpers.getNode(allNodes, nodeId);
         if (!clickedNode?.nodes) {
@@ -67,27 +34,61 @@ export const AppShellDemo = (args) => {
     };
     const appHeader = {
         brand: {
-            name: 'AppStudioX'
+            name: 'AppStudioX',
+            visual: {
+                icon: 'pegasus'
+            }
         },
         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')()
+            branch: {
+                text: args.text,
+                variant: args.variant,
+                count: args.count,
+                compact: args.compact,
+                items: [
+                    {
+                        primary: 'Commit to branch',
+                        id: 'commitToBranch',
+                        onClick: action('Clicked commitToBranch')
+                    },
+                    {
+                        primary: 'Merge branch',
+                        id: 'mergeBranch',
+                        onClick: action('Clicked mergeBranch')
+                    },
+                    {
+                        primary: 'View branch',
+                        id: 'viewBranch',
+                        onClick: action('Clicked viewBranch')
+                    },
+                    {
+                        primary: 'Switch branch',
+                        id: 'switchBranch',
+                        onClick: action('Clicked switchBranch')
+                    },
+                    {
+                        primary: 'Add branch',
+                        id: 'addBranch',
+                        onClick: action('Clicked addBranch')
+                    },
+                    {
+                        primary: 'View all branches',
+                        id: 'viewAllBranches',
+                        onClick: action('Clicked viewAllBranches')
+                    }
+                ]
+            },
+            action: args.showPreview
+                ? {
+                    id: 'preview',
+                    text: 'Preview',
+                    onClick: args.onPreviewClick
                 }
-            ],
-            onPreviewClick: args.showPreview ? args.onPreviewClick : undefined
+                : undefined
         },
         links: [
             {
@@ -117,14 +118,14 @@ export const AppShellDemo = (args) => {
             }
         ]
     };
-    return (_jsx(_Fragment, { children: _jsx(AppShell, { main: _jsx(TabbedPage, { ...{ ...args, pageContent } }, void 0), appHeader: appHeader, hideNav: args.hideNavigation, appInfo: {
+    return (_jsx(_Fragment, { children: _jsx(AppShell, { main: _jsx(TabbedPageComp, { ...{ ...args, pageContent } }), appHeader: appHeader, hideNav: args.hideNavigation, appInfo: {
                 text: 'U+ Desk',
                 visual: {
-                    icon: {
-                        name: 'phone-in-solid',
-                        bgColor: '#0ac7c8'
-                    }
-                }
+                    icon: 'phone-in-solid',
+                    backgroundColor: '#0ac7c8',
+                    color: '#fff'
+                },
+                meta: ['1.0.0']
             }, navigation: {
                 nodes: allNodes,
                 currentNodeId,
@@ -175,17 +176,26 @@ export const AppShellDemo = (args) => {
                     }
                 },
                 devMode: true
-            } }, void 0) }, void 0));
+            } }) }));
 };
 AppShellDemo.args = {
     hideNavigation: false,
     showBreadcrumbs: true,
+    variant: undefined,
+    text: 'Alpha branch',
+    count: null,
+    compact: false,
     showPreview: true,
+    // eslint-disable-next-line demo-patterns/literal-args
     onPreviewClick: action('Clicked preview button')
 };
 AppShellDemo.argTypes = {
     hideNavigation: { control: { type: 'boolean' } },
     showBreadcrumbs: { control: { type: 'boolean' } },
+    variant: { options: ['success', 'urgent'], control: { type: 'radio' } },
+    text: { control: { type: 'text' } },
+    count: { control: { type: 'number' } },
+    compact: { control: { type: 'boolean' } },
     showPreview: { control: { type: 'boolean' } },
     onPreviewClick: { table: { disable: true } }
 };

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

@@ -1 +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"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAA6B,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAqB,MAAM,0BAA0B,CAAC;AAEvE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,QAAQ,EAER,cAAc,EACd,QAAQ,EACR,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AASV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,WAAW,CAAC,QAAQ,CAAC,mBAAmB,EAAE,aAAa,CAAC,CACzD,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAmB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAE/E,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,cAAsB,EAAE,EAAE;QAC7D,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE;YACvB,cAAc,CAAC,cAAc,CAAC,CAAC;YAC/B,gBAAgB,CAAC,MAAM,CAAC,CAAC;YACzB,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,WAAW,EAAE,EAAE,CAAE,CAAC,CAAC;YAC1E,OAAO;SACR;QAED,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;YACvC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;aACzB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE;YACL,IAAI,EAAE,YAAY;YAClB,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;aAChB;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACxB,MAAM,EAAE;gBACN,WAAW,EAAE,4BAA4B;aAC1C;YACD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE;oBACL;wBACE,OAAO,EAAE,kBAAkB;wBAC3B,EAAE,EAAE,gBAAgB;wBACpB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;qBAC1C;oBACD;wBACE,OAAO,EAAE,cAAc;wBACvB,EAAE,EAAE,aAAa;wBACjB,OAAO,EAAE,MAAM,CAAC,qBAAqB,CAAC;qBACvC;oBACD;wBACE,OAAO,EAAE,aAAa;wBACtB,EAAE,EAAE,YAAY;wBAChB,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;qBACtC;oBACD;wBACE,OAAO,EAAE,eAAe;wBACxB,EAAE,EAAE,cAAc;wBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBACxC;oBACD;wBACE,OAAO,EAAE,YAAY;wBACrB,EAAE,EAAE,WAAW;wBACf,OAAO,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBACrC;oBACD;wBACE,OAAO,EAAE,mBAAmB;wBAC5B,EAAE,EAAE,iBAAiB;wBACrB,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC;qBAC3C;iBACF;aACF;YACD,MAAM,EAAE,IAAI,CAAC,WAAW;gBACtB,CAAC,CAAC;oBACE,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,SAAS;oBACf,OAAO,EAAE,IAAI,CAAC,cAAc;iBAC7B;gBACH,CAAC,CAAC,SAAS;SACd;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE;aAChD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,EAAE;aACpD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;aACzC;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAAE;aAClD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;aAC1C;SACF;KACF,CAAC;IAEF,OAAO,CACL,4BACE,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,cAAc,OAAK,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,GAAI,EACtD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE;oBACN,IAAI,EAAE,gBAAgB;oBACtB,eAAe,EAAE,SAAS;oBAC1B,KAAK,EAAE,MAAM;iBACd;gBACD,IAAI,EAAE,CAAC,OAAO,CAAC;aAChB,EACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ;gBACf,aAAa;gBACb,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,WAAW,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;gBACjC,CAAC;aACF,EACD,KAAK,EAAE;gBACL,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,gBAAgB,CAAC,EAAE,CAAC,CAAC;oBACrB,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,MAAM,cAAc,GAAG,aAAa;4BAClC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,mBAAmB,EAAE,aAAa,CAAC;4BAC1D,CAAC,CAAC,mBAAmB,CAAC;wBACxB,WAAW,CAAC,cAAc,CAAC,CAAC;qBAC7B;oBAED,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,MAAM,UAAU,GAAG,aAAa;4BAC9B,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC;4BACvD,CAAC,CAAC,gBAAgB,CAAC;wBACrB,WAAW,CAAC,UAAU,CAAC,CAAC;qBACzB;oBAED,IAAI,EAAE,KAAK,SAAS,EAAE;wBACpB,MAAM,UAAU,GAAG,aAAa;4BAC9B,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,EAAE,aAAa,CAAC;4BACrD,CAAC,CAAC,cAAc,CAAC;wBACnB,WAAW,CAAC,UAAU,CAAC,CAAC;qBACzB;gBACH,CAAC;gBACD,aAAa,EAAE,WAAW;gBAC1B,KAAK,EAAE;oBACL;wBACE,KAAK,EAAE,cAAc;wBACrB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,UAAU;wBACjB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,EAAE,EAAE,SAAS;qBACd;iBACF;gBACD,MAAM,EAAE;oBACN,aAAa,EAAE,GAAG,EAAE;wBAClB,gBAAgB,CAAC,EAAE,CAAC,CAAC;wBACrB,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;oBACxF,CAAC;iBACF;gBACD,OAAO,EAAE,IAAI;aACd,GACD,GACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,cAAc,EAAE,KAAK;IACrB,eAAe,EAAE,IAAI;IACrB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,IAAI;IACjB,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC,wBAAwB,CAAC;CACjD,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACvE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Action, StandardTreeProps, treeHelpers } from '@pega/cosmos-react-core';\nimport { AppShell, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  PageContentProps,\n  recordMenuList,\n  treeList,\n  TabbedPageComp\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 extends BranchButtonProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: Action['onClick'];\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[19]);\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      visual: {\n        icon: 'pegasus'\n      }\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branch: {\n        text: args.text,\n        variant: args.variant,\n        count: args.count,\n        compact: args.compact,\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: action('Clicked commitToBranch')\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: action('Clicked mergeBranch')\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: action('Clicked viewBranch')\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: action('Clicked switchBranch')\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: action('Clicked addBranch')\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: action('Clicked viewAllBranches')\n          }\n        ]\n      },\n      action: args.showPreview\n        ? {\n            id: 'preview',\n            text: 'Preview',\n            onClick: args.onPreviewClick\n          }\n        : 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={<TabbedPageComp {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: 'phone-in-solid',\n            backgroundColor: '#0ac7c8',\n            color: '#fff'\n          },\n          meta: ['1.0.0']\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  variant: undefined,\n  text: 'Alpha branch',\n  count: null,\n  compact: false,\n  showPreview: true,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n  text: { control: { type: 'text' } },\n  count: { control: { type: 'number' } },\n  compact: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { DynamicContentEditorProps } from '@pega/cosmos-react-build';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
+}
+export declare const DynamicContentEditorDemo: Story<DynamicContentEditorStoryProps>;
+//# sourceMappingURL=DynamicContentEditor.stories.d.ts.map

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAgB/C,OAAO,EAEL,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;;AAIlC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,8BAA8B,CAkI1E,CAAC"}

package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
+import { DynamicContentEditor } from '@pega/cosmos-react-build';
+import FieldSelector from './FieldSelector';
+export default {
+    title: 'Build/DynamicContentEditor',
+    component: DynamicContentEditor
+};
+export const DynamicContentEditorDemo = (args) => {
+    const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
+    const rteRef = useRef(null);
+    const fieldItems = [
+        {
+            id: 'CustomerName',
+            primary: 'CustomerName',
+            items: [
+                {
+                    id: '1-2',
+                    primary: 'Locale'
+                },
+                {
+                    id: '1-1',
+                    primary: 'Response Type',
+                    items: [
+                        {
+                            id: 'group-1-1-b',
+                            label: 'B',
+                            items: [{ id: '1-1-1', primary: 'Reply to' }]
+                        },
+                        { id: '1-1-4', primary: 'Forward to' }
+                    ]
+                }
+            ]
+        },
+        { id: 'Address', primary: 'Address' },
+        { id: 'Locality', primary: 'Locality' },
+        { id: 'Country', primary: 'Country' },
+        { id: 'Region', primary: 'Region' },
+        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'City', primary: 'City' },
+        { id: 'Colony', primary: 'Colony' },
+        { id: 'Lastname', primary: 'Lastname' },
+        { id: 'Preference', primary: 'Preference' },
+        { id: 'Currency', primary: 'Currency' },
+        { id: 'Iconname', primary: 'Iconname' }
+    ];
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
+    const ref = useRef(null);
+    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
+    const handleShowHtml = () => {
+        resizeTextArea();
+        setHtml(rteRef.current?.getHtml() || '');
+    };
+    const t = useI18n();
+    const [selectedField, setSelectedField] = useState({
+        id: '',
+        text: ''
+    });
+    const updateSelection = (selectedItem) => {
+        setSelectedField(selectedItem);
+    };
+    const onSubmit = useCallback((insertField) => {
+        insertField(selectedField);
+    }, [selectedField]);
+    const dynamicContentPicker = (_jsx(Flex, { container: {
+            gap: 2,
+            direction: 'column'
+        }, children: _jsx(FieldSelector, { itemList: [
+                { id: 'CustomerName', text: 'CustomerName' },
+                { id: 'Address', text: 'Address' },
+                { id: 'Locality', text: 'Locality' },
+                { id: 'Country', text: 'Country' },
+                { id: 'Region', text: 'Region' },
+                { id: 'Occupation', text: 'Occupation' }
+            ], label: 'Field', updateSelection: updateSelection, placeholder: t('select'), defaultSelection: selectedField }, selectedField?.id) }));
+    const onActiveFieldChange = (field) => setSelectedField(field);
+    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), autoResize: true, ref: consolidatedRef }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(DynamicContentEditor, { defaultValue: args.defaultValue || html, onImageAdded: onImageAdded, ref: rteRef, label: 'Dynamic content editor', toolbar: ['inline-styling', 'lists', 'indentation', 'links', 'images'], form: args.form || { onSubmit, dynamicContentPicker }, onActiveFieldChange: args.onActiveFieldChange || onActiveFieldChange, fieldItems: args.fieldItems || fieldItems, onBlur: action('Editor onBlur') }), _jsx(Flex, { container: { gap: 1 }, children: _jsx(Button, { onClick: () => handleShowHtml(), children: "Show HTML" }) })] }));
+};
+//# sourceMappingURL=DynamicContentEditor.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContentEditor.stories.js","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n  DynamicContentEditor,\n  DynamicContentEditorProps,\n  ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: Story<DynamicContentEditorStoryProps> = (\n  args: DynamicContentEditorStoryProps\n) => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n    {\n      id: 'CustomerName',\n      primary: 'CustomerName',\n      items: [\n        {\n          id: '1-2',\n          primary: 'Locale'\n        },\n        {\n          id: '1-1',\n          primary: 'Response Type',\n          items: [\n            {\n              id: 'group-1-1-b',\n              label: 'B',\n              items: [{ id: '1-1-1', primary: 'Reply to' }]\n            },\n            { id: '1-1-4', primary: 'Forward to' }\n          ]\n        }\n      ]\n    },\n    { id: 'Address', primary: 'Address' },\n    { id: 'Locality', primary: 'Locality' },\n    { id: 'Country', primary: 'Country' },\n    { id: 'Region', primary: 'Region' },\n    { id: 'Occupation', primary: 'Occupation' },\n    { id: 'City', primary: 'City' },\n    { id: 'Colony', primary: 'Colony' },\n    { id: 'Lastname', primary: 'Lastname' },\n    { id: 'Preference', primary: 'Preference' },\n    { id: 'Currency', primary: 'Currency' },\n    { id: 'Iconname', primary: 'Iconname' }\n  ];\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={args.defaultValue || html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={args.form || { onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n        fieldItems={args.fieldItems || fieldItems}\n        onBlur={action('Editor onBlur')}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/lib/build/DynamicContentEditor/FieldSelector.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { ItemType } from '@pega/cosmos-react-build/lib/components/DynamicContentEditor/DynamicContentEditor.types';
+export interface FieldSelectorProps extends NoChildrenProp {
+    /** Array of values for the combobox options. */
+    itemList: ItemType[];
+    /** Return selected item */
+    updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;
+    /** Default selected item */
+    defaultSelection?: ItemType;
+}
+declare const FieldSelector: FunctionComponent<FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>>;
+export default FieldSelector;
+//# sourceMappingURL=FieldSelector.d.ts.map

package/lib/build/DynamicContentEditor/FieldSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,yFAAyF,CAAC;AAEnH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,2BAA2B;IAC3B,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAiGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/build/DynamicContentEditor/FieldSelector.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from 'react';
+import { ComboBox, createStringMatcher, useI18n } from '@pega/cosmos-react-core';
+const FieldSelector = ({ itemList, label, mode = 'single-select', required = false, updateSelection, placeholder, defaultSelection }) => {
+    const t = useI18n();
+    const [filterValue, setFilterValue] = useState('');
+    const [items, setItems] = useState(() => {
+        return itemList.map(item => {
+            return {
+                id: item.id,
+                primary: item.text,
+                selected: defaultSelection ? defaultSelection.id === item.id : false
+            };
+        });
+    });
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const itemsToRender = useMemo(() => {
+        return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;
+    }, [filterValue, items]);
+    const clearSelection = () => {
+        setItems(curr => {
+            return curr?.map(item => {
+                return {
+                    ...item,
+                    selected: false
+                };
+            });
+        });
+    };
+    const selectItem = useCallback((id) => {
+        setFilterValue('');
+        setItems(curr => curr?.map(item => {
+            if (item.id === id) {
+                return {
+                    ...item,
+                    selected: true
+                };
+            }
+            return { ...item, selected: false };
+        }));
+        const selectedItem = items?.find(item => item.id === id);
+        if (selectedItem?.id)
+            updateSelection({
+                id: selectedItem.id,
+                text: selectedItem.primary
+            }, label);
+    }, [filterValue, items]);
+    const selected = useMemo(() => {
+        return items?.find(item => item.selected);
+    }, [items]);
+    const comboBoxProps = {
+        label,
+        placeholder,
+        mode,
+        value: filterValue,
+        selected: selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined,
+        onChange: (e) => {
+            if (e.target.value)
+                clearSelection();
+            setFilterValue(e.target.value);
+        },
+        onBlur: () => setFilterValue(''),
+        menu: {
+            items: itemsToRender,
+            accent: filterRegex,
+            onItemClick: selectItem,
+            emptyText: t('no_items')
+        },
+        required
+    };
+    return _jsx(ComboBox, { ...comboBoxProps });
+};
+export default FieldSelector;
+//# sourceMappingURL=FieldSelector.js.map

package/lib/build/DynamicContentEditor/FieldSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  MenuItemProps,\n  NoChildrenProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-build/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n  /** Array of values for the combobox options. */\n  itemList: ItemType[];\n  /** Return selected item */\n  updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n  /** Default selected item */\n  defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n  FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>\n> = ({\n  itemList,\n  label,\n  mode = 'single-select',\n  required = false,\n  updateSelection,\n  placeholder,\n  defaultSelection\n}) => {\n  const t = useI18n();\n\n  const [filterValue, setFilterValue] = useState('');\n  const [items, setItems] = useState(() => {\n    return itemList.map(item => {\n      return {\n        id: item.id,\n        primary: item.text,\n        selected: defaultSelection ? defaultSelection.id === item.id : false\n      };\n    });\n  });\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n  const itemsToRender = useMemo(() => {\n    return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n  }, [filterValue, items]);\n\n  const clearSelection = () => {\n    setItems(curr => {\n      return curr?.map(item => {\n        return {\n          ...item,\n          selected: false\n        };\n      });\n    });\n  };\n\n  const selectItem = useCallback(\n    (id: MenuItemProps['id']) => {\n      setFilterValue('');\n      setItems(curr =>\n        curr?.map(item => {\n          if (item.id === id) {\n            return {\n              ...item,\n              selected: true\n            };\n          }\n          return { ...item, selected: false };\n        })\n      );\n      const selectedItem = items?.find(item => item.id === id);\n      if (selectedItem?.id)\n        updateSelection(\n          {\n            id: selectedItem.id,\n            text: selectedItem.primary\n          },\n          label\n        );\n    },\n    [filterValue, items]\n  );\n\n  const selected = useMemo(() => {\n    return items?.find(item => item.selected);\n  }, [items]);\n\n  const comboBoxProps: ComboBoxProps = {\n    label,\n    placeholder,\n    mode,\n    value: filterValue,\n    selected: selected\n      ? {\n          items: {\n            id: selected.id,\n            text: selected.primary\n          }\n        }\n      : undefined,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.value) clearSelection();\n      setFilterValue(e.target.value);\n    },\n    onBlur: () => setFilterValue(''),\n    menu: {\n      items: itemsToRender,\n      accent: filterRegex,\n      onItemClick: selectItem,\n      emptyText: t('no_items')\n    },\n    required\n  };\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}

package/lib/build/FlowModeller/FlowModeller.mocks.d.ts

@@ -1,9 +1,26 @@
-import { Action } from '@pega/cosmos-react-core';
-import { ConnectorProps, NodeProps, NodeLibraryItem } from '@pega/cosmos-react-build';
+import { FC } from 'react';
+import { Action, ForwardProps } from '@pega/cosmos-react-core';
+import { NodeProps, ConnectorProps, NodeLibraryItem, DeleteNodeOutcome, GraphData } from '@pega/cosmos-react-build';
+interface DecisionTableProps {
+    updatedData: GraphData<NodeProps, ConnectorProps>;
+    connectors: ConnectorProps[];
+    node: NodeProps;
+    onDeleteRow: (data: GraphData<NodeProps, ConnectorProps>, deleteItems?: DeleteNodeOutcome['deletes'], e?: MouseEvent) => void;
+    onAddRow: (data: GraphData<NodeProps, ConnectorProps>) => void;
+}
+interface DeletePopoverProps {
+    targetId: string | null;
+    showPopover: boolean;
+    onCancel: () => void;
+    onDelete: () => void;
+}
+export declare const DecisionTable: FC<DecisionTableProps & ForwardProps>;
+export declare const DeletePopover: FC<DeletePopoverProps & ForwardProps>;
 export declare const exampleCRMNodesData: NodeProps[];
 export declare const exampleCRMConnectorsData: ConnectorProps[];
 export declare const emptyNodesData: NodeProps[];
 export declare const emptyConnectorsData: ConnectorProps[];
 export declare const nodeActions: Action[];
 export declare const nodeLibrary: NodeLibraryItem[];
+export {};
 //# sourceMappingURL=FlowModeller.mocks.d.ts.map

package/lib/build/FlowModeller/FlowModeller.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,cAAc,EACd,SAAS,EAET,eAAe,EAGhB,MAAM,0BAA0B,CAAC;AAuGlC,eAAO,MAAM,mBAAmB,EAAE,SAAS,EAoH1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,EAyHpD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,EAWrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAO/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAS/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,eAAe,EAsCxC,CAAC"}
+{"version":3,"file":"FlowModeller.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EASL,MAAM,EACN,YAAY,EAOb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,cAAc,EAGd,eAAe,EACf,iBAAiB,EAGjB,SAAS,EACV,MAAM,0BAA0B,CAAC;AAElC,UAAU,kBAAkB;IAC1B,WAAW,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAClD,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,CACX,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,EAC1C,WAAW,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,EAC1C,CAAC,CAAC,EAAE,UAAU,KACX,IAAI,CAAC;IACV,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;CAChE;AACD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CA4D/D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAsC/D,CAAC;AAsGF,eAAO,MAAM,mBAAmB,EAAE,SAAS,EAmI1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,EAyHpD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,EAWrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAO/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAK/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,eAAe,EAsCxC,CAAC"}