@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/jsx/social/Feed/FeedReplyInput.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReplyInput,\n  FeedReplyInputProps,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: Story<FeedReplyInputDemoProps> = ({\n  onSubmit,\n  renderFeed = true\n}: FeedReplyInputDemoProps) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(files);\n  };\n\n  const replyInput = (\n    <FeedReplyInput\n      id={key}\n      commentLabel='Send Comment'\n      attachments={attachments}\n      placeholder='Add a comment'\n      onFilesAdded={onFilesAdded}\n      onSubmit={replyEvent => {\n        onSubmit?.(replyEvent);\n        setAttachments([]);\n        replyEvent.clear();\n      }}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[replyInput]}\n    />\n  ) : (\n    replyInput\n  );\n};\n"]}
+{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReplyInput,\n  FeedReplyInputProps,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: Story<FeedReplyInputDemoProps> = ({\n  onSubmit,\n  renderFeed = true\n}: FeedReplyInputDemoProps) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual, href }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual,\n            href\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(files);\n  };\n\n  const replyInput = (\n    <FeedReplyInput\n      id={key}\n      commentLabel='Send Comment'\n      attachments={attachments}\n      placeholder='Add a comment'\n      onFilesAdded={onFilesAdded}\n      onSubmit={replyEvent => {\n        onSubmit?.(replyEvent);\n        setAttachments([]);\n        replyEvent.clear();\n      }}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      title='Pulse'\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[replyInput]}\n    />\n  ) : (\n    replyInput\n  );\n};\n"]}

package/jsx/tools/Clipboard/Clipboard.mocks.d.ts

@@ -0,0 +1,6 @@
+import { FieldSummaryProps } from '@pega/cosmos-react-tools';
+import { StandardTreeProps } from '@pega/cosmos-react-core';
+export declare const allNodes: StandardTreeProps['nodes'];
+export declare const childNodes: StandardTreeProps['nodes'];
+export declare const getDetailsData: (id: string, cb?: (id: string) => void) => FieldSummaryProps | undefined;
+//# sourceMappingURL=Clipboard.mocks.d.ts.map

package/jsx/tools/Clipboard/Clipboard.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,OAAO,CAsB/C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAajD,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,KACtB,iBAAiB,GAAG,SA0CxB,CAAC"}

package/jsx/tools/Clipboard/Clipboard.mocks.jsx

@@ -0,0 +1,81 @@
+import { Actions, Button, Flex } from '@pega/cosmos-react-core';
+export const allNodes = [
+    {
+        id: 'dataPage',
+        label: 'Data Pages',
+        nodes: [
+            {
+                id: 'D_pzPreferenceStore',
+                label: 'D_pzPreferenceStore',
+                nodes: []
+            },
+            {
+                id: 'D_creditScore',
+                label: 'D_Credit Score',
+                nodes: []
+            }
+        ]
+    },
+    {
+        id: 'systemPage',
+        label: 'System Pages',
+        nodes: []
+    }
+];
+export const childNodes = [
+    {
+        id: 'pxDPParameters',
+        label: 'pxDPParameters'
+    },
+    {
+        id: 'pyDevicePreviewSettings',
+        label: 'pyDevicePreviewSettings'
+    },
+    {
+        id: 'pySourcePage',
+        label: 'pySourcePage'
+    }
+];
+const primaryData = [
+    { id: 'field1', name: 'pxCommitDateTime', value: '20220303T121437.913 GMT' },
+    { id: 'field2', name: 'pxInsName', value: 'John.smith' },
+    { id: 'field3', name: 'pxObjClass', value: 'Data-Preference-Operator' },
+    { id: 'field4', name: 'pzInsKey', value: 'DATA-PREFERENCE-OPERATOR JOHN SMITH' }
+];
+export const getDetailsData = (id, cb) => {
+    const embeddedData = [
+        { id: 'pxDPParameters', name: 'pxDPParameters', onClick: cb },
+        { id: 'pyDevicePreviewSettings', name: 'pyDevicePreviewSettings', onClick: cb },
+        { id: 'pySourcePage', name: 'pySourcePage', onClick: cb }
+    ];
+    const response = {
+        primary: id,
+        secondary: [
+            { id: '1', name: 'ID', value: 'InterestRate' },
+            { id: '2', name: 'Rule type', value: 'Field' },
+            {
+                id: '3',
+                name: 'Scope',
+                value: 'O1XPTI-CCompass-Work-MortgageRequest'
+            },
+            { id: '4', name: 'Application', value: 'XCompass' }
+        ],
+        actions: (<Flex container>
+        <Button aria-label={`${id}-Secondary action`} variant='secondary'>
+          Secondary action
+        </Button>
+        <Button aria-label={`${id}-Primary action`} variant='primary'>
+          Primary action
+        </Button>
+        <Actions menuAt={1} items={[
+                {
+                    id: '1',
+                    text: 'Secondary action 2'
+                }
+            ]}/>
+      </Flex>),
+        fields: id === 'D_pzPreferenceStore' ? [...primaryData, ...embeddedData] : primaryData
+    };
+    return id === 'systemPage' || id === 'dataPage' ? undefined : response;
+};
+//# sourceMappingURL=Clipboard.mocks.jsx.map

