@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/build/Workbench/Workbench.stories.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { treeHelpers, StandardTree, Flex, SearchInput, TextArea, defaultThemeProp, Input, Configuration, BuildTheme } from '@pega/cosmos-react-core';
+import { FlowModeller, Workbench } from '@pega/cosmos-react-build';
+import { DirectedGraph } from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Utils/Graph';
+import FlowModellerHelper from '@pega/cosmos-react-build/lib/components/FlowModeller/helper';
+import { nodeLibrary, nodeActions, exampleCRMNodesData as nodesData, exampleCRMConnectorsData as connectorsData } from '@pega/cosmos-react-demos/lib/build/FlowModeller/FlowModeller.mocks';
+import { sideList } from './Workbench.mocks';
+export default {
+    title: 'Build/Workbench',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const StyledSearch = styled.div(({ theme }) => {
+    return css `
+    margin: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing})
+      calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledSearch.defaultProps = defaultThemeProp;
+const StyledContainer = styled.div(() => {
+    return css `
+    height: 100vh;
+  `;
+});
+export const WorkbenchDemo = (args) => {
+    const [open, setOpen] = useState(false);
+    const [heading, setHeading] = useState('');
+    const [description, setDescription] = useState('');
+    const Content = () => {
+        const [currentNodeId, setCurrentNodeId] = useState();
+        const [allNodes, setAllNodes] = useState(sideList);
+        return (_jsxs(_Fragment, { children: [_jsx(SearchInput, {}, void 0), _jsx(StandardTree, { currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
+                        const clickedNode = treeHelpers.getNode(allNodes, id);
+                        setCurrentNodeId(id);
+                        // If a leaf node, just set to current
+                        if (!clickedNode?.nodes)
+                            return;
+                        setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+                            return {
+                                ...node,
+                                expanded: !node.expanded
+                            };
+                        }));
+                    } }, void 0)] }, void 0));
+    };
+    const ConfigContent = () => {
+        return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { defaultValue: heading }, void 0), _jsx(TextArea, { name: 'Description', required: true, label: 'Description', displayCharCount: true, maxLength: 300, value: description }, void 0)] }, void 0));
+    };
+    const FlowChartView = () => {
+        const [graphData, setGraphData] = useState({
+            nodes: nodesData,
+            connectors: connectorsData
+        });
+        const launchPropertyModal = (node) => {
+            setHeading(node.label);
+            setDescription(node.description || '');
+            setOpen(true);
+        };
+        const addNode = (nodeType, metaData) => {
+            const UpdatedData = FlowModellerHelper.addNode({
+                nodeType,
+                graphData,
+                metaData
+            });
+            if (UpdatedData) {
+                const newGraphData = UpdatedData;
+                setGraphData(newGraphData);
+            }
+        };
+        const selectNode = (nodeId) => {
+            const graph = new DirectedGraph(graphData);
+            const node = graph.getNode(nodeId);
+            launchPropertyModal(node);
+        };
+        return (_jsx(FlowModeller, { graphData: graphData, nodeLibrary: nodeLibrary, onNodeAdd: addNode, onNodeClick: selectNode, actions: nodeActions }, void 0));
+    };
+    const ExplorerContent = () => {
+        return _jsx(SearchInput, {}, void 0);
+    };
+    const utilityPanels = [
+        { title: 'Steps', id: '1', icon: 'plus', content: _jsx(Content, {}, void 0) },
+        { title: 'Explorer', id: '2', icon: 'app', content: _jsx(ExplorerContent, {}, void 0) },
+        { title: 'Views', id: '3', icon: 'headline', content: _jsx(Content, {}, void 0) }
+    ];
+    const toolbarActions = {
+        undo: { id: 'undo', disabled: false, onClick: () => { } },
+        redo: { id: 'redo', disabled: true, onClick: () => { } }
+    };
+    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Flex, { as: StyledContainer, children: _jsx(Workbench, { utilityPanels: args.hideSidePanel ? undefined : utilityPanels, initiallyVisiblePanelId: utilityPanels[0].id, toolbar: {
+                    zoom: args.zoom,
+                    toolbarActions
+                }, configurationPanel: {
+                    open,
+                    content: _jsx(ConfigContent, {}, void 0),
+                    header: heading,
+                    onDismiss: () => {
+                        setOpen(false);
+                    }
+                }, children: _jsx(FlowChartView, {}, void 0) }, void 0) }, void 0) }, void 0));
+};
+WorkbenchDemo.args = {
+    showActions: true,
+    hideSidePanel: false,
+    zoom: true
+};
+WorkbenchDemo.argTypes = {
+    showActions: { control: { type: 'boolean' } },
+    hideSidePanel: { control: { type: 'boolean' } },
+    zoom: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Workbench.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench.stories.js","sourceRoot":"","sources":["../../../src/build/Workbench/Workbench.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Flex,\n  SearchInput,\n  TextArea,\n  defaultThemeProp,\n  Input,\n  Configuration,\n  BuildTheme\n} from '@pega/cosmos-react-core';\nimport { FlowModeller, Workbench } from '@pega/cosmos-react-build';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport {\n  NodeProps,\n  NodeType\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Node/Node.types';\nimport {\n  DirectedGraph,\n  GraphData,\n  ConnectorProps\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Utils/Graph';\nimport FlowModellerHelper from '@pega/cosmos-react-build/lib/components/FlowModeller/helper';\nimport { AddNodeHandlerParams } from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Renderer.types';\nimport {\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData as nodesData,\n  exampleCRMConnectorsData as connectorsData\n} from '@pega/cosmos-react-demos/lib/build/FlowModeller/FlowModeller.mocks';\n\nimport { sideList } from './Workbench.mocks';\n\nexport default {\n  title: 'Build/Workbench',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface WorkbenchStoryProps {\n  showActions?: boolean;\n  hideSidePanel?: boolean;\n  zoom?: boolean;\n}\n\nconst StyledSearch = styled.div(({ theme }) => {\n  return css`\n    margin: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing})\n      calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSearch.defaultProps = defaultThemeProp;\nconst StyledContainer = styled.div(() => {\n  return css`\n    height: 100vh;\n  `;\n});\n\nexport const WorkbenchDemo: Story<WorkbenchStoryProps> = (args: WorkbenchStoryProps) => {\n  const [open, setOpen] = useState(false);\n  const [heading, setHeading] = useState('');\n  const [description, setDescription] = useState('');\n  const Content = () => {\n    const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n    const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(sideList);\n\n    return (\n      <>\n        <SearchInput />\n        <StandardTree\n          currentNodeId={currentNodeId}\n          nodes={allNodes}\n          onNodeClick={id => {\n            const clickedNode = treeHelpers.getNode(allNodes, id);\n            setCurrentNodeId(id);\n            // If a leaf node, just set to current\n            if (!clickedNode?.nodes) return;\n\n            setAllNodes(tree =>\n              treeHelpers.mapNode(tree, id, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </>\n    );\n  };\n\n  const ConfigContent = () => {\n    return (\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <Input defaultValue={heading} />\n        <TextArea\n          name='Description'\n          required\n          label='Description'\n          displayCharCount\n          maxLength={300}\n          value={description}\n        />\n      </Flex>\n    );\n  };\n\n  const FlowChartView = () => {\n    const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n      nodes: nodesData,\n      connectors: connectorsData\n    });\n\n    const launchPropertyModal = (node: NodeProps) => {\n      setHeading(node.label);\n      setDescription(node.description || '');\n      setOpen(true);\n    };\n\n    const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n      const UpdatedData = FlowModellerHelper.addNode({\n        nodeType,\n        graphData,\n        metaData\n      });\n      if (UpdatedData) {\n        const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n        setGraphData(newGraphData);\n      }\n    };\n\n    const selectNode = (nodeId: NodeProps['id']) => {\n      const graph = new DirectedGraph(graphData);\n      const node = graph.getNode(nodeId);\n      launchPropertyModal(node);\n    };\n\n    return (\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n      />\n    );\n  };\n\n  const ExplorerContent = () => {\n    return <SearchInput />;\n  };\n\n  const utilityPanels = [\n    { title: 'Steps', id: '1', icon: 'plus' as IconNames, content: <Content /> },\n    { title: 'Explorer', id: '2', icon: 'app' as IconNames, content: <ExplorerContent /> },\n    { title: 'Views', id: '3', icon: 'headline' as IconNames, content: <Content /> }\n  ];\n\n  const toolbarActions = {\n    undo: { id: 'undo', disabled: false, onClick: () => {} },\n    redo: { id: 'redo', disabled: true, onClick: () => {} }\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <Flex as={StyledContainer}>\n        <Workbench\n          utilityPanels={args.hideSidePanel ? undefined : utilityPanels}\n          initiallyVisiblePanelId={utilityPanels[0].id}\n          toolbar={{\n            zoom: args.zoom,\n            toolbarActions\n          }}\n          configurationPanel={{\n            open,\n            content: <ConfigContent />,\n            header: heading,\n            onDismiss: () => {\n              setOpen(false);\n            }\n          }}\n        >\n          <FlowChartView />\n        </Workbench>\n      </Flex>\n    </Configuration>\n  );\n};\n\nWorkbenchDemo.args = {\n  showActions: true,\n  hideSidePanel: false,\n  zoom: true\n};\n\nWorkbenchDemo.argTypes = {\n  showActions: { control: { type: 'boolean' } },\n  hideSidePanel: { control: { type: 'boolean' } },\n  zoom: { control: { type: 'boolean' } }\n};\n"]}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-unescaped-entities */
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { boolean, select } from '@storybook/addon-knobs';
+import { Card, CardContent, Text, Grid, Button, defaultThemeProp, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
+import { ConditionBuilder, FieldCondition, AtomicCondition, getInitConditionForLhs, isValidCondition, formatCondition } from '@pega/cosmos-react-condition-builder';
+import { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';
+const StyledGrid = styled(Grid) `
+  max-width: 60rem;
+`;
+const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+const StyledList = styled.ul `
+  padding-left: calc(4 * ${props => props.theme.base.spacing});
+`;
+StyledList.defaultProps = defaultThemeProp;
+export default {
+    title: 'Condition Builder/ConditionBuilder',
+    component: ConditionBuilder
+};
+export const DefaultBuilder = () => {
+    const translate = useI18n();
+    const [condition, setCondition] = useState(() => {
+        // If a previous condition exists on the session, use it
+        const prevCondition = sessionStorage.getItem('CBDemoCondition');
+        if (prevCondition !== null) {
+            // If an empty condition was submitted previously, start with an empty one
+            if (prevCondition === 'undefined') {
+                return undefined;
+            }
+            return JSON.parse(prevCondition);
+        }
+        return demoCondition;
+    });
+    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
+    const disallowNOT = boolean('Disallow NOT operator', false);
+    const renderInPopover = boolean('Render inside Popover', false);
+    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
+    // Set up content for rendering inside a Popover
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    const builderJsx = (_jsx(ConditionBuilder, { fields: demoFields, condition: condition, validComparators: validComparators, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: dateFunctions, disallowNOT: disallowNOT, onConditionSubmit: (c) => {
+            setCondition(c);
+            hidePopover();
+            sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time
+        } }, void 0));
+    return (_jsxs(StyledGrid, { container: {
+            cols: '1fr',
+            rowGap: 3
+        }, children: [!renderInPopover && builderJsx, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0)] }, void 0), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+};
+export const FieldConditionDemo = () => {
+    const translate = useI18n();
+    const [condition, setCondition] = useState(undefined);
+    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
+    const renderInPopover = boolean('Render inside Popover', false);
+    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
+    // Set up content for rendering inside a Popover
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    const builderJsx = (_jsx(FieldCondition, { targetField: 'lastActivityAt', fields: demoFields, condition: condition, validComparators: validComparators, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: dateFunctions, onSubmit: c => {
+            hidePopover();
+            setCondition(c);
+        } }, void 0));
+    return (_jsxs(StyledGrid, { container: {
+            cols: 'repeat(2, minmax(0, 1fr))',
+            justifyItems: 'stretch',
+            alignItems: 'start',
+            colGap: 4
+        }, children: [!renderInPopover && builderJsx, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+};
+const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
+    const setRhsTypes = new Set();
+    if (useLiteralRHSType)
+        setRhsTypes.add('LITERAL');
+    if (useFieldRHSType)
+        setRhsTypes.add('FIELD');
+    if (dateFunctions)
+        setRhsTypes.add('DATE_FUNCTION');
+    if (useRelativeDatesType)
+        setRhsTypes.add('RELATIVE_DATE');
+    return setRhsTypes;
+};
+export const AtomicConditionDemo = () => {
+    const translate = useI18n();
+    // Storybook knobs for configuration
+    const renderInPopover = boolean('Render inside Popover', false);
+    const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');
+    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
+    const useLiteralRHSType = boolean('Enable Literal RHS Type', true);
+    const useFieldRHSType = boolean('Enable Field RHS Type', true);
+    const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);
+    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
+    const validRHSTypes = convertRhsTypes(useLiteralRHSType, useFieldRHSType, useRelativeDatesRHSType, dateFunctions);
+    const showLhsAsLabel = boolean('Show LHS as Label', false);
+    // Story State object to simulate "submitting"
+    const [submitCondition, setSubmitCondition] = useState(undefined);
+    // State needed to use Popover in Story
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    // State handling needed to manage/use the AtomicCondition component
+    const [showErrorIndicators, setShowErrorIndicators] = useState(false);
+    const [condition, setCondition] = useState(
+    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField
+    () => submitCondition ||
+        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, validComparators, dateFunctions));
+    const handleSubmission = () => {
+        setShowErrorIndicators(false);
+        if (isValidCondition(condition, demoFields, true)) {
+            // Insert all "submit" logic to use the valid condition that you've created.
+            if (renderInPopover)
+                setIsOpen(false);
+            setSubmitCondition(condition);
+        }
+        else {
+            setShowErrorIndicators(true);
+        }
+    };
+    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: validComparators, dateFunctions: dateFunctions, onChange: c => setCondition(c), itemDirection: itemDirection, showLhsAsLabel: showLhsAsLabel, validRhsTypes: validRHSTypes }, void 0), _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit Condition" }, void 0)] }, void 0));
+    return (_jsxs(StyledGrid, { container: {
+            cols: 'repeat(2, minmax(0, 1fr))',
+            justifyItems: 'stretch',
+            alignItems: 'start',
+            colGap: 4
+        }, children: [!renderInPopover && atomicConditionJSX, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }, void 0) }, void 0)] }, void 0)), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition
+                                ? formatCondition({ condition: submitCondition }, demoFields, translate)
+                                : '(No condition)' }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', status: 'error', children: "validRhsTypes Prop Warning" }, void 0), _jsxs(Text, { children: ["There are LHS(Left Hand Side Field)/Comparator pairings that ", _jsx("u", { children: "require" }, void 0), " specific RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when limiting RHS value types using this prop. We ", _jsx("b", { children: "do not" }, void 0), " support limiting RHS field types to incompatible types and it will result in a validation error if you do so. The pairings referred to here are as follows:"] }, void 0)] }, void 0), _jsxs(StyledList, { children: [_jsxs("li", { children: ["BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), ' ', "a Field RHS"] }, void 0), _jsxs("li", { children: ["Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), " a Literal RHS (Comma separated list)"] }, void 0)] }, void 0), _jsx(Flex, { container: { direction: 'column' }, children: _jsxs(Text, { children: ["If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these comparators using the ", _jsx("b", { children: "validComparators" }, void 0), " prop."] }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=ConditionBuilder.stories.js.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { boolean, select } from '@storybook/addon-knobs';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Grid,\n  Button,\n  defaultThemeProp,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  DateFunctionsByType,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\n\nconst StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nconst StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n};\n\nexport const DefaultBuilder = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const disallowNOT = boolean('Disallow NOT operator', false);\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      disallowNOT={disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nexport const FieldConditionDemo = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nconst convertRhsTypes = (\n  useLiteralRHSType: boolean,\n  useFieldRHSType: boolean,\n  useRelativeDatesType: boolean,\n  dateFunctions?: DateFunctionsByType\n) => {\n  const setRhsTypes: Set<RHSType> = new Set<RHSType>();\n  if (useLiteralRHSType) setRhsTypes.add('LITERAL');\n  if (useFieldRHSType) setRhsTypes.add('FIELD');\n  if (dateFunctions) setRhsTypes.add('DATE_FUNCTION');\n  if (useRelativeDatesType) setRhsTypes.add('RELATIVE_DATE');\n  return setRhsTypes;\n};\n\nexport const AtomicConditionDemo = () => {\n  const translate = useI18n();\n  // Storybook knobs for configuration\n  const renderInPopover = boolean('Render inside Popover', false);\n  const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const useLiteralRHSType = boolean('Enable Literal RHS Type', true);\n  const useFieldRHSType = boolean('Enable Field RHS Type', true);\n  const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    useLiteralRHSType,\n    useFieldRHSType,\n    useRelativeDatesRHSType,\n    dateFunctions\n  );\n  const showLhsAsLabel = boolean('Show LHS as Label', false);\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={validComparators}\n        dateFunctions={dateFunctions}\n        onChange={c => setCondition(c)}\n        itemDirection={itemDirection}\n        showLhsAsLabel={showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && atomicConditionJSX}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n"]}

package/lib/core/AppShell/AppShell.mocks.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledMainContent } from './AppShell.styles';
+export const defaultLinks = [
+    {
+        id: '01',
+        name: 'Home',
+        href: '#home',
+        icon: 'home-solid',
+        active: true
+    },
+    {
+        id: '02',
+        name: 'My Dashboard',
+        href: '#dashboard',
+        icon: 'gauge-solid'
+    },
+    {
+        id: '03',
+        name: 'Collaboration',
+        href: '#collaboration',
+        icon: 'social-solid',
+        links: [
+            { id: '3-01', name: 'Spaces', href: '#spaces' },
+            { id: '3-02', name: 'Documents', href: '#documents' }
+        ]
+    },
+    {
+        id: '04',
+        name: 'Bugs',
+        href: '#bugs',
+        icon: 'users-solid'
+    },
+    {
+        id: '05',
+        name: 'Epics',
+        href: '#epics',
+        icon: 'book-solid'
+    },
+    {
+        id: '06',
+        name: 'Goals',
+        href: '#goals',
+        icon: 'analytics-good'
+    },
+    {
+        id: '07',
+        name: 'More',
+        href: '#more',
+        icon: 'more-alt',
+        active: false,
+        links: [
+            { id: '7-01', name: 'Item A', href: '#itemA' },
+            { id: '7-02', name: 'Option 1', href: '#option1' }
+        ]
+    }
+];
+export const defaultNotifications = [
+    {
+        id: '123',
+        primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
+        visual: _jsx(Avatar, { name: 'Dean Thomas' }, void 0),
+        unread: true
+    },
+    {
+        id: '456',
+        primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
+        visual: _jsx(Avatar, { name: 'Seth DeAngelo' }, void 0),
+        unread: true
+    },
+    {
+        id: '789',
+        primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
+        visual: _jsx(Avatar, { name: 'Janet Moore' }, void 0),
+        unread: true
+    },
+    {
+        id: '000',
+        primary: 'You have been awarded Employee of the Month! Congratulations!',
+        secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],
+        unread: true
+    }
+];
+export const defaultRecents = [
+    {
+        id: '123',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '456',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '789',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    },
+    {
+        id: '111',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '222',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '333',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    },
+    {
+        id: '444',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '555',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '666',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    }
+];
+export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }, void 0) }, void 0) }, void 0) }, void 0));
+export const operatorData = {
+    avatar: _jsx(Avatar, { name: 'Cindy Turner' }, void 0),
+    actions: [
+        { text: 'Profile', id: 'profile' },
+        { text: 'Settings', id: 'settings' },
+        { text: 'My applications', id: 'apps' },
+        { text: 'Help center', id: 'help' },
+        { text: 'Log out', id: 'logout' }
+    ],
+    name: 'Cindy Turner'
+};
+//# sourceMappingURL=AppShell.mocks.js.map

package/lib/core/AppShell/AppShell.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}

package/lib/core/AppShell/AppShell.stories.d.ts

@@ -3,6 +3,7 @@ import { AppShellProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface AppShellStoryProps {
+    /** Demo props */
     main?: AppShellProps['main'];
     appInfo?: AppShellProps['appInfo'];
     banners?: AppShellProps['banners'];
@@ -12,6 +13,7 @@ interface AppShellStoryProps {
     recentItems?: any[];
     utils?: AppShellProps['utils'];
     onLinkClick?: (name: string) => void;
+    /** Storybook controls */
     appName?: AppShellProps['appInfo']['appName'];
     portalName?: AppShellProps['appInfo']['portalName'];
     href?: AppShellProps['appInfo']['href'];

package/lib/core/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAkBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAkBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC"}