@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/build/PageTemplates/GalleryPage.stories.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { createUID, range, Status } from '@pega/cosmos-react-core';
+import { AppShell, GalleryPage } from '@pega/cosmos-react-build';
+export default {
+    title: 'Build/GalleryPage',
+    component: GalleryPage,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const appHeader = {
+    brand: {
+        name: 'AppStudioX'
+    },
+    utils: {
+        avatar: { name: 'Alan' },
+        search: {
+            placeholder: 'Search anything, anywhere…'
+        },
+        branchName: 'test',
+        actions: [
+            {
+                primary: 'Switch branch',
+                id: 'switchbranch',
+                onClick: () => { }
+            },
+            {
+                primary: 'Create branch',
+                id: 'createbranch',
+                onClick: () => { }
+            }
+        ]
+    },
+    links: [
+        {
+            id: '1',
+            name: 'Applications',
+            onClick: () => { }
+        },
+        {
+            id: '2',
+            name: 'Shared resources',
+            onClick: () => { }
+        },
+        {
+            id: '3',
+            name: 'Teams',
+            onClick: () => { }
+        },
+        {
+            id: '4',
+            name: 'AI & Analytics',
+            onClick: () => { }
+        },
+        {
+            id: '5',
+            name: 'Deploy',
+            onClick: () => { }
+        }
+    ]
+};
+const getOverviewCardData = () => {
+    return range(1, 14).map(num => ({
+        id: createUID(),
+        title: num % 2 !== 0
+            ? `Application ${num}`
+            : `Application ${num} with long name to simulate ellipsis`,
+        description: num % 2 !== 0
+            ? `Description for application with id ${num}`
+            : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,
+        meta: [_jsx(Status, { variant: 'success', children: "in production" }, void 0), '1.0.0'],
+        visual: num % 2 !== 0
+            ? {
+                icon: {
+                    name: 'phone-in-solid',
+                    bgColor: '#0ac7c8'
+                }
+            }
+            : {
+                image: {
+                    src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
+                    alt: 'Image for the card summary'
+                }
+            }
+    }));
+};
+const GalleryPageDemo = ({ args }) => (_jsx(GalleryPage, { heading: args.bannerHeading, description: args.bannerDescription, image: {
+        src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
+        alt: 'Image for the banner'
+    }, items: args.showEmptyState ? [] : getOverviewCardData(), emptyState: {
+        heading: args.emptyStateHeading,
+        description: args.emptyStateDescription
+    }, action: {
+        text: 'New application',
+        onClick: action('Clicked New application button')
+    }, onItemClick: action('Clicked interactive card') }, void 0));
+export const AppShellWithGalleryPage = (args) => {
+    return (_jsx(AppShell, { navigation: {
+            nodes: [],
+            currentNodeId: '1',
+            onNodeClick: () => { }
+        }, appInfo: {
+            text: 'U+ Desk',
+            visual: {
+                icon: {
+                    name: 'phone-in-solid',
+                    bgColor: '#0ac7c8'
+                }
+            }
+        }, appHeader: appHeader, main: _jsx(GalleryPageDemo, { args: args }, void 0), hideNav: true }, void 0));
+};
+AppShellWithGalleryPage.args = {
+    bannerHeading: 'Applications',
+    bannerDescription: 'Edit or create new applications',
+    showEmptyState: false,
+    emptyStateHeading: 'Create your first application',
+    emptyStateDescription: "You're on your way to creating your first professional application."
+};
+AppShellWithGalleryPage.argTypes = {
+    bannerHeading: { control: { type: 'text' } },
+    bannerDescription: { control: { type: 'text' } },
+    showEmptyState: { control: { type: 'boolean' } },
+    emptyStateHeading: { control: { type: 'text' } },
+    emptyStateDescription: { control: { type: 'text' } }
+};
+//# sourceMappingURL=GalleryPage.stories.js.map

package/lib/build/PageTemplates/GalleryPage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { FC } from 'react';\n\nimport { createUID, range, Status } from '@pega/cosmos-react-core';\nimport { AppShell, GalleryPage } from '@pega/cosmos-react-build';\n\nexport default {\n  title: 'Build/GalleryPage',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  bannerHeading: string;\n  bannerDescription: string;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n}\n\nconst appHeader = {\n  brand: {\n    name: 'AppStudioX'\n  },\n  utils: {\n    avatar: { name: 'Alan' },\n    search: {\n      placeholder: 'Search anything, anywhere…'\n    },\n    branchName: 'test',\n    actions: [\n      {\n        primary: 'Switch branch',\n        id: 'switchbranch',\n        onClick: () => {}\n      },\n      {\n        primary: 'Create branch',\n        id: 'createbranch',\n        onClick: () => {}\n      }\n    ]\n  },\n  links: [\n    {\n      id: '1',\n      name: 'Applications',\n      onClick: () => {}\n    },\n    {\n      id: '2',\n      name: 'Shared resources',\n      onClick: () => {}\n    },\n    {\n      id: '3',\n      name: 'Teams',\n      onClick: () => {}\n    },\n    {\n      id: '4',\n      name: 'AI & Analytics',\n      onClick: () => {}\n    },\n    {\n      id: '5',\n      name: 'Deploy',\n      onClick: () => {}\n    }\n  ]\n};\n\nconst getOverviewCardData = () => {\n  return range(1, 14).map(num => ({\n    id: createUID(),\n    title:\n      num % 2 !== 0\n        ? `Application ${num}`\n        : `Application ${num} with long name to simulate ellipsis`,\n    description:\n      num % 2 !== 0\n        ? `Description for application with id ${num}`\n        : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,\n    meta: [<Status variant='success'>in production</Status>, '1.0.0'],\n    visual:\n      num % 2 !== 0\n        ? {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        : {\n            image: {\n              src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n              alt: 'Image for the card summary'\n            }\n          }\n  }));\n};\n\nconst GalleryPageDemo: FC<{ args: GalleryPageArgs }> = ({ args }) => (\n  <GalleryPage\n    heading={args.bannerHeading}\n    description={args.bannerDescription}\n    image={{\n      src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n      alt: 'Image for the banner'\n    }}\n    items={args.showEmptyState ? [] : getOverviewCardData()}\n    emptyState={{\n      heading: args.emptyStateHeading,\n      description: args.emptyStateDescription\n    }}\n    action={{\n      text: 'New application',\n      onClick: action('Clicked New application button')\n    }}\n    onItemClick={action('Clicked interactive card')}\n  />\n);\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  return (\n    <AppShell\n      navigation={{\n        nodes: [],\n        currentNodeId: '1',\n        onNodeClick: () => {}\n      }}\n      appInfo={{\n        text: 'U+ Desk',\n        visual: {\n          icon: {\n            name: 'phone-in-solid',\n            bgColor: '#0ac7c8'\n          }\n        }\n      }}\n      appHeader={appHeader}\n      main={<GalleryPageDemo args={args} />}\n      hideNav\n    />\n  );\n};\n\nAppShellWithGalleryPage.args = {\n  bannerHeading: 'Applications',\n  bannerDescription: 'Edit or create new applications',\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n  bannerHeading: { control: { type: 'text' } },\n  bannerDescription: { control: { type: 'text' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.stories.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useReducer, useRef, useContext } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Banner, treeHelpers, StandardTree, Configuration, Modal, ModalManagerContext, BuildTheme, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, ToasterContext, Text, Actions } from '@pega/cosmos-react-core';
+import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { AppShell, TabbedPage, OneColumnPage } from '@pega/cosmos-react-build';
+import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
+import { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';
+import { WorkbenchDemo } from '@pega/cosmos-react-demos/lib/build/Workbench/Workbench.stories';
+import { appExplorerMenuList, branchesMenuList, recordMenuList, treeList } from '@pega/cosmos-react-demos/lib/build/AppShell/AppShell.mocks';
+export default {
+    title: 'Build/PageTemplates',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+// Get initial field properties
+const initFields = () => {
+    const common = { value: undefined, status: undefined };
+    return [
+        {
+            ...common,
+            name: 'name',
+            required: true,
+            error: 'Please enter first and last name',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^[a-z]+\s[a-z]+$/i.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'email',
+            required: true,
+            error: 'Enter a @pega.com address',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^\S+@pega\.com$/.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'notes',
+            required: true,
+            help: 'See how fast you can type 20 characters go',
+            error: 'You need to tell us more than 20 characters',
+            validator() {
+                if (!this.value)
+                    return false;
+                return this.value.length >= 20;
+            }
+        }
+    ];
+};
+// Handles setting of state for all fields
+const fieldReducer = (fields, { target, type }) => {
+    return fields.map(field => {
+        if (field.name === target.name) {
+            field.value = target.value;
+            if (type === 'blur' || field.status === 'error') {
+                if ((field.required || field.value) && !field.validator()) {
+                    field.status = 'error';
+                    field.info = field.error;
+                }
+                else {
+                    field.status = undefined;
+                    field.info = field.help;
+                }
+            }
+        }
+        return field;
+    });
+};
+const OneColumnForm = () => {
+    const editorRef = useRef(null);
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useContext(ToasterContext);
+    const name = fields.find(field => field.name === 'name');
+    const email = fields.find(field => field.name === 'email');
+    const notes = fields.find(field => field.name === 'notes');
+    if (!name || !email || !notes)
+        return null;
+    const canSubmit = fields.every(field => field.value && field.validator());
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
+                    push({ content: 'Form cancelled!' });
+                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsxs(Form, { actions: actions, onSubmit: (e) => {
+            e.preventDefault();
+            push({ content: 'Form submitted!' });
+        }, style: { maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h4', as: 'h4', children: "Demo Form" }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0), _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No...no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal..." }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0), _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+                            'inline-styling',
+                            'headers',
+                            'tables',
+                            'links',
+                            'images',
+                            'lists',
+                            'cut-copy-paste',
+                            'indentation'
+                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0), _jsx(FileInputDemo, {}, void 0)] }, void 0)] }, void 0));
+};
+const AppShellWithMenuNavigation = (args) => {
+    const [currentNodeId, setCurrentNodeId] = useState();
+    const [allNodes, setAllNodes] = useState(treeList);
+    const onNodeClick = (id) => {
+        const clickedNode = treeHelpers.getNode(allNodes, id);
+        if (!clickedNode?.nodes) {
+            setCurrentNodeId(id);
+            return;
+        }
+        setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+            return {
+                ...node,
+                expanded: !node.expanded
+            };
+        }));
+        return (_jsx(StandardTree, { nodes: recordMenuList, onNodeClick: onNodeClick, currentNodeId: currentNodeId }, void 0));
+    };
+    const appHeader = {
+        brand: {
+            name: 'AppStudioX'
+        },
+        utils: {
+            avatar: { name: 'Alan' },
+            search: {
+                placeholder: 'Search anything, anywhere'
+            },
+            branchName: 'test',
+            actions: [
+                {
+                    primary: 'Switch branch',
+                    id: 'switchbranch',
+                    onClick: action('Clicked switchbranch')
+                },
+                {
+                    primary: 'Create branch',
+                    id: 'createbranch',
+                    onClick: action('Clicked createbranch')
+                }
+            ]
+        },
+        links: [
+            {
+                id: '1',
+                name: 'Applications',
+                onClick: action('Clicked Applications')
+            },
+            {
+                id: '2',
+                name: 'Shared resources',
+                onClick: action('Clicked Shared resources')
+            },
+            {
+                id: '3',
+                name: 'Teams',
+                onClick: () => { }
+            },
+            {
+                id: '4',
+                name: 'AI & Analytics',
+                onClick: action('Clicked AI & Analytics')
+            },
+            {
+                id: '5',
+                name: 'Deploy',
+                onClick: action('Clicked Deploy')
+            }
+        ]
+    };
+    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(AppShell, { main: args.main, appHeader: appHeader, hideNav: args.hideNavigation, appInfo: {
+                text: 'xCompass',
+                visual: {
+                    icon: {
+                        name: 'compass',
+                        bgColor: '#20AA50'
+                    }
+                }
+            }, navigation: {
+                nodes: allNodes,
+                currentNodeId,
+                onNodeClick
+            }, utils: {
+                onItemClick: id => {
+                    if (id === 'explorer') {
+                        setAllNodes(appExplorerMenuList);
+                    }
+                    if (id === 'branches') {
+                        setAllNodes(branchesMenuList);
+                    }
+                    if (id === 'records') {
+                        setAllNodes(recordMenuList);
+                    }
+                },
+                items: [
+                    {
+                        label: 'App Explorer',
+                        id: 'explorer'
+                    },
+                    {
+                        label: 'Branches',
+                        id: 'branches'
+                    },
+                    {
+                        label: 'Records',
+                        id: 'records'
+                    }
+                ],
+                drawer: {
+                    onBeforeClose: () => setAllNodes(treeList)
+                }
+            } }, void 0) }, void 0));
+};
+export const PageTemplatesDemo = (args) => {
+    const [currentTabId, setCurrentTabId] = useState('accounts');
+    const [content, setContent] = useState(_jsx(_Fragment, { children: _jsx(TableDemo, {}, void 0) }, void 0));
+    const { create } = useContext(ModalManagerContext);
+    const getPath = () => {
+        if (args.showBreadcrumbs) {
+            const path = args.pathData;
+            return path
+                ? path.split(',').map((crumb, i) => {
+                    // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string
+                    return {
+                        id: crumb,
+                        primary: crumb,
+                        href: i < 3 ? `#${crumb.replace(/\s/g, '-')}` : undefined
+                    };
+                })
+                : [];
+        }
+    };
+    const actions = args.showActions ? (_jsxs(Flex, { container: true, children: [_jsx(Button, { variant: 'primary', children: "Save" }, void 0), _jsx(Actions, { menuAt: 2, items: [
+                    {
+                        id: '1',
+                        text: 'Page action 1'
+                    },
+                    {
+                        id: '2',
+                        text: 'Page action 2'
+                    }
+                ] }, void 0)] }, void 0)) : undefined;
+    const banners = args.showBanners ? (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0)) : undefined;
+    const mainContent = (_jsx(Flex, { container: true, children: _jsx(OneColumnForm, {}, void 0) }, void 0));
+    const modal = () => (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Modal, { heading: 'This is the Modal heading', autoWidth: false, center: true, stretch: false, children: _jsx(Text, { children: "This is the content of the Modal." }, void 0) }, void 0) }, void 0));
+    const pageTemplateProps = useMemo(() => {
+        const branchName = args.showBranch ? args.branchName : '';
+        const status = args.showBranch
+            ? {
+                type: args.statusVariant,
+                label: args.statusLabel
+            }
+            : undefined;
+        return {
+            title: args.title,
+            actions,
+            banners,
+            path: getPath(),
+            branchName,
+            status,
+            metadata: [
+                { 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' }
+            ],
+            additionalInfo: {
+                title: 'Interest rate',
+                description: 'Interest rate for the savings account',
+                fields: [
+                    {
+                        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: 'Branch',
+                        value: 'xCompass (Main)'
+                    },
+                    {
+                        id: '5',
+                        name: 'Application',
+                        value: 'XCompass'
+                    }
+                ],
+                onEdit: args.showEditButton
+                    ? (e) => {
+                        args.onEdit?.(e);
+                        create(modal);
+                    }
+                    : undefined
+            }
+        };
+    }, [args]);
+    let demo;
+    switch (args.template) {
+        case 'one column':
+            demo = _jsx(OneColumnPage, { a: mainContent, ...pageTemplateProps }, void 0);
+            break;
+        case 'tabbed':
+        default:
+            demo = (_jsx(TabbedPage, { a: content, tabs: {
+                    tabs: [
+                        { id: 'accounts', name: 'Accounts' },
+                        { id: 'form', name: 'Form' },
+                        { id: 'workbench', name: 'Workbench' }
+                    ],
+                    type: 'horizontal',
+                    currentTabId,
+                    onTabClick: id => {
+                        setCurrentTabId(id);
+                        // eslint-disable-next-line sonarjs/no-nested-switch
+                        switch (id) {
+                            case 'form':
+                                setContent(_jsx(Flex, { container: true, children: _jsx(OneColumnForm, {}, void 0) }, void 0));
+                                break;
+                            case 'accounts':
+                                setContent(_jsx(TableDemo, {}, void 0));
+                                break;
+                            case 'workbench':
+                                setContent(_jsx(WorkbenchDemo, {}, void 0));
+                                break;
+                            default:
+                        }
+                    }
+                }, ...pageTemplateProps }, void 0));
+            break;
+    }
+    return (_jsx(AppShellWithMenuNavigation, { main: demo, hideNavigation: args.hideNavigation }, void 0));
+};
+PageTemplatesDemo.args = {
+    template: 'tabbed',
+    title: 'Interest rate',
+    subTitle: 'Uplus-Data-Integrations',
+    hideNavigation: false,
+    showBreadcrumbs: true,
+    pathData: 'Home,xCompass,Fields',
+    showActions: true,
+    showBanners: false,
+    showBranch: true,
+    statusVariant: 'pending',
+    statusLabel: 'private change',
+    branchName: 'xCompass (Main)',
+    showEditButton: true,
+    onEdit: action('Clicked edit button in popover')
+};
+PageTemplatesDemo.argTypes = {
+    template: {
+        options: ['one column', 'tabbed'],
+        control: { type: 'select' }
+    },
+    subTitle: { control: { type: 'text' } },
+    title: { control: { type: 'text' } },
+    hideNavigation: { control: { type: 'boolean' } },
+    showBreadcrumbs: { control: { type: 'boolean' } },
+    pathData: { control: { type: 'text' } },
+    showActions: { control: { type: 'boolean' } },
+    showBanners: { control: { type: 'boolean' } },
+    showBranch: { control: { type: 'boolean' } },
+    statusVariant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    },
+    statusLabel: { control: { type: 'text' } },
+    branchName: { control: { type: 'text' } },
+    showEditButton: { control: { type: 'boolean' } },
+    onEdit: { table: { disable: true } }
+};
+//# sourceMappingURL=PageTemplates.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,QAAQ,EACR,OAAO,EAIP,UAAU,EACV,MAAM,EACN,UAAU,EAEX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,MAAM,EACN,MAAM,EAEN,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EAER,cAAc,EACd,IAAI,EACJ,OAAO,EAGR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAiB,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,MAAM,0DAA0D,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,gEAAgE,CAAC;AAC/F,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACT,MAAM,4DAA4D,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAsCV,+BAA+B;AAC/B,MAAM,UAAU,GAAG,GAAY,EAAE;IAC/B,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IACvD,OAAO;QACL;YACE,GAAG,MAAM;YACT,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,kCAAkC;YACzC,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,2BAA2B;YAClC,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,6CAA6C;YACpD,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC;YACjC,CAAC;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,0CAA0C;AAC1C,MAAM,YAAY,GAAG,CACnB,MAAe,EACf,EACE,MAAM,EACN,IAAI,EAGgD,EACtD,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACxB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,EAAE;YAC9B,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,EAAE;gBAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE;oBACzD,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;oBACvB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;iBAC1B;qBAAM;oBACL,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;oBACzB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;iBACzB;aACF;SACF;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAE3C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAE1E,MAAM,OAAO,GAAG,CACd,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;gBACvC,CAAC,+BAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,CAAC,SAAS,+BAEjE,YACR,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;QACvC,CAAC,EACD,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,kCAEnB,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACjE,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,qBAAqB,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAClE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAC/D,YAAY,EAAC,KAAK,WAClB,EAEF,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,qBAAqB,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAClE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAC/D,YAAY,EAAC,KAAK,WAClB,EAEF,KAAC,aAAa,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,wBAAwB,YACzD,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC/D,KAAC,QAAQ,IAEP,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,IAF7D,MAAM,CAGX,CACH,CAAC,WACY,EAEhB,KAAC,gBAAgB,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sCAAsC,YAC3E,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACxC,KAAC,WAAW,IAEV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,IAF7D,MAAM,CAGX,CACH,CAAC,WACe,EAEnB,MAAC,MAAM,IAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,0BAA0B,aACzE,KAAC,MAAM,yCAAwB,EAC/B,KAAC,MAAM,gCAAe,EACtB,KAAC,MAAM,mCAAkB,EACzB,KAAC,MAAM,gCAAe,YACf,EAET,KAAC,QAAQ,IACP,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAC9B,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EACrE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,WAC/D,EACF,KAAC,cAAc,IACb,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,oEAAoE,EACzE,OAAO,EAAE;4BACP,gBAAgB;4BAChB,SAAS;4BACT,QAAQ;4BACR,OAAO;4BACP,QAAQ;4BACR,OAAO;4BACP,gBAAgB;4BAChB,aAAa;yBACd,EACD,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,SAAS,WACd,EAEF,KAAC,aAAa,aAAG,YACZ,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,IAAmB,EAAE,EAAE;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA6B,QAAQ,CAAC,CAAC;IAE/E,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,EAAE;QACjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAEtD,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE;YACvB,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO;SACR;QAED,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YACnC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;aACzB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;QAEF,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,WAC5B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE;YACL,IAAI,EAAE,YAAY;SACnB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACxB,MAAM,EAAE;gBACN,WAAW,EAAE,2BAA2B;aACzC;YACD,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE;gBACP;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;iBACxC;gBACD;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;iBACxC;aACF;SACF;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;aACxC;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,OAAO,EAAE,MAAM,CAAC,0BAA0B,CAAC;aAC5C;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;aAC1C;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC;aAClC;SACF;KACF,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,UAAU,YAC9B,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,SAAS;qBACnB;iBACF;aACF,EACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ;gBACf,aAAa;gBACb,WAAW;aACZ,EACD,KAAK,EAAE;gBACL,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,WAAW,CAAC,mBAAmB,CAAC,CAAC;qBAClC;oBAED,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,WAAW,CAAC,gBAAgB,CAAC,CAAC;qBAC/B;oBAED,IAAI,EAAE,KAAK,SAAS,EAAE;wBACpB,WAAW,CAAC,cAAc,CAAC,CAAC;qBAC7B;gBACH,CAAC;gBACD,KAAK,EAAE;oBACL;wBACE,KAAK,EAAE,cAAc;wBACrB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,UAAU;wBACjB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,EAAE,EAAE,SAAS;qBACd;iBACF;gBACD,MAAM,EAAE;oBACN,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC;iBAC3C;aACF,WACD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAC/E,IAA6C,EAC7C,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,4BACE,KAAC,SAAS,aAAG,WACZ,CACJ,CAAC;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;YAE3B,OAAO,IAAI;gBACT,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,CAAC,EAAE,EAAE;oBACvC,wGAAwG;oBACxG,OAAO;wBACL,EAAE,EAAE,KAAK;wBACT,OAAO,EAAE,KAAK;wBACd,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAK,KAAa,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;qBACnE,CAAC;gBACJ,CAAC,CAAC;gBACJ,CAAC,CAAC,EAAE,CAAC;SACR;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAC/D,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,6BAAc,EACvC,KAAC,OAAO,IACN,MAAM,EAAE,CAAC,EACT,KAAK,EAAE;oBACL;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,eAAe;qBACtB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,eAAe;qBACtB;iBACF,WACD,YACG,CACR,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAC/D,KAAC,MAAM,IACL,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,iDAAiD,CAAC,WAC7D,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,WAAW,GAAG,CAClB,KAAC,IAAI,IAAC,SAAS,kBACb,KAAC,aAAa,aAAG,WACZ,CACR,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,KAAC,aAAa,IAAC,KAAK,EAAE,UAAU,YAC9B,KAAC,KAAK,IAAC,OAAO,EAAC,2BAA2B,EAAC,SAAS,EAAE,KAAK,EAAE,MAAM,QAAC,OAAO,EAAE,KAAK,YAChF,KAAC,IAAI,4DAAyC,WACxC,WACM,CACjB,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU;YAC5B,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,KAAK,EAAE,IAAI,CAAC,WAAW;aACxB;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO;YACP,OAAO;YACP,IAAI,EAAE,OAAO,EAAE;YACf,UAAU;YACV,MAAM;YACN,QAAQ,EAAE;gBACR,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE;gBAC9C,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;gBAC9C;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,sCAAsC;iBAC9C;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;aACpD;YACD,cAAc,EAAE;gBACd,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,uCAAuC;gBACpD,MAAM,EAAE;oBACN;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,IAAI;wBACV,KAAK,EAAE,cAAc;qBACtB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,OAAO;qBACf;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,OAAO;wBACb,KAAK,EAAE,sCAAsC;qBAC9C;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,iBAAiB;qBACzB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,aAAa;wBACnB,KAAK,EAAE,UAAU;qBAClB;iBACF;gBACD,MAAM,EAAE,IAAI,CAAC,cAAc;oBACzB,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;wBACnC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;wBACjB,MAAM,CAAC,KAAK,CAAC,CAAC;oBAChB,CAAC;oBACH,CAAC,CAAC,SAAS;aACd;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,IAAI,CAAC;IAET,QAAQ,IAAI,CAAC,QAAQ,EAAE;QACrB,KAAK,YAAY;YACf,IAAI,GAAG,KAAC,aAAa,IAAC,CAAC,EAAE,WAAW,KAAM,iBAAiB,WAAI,CAAC;YAChE,MAAM;QACR,KAAK,QAAQ,CAAC;QACd;YACE,IAAI,GAAG,CACL,KAAC,UAAU,IACT,CAAC,EAAE,OAAO,EACV,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;wBACpC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;wBAC5B,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;qBACvC;oBACD,IAAI,EAAE,YAAY;oBAClB,YAAY;oBACZ,UAAU,EAAE,EAAE,CAAC,EAAE;wBACf,eAAe,CAAC,EAAE,CAAC,CAAC;wBACpB,oDAAoD;wBACpD,QAAQ,EAAE,EAAE;4BACV,KAAK,MAAM;gCACT,UAAU,CACR,KAAC,IAAI,IAAC,SAAS,kBACb,KAAC,aAAa,aAAG,WACZ,CACR,CAAC;gCACF,MAAM;4BACR,KAAK,UAAU;gCACb,UAAU,CAAC,KAAC,SAAS,aAAG,CAAC,CAAC;gCAC1B,MAAM;4BACR,KAAK,WAAW;gCACd,UAAU,CAAC,KAAC,aAAa,aAAG,CAAC,CAAC;gCAC9B,MAAM;4BACR,QAAQ;yBACT;oBACH,CAAC;iBACF,KACG,iBAAiB,WACrB,CACH,CAAC;YACF,MAAM;KACT;IAED,OAAO,CACL,KAAC,0BAA0B,IACzB,IAAI,EAAE,IAA6B,EACnC,cAAc,EAAE,IAAI,CAAC,cAAc,WACnC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE,yBAAyB;IACnC,cAAc,EAAE,KAAK;IACrB,eAAe,EAAE,IAAI;IACrB,QAAQ,EAAE,sBAAsB;IAChC,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,iBAAiB;IAC7B,cAAc,EAAE,IAAI;IACpB,MAAM,EAAE,MAAM,CAAC,gCAAgC,CAAC;CACjD,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE;QACR,OAAO,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC;QACjC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,aAAa,EAAE;QACb,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACrC,CAAC","sourcesContent":["// cSpell:words XPTI\nimport { Meta, Story } from '@storybook/react';\nimport {\n  useState,\n  useMemo,\n  FormEvent,\n  ChangeEvent,\n  FocusEvent,\n  useReducer,\n  useRef,\n  useContext,\n  MouseEvent\n} from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Banner,\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Configuration,\n  Modal,\n  ModalManagerContext,\n  BuildTheme,\n  Flex,\n  Form,\n  Input,\n  CheckboxGroup,\n  RadioButtonGroup,\n  RadioButton,\n  Checkbox,\n  Select,\n  Option,\n  TextArea,\n  FormControlProps,\n  ToasterContext,\n  Text,\n  Actions,\n  StatusProps,\n  PageTemplateProps\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { AppShell, AppShellProps, TabbedPage, OneColumnPage } from '@pega/cosmos-react-build';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';\nimport { WorkbenchDemo } from '@pega/cosmos-react-demos/lib/build/Workbench/Workbench.stories';\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  recordMenuList,\n  treeList\n} from '@pega/cosmos-react-demos/lib/build/AppShell/AppShell.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface PageTemplatesStoryProps extends PageTemplateProps {\n  template:\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n  subTitle?: string;\n  showBranch?: boolean;\n  branchName?: string;\n  statusVariant?: StatusProps['variant'];\n  statusLabel: string;\n  showEditButton?: boolean;\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\ninterface AppShellStory {\n  main: AppShellProps['main'];\n  hideNavigation?: boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nconst OneColumnForm = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Form\n      actions={actions}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ maxWidth: '37.5rem' }}\n    >\n      <Text variant='h4' as='h4'>\n        Demo Form\n      </Text>\n      <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <CheckboxGroup name='visited' label='Places you have worked'>\n          {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n            <Checkbox\n              key={office}\n              label={office}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </CheckboxGroup>\n\n        <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n          {['Yes', \"No...no I don't\"].map(option => (\n            <RadioButton\n              key={option}\n              label={option}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </RadioButtonGroup>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal...</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <TextArea\n          name='notes'\n          required={notes.required}\n          label='Meeting Notes'\n          status={notes.status}\n          info={notes.info || notes.help}\n          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n        <RichTextEditor\n          label='Detailed meeting notes'\n          info='The rich text editor can be used in forms, comments, and documents'\n          toolbar={[\n            'inline-styling',\n            'headers',\n            'tables',\n            'links',\n            'images',\n            'lists',\n            'cut-copy-paste',\n            'indentation'\n          ]}\n          onImageAdded={onImageAdded}\n          ref={editorRef}\n        />\n\n        <FileInputDemo />\n      </Flex>\n    </Form>\n  );\n};\n\nconst AppShellWithMenuNavigation = (args: AppShellStory) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n\n  const onNodeClick = (id: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, id);\n\n    if (!clickedNode?.nodes) {\n      setCurrentNodeId(id);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n\n    return (\n      <StandardTree\n        nodes={recordMenuList}\n        onNodeClick={onNodeClick}\n        currentNodeId={currentNodeId}\n      />\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: action('Clicked switchbranch')\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: action('Clicked createbranch')\n        }\n      ]\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: action('Clicked Applications')\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: action('Clicked Shared resources')\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => {}\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: action('Clicked AI & Analytics')\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: action('Clicked Deploy')\n      }\n    ]\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <AppShell\n        main={args.main}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'xCompass',\n          visual: {\n            icon: {\n              name: 'compass',\n              bgColor: '#20AA50'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick\n        }}\n        utils={{\n          onItemClick: id => {\n            if (id === 'explorer') {\n              setAllNodes(appExplorerMenuList);\n            }\n\n            if (id === 'branches') {\n              setAllNodes(branchesMenuList);\n            }\n\n            if (id === 'records') {\n              setAllNodes(recordMenuList);\n            }\n          },\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => setAllNodes(treeList)\n          }\n        }}\n      />\n    </Configuration>\n  );\n};\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps & AppShellStory> = (\n  args: PageTemplatesStoryProps & AppShellStory\n) => {\n  const [currentTabId, setCurrentTabId] = useState('accounts');\n  const [content, setContent] = useState(\n    <>\n      <TableDemo />\n    </>\n  );\n  const { create } = useContext(ModalManagerContext);\n\n  const getPath = () => {\n    if (args.showBreadcrumbs) {\n      const path = args.pathData;\n\n      return path\n        ? path.split(',').map((crumb: string, i) => {\n            // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n            return {\n              id: crumb,\n              primary: crumb,\n              href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n            };\n          })\n        : [];\n    }\n  };\n\n  const actions: PageTemplateProps['actions'] = args.showActions ? (\n    <Flex container>\n      <Button variant='primary'>Save</Button>\n      <Actions\n        menuAt={2}\n        items={[\n          {\n            id: '1',\n            text: 'Page action 1'\n          },\n          {\n            id: '2',\n            text: 'Page action 2'\n          }\n        ]}\n      />\n    </Flex>\n  ) : undefined;\n\n  const banners: PageTemplateProps['banners'] = args.showBanners ? (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  ) : undefined;\n\n  const mainContent = (\n    <Flex container>\n      <OneColumnForm />\n    </Flex>\n  );\n\n  const modal = () => (\n    <Configuration theme={BuildTheme}>\n      <Modal heading='This is the Modal heading' autoWidth={false} center stretch={false}>\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    </Configuration>\n  );\n\n  const pageTemplateProps = useMemo(() => {\n    const branchName = args.showBranch ? args.branchName : '';\n    const status = args.showBranch\n      ? {\n          type: args.statusVariant,\n          label: args.statusLabel\n        }\n      : undefined;\n\n    return {\n      title: args.title,\n      actions,\n      banners,\n      path: getPath(),\n      branchName,\n      status,\n      metadata: [\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      additionalInfo: {\n        title: 'Interest rate',\n        description: 'Interest rate for the savings account',\n        fields: [\n          {\n            id: '1',\n            name: 'Id',\n            value: 'InterestRate'\n          },\n          {\n            id: '2',\n            name: 'Rule type',\n            value: 'Field'\n          },\n          {\n            id: '3',\n            name: 'Scope',\n            value: 'O1XPTI-CCompass-Work-MortgageRequest'\n          },\n          {\n            id: '4',\n            name: 'Branch',\n            value: 'xCompass (Main)'\n          },\n          {\n            id: '5',\n            name: 'Application',\n            value: 'XCompass'\n          }\n        ],\n        onEdit: args.showEditButton\n          ? (e: MouseEvent<HTMLButtonElement>) => {\n              args.onEdit?.(e);\n              create(modal);\n            }\n          : undefined\n      }\n    };\n  }, [args]);\n\n  let demo;\n\n  switch (args.template) {\n    case 'one column':\n      demo = <OneColumnPage a={mainContent} {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      demo = (\n        <TabbedPage\n          a={content}\n          tabs={{\n            tabs: [\n              { id: 'accounts', name: 'Accounts' },\n              { id: 'form', name: 'Form' },\n              { id: 'workbench', name: 'Workbench' }\n            ],\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: id => {\n              setCurrentTabId(id);\n              // eslint-disable-next-line sonarjs/no-nested-switch\n              switch (id) {\n                case 'form':\n                  setContent(\n                    <Flex container>\n                      <OneColumnForm />\n                    </Flex>\n                  );\n                  break;\n                case 'accounts':\n                  setContent(<TableDemo />);\n                  break;\n                case 'workbench':\n                  setContent(<WorkbenchDemo />);\n                  break;\n                default:\n              }\n            }\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return (\n    <AppShellWithMenuNavigation\n      main={demo as AppShellProps['main']}\n      hideNavigation={args.hideNavigation}\n    />\n  );\n};\n\nPageTemplatesDemo.args = {\n  template: 'tabbed',\n  title: 'Interest rate',\n  subTitle: 'Uplus-Data-Integrations',\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  pathData: 'Home,xCompass,Fields',\n  showActions: true,\n  showBanners: false,\n  showBranch: true,\n  statusVariant: 'pending',\n  statusLabel: 'private change',\n  branchName: 'xCompass (Main)',\n  showEditButton: true,\n  onEdit: action('Clicked edit button in popover')\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: ['one column', 'tabbed'],\n    control: { type: 'select' }\n  },\n  subTitle: { control: { type: 'text' } },\n  title: { control: { type: 'text' } },\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } },\n  showBranch: { control: { type: 'boolean' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusLabel: { control: { type: 'text' } },\n  branchName: { control: { type: 'text' } },\n  showEditButton: { control: { type: 'boolean' } },\n  onEdit: { table: { disable: true } }\n};\n"]}