package/jsx/tools/Clipboard/Clipboard.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FieldSummaryProps } from '@pega/cosmos-react-tools';\nimport { Actions, Button, Flex, StandardTreeProps } from '@pega/cosmos-react-core';\n\nexport const allNodes: StandardTreeProps['nodes'] = [\n  {\n    id: 'dataPage',\n    label: 'Data Pages',\n    nodes: [\n      {\n        id: 'D_pzPreferenceStore',\n        label: 'D_pzPreferenceStore',\n        nodes: []\n      },\n      {\n        id: 'D_creditScore',\n        label: 'D_Credit Score',\n        nodes: []\n      }\n    ]\n  },\n  {\n    id: 'systemPage',\n    label: 'System Pages',\n    nodes: []\n  }\n];\n\nexport const childNodes: StandardTreeProps['nodes'] = [\n  {\n    id: 'pxDPParameters',\n    label: 'pxDPParameters'\n  },\n  {\n    id: 'pyDevicePreviewSettings',\n    label: 'pyDevicePreviewSettings'\n  },\n  {\n    id: 'pySourcePage',\n    label: 'pySourcePage'\n  }\n];\n\nconst primaryData = [\n  { id: 'field1', name: 'pxCommitDateTime', value: '20220303T121437.913 GMT' },\n  { id: 'field2', name: 'pxInsName', value: 'John.smith' },\n  { id: 'field3', name: 'pxObjClass', value: 'Data-Preference-Operator' },\n  { id: 'field4', name: 'pzInsKey', value: 'DATA-PREFERENCE-OPERATOR JOHN SMITH' }\n];\n\n// cSpell:words XPTI\nexport const getDetailsData: (\n  id: string,\n  cb?: (id: string) => void\n) => FieldSummaryProps | undefined = (id, cb) => {\n  const embeddedData = [\n    { id: 'pxDPParameters', name: 'pxDPParameters', onClick: cb },\n    { id: 'pyDevicePreviewSettings', name: 'pyDevicePreviewSettings', onClick: cb },\n    { id: 'pySourcePage', name: 'pySourcePage', onClick: cb }\n  ];\n\n  const response = {\n    primary: id,\n    secondary: [\n      { id: '1', name: 'ID', value: 'InterestRate' },\n      { id: '2', name: 'Rule type', value: 'Field' },\n      {\n        id: '3',\n        name: 'Scope',\n        value: 'O1XPTI-CCompass-Work-MortgageRequest'\n      },\n      { id: '4', name: 'Application', value: 'XCompass' }\n    ],\n    actions: (\n      <Flex container>\n        <Button aria-label={`${id}-Secondary action`} variant='secondary'>\n          Secondary action\n        </Button>\n        <Button aria-label={`${id}-Primary action`} variant='primary'>\n          Primary action\n        </Button>\n        <Actions\n          menuAt={1}\n          items={[\n            {\n              id: '1',\n              text: 'Secondary action 2'\n            }\n          ]}\n        />\n      </Flex>\n    ),\n    fields: id === 'D_pzPreferenceStore' ? [...primaryData, ...embeddedData] : primaryData\n  };\n\n  return id === 'systemPage' || id === 'dataPage' ? undefined : response;\n};\n"]}

