@pega/cosmos-react-build 2.0.0-dev.15.0 → 2.0.0-dev.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppHeader/AppHeader.d.ts +4 -3
- package/lib/components/AppHeader/AppHeader.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.js +6 -6
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +3 -2
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.js +14 -6
- package/lib/components/AppHeader/AppHeader.styles.js.map +1 -1
- package/lib/components/FlowModeller/Connector.d.ts +30 -0
- package/lib/components/FlowModeller/Connector.d.ts.map +1 -0
- package/lib/components/FlowModeller/Connector.js +89 -0
- package/lib/components/FlowModeller/Connector.js.map +1 -0
- package/lib/components/FlowModeller/FlowModeller.d.ts +20 -0
- package/lib/components/FlowModeller/FlowModeller.d.ts.map +1 -0
- package/lib/components/FlowModeller/FlowModeller.js +78 -0
- package/lib/components/FlowModeller/FlowModeller.js.map +1 -0
- package/lib/components/FlowModeller/Node/Node.types.d.ts +44 -0
- package/lib/components/FlowModeller/Node/Node.types.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/Node.types.js +2 -0
- package/lib/components/FlowModeller/Node/Node.types.js.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts +14 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js +121 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts +9 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.js +49 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.js.map +1 -0
- package/lib/components/FlowModeller/index.d.ts +3 -0
- package/lib/components/FlowModeller/index.d.ts.map +1 -0
- package/lib/components/FlowModeller/index.js +2 -0
- package/lib/components/FlowModeller/index.js.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/package.json +4 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FunctionComponent, Ref,
|
|
1
|
+
import { FunctionComponent, Ref, MouseEvent } from 'react';
|
|
2
2
|
import { AvatarProps, BaseProps, ForwardProps, SearchInputProps, MenuItemProps, Tab, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface AppHeaderProps extends BaseProps, NoChildrenProp {
|
|
4
4
|
brand: BrandProps;
|
|
@@ -12,16 +12,17 @@ interface BrandProps {
|
|
|
12
12
|
/** URL or DOM id to navigate to. */
|
|
13
13
|
href?: string;
|
|
14
14
|
/** Click handler for the header. */
|
|
15
|
-
onClick?:
|
|
15
|
+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
16
16
|
}
|
|
17
17
|
interface LinkProps extends Tab {
|
|
18
|
-
onClick?: (id: string,
|
|
18
|
+
onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
19
19
|
}
|
|
20
20
|
interface UtilsProps {
|
|
21
21
|
avatar: AvatarProps;
|
|
22
22
|
search?: SearchInputProps;
|
|
23
23
|
branchName?: string;
|
|
24
24
|
actions?: MenuItemProps['items'];
|
|
25
|
+
onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
25
26
|
}
|
|
26
27
|
declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
|
|
27
28
|
export default AppHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAMZ,gBAAgB,EAChB,aAAa,EACb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAgBjC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAmFD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import { Flex, Icon, Text, useI18n, useBreakpoint,
|
|
3
|
+
import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
|
|
5
|
-
import { StyledAppHeader, StyledTabs,
|
|
5
|
+
import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
|
|
6
6
|
const BrandContainer = ({ name, onClick, href }) => {
|
|
7
7
|
return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div' }, { children: [_jsx(StyledIconContainer, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: 'pegasus' }, void 0) }), void 0), _jsx(StyledTitle, { children: name }, void 0)] }), void 0));
|
|
8
8
|
};
|
|
@@ -11,19 +11,19 @@ const Links = ({ links = [] }) => {
|
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
setCurrentTabId(links[0].id || '');
|
|
13
13
|
}, [links]);
|
|
14
|
-
const handleTabClick = useCallback((id,
|
|
14
|
+
const handleTabClick = useCallback((id, e) => {
|
|
15
15
|
const newActiveTab = links.find(item => item.id === id);
|
|
16
16
|
if (newActiveTab) {
|
|
17
|
-
newActiveTab.onClick?.(id,
|
|
17
|
+
newActiveTab.onClick?.(id, e);
|
|
18
18
|
setCurrentTabId(newActiveTab.id);
|
|
19
19
|
}
|
|
20
20
|
}, [links]);
|
|
21
21
|
return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0);
|
|
22
22
|
};
|
|
23
|
-
const Utils = ({ avatar, search, branchName, actions }) => {
|
|
23
|
+
const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
|
|
24
24
|
const t = useI18n();
|
|
25
25
|
const isMediumOrAbove = useBreakpoint('md');
|
|
26
|
-
return (_jsxs(StyledUtilsContainer, Object.assign({ isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' } }, { children: [search && (_jsx(StyledAppHeaderSearchForm, Object.assign({ role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, search), void 0) }), void 0)), branchName && (_jsxs(StyledBranchContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, Object.assign({ "aria-label": branchName }, { children: branchName }), void 0)] }), void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions }, text: t('actions') }, void 0)), _jsx(
|
|
26
|
+
return (_jsxs(StyledUtilsContainer, Object.assign({ isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' } }, { children: [search && (_jsx(StyledAppHeaderSearchForm, Object.assign({ role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, search), void 0) }), void 0)), branchName && (_jsxs(StyledBranchContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, Object.assign({ "aria-label": branchName }, { children: branchName }), void 0)] }), void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, Object.assign({ variant: 'primary', onClick: onPreviewClick }, { children: t('preview') }), void 0)), _jsx(StyledAppAvatar, Object.assign({}, avatar), void 0)] }), void 0));
|
|
27
27
|
};
|
|
28
28
|
const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
|
|
29
29
|
return (_jsxs(Flex, Object.assign({ as: StyledAppHeader, container: { justify: 'between' }, ref: ref }, { children: [_jsx(BrandContainer, Object.assign({}, brand), void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, Object.assign({}, utils), void 0)] }), void 0));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n MenuButton,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({\n avatar,\n search,\n branchName,\n actions,\n onPreviewClick\n}: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n )}\n {onPreviewClick && (\n <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Avatar, Flex, Text, Tabs } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Avatar, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';
|
|
2
2
|
export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const StyledTitle: typeof Text;
|
|
4
4
|
export declare const StyledBrandContainer: typeof Flex;
|
|
@@ -7,5 +7,6 @@ export declare const StyledBrandButton: import("styled-components").StyledCompon
|
|
|
7
7
|
export declare const StyledTabs: typeof Tabs;
|
|
8
8
|
export declare const StyledUtilsContainer: typeof Flex;
|
|
9
9
|
export declare const StyledBranchContainer: typeof Flex;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const StyledPreviewButton: typeof Button;
|
|
11
|
+
export declare const StyledAppAvatar: typeof Avatar;
|
|
11
12
|
//# sourceMappingURL=AppHeader.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAGjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAgBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';
|
|
2
|
+
import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs, Button } from '@pega/cosmos-react-core';
|
|
3
3
|
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
4
4
|
export const StyledAppHeader = styled.header(({ theme }) => {
|
|
5
5
|
return css `
|
|
@@ -86,7 +86,6 @@ export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) =>
|
|
|
86
86
|
& > div,
|
|
87
87
|
& > span {
|
|
88
88
|
margin-inline-start: ${theme.base.spacing};
|
|
89
|
-
margin-inline-end: ${theme.base.spacing};
|
|
90
89
|
}
|
|
91
90
|
& > div:last-child {
|
|
92
91
|
margin-inline-end: 0;
|
|
@@ -102,14 +101,23 @@ export const StyledBranchContainer = styled(Flex)(({ theme }) => {
|
|
|
102
101
|
overflow: hidden;
|
|
103
102
|
text-overflow: ellipsis;
|
|
104
103
|
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
105
|
-
margin-inline-start: calc(0.
|
|
104
|
+
margin-inline-start: calc(0.5 * ${theme.base.spacing});
|
|
106
105
|
margin-inline-end: calc(0.75 * ${theme.base.spacing});
|
|
107
106
|
}
|
|
108
107
|
`;
|
|
109
108
|
});
|
|
110
109
|
StyledBranchContainer.defaultProps = defaultThemeProp;
|
|
111
|
-
export const
|
|
112
|
-
|
|
113
|
-
height: 1.5rem;
|
|
110
|
+
export const StyledPreviewButton = styled(Button) `
|
|
111
|
+
flex-shrink: 0;
|
|
114
112
|
`;
|
|
113
|
+
export const StyledAppAvatar = styled(Avatar)(({ theme }) => {
|
|
114
|
+
return css `
|
|
115
|
+
width: 1.5rem;
|
|
116
|
+
height: 1.5rem;
|
|
117
|
+
&& {
|
|
118
|
+
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
119
|
+
}
|
|
120
|
+
`;
|
|
121
|
+
});
|
|
122
|
+
StyledAppAvatar.defaultProps = defaultThemeProp;
|
|
115
123
|
//# sourceMappingURL=AppHeader.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Avatar,\n defaultThemeProp,\n Flex,\n StyledIcon,\n Text,\n Tabs,\n Button\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n box-shadow: ${theme.base.shadow.low};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n width: 2rem;\n height: 2rem;\n position: relative;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n color: ${theme.base.palette.light};\n }\n `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { FunctionComponent, Ref } from 'react';
|
|
2
|
+
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
export interface ConnectorProps {
|
|
4
|
+
/** Unique id of connector */
|
|
5
|
+
id: string;
|
|
6
|
+
/** Label for connector if there */
|
|
7
|
+
label?: string;
|
|
8
|
+
/** Node id which connector should connect to */
|
|
9
|
+
targetNodeId?: string;
|
|
10
|
+
/** Callback for adding the nodes */
|
|
11
|
+
onAddClick?: () => void;
|
|
12
|
+
/** Ref of the connector */
|
|
13
|
+
ref?: Ref<HTMLButtonElement>;
|
|
14
|
+
/** Boolean if the button on the connector is active */
|
|
15
|
+
active?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
18
|
+
withLabel: boolean;
|
|
19
|
+
}, never>;
|
|
20
|
+
export declare const StyledConnector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
21
|
+
export declare const StyledButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
22
|
+
export declare const StyledDot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
23
|
+
export declare const StyledButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {
|
|
24
|
+
active: ConnectorProps;
|
|
25
|
+
}, never>;
|
|
26
|
+
export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
27
|
+
export declare const StyledLabel: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").LabelProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
28
|
+
declare const Connector: FunctionComponent<ConnectorProps & ForwardProps>;
|
|
29
|
+
export default Connector;
|
|
30
|
+
//# sourceMappingURL=Connector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa;eAA2B,OAAO;SAY1D,CAAC;AAIH,eAAO,MAAM,eAAe,yGAO3B,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAM/B,CAAC;AAIF,eAAO,MAAM,SAAS,yGAMpB,CAAC;AAIH,eAAO,MAAM,YAAY;YAA4B,cAAc;SAmBjE,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAIF,eAAO,MAAM,WAAW,kLAStB,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8C/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { Button, defaultThemeProp, Flex, Icon, Label, useConsolidatedRef, useElement, useI18n, useTheme } from '@pega/cosmos-react-core';
|
|
5
|
+
export const StyledWrapper = styled.div(({ withLabel }) => {
|
|
6
|
+
return css `
|
|
7
|
+
width: 17.5rem;
|
|
8
|
+
${withLabel
|
|
9
|
+
? css `
|
|
10
|
+
height: 6rem;
|
|
11
|
+
`
|
|
12
|
+
: css `
|
|
13
|
+
height: 4.5rem;
|
|
14
|
+
`}
|
|
15
|
+
align-self: center;
|
|
16
|
+
`;
|
|
17
|
+
});
|
|
18
|
+
StyledWrapper.defaultProps = defaultThemeProp;
|
|
19
|
+
export const StyledConnector = styled.div `
|
|
20
|
+
width: 2rem;
|
|
21
|
+
align-self: center;
|
|
22
|
+
height: 100%;
|
|
23
|
+
svg {
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
StyledConnector.defaultProps = defaultThemeProp;
|
|
28
|
+
export const StyledButtonWrapper = styled.div `
|
|
29
|
+
height: 0;
|
|
30
|
+
width: 100%;
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
position: relative;
|
|
34
|
+
`;
|
|
35
|
+
StyledButtonWrapper.defaultProps = defaultThemeProp;
|
|
36
|
+
export const StyledDot = styled.div(({ theme }) => {
|
|
37
|
+
return css `
|
|
38
|
+
top: -3rem;
|
|
39
|
+
position: absolute;
|
|
40
|
+
color: ${theme.base.colors.slate.medium};
|
|
41
|
+
`;
|
|
42
|
+
});
|
|
43
|
+
StyledDot.defaultProps = defaultThemeProp;
|
|
44
|
+
export const StyledButton = styled(Button)(({ theme, active }) => {
|
|
45
|
+
return css `
|
|
46
|
+
opacity: 0;
|
|
47
|
+
top: -3.25rem;
|
|
48
|
+
border: 0;
|
|
49
|
+
color: ${theme.base.colors.black};
|
|
50
|
+
background: ${theme.base.colors.white};
|
|
51
|
+
${active &&
|
|
52
|
+
css `
|
|
53
|
+
box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};
|
|
54
|
+
opacity: 1;
|
|
55
|
+
`}
|
|
56
|
+
&:hover,
|
|
57
|
+
&:active,
|
|
58
|
+
&:focus {
|
|
59
|
+
opacity: 1;
|
|
60
|
+
background: ${theme.base.colors.white};
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
});
|
|
64
|
+
StyledButton.defaultProps = defaultThemeProp;
|
|
65
|
+
export const StyledLabelWrapper = styled.div `
|
|
66
|
+
position: relative;
|
|
67
|
+
width: 100%;
|
|
68
|
+
`;
|
|
69
|
+
StyledLabelWrapper.defaultProps = defaultThemeProp;
|
|
70
|
+
export const StyledLabel = styled(Label)(({ theme }) => {
|
|
71
|
+
return css `
|
|
72
|
+
padding: calc(0.5 * ${theme.base.spacing});
|
|
73
|
+
border-radius: 0.25rem;
|
|
74
|
+
position: absolute;
|
|
75
|
+
bottom: -2.25rem;
|
|
76
|
+
background: ${theme.base.colors.slate.medium};
|
|
77
|
+
color: ${theme.base.colors.white};
|
|
78
|
+
`;
|
|
79
|
+
});
|
|
80
|
+
StyledLabel.defaultProps = defaultThemeProp;
|
|
81
|
+
const Connector = forwardRef(({ label, onAddClick, active = false }, ref) => {
|
|
82
|
+
const theme = useTheme();
|
|
83
|
+
const t = useI18n();
|
|
84
|
+
const [, setButtonEl] = useElement();
|
|
85
|
+
const buttonRef = useConsolidatedRef(ref, setButtonEl);
|
|
86
|
+
return (_jsx(_Fragment, { children: _jsxs(Flex, Object.assign({ as: StyledWrapper, withLabel: !!label, container: { alignItems: 'center', direction: 'column' } }, { children: [label && (_jsx(Flex, Object.assign({ as: StyledLabelWrapper, container: { justify: 'center' } }, { children: _jsx(StyledLabel, { children: label }, void 0) }), void 0)), _jsx(Flex, Object.assign({ "aria-disabled": 'true', as: StyledConnector }, { children: _jsx("svg", { children: _jsx("path", { strokeWidth: '2', stroke: theme.base.colors.slate.light, d: 'M 16 0 v100' }, void 0) }, void 0) }), void 0), _jsxs(Flex, Object.assign({ as: StyledButtonWrapper }, { children: [_jsx(StyledDot, { children: _jsx(Icon, { name: 'circle-solid' }, void 0) }, void 0), _jsx(StyledButton, Object.assign({ label: t('add_noun', [t('node').toLowerCase()]), active: active, icon: true, onClick: onAddClick, ref: buttonRef }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0)] }), void 0) }, void 0));
|
|
87
|
+
});
|
|
88
|
+
export default Connector;
|
|
89
|
+
//# sourceMappingURL=Connector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Label,\n useConsolidatedRef,\n useElement,\n useI18n,\n useTheme\n} from '@pega/cosmos-react-core';\n\nexport interface ConnectorProps {\n /** Unique id of connector */\n id: string;\n /** Label for connector if there */\n label?: string;\n /** Node id which connector should connect to */\n targetNodeId?: string;\n /** Callback for adding the nodes */\n onAddClick?: () => void;\n /** Ref of the connector */\n ref?: Ref<HTMLButtonElement>;\n /** Boolean if the button on the connector is active */\n active?: boolean;\n}\n\nexport const StyledWrapper = styled.div<{ withLabel: boolean }>(({ withLabel }) => {\n return css`\n width: 17.5rem;\n ${withLabel\n ? css`\n height: 6rem;\n `\n : css`\n height: 4.5rem;\n `}\n align-self: center;\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledConnector = styled.div`\n width: 2rem;\n align-self: center;\n height: 100%;\n svg {\n width: 100%;\n }\n`;\n\nStyledConnector.defaultProps = defaultThemeProp;\n\nexport const StyledButtonWrapper = styled.div`\n height: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n position: relative;\n`;\n\nStyledButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDot = styled.div(({ theme }) => {\n return css`\n top: -3rem;\n position: absolute;\n color: ${theme.base.colors.slate.medium};\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)<{ active: ConnectorProps }>(({ theme, active }) => {\n return css`\n opacity: 0;\n top: -3.25rem;\n border: 0;\n color: ${theme.base.colors.black};\n background: ${theme.base.colors.white};\n ${active &&\n css`\n box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n opacity: 1;\n `}\n &:hover,\n &:active,\n &:focus {\n opacity: 1;\n background: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledLabelWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nStyledLabelWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)(({ theme }) => {\n return css`\n padding: calc(0.5 * ${theme.base.spacing});\n border-radius: 0.25rem;\n position: absolute;\n bottom: -2.25rem;\n background: ${theme.base.colors.slate.medium};\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FunctionComponent<ConnectorProps & ForwardProps> = forwardRef(\n (\n { label, onAddClick, active = false }: PropsWithoutRef<ConnectorProps>,\n ref: ConnectorProps['ref']\n ) => {\n const theme = useTheme();\n const t = useI18n();\n const [, setButtonEl] = useElement<HTMLButtonElement>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n\n return (\n <>\n <Flex\n as={StyledWrapper}\n withLabel={!!label}\n container={{ alignItems: 'center', direction: 'column' }}\n >\n {label && (\n <Flex as={StyledLabelWrapper} container={{ justify: 'center' }}>\n <StyledLabel>{label}</StyledLabel>\n </Flex>\n )}\n <Flex aria-disabled='true' as={StyledConnector}>\n <svg>\n <path strokeWidth='2' stroke={theme.base.colors.slate.light} d='M 16 0 v100' />\n </svg>\n </Flex>\n\n <Flex as={StyledButtonWrapper}>\n <StyledDot>\n <Icon name='circle-solid' />\n </StyledDot>\n <StyledButton\n label={t('add_noun', [t('node').toLowerCase()])}\n active={active}\n icon\n onClick={onAddClick}\n ref={buttonRef}\n >\n <Icon name='plus' />\n </StyledButton>\n </Flex>\n </Flex>\n </>\n );\n }\n);\n\nexport default Connector;\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PropsWithoutRef, MouseEvent } from 'react';
|
|
2
|
+
import { Action } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';
|
|
4
|
+
export interface FlowModellerProps {
|
|
5
|
+
/** List of nodes */
|
|
6
|
+
nodes: NodeProps[];
|
|
7
|
+
/** Node actions */
|
|
8
|
+
actions?: Action[];
|
|
9
|
+
/** Callback to add node from connector */
|
|
10
|
+
onNodeAdd: (selectedNode: SelectedNodeParam) => void;
|
|
11
|
+
/** Callback for handling the click on the node */
|
|
12
|
+
onNodeClick?: (nodeId: string) => void;
|
|
13
|
+
/** Callback for actions on Node */
|
|
14
|
+
onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
|
|
15
|
+
/** Types of nodes */
|
|
16
|
+
nodeLibrary: NodeLibraryItem[];
|
|
17
|
+
}
|
|
18
|
+
declare const FlowModeller: ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
|
|
19
|
+
export default FlowModeller;
|
|
20
|
+
//# sourceMappingURL=FlowModeller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOf,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAYP,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEhG,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAMD,QAAA,MAAM,YAAY,6FAQf,gBAAgB,iBAAiB,CAAC,gBAiJpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, useState, useCallback, useRef, useEffect, useMemo } from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { escapeRegExp, Flex, Icon, Menu, menuHelpers, Popover, SearchInput, useAfterInitialEffect, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
|
|
5
|
+
import { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
|
|
6
|
+
import { StyledIcon } from './Node/NodeTemplate.styles';
|
|
7
|
+
import Connector from './Connector';
|
|
8
|
+
const StyledPopover = styled(Popover) `
|
|
9
|
+
min-width: 40ch;
|
|
10
|
+
`;
|
|
11
|
+
const FlowModeller = ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }) => {
|
|
12
|
+
const [open, setOpen] = useState(false);
|
|
13
|
+
const buttonRefs = useRef({});
|
|
14
|
+
const nodeRef = useRef(null);
|
|
15
|
+
const [popoverEl, setPopoverEl] = useElement(null);
|
|
16
|
+
const [previousNodeId, setPreviousNodeId] = useState('');
|
|
17
|
+
const [search, setSearch] = useState('');
|
|
18
|
+
const searchElRef = useRef(null);
|
|
19
|
+
const t = useI18n();
|
|
20
|
+
const searchRegex = useMemo(() => {
|
|
21
|
+
return new RegExp(escapeRegExp(search));
|
|
22
|
+
}, [search]);
|
|
23
|
+
const closeMenu = useCallback(() => {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
}, []);
|
|
26
|
+
const onItemSelect = useCallback(id => {
|
|
27
|
+
const selectedNode = menuHelpers.getItem(nodeLibrary, id);
|
|
28
|
+
onNodeAdd({ nodeId: previousNodeId, node: selectedNode });
|
|
29
|
+
closeMenu();
|
|
30
|
+
}, [previousNodeId]);
|
|
31
|
+
const onKeydown = useCallback((e) => {
|
|
32
|
+
if (e.key === 'Escape') {
|
|
33
|
+
closeMenu();
|
|
34
|
+
}
|
|
35
|
+
}, [closeMenu]);
|
|
36
|
+
useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (open) {
|
|
39
|
+
searchElRef?.current?.focus();
|
|
40
|
+
}
|
|
41
|
+
}, [open, searchElRef.current]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
document.addEventListener('keydown', onKeydown);
|
|
44
|
+
return () => {
|
|
45
|
+
document.removeEventListener('keydown', onKeydown);
|
|
46
|
+
};
|
|
47
|
+
}, [onKeydown]);
|
|
48
|
+
useAfterInitialEffect(() => {
|
|
49
|
+
nodeRef?.current?.focus();
|
|
50
|
+
}, [nodes]);
|
|
51
|
+
const items = nodeLibrary !== undefined ? nodeLibrary : [];
|
|
52
|
+
const itemsToRender = useMemo(() => {
|
|
53
|
+
return menuHelpers.mapTree(search
|
|
54
|
+
? menuHelpers.flatten(items).filter(({ primary }) => {
|
|
55
|
+
return searchRegex.test(primary);
|
|
56
|
+
})
|
|
57
|
+
: items, node => {
|
|
58
|
+
const selectable = !node.items;
|
|
59
|
+
const nodeItem = node;
|
|
60
|
+
return {
|
|
61
|
+
...node,
|
|
62
|
+
visual: nodeItem.type ? (_jsx(StyledIcon, Object.assign({ id: node.id, type: nodeItem.type }, { children: _jsx(Icon, { name: assignmentVisual[nodeItem.type] }, void 0) }), void 0)) : undefined,
|
|
63
|
+
count: node.items ? node.items.length : undefined,
|
|
64
|
+
secondary: node.secondary,
|
|
65
|
+
selected: selectable ? !!node.selected : undefined
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
}, [search, nodeLibrary, searchRegex]);
|
|
69
|
+
return (_jsxs(Flex, Object.assign({ container: { justify: 'center', direction: 'column' } }, restProps, { children: [nodes.map(node => (_jsxs(Fragment, { children: [node.type === 'start' && (_jsx(StartNode, { id: node.id, type: node.type, label: t('start').toUpperCase() }, void 0)), node.type !== 'start' && node.type !== 'stop' && (_jsx(DefaultNode, { id: node.id, ref: nodeRef, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0)), node.type === 'stop' && (_jsx(EndNode, { id: node.id, type: node.type, label: t('end').toUpperCase() }, void 0)), node.connectors &&
|
|
70
|
+
node.connectors?.map(({ id, label, targetNodeId }) => (_jsx(Connector, { id: id, label: label, ref: el => {
|
|
71
|
+
buttonRefs.current[node.id] = el;
|
|
72
|
+
}, targetNodeId: targetNodeId, onAddClick: () => {
|
|
73
|
+
setPreviousNodeId(node.id);
|
|
74
|
+
setOpen(cur => !cur);
|
|
75
|
+
}, active: open && previousNodeId === node.id }, id)))] }, node.id))), _jsx(StyledPopover, Object.assign({ show: open, target: previousNodeId ? buttonRefs.current[previousNodeId] : null, ref: setPopoverEl }, { children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchElRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }), void 0)] }), void 0));
|
|
76
|
+
};
|
|
77
|
+
export default FlowModeller;
|
|
78
|
+
//# sourceMappingURL=FlowModeller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Fragment,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Action,\n escapeRegExp,\n Flex,\n Icon,\n Menu,\n menuHelpers,\n Popover,\n SearchInput,\n useAfterInitialEffect,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\nimport Connector from './Connector';\nimport { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n /** List of nodes */\n nodes: NodeProps[];\n /** Node actions */\n actions?: Action[];\n /** Callback to add node from connector */\n onNodeAdd: (selectedNode: SelectedNodeParam) => void;\n /** Callback for handling the click on the node */\n onNodeClick?: (nodeId: string) => void;\n /** Callback for actions on Node */\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /** Types of nodes */\n nodeLibrary: NodeLibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst FlowModeller = ({\n nodes,\n nodeLibrary,\n actions,\n onNodeAdd,\n onNodeClick,\n onNodeActionClick,\n ...restProps\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [open, setOpen] = useState(false);\n const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n const nodeRef = useRef<HTMLElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [previousNodeId, setPreviousNodeId] = useState('');\n const [search, setSearch] = useState('');\n const searchElRef = useRef<HTMLInputElement>(null);\n const t = useI18n();\n const searchRegex = useMemo(() => {\n return new RegExp(escapeRegExp(search));\n }, [search]);\n\n const closeMenu = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onItemSelect = useCallback(\n id => {\n const selectedNode = menuHelpers.getItem(nodeLibrary, id) as NodeLibraryItem;\n onNodeAdd({ nodeId: previousNodeId, node: selectedNode });\n closeMenu();\n },\n [previousNodeId]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);\n\n useEffect(() => {\n if (open) {\n searchElRef?.current?.focus();\n }\n }, [open, searchElRef.current]);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useAfterInitialEffect(() => {\n nodeRef?.current?.focus();\n }, [nodes]);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n node => {\n const selectable = !node.items;\n\n const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n return {\n ...node,\n visual: nodeItem.type ? (\n <StyledIcon id={node.id} type={nodeItem.type}>\n <Icon name={assignmentVisual[nodeItem.type]} />\n </StyledIcon>\n ) : undefined,\n count: node.items ? node.items.length : undefined,\n secondary: node.secondary,\n selected: selectable ? !!node.selected : undefined\n };\n }\n );\n }, [search, nodeLibrary, searchRegex]);\n\n return (\n <Flex container={{ justify: 'center', direction: 'column' }} {...restProps}>\n {nodes.map(node => (\n <Fragment key={node.id}>\n {node.type === 'start' && (\n <StartNode id={node.id} type={node.type} label={t('start').toUpperCase()} />\n )}\n {node.type !== 'start' && node.type !== 'stop' && (\n <DefaultNode\n id={node.id}\n ref={nodeRef}\n label={node.label}\n type={node.type}\n description={node.description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={node.additionalData}\n />\n )}\n {node.type === 'stop' && (\n <EndNode id={node.id} type={node.type} label={t('end').toUpperCase()} />\n )}\n {node.connectors &&\n node.connectors?.map(({ id, label, targetNodeId }) => (\n <Connector\n key={id}\n id={id}\n label={label}\n ref={el => {\n buttonRefs.current[node.id] = el;\n }}\n targetNodeId={targetNodeId}\n onAddClick={() => {\n setPreviousNodeId(node.id);\n setOpen(cur => !cur);\n }}\n active={open && previousNodeId === node.id}\n />\n ))}\n </Fragment>\n ))}\n <StyledPopover\n show={open}\n target={previousNodeId ? buttonRefs.current[previousNodeId] : null}\n ref={setPopoverEl}\n >\n <Menu\n items={itemsToRender}\n onItemClick={onItemSelect}\n header={\n <SearchInput\n ref={searchElRef}\n onSearchChange={setSearch}\n value={search}\n searchInputAriaLabel={t('search_nodes')}\n placeholder={t('search_nodes')}\n />\n }\n />\n </StyledPopover>\n </Flex>\n );\n};\n\nexport default FlowModeller;\n"]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Ref, MouseEvent } from 'react';
|
|
2
|
+
import { Action, MenuItemProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ConnectorProps } from '../Connector';
|
|
4
|
+
export interface NodeProps {
|
|
5
|
+
/** Unique id for Node */
|
|
6
|
+
id: string;
|
|
7
|
+
/** Label for Node */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Description for Node */
|
|
10
|
+
description?: string;
|
|
11
|
+
/** Additional data for Node */
|
|
12
|
+
additionalData?: {
|
|
13
|
+
label: string;
|
|
14
|
+
value: string;
|
|
15
|
+
}[];
|
|
16
|
+
/** Type of the Node */
|
|
17
|
+
type: 'start' | 'stop' | 'assignment' | 'decision' | 'question' | 'message' | 'automation';
|
|
18
|
+
/** Connectors for the node */
|
|
19
|
+
connectors?: ConnectorProps[];
|
|
20
|
+
}
|
|
21
|
+
export interface NodeComponentProps extends NodeProps {
|
|
22
|
+
/** Callback for the node actions click */
|
|
23
|
+
onActionClick?: (params: ActionParams, e: MouseEvent) => void;
|
|
24
|
+
/** Callback for the node click */
|
|
25
|
+
onClick?: (nodeId: NodeProps['id']) => void;
|
|
26
|
+
/** Actions for the node click */
|
|
27
|
+
actions?: Action[];
|
|
28
|
+
/** Ref of the node */
|
|
29
|
+
ref?: Ref<HTMLElement>;
|
|
30
|
+
}
|
|
31
|
+
export interface ActionParams {
|
|
32
|
+
actionId: string;
|
|
33
|
+
nodeId: NodeProps['id'];
|
|
34
|
+
}
|
|
35
|
+
export interface SelectedNodeParam {
|
|
36
|
+
nodeId: NodeProps['id'];
|
|
37
|
+
node: NodeLibraryItem;
|
|
38
|
+
}
|
|
39
|
+
export interface NodeLibraryItem extends MenuItemProps {
|
|
40
|
+
id: string;
|
|
41
|
+
type?: NodeProps['type'];
|
|
42
|
+
items?: NodeLibraryItem[];
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=Node.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,uBAAuB;IACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CAAC;IAC3F,8BAA8B;IAC9B,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACxB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { ConnectorProps } from '../Connector';\n\nexport interface NodeProps {\n /** Unique id for Node */\n id: string;\n /** Label for Node */\n label: string;\n /** Description for Node */\n description?: string;\n /** Additional data for Node */\n additionalData?: {\n label: string;\n value: string;\n }[];\n /** Type of the Node */\n type: 'start' | 'stop' | 'assignment' | 'decision' | 'question' | 'message' | 'automation';\n /** Connectors for the node */\n connectors?: ConnectorProps[];\n}\n\nexport interface NodeComponentProps extends NodeProps {\n /** Callback for the node actions click */\n onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n /** Callback for the node click */\n onClick?: (nodeId: NodeProps['id']) => void;\n /** Actions for the node click */\n actions?: Action[];\n /** Ref of the node */\n ref?: Ref<HTMLElement>;\n}\n\nexport interface ActionParams {\n actionId: string;\n nodeId: NodeProps['id'];\n}\n\nexport interface SelectedNodeParam {\n nodeId: NodeProps['id'];\n node: NodeLibraryItem;\n}\n\nexport interface NodeLibraryItem extends MenuItemProps {\n id: string;\n type?: NodeProps['type'];\n items?: NodeLibraryItem[];\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { NodeProps } from './Node.types';
|
|
2
|
+
export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
3
|
+
type: string;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LabelProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
|
|
6
|
+
type: string;
|
|
7
|
+
}, never>;
|
|
8
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<NodeProps, "type">, never>;
|
|
9
|
+
export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
export declare const StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
11
|
+
export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
export declare const StyledAdditionalData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
|
+
//# sourceMappingURL=NodeTemplate.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY;UAAsB,MAAM;SAanD,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,MAAM;SAWrD,CAAC;AAIH,eAAO,MAAM,UAAU,8HAqBrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAO3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAY5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAY/B,CAAC"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { readableColor } from 'polished';
|
|
3
|
+
import { Label, defaultThemeProp, Card, Text } from '@pega/cosmos-react-core';
|
|
4
|
+
export const StyledCircle = styled.div(({ theme, type }) => {
|
|
5
|
+
const bgColor = type === 'start' ? theme.base.colors.green.medium : theme.base.colors.red.light;
|
|
6
|
+
return css `
|
|
7
|
+
height: 2rem;
|
|
8
|
+
width: 2rem;
|
|
9
|
+
background: ${bgColor};
|
|
10
|
+
border-radius: 50%;
|
|
11
|
+
align-self: center;
|
|
12
|
+
&:focus {
|
|
13
|
+
outline: none;
|
|
14
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
15
|
+
}
|
|
16
|
+
`;
|
|
17
|
+
});
|
|
18
|
+
StyledCircle.defaultProps = defaultThemeProp;
|
|
19
|
+
export const StyledLabel = styled(Label)(({ type, theme }) => {
|
|
20
|
+
return css `
|
|
21
|
+
align-self: center;
|
|
22
|
+
${type === 'start'
|
|
23
|
+
? css `
|
|
24
|
+
padding-block-end: ${theme.base.spacing};
|
|
25
|
+
`
|
|
26
|
+
: css `
|
|
27
|
+
padding-block-start: ${theme.base.spacing};
|
|
28
|
+
`}
|
|
29
|
+
`;
|
|
30
|
+
});
|
|
31
|
+
StyledLabel.defaultProps = defaultThemeProp;
|
|
32
|
+
export const StyledIcon = styled.div(({ theme, type }) => {
|
|
33
|
+
const visualBg = {
|
|
34
|
+
assignment: theme.base.colors.green.medium,
|
|
35
|
+
decision: theme.base.colors.purple.medium,
|
|
36
|
+
question: theme.base.colors.green.dark,
|
|
37
|
+
message: theme.base.colors.orange.medium,
|
|
38
|
+
automation: theme.base.colors.blue.light
|
|
39
|
+
};
|
|
40
|
+
const contrastColor = readableColor(visualBg[type]);
|
|
41
|
+
return css `
|
|
42
|
+
min-height: 2rem;
|
|
43
|
+
min-width: 2rem;
|
|
44
|
+
background: ${visualBg[type]};
|
|
45
|
+
padding: calc(0.5 * ${theme.base.spacing});
|
|
46
|
+
margin-inline-end: ${theme.base.spacing};
|
|
47
|
+
text-align: center;
|
|
48
|
+
color: ${contrastColor};
|
|
49
|
+
border-radius: calc(0.25 * ${theme.base['border-radius']});
|
|
50
|
+
`;
|
|
51
|
+
});
|
|
52
|
+
StyledIcon.defaultProps = defaultThemeProp;
|
|
53
|
+
export const StyledCardHeader = styled.header(() => {
|
|
54
|
+
return css `
|
|
55
|
+
white-space: nowrap;
|
|
56
|
+
button {
|
|
57
|
+
visibility: hidden;
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
});
|
|
61
|
+
StyledCardHeader.defaultProps = defaultThemeProp;
|
|
62
|
+
export const StyledText = styled(Text)(({ theme }) => {
|
|
63
|
+
return css `
|
|
64
|
+
padding-inline-end: ${theme.base.spacing};
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
max-width: 12rem;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
`;
|
|
69
|
+
});
|
|
70
|
+
StyledText.defaultProps = defaultThemeProp;
|
|
71
|
+
export const StyledCard = styled(Card)(({ theme }) => {
|
|
72
|
+
return css `
|
|
73
|
+
min-width: 17.5rem;
|
|
74
|
+
min-height: 7rem;
|
|
75
|
+
align-self: center;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
&&& {
|
|
78
|
+
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
79
|
+
}
|
|
80
|
+
&:focus-within,
|
|
81
|
+
&:hover {
|
|
82
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
${StyledCardHeader} {
|
|
85
|
+
button {
|
|
86
|
+
visibility: visible;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
`;
|
|
91
|
+
});
|
|
92
|
+
StyledCard.defaultProps = defaultThemeProp;
|
|
93
|
+
export const StyledCardContent = styled.div(({ theme }) => {
|
|
94
|
+
return css `
|
|
95
|
+
padding: ${theme.base.spacing};
|
|
96
|
+
padding-block-start: 0;
|
|
97
|
+
max-width: 17.5rem;
|
|
98
|
+
max-height: 2.5rem;
|
|
99
|
+
display: -webkit-box;
|
|
100
|
+
-webkit-line-clamp: 2;
|
|
101
|
+
-webkit-box-orient: vertical;
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
text-overflow: ellipsis;
|
|
104
|
+
`;
|
|
105
|
+
});
|
|
106
|
+
StyledCardContent.defaultProps = defaultThemeProp;
|
|
107
|
+
export const StyledAdditionalData = styled.div(({ theme }) => {
|
|
108
|
+
return css `
|
|
109
|
+
padding: ${theme.base.spacing};
|
|
110
|
+
padding-block-start: 0;
|
|
111
|
+
max-width: 17.5rem;
|
|
112
|
+
max-height: 1rem;
|
|
113
|
+
display: -webkit-box;
|
|
114
|
+
-webkit-line-clamp: 1;
|
|
115
|
+
-webkit-box-orient: vertical;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
text-overflow: ellipsis;
|
|
118
|
+
`;
|
|
119
|
+
});
|
|
120
|
+
StyledAdditionalData.defaultProps = defaultThemeProp;
|
|
121
|
+
//# sourceMappingURL=NodeTemplate.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Label, defaultThemeProp, Card, Text } from '@pega/cosmos-react-core';\n\nimport { NodeProps } from './Node.types';\n\nexport const StyledCircle = styled.div<{ type: string }>(({ theme, type }) => {\n const bgColor = type === 'start' ? theme.base.colors.green.medium : theme.base.colors.red.light;\n return css`\n height: 2rem;\n width: 2rem;\n background: ${bgColor};\n border-radius: 50%;\n align-self: center;\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)<{ type: string }>(({ type, theme }) => {\n return css`\n align-self: center;\n ${type === 'start'\n ? css`\n padding-block-end: ${theme.base.spacing};\n `\n : css`\n padding-block-start: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div<Pick<NodeProps, 'type'>>(({ theme, type }) => {\n const visualBg: { [key: string]: string } = {\n assignment: theme.base.colors.green.medium,\n decision: theme.base.colors.purple.medium,\n question: theme.base.colors.green.dark,\n message: theme.base.colors.orange.medium,\n automation: theme.base.colors.blue.light\n };\n\n const contrastColor = readableColor(visualBg[type]);\n\n return css`\n min-height: 2rem;\n min-width: 2rem;\n background: ${visualBg[type]};\n padding: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: ${theme.base.spacing};\n text-align: center;\n color: ${contrastColor};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(() => {\n return css`\n white-space: nowrap;\n button {\n visibility: hidden;\n }\n `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n return css`\n padding-inline-end: ${theme.base.spacing};\n overflow: hidden;\n max-width: 12rem;\n text-overflow: ellipsis;\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n min-width: 17.5rem;\n min-height: 7rem;\n align-self: center;\n overflow: hidden;\n &&& {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n }\n &:focus-within,\n &:hover {\n box-shadow: ${theme.base.shadow.focus};\n cursor: pointer;\n ${StyledCardHeader} {\n button {\n visibility: visible;\n }\n }\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n padding-block-start: 0;\n max-width: 17.5rem;\n max-height: 2.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n padding-block-start: 0;\n max-width: 17.5rem;\n max-height: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n});\n\nStyledAdditionalData.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { PropsWithoutRef } from 'react';
|
|
2
|
+
import { NodeProps, NodeComponentProps } from './Node.types';
|
|
3
|
+
export declare const assignmentVisual: {
|
|
4
|
+
[key in NodeProps['type']]: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const DefaultNode: import("react").ForwardRefExoticComponent<Pick<NodeComponentProps, "description" | "label" | "id" | "type" | "onClick" | "actions" | "additionalData" | "connectors" | "onActionClick"> & import("react").RefAttributes<HTMLElement>>;
|
|
7
|
+
export declare const StartNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
|
|
8
|
+
export declare const EndNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
|
|
9
|
+
//# sourceMappingURL=NodeTemplates.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAsD,MAAM,OAAO,CAAC;AAuB5F,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAE7D,eAAO,MAAM,gBAAgB,EAAE;KAAG,GAAG,IAAI,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM;CAQlE,CAAC;AAEF,eAAO,MAAM,WAAW,uOA2GvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBASpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBASlE,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, forwardRef } from 'react';
|
|
3
|
+
import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
|
|
4
|
+
import { StyledLabel, StyledCircle, StyledIcon, StyledCardHeader, StyledCardContent, StyledCard, StyledText, StyledAdditionalData } from './NodeTemplate.styles';
|
|
5
|
+
export const assignmentVisual = {
|
|
6
|
+
start: '',
|
|
7
|
+
stop: '',
|
|
8
|
+
decision: 'arrow-bend-left',
|
|
9
|
+
question: 'chat-help',
|
|
10
|
+
message: 'chat',
|
|
11
|
+
assignment: 'clipboard-data',
|
|
12
|
+
automation: 'polaris'
|
|
13
|
+
};
|
|
14
|
+
export const DefaultNode = forwardRef(({ id, label, type = 'assignment', description, additionalData, actions = [], onActionClick, onClick, ...restProps }, ref) => {
|
|
15
|
+
const t = useI18n();
|
|
16
|
+
const actionItems = actions?.map(actionItem => {
|
|
17
|
+
return {
|
|
18
|
+
id: actionItem.id,
|
|
19
|
+
primary: actionItem.text,
|
|
20
|
+
onClick: (actionId, e) => {
|
|
21
|
+
e.stopPropagation();
|
|
22
|
+
onActionClick?.({ actionId, nodeId: id }, e);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
const handleEnterKeyDown = useCallback((e) => {
|
|
27
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
28
|
+
onClick?.(id);
|
|
29
|
+
}
|
|
30
|
+
}, [onClick]);
|
|
31
|
+
const additionalDataValue = additionalData &&
|
|
32
|
+
additionalData.map((data, index) => {
|
|
33
|
+
return `${data.label}: ${data.value}${index === additionalData.length - 1 ? '' : ', '}`;
|
|
34
|
+
});
|
|
35
|
+
const [nodeLabel, setNodeLabel] = useElement();
|
|
36
|
+
const [nodeDescription, setNodeDescription] = useElement();
|
|
37
|
+
const [nodeAdditionalData, setNodeAdditionalData] = useElement();
|
|
38
|
+
const [nodeIcon, setNodeIcon] = useElement();
|
|
39
|
+
return (_jsxs(StyledCard, Object.assign({ "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref }, restProps, { children: [_jsxs(Flex, Object.assign({ as: StyledCardHeader, container: { alignItems: 'center', justify: 'between', pad: 1, gap: 1 } }, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', wrap: 'nowrap' } }, { children: [_jsx(StyledIcon, Object.assign({ id: id, type: type, ref: setNodeIcon }, { children: _jsx(Icon, { name: assignmentVisual[type] }, void 0) }), void 0), _jsx(Tooltip, Object.assign({ target: nodeIcon, hideDelay: 'none' }, { children: cap(type) }), void 0), _jsx(StyledText, Object.assign({ variant: 'h4', ref: setNodeLabel }, { children: label }), void 0), _jsx(Tooltip, Object.assign({ describeTarget: false, target: nodeLabel, hideDelay: 'none' }, { children: label }), void 0)] }), void 0), _jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
|
|
40
|
+
items: actionItems
|
|
41
|
+
} }, void 0)] }), void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, Object.assign({ ref: setNodeDescription }, { children: description }), void 0), _jsx(Tooltip, Object.assign({ describeTarget: false, target: nodeDescription, hideDelay: 'none' }, { children: description }), void 0)] }, void 0)), additionalDataValue && (_jsxs(_Fragment, { children: [_jsx(StyledAdditionalData, Object.assign({ ref: setNodeAdditionalData }, { children: _jsx(Text, Object.assign({ variant: 'secondary' }, { children: additionalDataValue }), void 0) }), void 0), _jsx(Tooltip, Object.assign({ describeTarget: false, target: nodeAdditionalData, hideDelay: 'none' }, { children: additionalDataValue }), void 0)] }, void 0))] }), void 0));
|
|
42
|
+
});
|
|
43
|
+
export const StartNode = ({ type, label }) => {
|
|
44
|
+
return (_jsxs(Flex, Object.assign({ container: { justify: 'center', direction: 'column' } }, { children: [_jsx(Flex, Object.assign({ as: StyledLabel, type: type }, { children: label }), void 0), _jsx(Flex, { as: StyledCircle, type: type, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }), void 0));
|
|
45
|
+
};
|
|
46
|
+
export const EndNode = ({ type, label }) => {
|
|
47
|
+
return (_jsxs(Flex, Object.assign({ container: { justify: 'center', direction: 'column' } }, { children: [_jsx(Flex, { as: StyledCircle, type: type, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, Object.assign({ as: StyledLabel, type: type }, { children: label }), void 0)] }), void 0));
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=NodeTemplates.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useCallback, MouseEvent, KeyboardEvent, forwardRef } from 'react';\n\nimport {\n MenuButton,\n Icon,\n Flex,\n Tooltip,\n useElement,\n useI18n,\n cap,\n Text\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledLabel,\n StyledCircle,\n StyledIcon,\n StyledCardHeader,\n StyledCardContent,\n StyledCard,\n StyledText,\n StyledAdditionalData\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps } from './Node.types';\n\nexport const assignmentVisual: { [key in NodeProps['type']]: string } = {\n start: '',\n stop: '',\n decision: 'arrow-bend-left',\n question: 'chat-help',\n message: 'chat',\n assignment: 'clipboard-data',\n automation: 'polaris'\n};\n\nexport const DefaultNode = forwardRef(\n (\n {\n id,\n label,\n type = 'assignment',\n description,\n additionalData,\n actions = [],\n onActionClick,\n onClick,\n ...restProps\n }: PropsWithoutRef<NodeComponentProps>,\n ref: NodeComponentProps['ref']\n ) => {\n const t = useI18n();\n const actionItems = actions?.map(actionItem => {\n return {\n id: actionItem.id,\n primary: actionItem.text,\n onClick: (actionId: string, e: MouseEvent) => {\n e.stopPropagation();\n onActionClick?.({ actionId, nodeId: id }, e);\n }\n };\n });\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n onClick?.(id);\n }\n },\n [onClick]\n );\n\n const additionalDataValue =\n additionalData &&\n additionalData.map((data, index) => {\n return `${data.label}: ${data.value}${index === additionalData.length - 1 ? '' : ', '}`;\n });\n\n const [nodeLabel, setNodeLabel] = useElement();\n const [nodeDescription, setNodeDescription] = useElement();\n const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n const [nodeIcon, setNodeIcon] = useElement();\n\n return (\n <StyledCard\n aria-label={label}\n onClick={() => onClick?.(id)}\n onKeyDown={handleEnterKeyDown}\n ref={ref}\n {...restProps}\n >\n <Flex\n as={StyledCardHeader}\n container={{ alignItems: 'center', justify: 'between', pad: 1, gap: 1 }}\n >\n <Flex container={{ alignItems: 'center', wrap: 'nowrap' }}>\n <StyledIcon id={id} type={type} ref={setNodeIcon}>\n <Icon name={assignmentVisual[type]} />\n </StyledIcon>\n <Tooltip target={nodeIcon} hideDelay='none'>\n {cap(type)}\n </Tooltip>\n <StyledText variant='h4' ref={setNodeLabel}>\n {label}\n </StyledText>\n <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n {label}\n </Tooltip>\n </Flex>\n <MenuButton\n portal\n variant='simple'\n text={t('actions')}\n icon='more'\n iconOnly\n onClick={(e: MouseEvent) => e.stopPropagation()}\n onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n menu={{\n items: actionItems\n }}\n />\n </Flex>\n {description && (\n <>\n <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n {description}\n </Tooltip>\n </>\n )}\n {additionalDataValue && (\n <>\n <StyledAdditionalData ref={setNodeAdditionalData}>\n <Text variant='secondary'>{additionalDataValue}</Text>\n </StyledAdditionalData>\n <Tooltip describeTarget={false} target={nodeAdditionalData} hideDelay='none'>\n {additionalDataValue}\n </Tooltip>\n </>\n )}\n </StyledCard>\n );\n }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n return (\n <Flex container={{ justify: 'center', direction: 'column' }}>\n <Flex as={StyledLabel} type={type}>\n {label}\n </Flex>\n <Flex as={StyledCircle} type={type} tabIndex='0' aria-label={label} role='button' />\n </Flex>\n );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n return (\n <Flex container={{ justify: 'center', direction: 'column' }}>\n <Flex as={StyledCircle} type={type} tabIndex='0' aria-label={label} role='button' />\n <Flex as={StyledLabel} type={type}>\n {label}\n </Flex>\n </Flex>\n );\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default, FlowModellerProps } from './FlowModeller';\nexport { NodeProps } from './Node/Node.types';\n"]}
|
package/lib/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ export { default as AppHeader } from './components/AppHeader';
|
|
|
2
2
|
export * from './components/AppHeader';
|
|
3
3
|
export { default as AppShell } from './components/AppShell';
|
|
4
4
|
export * from './components/AppShell';
|
|
5
|
+
export { default as FlowModeller } from './components/FlowModeller';
|
|
6
|
+
export * from './components/FlowModeller';
|
|
5
7
|
export { default as LifeCycle } from './components/LifeCycle';
|
|
6
8
|
export * from './components/LifeCycle';
|
|
7
9
|
export * from './components/PageTemplates';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -3,6 +3,8 @@ export { default as AppHeader } from './components/AppHeader';
|
|
|
3
3
|
export * from './components/AppHeader';
|
|
4
4
|
export { default as AppShell } from './components/AppShell';
|
|
5
5
|
export * from './components/AppShell';
|
|
6
|
+
export { default as FlowModeller } from './components/FlowModeller';
|
|
7
|
+
export * from './components/FlowModeller';
|
|
6
8
|
export { default as LifeCycle } from './components/LifeCycle';
|
|
7
9
|
export * from './components/LifeCycle';
|
|
8
10
|
export * from './components/PageTemplates';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "2.0.0-dev.
|
|
3
|
+
"version": "2.0.0-dev.16.3",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "2.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "2.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "2.0.0-dev.16.3",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.0.0-dev.16.3",
|
|
25
25
|
"polished": "^4.1.0",
|
|
26
26
|
"react": "^16.14.0 || ^17.0.0",
|
|
27
27
|
"react-dom": "^16.14.0 || ^17.0.0",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@storybook/addon-toolbars": "^6.3.8",
|
|
37
37
|
"@storybook/addons": "^6.3.8",
|
|
38
38
|
"@storybook/react": "^6.3.8",
|
|
39
|
+
"@storybook/testing-react": "0.0.18",
|
|
39
40
|
"@storybook/theming": "^6.3.8",
|
|
40
41
|
"enzyme": "^3.11.0",
|
|
41
42
|
"enzyme-adapter-react-16": "^1.15.5",
|