package/jsx/tools/Clipboard/Clipboard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from '@storybook/react';
+import { ClipboardProps } from '@pega/cosmos-react-tools';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ClipboardViewerDemo: Story<ClipboardProps>;
+//# sourceMappingURL=Clipboard.stories.d.ts.map

package/jsx/tools/Clipboard/Clipboard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAqB,MAAM,0BAA0B,CAAC;;AAKxF,wBAMU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,cAAc,CAuFrD,CAAC"}

package/jsx/tools/Clipboard/Clipboard.stories.jsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { Clipboard } from '@pega/cosmos-react-tools';
+import { treeHelpers } from '@pega/cosmos-react-core';
+import { allNodes, childNodes, getDetailsData } from './Clipboard.mocks';
+export default {
+    title: 'Tools/Clipboard',
+    component: Clipboard,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ClipboardViewerDemo = () => {
+    const [nodes, setNodes] = useState(allNodes);
+    const [currentNodeId, setCurrentNodeId] = useState(allNodes[0].id);
+    const [pageDetails, setPageDetails] = useState();
+    const timeouts = [];
+    useEffect(() => {
+        return () => {
+            timeouts.forEach((timeout) => {
+                clearTimeout(timeout);
+            });
+        };
+    }, []);
+    const updatePageDetails = (id, cb) => {
+        setPageDetails({ primary: '', fields: [], loading: true });
+        const response = getDetailsData(id, cb);
+        timeouts.push(setTimeout(() => setPageDetails(response), 1300));
+    };
+    const updateActiveParentNode = (id) => {
+        setNodes(tree => treeHelpers.mapNode(tree, id, node => {
+            return {
+                ...node,
+                expanded: !node.expanded,
+                loading: node.nodes?.length === 0
+            };
+        }));
+    };
+    const loadChildNodes = (id) => {
+        timeouts.push(setTimeout(() => {
+            setNodes(tree => treeHelpers.mapNode(tree, id, node => node.nodes?.length === 0
+                ? {
+                    ...node,
+                    loading: false,
+                    nodes: id === 'D_pzPreferenceStore' ? childNodes : undefined
+                }
+                : node));
+        }, 1000));
+    };
+    const onNodeClick = (nodeId, e) => {
+        const node = treeHelpers.getNode(nodes, nodeId);
+        setCurrentNodeId(nodeId);
+        if (node?.nodes && node?.nodes?.length >= 0) {
+            updateActiveParentNode(nodeId);
+        }
+        loadChildNodes(nodeId);
+        if (['ArrowRight', 'ArrowLeft'].includes(e.key))
+            return;
+        updatePageDetails(nodeId, id => {
+            onNodeClick(id, e);
+            setNodes(tree => treeHelpers.expandTo(tree, nodeId));
+        });
+    };
+    return (<Clipboard navigation={{
+            nodes,
+            currentNodeId,
+            onNodeClick
+        }} content={pageDetails} lastUpdated='Last updated: Less than a minute ago'/>);
+};
+//# sourceMappingURL=Clipboard.stories.jsx.map

package/jsx/tools/Clipboard/Clipboard.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.stories.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAqC,MAAM,0BAA0B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEzE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAA0B,GAAG,EAAE;IAC7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAChF,MAAM,QAAQ,GAAoC,EAAE,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAsC,EAAE,EAAE;gBAC1D,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAGP,MAAM,iBAAiB,GAAG,CAAC,EAAU,EAAE,EAAyB,EAAE,EAAE;QAClE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3D,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC;IAGF,MAAM,sBAAsB,GAAG,CAAC,EAAU,EAAE,EAAE;QAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YACnC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;aAClC,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAGF,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,QAAQ,CAAC,IAAI,CACX,UAAU,CAAC,GAAG,EAAE;YACd,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,CACnC,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;gBACtB,CAAC,CAAC;oBACE,GAAG,IAAI;oBACP,OAAO,EAAE,KAAK;oBACd,KAAK,EAAE,EAAE,KAAK,qBAAqB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;iBAC7D;gBACH,CAAC,CAAC,IAAI,CACT,CACF,CAAC;QACJ,CAAC,EAAE,IAAI,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,CAAuD,EAAE,EAAE;QAE9F,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAChD,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAGzB,IAAI,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE;YAC3C,sBAAsB,CAAC,MAAM,CAAC,CAAC;SAChC;QAGD,cAAc,CAAC,MAAM,CAAC,CAAC;QAGvB,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAE,CAAmB,CAAC,GAAG,CAAC;YAAE,OAAO;QAG3E,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YAC7B,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YACnB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,UAAU,CAAC,CAAC;YACV,KAAK;YACL,aAAa;YACb,WAAW;SACZ,CAAC,CACF,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,WAAW,CAAC,sCAAsC,EAClD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\nimport { useState, MouseEvent, KeyboardEvent, useEffect } from 'react';\n\nimport { Clipboard, ClipboardProps, FieldSummaryProps } from '@pega/cosmos-react-tools';\nimport { treeHelpers } from '@pega/cosmos-react-core';\n\nimport { allNodes, childNodes, getDetailsData } from './Clipboard.mocks';\n\nexport default {\n  title: 'Tools/Clipboard',\n  component: Clipboard,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ClipboardViewerDemo: Story<ClipboardProps> = () => {\n  const [nodes, setNodes] = useState(allNodes);\n  const [currentNodeId, setCurrentNodeId] = useState(allNodes[0].id);\n  const [pageDetails, setPageDetails] = useState<FieldSummaryProps | undefined>();\n  const timeouts: ReturnType<typeof setTimeout>[] = [];\n\n  useEffect(() => {\n    return () => {\n      timeouts.forEach((timeout: ReturnType<typeof setTimeout>) => {\n        clearTimeout(timeout);\n      });\n    };\n  }, []);\n\n  // Update main content based on id\n  const updatePageDetails = (id: string, cb?: (id: string) => void) => {\n    setPageDetails({ primary: '', fields: [], loading: true });\n    const response = getDetailsData(id, cb);\n    timeouts.push(setTimeout(() => setPageDetails(response), 1300));\n  };\n\n  // set loading and expanded to selected node if it is a parent\n  const updateActiveParentNode = (id: string) => {\n    setNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded,\n          loading: node.nodes?.length === 0\n        };\n      })\n    );\n  };\n\n  // get child nodes for the parent and set loading to false\n  const loadChildNodes = (id: string) => {\n    timeouts.push(\n      setTimeout(() => {\n        setNodes(tree =>\n          treeHelpers.mapNode(tree, id, node =>\n            node.nodes?.length === 0\n              ? {\n                  ...node,\n                  loading: false,\n                  nodes: id === 'D_pzPreferenceStore' ? childNodes : undefined\n                }\n              : node\n          )\n        );\n      }, 1000)\n    );\n  };\n\n  const onNodeClick = (nodeId: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n    // get clicked node details and set it as active\n    const node = treeHelpers.getNode(nodes, nodeId);\n    setCurrentNodeId(nodeId);\n\n    // expand node if it is a parent and shows loading indicator for child\n    if (node?.nodes && node?.nodes?.length >= 0) {\n      updateActiveParentNode(nodeId);\n    }\n\n    // get child nodes and set new nodes to state\n    loadChildNodes(nodeId);\n\n    // Do not change maincontent if tree is navigated using arrow buttons\n    if (['ArrowRight', 'ArrowLeft'].includes((e as KeyboardEvent).key)) return;\n\n    // set main content based on active node\n    updatePageDetails(nodeId, id => {\n      onNodeClick(id, e);\n      setNodes(tree => treeHelpers.expandTo(tree, nodeId));\n    });\n  };\n\n  return (\n    <Clipboard\n      navigation={{\n        nodes,\n        currentNodeId,\n        onNodeClick\n      }}\n      content={pageDetails}\n      lastUpdated='Last updated: Less than a minute ago'\n    />\n  );\n};\n"]}

package/jsx/tools/DevTools/DevTools.mocks.d.ts

@@ -0,0 +1,3 @@
+import { footerMenuMock, footerTabsMockContent, footerTabsMock } from '../PreviewShell/PreviewShell.mocks';
+export { footerMenuMock, footerTabsMockContent, footerTabsMock };
+//# sourceMappingURL=DevTools.mocks.d.ts.map

package/jsx/tools/DevTools/DevTools.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,cAAc,EACf,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAC"}

package/jsx/tools/DevTools/DevTools.mocks.js

@@ -0,0 +1,3 @@
+import { footerMenuMock, footerTabsMockContent, footerTabsMock } from '../PreviewShell/PreviewShell.mocks';
+export { footerMenuMock, footerTabsMockContent, footerTabsMock };
+//# sourceMappingURL=DevTools.mocks.js.map

package/jsx/tools/DevTools/DevTools.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.mocks.js","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,cAAc,EACf,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import {\n  footerMenuMock,\n  footerTabsMockContent,\n  footerTabsMock\n} from '../PreviewShell/PreviewShell.mocks';\n\nexport { footerMenuMock, footerTabsMockContent, footerTabsMock };\n"]}

package/jsx/tools/DevTools/DevTools.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { DevToolsProps } from '@pega/cosmos-react-tools';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface DevToolsStoryProps extends DevToolsProps {
+    showUtils?: boolean;
+    showActiveDebuggingState?: boolean;
+}
+export declare const DevToolsDemo: Story<DevToolsStoryProps>;
+//# sourceMappingURL=DevTools.stories.d.ts.map

package/jsx/tools/DevTools/DevTools.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;;AAKnE,wBAMU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqClD,CAAC"}

package/jsx/tools/DevTools/DevTools.stories.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { DevTools } from '@pega/cosmos-react-tools';
+import { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';
+import { footerTabsMockContent, footerTabsMock, footerMenuMock } from './DevTools.mocks';
+export default {
+    title: 'Tools/DevTools',
+    component: DevTools,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const DevToolsDemo = (args) => {
+    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
+    const utils = (<Flex container={{ alignItems: 'center', pad: [0, 2] }}>
+      <MenuButton text='More options' variant='simple' icon='more' iconOnly menu={{ items: footerMenuMock }}/>
+      <Button variant='simple' icon label='Open in new window' onClick={action('Clicked open in new window')}>
+        <Icon name='open'/>
+      </Button>
+    </Flex>);
+    return (<DevTools tabs={footerTabsMock} currentTabId={currentTabId} tabContent={tabContent} onTabClick={(id) => {
+            setCurrentTabId(id);
+            setTabContent(footerTabsMockContent[Number(id)]);
+        }} utils={args.showUtils && utils} onContinueDebug={args.showActiveDebuggingState ? () => { } : undefined}/>);
+};
+DevToolsDemo.args = {
+    showUtils: false,
+    showActiveDebuggingState: false
+};
+DevToolsDemo.argTypes = {
+    showUtils: { control: { type: 'boolean' } },
+    showActiveDebuggingState: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=DevTools.stories.jsx.map

package/jsx/tools/DevTools/DevTools.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.stories.jsx","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CACrD;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAElC;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,QAAQ,CAChB,IAAI,CACJ,KAAK,CAAC,oBAAoB,CAC1B,OAAO,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAE9C;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,cAAc,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,CAAC,EAAU,EAAE,EAAE;YACzB,eAAe,CAAC,EAAE,CAAC,CAAC;YACpB,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,CAC/B,eAAe,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,wBAAwB,EAAE,KAAK;CAChC,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { DevTools, DevToolsProps } from '@pega/cosmos-react-tools';\nimport { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';\n\nimport { footerTabsMockContent, footerTabsMock, footerMenuMock } from './DevTools.mocks';\n\nexport default {\n  title: 'Tools/DevTools',\n  component: DevTools,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface DevToolsStoryProps extends DevToolsProps {\n  showUtils?: boolean;\n  showActiveDebuggingState?: boolean;\n}\n\nexport const DevToolsDemo: Story<DevToolsStoryProps> = (args: DevToolsStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n\n  const utils = (\n    <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n      <MenuButton\n        text='More options'\n        variant='simple'\n        icon='more'\n        iconOnly\n        menu={{ items: footerMenuMock }}\n      />\n      <Button\n        variant='simple'\n        icon\n        label='Open in new window'\n        onClick={action('Clicked open in new window')}\n      >\n        <Icon name='open' />\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <DevTools\n      tabs={footerTabsMock}\n      currentTabId={currentTabId}\n      tabContent={tabContent}\n      onTabClick={(id: string) => {\n        setCurrentTabId(id);\n        setTabContent(footerTabsMockContent[Number(id)]);\n      }}\n      utils={args.showUtils && utils}\n      onContinueDebug={args.showActiveDebuggingState ? () => {} : undefined}\n    />\n  );\n};\n\nDevToolsDemo.args = {\n  showUtils: false,\n  showActiveDebuggingState: false\n};\n\nDevToolsDemo.argTypes = {\n  showUtils: { control: { type: 'boolean' } },\n  showActiveDebuggingState: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuProps } from '@pega/cosmos-react-core';
+export declare const footerTabsMockContent: JSX.Element[];
+export declare const footerTabsMock: {
+    name: string;
+    id: string;
+}[];
+export declare const footerMenuMock: MenuProps['items'];
+//# sourceMappingURL=PreviewShell.mocks.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,eAAO,MAAM,qBAAqB,eAKjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;GAG1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,OAAO,CA2C7C,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx

@@ -0,0 +1,58 @@
+import { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';
+import { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';
+import { StyledContainer } from './PreviewShell.styles';
+export const footerTabsMockContent = [
+    <StyledContainer>
+    <EmptyStateDemo />
+  </StyledContainer>,
+    <ClipboardViewerDemo navigation={{ nodes: [] }}/>
+];
+export const footerTabsMock = [
+    { name: 'Tracer', id: '0' },
+    { name: 'Clipboard', id: '1' }
+];
+export const footerMenuMock = [
+    {
+        id: '1',
+        primary: 'Dock to bottom'
+    },
+    {
+        id: '2',
+        primary: 'Separate window'
+    },
+    {
+        id: '3',
+        primary: 'More tools',
+        items: [
+            {
+                id: '3-1',
+                primary: 'Network'
+            },
+            {
+                id: '3-2',
+                primary: 'Performance'
+            },
+            {
+                id: '3-3',
+                primary: 'Memory'
+            },
+            {
+                id: '3-4',
+                primary: 'Application'
+            }
+        ]
+    },
+    {
+        id: '4',
+        primary: 'Settings'
+    },
+    {
+        id: '5',
+        primary: 'Shortcuts'
+    },
+    {
+        id: '6',
+        primary: 'Help'
+    }
+];
+//# sourceMappingURL=PreviewShell.mocks.jsx.map

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CACd;IAAA,CAAC,cAAc,CAAC,AAAD,EACjB;EAAA,EAAE,eAAe,CAAC;IAClB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAG;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE;IAC3B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,gBAAgB;KAC1B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,iBAAiB;KAC3B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,SAAS;aACnB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,QAAQ;aAClB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,UAAU;KACpB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,WAAW;KACrB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,MAAM;KAChB;CACF,CAAC","sourcesContent":["import { MenuProps } from '@pega/cosmos-react-core';\n\nimport { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';\nimport { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';\n\nimport { StyledContainer } from './PreviewShell.styles';\n\nexport const footerTabsMockContent = [\n  <StyledContainer>\n    <EmptyStateDemo />\n  </StyledContainer>,\n  <ClipboardViewerDemo navigation={{ nodes: [] }} />\n];\n\nexport const footerTabsMock = [\n  { name: 'Tracer', id: '0' },\n  { name: 'Clipboard', id: '1' }\n];\n\nexport const footerMenuMock: MenuProps['items'] = [\n  {\n    id: '1',\n    primary: 'Dock to bottom'\n  },\n  {\n    id: '2',\n    primary: 'Separate window'\n  },\n  {\n    id: '3',\n    primary: 'More tools',\n    items: [\n      {\n        id: '3-1',\n        primary: 'Network'\n      },\n      {\n        id: '3-2',\n        primary: 'Performance'\n      },\n      {\n        id: '3-3',\n        primary: 'Memory'\n      },\n      {\n        id: '3-4',\n        primary: 'Application'\n      }\n    ]\n  },\n  {\n    id: '4',\n    primary: 'Settings'\n  },\n  {\n    id: '5',\n    primary: 'Shortcuts'\n  },\n  {\n    id: '6',\n    primary: 'Help'\n  }\n];\n"]}

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react';
+import { PreviewShellProps } from '@pega/cosmos-react-tools';
+import { StatusProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface PreviewShellStoryProps extends PreviewShellProps {
+    appName: PreviewShellProps['header']['appName'];
+    statusVariant: StatusProps['variant'];
+    statusText: string;
+    operatorName: PreviewShellProps['header']['operator']['avatar']['name'];
+    expandFooter: PreviewShellProps['footer']['expanded'];
+    onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];
+}
+export declare const PreviewShellSkeleton: Story<PreviewShellStoryProps>;
+export declare const PreviewShellDemo: Story<PreviewShellStoryProps>;
+//# sourceMappingURL=PreviewShell.stories.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAItD,wBAMU;AAEV,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAChD,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxE,YAAY,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IACtD,gBAAgB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CAgE9D,CAAC;AAuBF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAyE1D,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.stories.jsx

@@ -0,0 +1,153 @@
+import { action } from '@storybook/addon-actions';
+import { useEffect, useState } from 'react';
+import { PreviewShell } from '@pega/cosmos-react-tools';
+import { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';
+export default {
+    title: 'Tools/PreviewShell',
+    component: PreviewShell,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const PreviewShellSkeleton = (args) => {
+    const [tabContent, setTabContent] = useState('Tab 1 content');
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);
+    const [newWindow, setNewWindow] = useState(null);
+    return (<PreviewShell frameurl='' header={{
+            appName: args.appName,
+            status: {
+                variant: args.statusVariant,
+                children: args.statusText
+            },
+            operator: {
+                avatar: { name: args.operatorName || '' },
+                actions: [
+                    { primary: 'Profile', id: 'profile' },
+                    { primary: 'Settings', id: 'settings' },
+                    { primary: 'My applications', id: 'apps' },
+                    { primary: 'Help center', id: 'help' },
+                    { primary: 'Log out', id: 'logout' }
+                ],
+                name: args.operatorName
+            }
+        }} footer={{
+            tabs: footerTabsMock,
+            tabContent,
+            currentTabId,
+            onTabClick: (id) => {
+                setTabContent(`Tab ${+id + 1} content`);
+                setCurrentTabId(id);
+            },
+            expanded: args.expandFooter,
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: args.onNewWindowClick ??
+                (() => {
+                    const newWindowObj = window.open(`${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`);
+                    setNewWindow(newWindowObj);
+                    newWindowObj?.addEventListener('load', () => {
+                        newWindowObj?.addEventListener('beforeunload', () => {
+                            setNewWindow(null);
+                        });
+                        newWindowObj?.addEventListener('unload', () => {
+                            document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                        });
+                    });
+                }),
+            menu: { items: footerMenuMock }
+        }}/>);
+};
+PreviewShellSkeleton.args = {
+    appName: 'Title',
+    statusVariant: 'pending',
+    statusText: 'status',
+    operatorName: 'Cindy Turner',
+    expandFooter: true,
+    onNewWindowClick: undefined
+};
+PreviewShellSkeleton.argTypes = {
+    appName: { control: { type: 'text' } },
+    statusVariant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    },
+    statusText: { control: { type: 'text' } },
+    operatorName: { control: { type: 'text' } },
+    expandFooter: { control: { type: 'boolean' } },
+    onNewWindowClick: { table: { disable: true } }
+};
+export const PreviewShellDemo = (args) => {
+    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
+    const [newWindow, setNewWindow] = useState(null);
+    useEffect(() => {
+        if (newWindow?.self) {
+            newWindow.onload = () => {
+                newWindow.onbeforeunload = () => {
+                    setNewWindow(null);
+                };
+                newWindow.onunload = () => {
+                    document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                };
+            };
+        }
+    }, [newWindow]);
+    return (<PreviewShell frameurl={`${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`} header={{
+            appName: args.appName,
+            onClick: action('Clicked application name'),
+            status: {
+                variant: args.statusVariant,
+                children: args.statusText
+            },
+            operator: {
+                avatar: { name: args.operatorName },
+                actions: [
+                    { primary: 'Profile', id: 'profile' },
+                    { primary: 'Settings', id: 'settings' },
+                    { primary: 'My applications', id: 'apps' },
+                    { primary: 'Help center', id: 'help' },
+                    { primary: 'Log out', id: 'logout' }
+                ],
+                name: args.operatorName
+            }
+        }} footer={{
+            tabs: footerTabsMock,
+            currentTabId,
+            tabContent,
+            onTabClick: (id) => {
+                setTabContent(footerTabsMockContent[Number(id)]);
+                setCurrentTabId(id);
+            },
+            expanded: args.expandFooter,
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: () => {
+                setNewWindow(window.open(`${window.location.href.split('?')[0]}?id=tools-devtools--dev-tools-demo&args=&viewMode=story`, 'Dev Tools', 'popup=true,width=800,height=500'));
+            },
+            menu: { items: footerMenuMock }
+        }}/>);
+};
+PreviewShellDemo.args = {
+    appName: 'U+ Desk',
+    statusVariant: 'pending',
+    statusText: 'development',
+    operatorName: 'Cindy Turner',
+    expandFooter: false
+};
+PreviewShellDemo.argTypes = {
+    appName: { control: { type: 'text' } },
+    statusVariant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    },
+    statusText: { control: { type: 'text' } },
+    operatorName: { control: { type: 'text' } },
+    expandFooter: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=PreviewShell.stories.jsx.map

package/jsx/tools/PreviewShell/PreviewShell.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.stories.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useEffect, useState } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps } from '@pega/cosmos-react-core';\n\nimport { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';\n\nexport default {\n  title: 'Tools/PreviewShell',\n  component: PreviewShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PreviewShellStoryProps extends PreviewShellProps {\n  appName: PreviewShellProps['header']['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: PreviewShellProps['header']['operator']['avatar']['name'];\n  expandFooter: PreviewShellProps['footer']['expanded'];\n  onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];\n}\n\nexport const PreviewShellSkeleton: Story<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [tabContent, setTabContent] = useState('Tab 1 content');\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n\n  return (\n    <PreviewShell\n      frameurl=''\n      header={{\n        appName: args.appName,\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName || '' },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        }\n      }}\n      footer={{\n        tabs: footerTabsMock,\n        tabContent,\n        currentTabId,\n        onTabClick: (id: string) => {\n          setTabContent(`Tab ${+id + 1} content`);\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick:\n          args.onNewWindowClick ??\n          (() => {\n            const newWindowObj = window.open(\n              `${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`\n            );\n            setNewWindow(newWindowObj);\n            newWindowObj?.addEventListener('load', () => {\n              newWindowObj?.addEventListener('beforeunload', () => {\n                setNewWindow(null);\n              });\n              newWindowObj?.addEventListener('unload', () => {\n                (\n                  document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n                )?.focus();\n              });\n            });\n          }),\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: true,\n  onNewWindowClick: undefined\n};\n\nPreviewShellSkeleton.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  onNewWindowClick: { table: { disable: true } }\n};\n\nexport const PreviewShellDemo: Story<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n\n  useEffect(() => {\n    if (newWindow?.self) {\n      newWindow.onload = () => {\n        newWindow.onbeforeunload = () => {\n          setNewWindow(null);\n        };\n        newWindow.onunload = () => {\n          (\n            document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n          )?.focus();\n        };\n      };\n    }\n  }, [newWindow]);\n\n  return (\n    <PreviewShell\n      frameurl={`${\n        window.location.href.split('?')[0]\n      }?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`}\n      header={{\n        appName: args.appName,\n        onClick: action('Clicked application name'),\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        }\n      }}\n      footer={{\n        tabs: footerTabsMock,\n        currentTabId,\n        tabContent,\n        onTabClick: (id: string) => {\n          setTabContent(footerTabsMockContent[Number(id)]);\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick: () => {\n          setNewWindow(\n            window.open(\n              `${\n                window.location.href.split('?')[0]\n              }?id=tools-devtools--dev-tools-demo&args=&viewMode=story`,\n              'Dev Tools',\n              'popup=true,width=800,height=500'\n            )\n          );\n        },\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false\n};\n\nPreviewShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/tools/PreviewShell/PreviewShell.styles.d.ts

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

package/jsx/tools/PreviewShell/PreviewShell.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,mOAG3B,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Flex } from '@pega/cosmos-react-core';
+export const StyledContainer = styled(Flex) `
+  height: 100%;
+  width: 100vw;
+`;
+//# sourceMappingURL=PreviewShell.styles.js.map

package/jsx/tools/PreviewShell/PreviewShell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG1C,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nexport const StyledContainer = styled(Flex)`\n  height: 100%;\n  width: 100vw;\n`;\n"]}