@pega/cosmos-react-demos 3.0.0 → 4.0.0-dev.1.0
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/jsx/build/AppHeader/AppHeader.stories.d.ts +4 -0
- package/jsx/build/AppHeader/AppHeader.stories.d.ts.map +1 -1
- package/jsx/build/AppHeader/AppHeader.stories.jsx +111 -82
- package/jsx/build/AppHeader/AppHeader.stories.jsx.map +1 -1
- package/jsx/build/AppShell/AppShell.stories.d.ts +4 -0
- package/jsx/build/AppShell/AppShell.stories.d.ts.map +1 -1
- package/jsx/build/AppShell/AppShell.stories.jsx +101 -74
- package/jsx/build/AppShell/AppShell.stories.jsx.map +1 -1
- package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts +2 -25
- package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts.map +1 -1
- package/jsx/build/PageTemplates/GalleryPage.mocks.jsx +17 -20
- package/jsx/build/PageTemplates/GalleryPage.mocks.jsx.map +1 -1
- package/jsx/build/PageTemplates/PageTemplates.mocks.d.ts.map +1 -1
- package/jsx/build/PageTemplates/PageTemplates.mocks.jsx +15 -4
- package/jsx/build/PageTemplates/PageTemplates.mocks.jsx.map +1 -1
- package/lib/build/AppHeader/AppHeader.stories.d.ts +4 -0
- package/lib/build/AppHeader/AppHeader.stories.d.ts.map +1 -1
- package/lib/build/AppHeader/AppHeader.stories.js +111 -82
- package/lib/build/AppHeader/AppHeader.stories.js.map +1 -1
- package/lib/build/AppShell/AppShell.stories.d.ts +4 -0
- package/lib/build/AppShell/AppShell.stories.d.ts.map +1 -1
- package/lib/build/AppShell/AppShell.stories.js +101 -74
- package/lib/build/AppShell/AppShell.stories.js.map +1 -1
- package/lib/build/PageTemplates/GalleryPage.mocks.d.ts +2 -25
- package/lib/build/PageTemplates/GalleryPage.mocks.d.ts.map +1 -1
- package/lib/build/PageTemplates/GalleryPage.mocks.js +17 -20
- package/lib/build/PageTemplates/GalleryPage.mocks.js.map +1 -1
- package/lib/build/PageTemplates/PageTemplates.mocks.d.ts.map +1 -1
- package/lib/build/PageTemplates/PageTemplates.mocks.js +15 -4
- package/lib/build/PageTemplates/PageTemplates.mocks.js.map +1 -1
- package/package.json +9 -9
|
@@ -4,6 +4,10 @@ declare const _default: Meta<import("@storybook/react").Args>;
|
|
|
4
4
|
export default _default;
|
|
5
5
|
interface AppHeaderStoryProps extends BranchButtonProps {
|
|
6
6
|
showPreview: boolean;
|
|
7
|
+
showLinks: boolean;
|
|
8
|
+
showBranch: boolean;
|
|
9
|
+
showAppNameAndVersion: boolean;
|
|
10
|
+
appName: string;
|
|
7
11
|
}
|
|
8
12
|
export declare const AppHeaderDemo: Story<AppHeaderStoryProps>;
|
|
9
13
|
//# sourceMappingURL=AppHeader.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAa,iBAAiB,EAAkB,MAAM,0BAA0B,CAAC;;AAGxF,wBAMU;AAEV,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAmIpD,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
1
2
|
import { action } from '@storybook/addon-actions';
|
|
2
3
|
import { AppHeader } from '@pega/cosmos-react-build';
|
|
3
|
-
import { Button, Input, Modal, useModalManager } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Button, Input, Modal, useModalManager, Icon } from '@pega/cosmos-react-core';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Build/AppHeader',
|
|
6
7
|
component: AppHeader,
|
|
@@ -24,101 +25,129 @@ export const AppHeaderDemo = (args) => {
|
|
|
24
25
|
]
|
|
25
26
|
});
|
|
26
27
|
};
|
|
28
|
+
const [contexts, setContexts] = useState([
|
|
29
|
+
{
|
|
30
|
+
id: '1',
|
|
31
|
+
primary: 'Studio',
|
|
32
|
+
selected: true,
|
|
33
|
+
visual: <Icon name='app'/>,
|
|
34
|
+
href: 'www.pega.com'
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: '2',
|
|
38
|
+
primary: 'Administration',
|
|
39
|
+
selected: false,
|
|
40
|
+
visual: <Icon name='cloud'/>,
|
|
41
|
+
href: 'www.pega.com'
|
|
42
|
+
}
|
|
43
|
+
]);
|
|
27
44
|
return (<AppHeader brand={{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
45
|
+
label: 'Launchpad',
|
|
46
|
+
logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
|
|
47
|
+
href: '/',
|
|
48
|
+
onClick: e => {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
action('Navigated to root');
|
|
51
|
+
}
|
|
52
|
+
}} contexts={contexts} onContextClick={id => {
|
|
53
|
+
setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));
|
|
54
|
+
}} links={args.showLinks
|
|
55
|
+
? [
|
|
56
|
+
{
|
|
57
|
+
id: '1',
|
|
58
|
+
name: 'Applications',
|
|
59
|
+
onClick: action('Clicked Applications')
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
id: '2',
|
|
63
|
+
name: 'Shared resources',
|
|
64
|
+
onClick: action('Clicked Shared resources')
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
: []} utils={{
|
|
35
68
|
search: {
|
|
36
|
-
placeholder: 'Search
|
|
69
|
+
placeholder: 'Search'
|
|
37
70
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
71
|
+
appInfo: args.showAppNameAndVersion
|
|
72
|
+
? {
|
|
73
|
+
name: args.appName,
|
|
74
|
+
version: '1.0.0'
|
|
75
|
+
}
|
|
76
|
+
: undefined,
|
|
77
|
+
avatar: { name: 'Lee Ram' },
|
|
78
|
+
branch: args.showBranch
|
|
79
|
+
? {
|
|
80
|
+
text: args.text,
|
|
81
|
+
count: args.count,
|
|
82
|
+
variant: args.variant,
|
|
83
|
+
compact: args.compact,
|
|
84
|
+
items: [
|
|
85
|
+
{
|
|
86
|
+
primary: 'Commit to branch',
|
|
87
|
+
id: 'commitToBranch',
|
|
88
|
+
onClick: action('Clicked commitToBranch')
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
primary: 'Merge branch',
|
|
92
|
+
id: 'mergeBranch',
|
|
93
|
+
onClick: action('Clicked mergeBranch')
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
primary: 'View branch',
|
|
97
|
+
id: 'viewBranch',
|
|
98
|
+
onClick: action('Clicked viewBranch')
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
primary: 'Switch branch',
|
|
102
|
+
id: 'switchBranch',
|
|
103
|
+
onClick: action('Clicked switchBranch')
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
primary: 'Add branch',
|
|
107
|
+
id: 'addBranch',
|
|
108
|
+
onClick: () => {
|
|
109
|
+
action('Clicked addBranch')();
|
|
110
|
+
openAddBranchModal();
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
primary: 'View all branches',
|
|
115
|
+
id: 'viewAllBranches',
|
|
116
|
+
onClick: action('Clicked viewAllBranches')
|
|
70
117
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
id: 'viewAllBranches',
|
|
75
|
-
onClick: action('Clicked viewAllBranches')
|
|
76
|
-
}
|
|
77
|
-
]
|
|
78
|
-
},
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
: undefined,
|
|
79
121
|
action: args.showPreview
|
|
80
|
-
? {
|
|
122
|
+
? {
|
|
123
|
+
id: 'preview',
|
|
124
|
+
text: 'Preview',
|
|
125
|
+
onClick: action('Clicked preview button'),
|
|
126
|
+
icon: 'play-solid'
|
|
127
|
+
}
|
|
81
128
|
: undefined
|
|
82
|
-
}}
|
|
83
|
-
{
|
|
84
|
-
id: '1',
|
|
85
|
-
name: 'Applications',
|
|
86
|
-
onClick: action('Clicked Applications')
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
id: '2',
|
|
90
|
-
name: 'Shared resources',
|
|
91
|
-
onClick: action('Clicked Shared resources')
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
id: '3',
|
|
95
|
-
name: 'Teams',
|
|
96
|
-
onClick: action('Clicked Teams')
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
id: '4',
|
|
100
|
-
name: 'AI & Analytics',
|
|
101
|
-
onClick: action('Clicked AI & Analytics')
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
id: '5',
|
|
105
|
-
name: 'Deploy',
|
|
106
|
-
onClick: action('Clicked Deploy')
|
|
107
|
-
}
|
|
108
|
-
]}/>);
|
|
129
|
+
}}/>);
|
|
109
130
|
};
|
|
110
131
|
AppHeaderDemo.args = {
|
|
111
|
-
variant:
|
|
112
|
-
text: '
|
|
113
|
-
count:
|
|
132
|
+
variant: 'success',
|
|
133
|
+
text: 'Launchpad (Main)',
|
|
134
|
+
count: 4,
|
|
114
135
|
compact: false,
|
|
115
|
-
|
|
136
|
+
showLinks: false,
|
|
137
|
+
showAppNameAndVersion: true,
|
|
138
|
+
showBranch: true,
|
|
139
|
+
showPreview: true,
|
|
140
|
+
appName: 'Compass App'
|
|
116
141
|
};
|
|
117
142
|
AppHeaderDemo.argTypes = {
|
|
118
143
|
variant: { options: ['success', 'urgent'], control: { type: 'radio' } },
|
|
119
144
|
text: { control: { type: 'text' } },
|
|
120
145
|
count: { control: { type: 'number' } },
|
|
121
146
|
compact: { control: { type: 'boolean' } },
|
|
122
|
-
|
|
147
|
+
showLinks: { control: { type: 'boolean' } },
|
|
148
|
+
showAppNameAndVersion: { control: { type: 'boolean' } },
|
|
149
|
+
showBranch: { control: { type: 'boolean' } },
|
|
150
|
+
showPreview: { control: { type: 'boolean' } },
|
|
151
|
+
appName: { control: { type: 'text' } }
|
|
123
152
|
};
|
|
124
153
|
//# sourceMappingURL=AppHeader.stories.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"AppHeader.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppHeader, BranchButtonProps, AppHeaderProps } from '@pega/cosmos-react-build';\nimport { Button, Input, Modal, useModalManager, Icon } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Build/AppHeader',\n component: AppHeader,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppHeaderStoryProps extends BranchButtonProps {\n showPreview: boolean;\n showLinks: boolean;\n showBranch: boolean;\n showAppNameAndVersion: boolean;\n appName: string;\n}\n\nexport const AppHeaderDemo: Story<AppHeaderStoryProps> = (args: AppHeaderStoryProps) => {\n const { create } = useModalManager();\n\n const openAddBranchModal = () => {\n const { dismiss, update } = create(Modal, {\n children: <Input label='Branch' />,\n heading: 'Add branch'\n });\n update({\n actions: [\n <Button onClick={dismiss}>Cancel</Button>,\n <Button onClick={dismiss} variant='primary'>\n Finish\n </Button>\n ]\n });\n };\n\n const [contexts, setContexts] = useState<AppHeaderProps['contexts']>([\n {\n id: '1',\n primary: 'Studio',\n selected: true,\n visual: <Icon name='app' />,\n href: 'www.pega.com'\n },\n {\n id: '2',\n primary: 'Administration',\n selected: false,\n visual: <Icon name='cloud' />,\n href: 'www.pega.com'\n }\n ]);\n\n return (\n <AppHeader\n brand={{\n label: 'Launchpad',\n logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n href: '/',\n onClick: e => {\n e.preventDefault();\n action('Navigated to root');\n }\n }}\n contexts={contexts}\n onContextClick={id => {\n setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));\n }}\n links={\n args.showLinks\n ? [\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 : []\n }\n utils={{\n search: {\n placeholder: 'Search'\n },\n appInfo: args.showAppNameAndVersion\n ? {\n name: args.appName,\n version: '1.0.0'\n }\n : undefined,\n avatar: { name: 'Lee Ram' },\n branch: args.showBranch\n ? {\n text: args.text,\n count: args.count,\n variant: args.variant,\n compact: args.compact,\n items: [\n {\n primary: 'Commit to branch',\n id: 'commitToBranch',\n onClick: action('Clicked commitToBranch')\n },\n {\n primary: 'Merge branch',\n id: 'mergeBranch',\n onClick: action('Clicked mergeBranch')\n },\n {\n primary: 'View branch',\n id: 'viewBranch',\n onClick: action('Clicked viewBranch')\n },\n {\n primary: 'Switch branch',\n id: 'switchBranch',\n onClick: action('Clicked switchBranch')\n },\n {\n primary: 'Add branch',\n id: 'addBranch',\n onClick: () => {\n action('Clicked addBranch')();\n openAddBranchModal();\n }\n },\n {\n primary: 'View all branches',\n id: 'viewAllBranches',\n onClick: action('Clicked viewAllBranches')\n }\n ]\n }\n : undefined,\n action: args.showPreview\n ? {\n id: 'preview',\n text: 'Preview',\n onClick: action('Clicked preview button'),\n icon: 'play-solid'\n }\n : undefined\n }}\n />\n );\n};\n\nAppHeaderDemo.args = {\n variant: 'success',\n text: 'Launchpad (Main)',\n count: 4,\n compact: false,\n showLinks: false,\n showAppNameAndVersion: true,\n showBranch: true,\n showPreview: true,\n appName: 'Compass App'\n};\n\nAppHeaderDemo.argTypes = {\n variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n text: { control: { type: 'text' } },\n count: { control: { type: 'number' } },\n compact: { control: { type: 'boolean' } },\n showLinks: { control: { type: 'boolean' } },\n showAppNameAndVersion: { control: { type: 'boolean' } },\n showBranch: { control: { type: 'boolean' } },\n showPreview: { control: { type: 'boolean' } },\n appName: { control: { type: 'text' } }\n};\n"]}
|
|
@@ -8,6 +8,10 @@ export interface AppShellStoryProps extends BranchButtonProps {
|
|
|
8
8
|
showBreadcrumbs: boolean;
|
|
9
9
|
showPreview: boolean;
|
|
10
10
|
onPreviewClick: Action['onClick'];
|
|
11
|
+
showLinks: boolean;
|
|
12
|
+
showBranch: boolean;
|
|
13
|
+
showAppNameAndVersion: boolean;
|
|
14
|
+
appName: string;
|
|
11
15
|
}
|
|
12
16
|
export declare const AppShellDemo: Story<AppShellStoryProps>;
|
|
13
17
|
//# sourceMappingURL=AppShell.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAwC,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAA4B,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAYvF,wBAMU;AAEV,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAgNlD,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
import { action } from '@storybook/addon-actions';
|
|
3
|
-
import { treeHelpers } from '@pega/cosmos-react-core';
|
|
3
|
+
import { treeHelpers, Icon } from '@pega/cosmos-react-core';
|
|
4
4
|
import { AppShell } from '@pega/cosmos-react-build';
|
|
5
5
|
import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList, TabbedPageComp } from './AppShell.mocks';
|
|
6
6
|
export default {
|
|
@@ -31,91 +31,110 @@ export const AppShellDemo = (args) => {
|
|
|
31
31
|
};
|
|
32
32
|
}));
|
|
33
33
|
};
|
|
34
|
+
const [contexts, setContexts] = useState([
|
|
35
|
+
{
|
|
36
|
+
id: '1',
|
|
37
|
+
primary: 'Studio',
|
|
38
|
+
selected: true,
|
|
39
|
+
visual: <Icon name='app'/>,
|
|
40
|
+
href: 'www.pega.com'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
id: '2',
|
|
44
|
+
primary: 'Administration',
|
|
45
|
+
selected: false,
|
|
46
|
+
visual: <Icon name='cloud'/>,
|
|
47
|
+
href: 'www.pega.com'
|
|
48
|
+
}
|
|
49
|
+
]);
|
|
34
50
|
const appHeader = {
|
|
35
51
|
brand: {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
52
|
+
label: 'Launchpad',
|
|
53
|
+
logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
|
|
54
|
+
href: '/',
|
|
55
|
+
onClick: e => {
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
action('Navigated to root');
|
|
39
58
|
}
|
|
40
59
|
},
|
|
60
|
+
contexts,
|
|
61
|
+
onContextClick: id => {
|
|
62
|
+
setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));
|
|
63
|
+
},
|
|
41
64
|
utils: {
|
|
42
|
-
avatar: { name: 'Alan' },
|
|
43
65
|
search: {
|
|
44
|
-
placeholder: 'Search
|
|
45
|
-
},
|
|
46
|
-
branch: {
|
|
47
|
-
text: args.text,
|
|
48
|
-
variant: args.variant,
|
|
49
|
-
count: args.count,
|
|
50
|
-
compact: args.compact,
|
|
51
|
-
items: [
|
|
52
|
-
{
|
|
53
|
-
primary: 'Commit to branch',
|
|
54
|
-
id: 'commitToBranch',
|
|
55
|
-
onClick: action('Clicked commitToBranch')
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
primary: 'Merge branch',
|
|
59
|
-
id: 'mergeBranch',
|
|
60
|
-
onClick: action('Clicked mergeBranch')
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
primary: 'View branch',
|
|
64
|
-
id: 'viewBranch',
|
|
65
|
-
onClick: action('Clicked viewBranch')
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
primary: 'Switch branch',
|
|
69
|
-
id: 'switchBranch',
|
|
70
|
-
onClick: action('Clicked switchBranch')
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
primary: 'Add branch',
|
|
74
|
-
id: 'addBranch',
|
|
75
|
-
onClick: action('Clicked addBranch')
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
primary: 'View all branches',
|
|
79
|
-
id: 'viewAllBranches',
|
|
80
|
-
onClick: action('Clicked viewAllBranches')
|
|
81
|
-
}
|
|
82
|
-
]
|
|
66
|
+
placeholder: 'Search'
|
|
83
67
|
},
|
|
68
|
+
appInfo: args.showAppNameAndVersion
|
|
69
|
+
? {
|
|
70
|
+
name: args.appName,
|
|
71
|
+
version: '1.0.0'
|
|
72
|
+
}
|
|
73
|
+
: undefined,
|
|
74
|
+
avatar: { name: 'Alan' },
|
|
75
|
+
branch: args.showBranch
|
|
76
|
+
? {
|
|
77
|
+
text: args.text,
|
|
78
|
+
variant: args.variant,
|
|
79
|
+
count: args.count,
|
|
80
|
+
compact: args.compact,
|
|
81
|
+
items: [
|
|
82
|
+
{
|
|
83
|
+
primary: 'Commit to branch',
|
|
84
|
+
id: 'commitToBranch',
|
|
85
|
+
onClick: action('Clicked commitToBranch')
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
primary: 'Merge branch',
|
|
89
|
+
id: 'mergeBranch',
|
|
90
|
+
onClick: action('Clicked mergeBranch')
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
primary: 'View branch',
|
|
94
|
+
id: 'viewBranch',
|
|
95
|
+
onClick: action('Clicked viewBranch')
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
primary: 'Switch branch',
|
|
99
|
+
id: 'switchBranch',
|
|
100
|
+
onClick: action('Clicked switchBranch')
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
primary: 'Add branch',
|
|
104
|
+
id: 'addBranch',
|
|
105
|
+
onClick: action('Clicked addBranch')
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
primary: 'View all branches',
|
|
109
|
+
id: 'viewAllBranches',
|
|
110
|
+
onClick: action('Clicked viewAllBranches')
|
|
111
|
+
}
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
: undefined,
|
|
84
115
|
action: args.showPreview
|
|
85
116
|
? {
|
|
86
117
|
id: 'preview',
|
|
87
118
|
text: 'Preview',
|
|
88
|
-
onClick: args.onPreviewClick
|
|
119
|
+
onClick: args.onPreviewClick,
|
|
120
|
+
icon: 'play-solid'
|
|
89
121
|
}
|
|
90
122
|
: undefined
|
|
91
123
|
},
|
|
92
|
-
links:
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
onClick: () => action('Clicked Teams')()
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
id: '4',
|
|
110
|
-
name: 'AI & Analytics',
|
|
111
|
-
onClick: () => action('Clicked AI & Analytics')()
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
id: '5',
|
|
115
|
-
name: 'Deploy',
|
|
116
|
-
onClick: () => action('Clicked Deploy')()
|
|
117
|
-
}
|
|
118
|
-
]
|
|
124
|
+
links: args.showLinks
|
|
125
|
+
? [
|
|
126
|
+
{
|
|
127
|
+
id: '1',
|
|
128
|
+
name: 'Applications',
|
|
129
|
+
onClick: () => action('Clicked Applications')()
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
id: '2',
|
|
133
|
+
name: 'Shared resources',
|
|
134
|
+
onClick: () => action('Clicked Shared resources')()
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
: []
|
|
119
138
|
};
|
|
120
139
|
return (<>
|
|
121
140
|
<AppShell main={<TabbedPageComp {...{ ...args, pageContent }}/>} appHeader={appHeader} hideNav={args.hideNavigation} appInfo={{
|
|
@@ -187,7 +206,11 @@ AppShellDemo.args = {
|
|
|
187
206
|
count: null,
|
|
188
207
|
compact: false,
|
|
189
208
|
showPreview: true,
|
|
190
|
-
onPreviewClick: action('Clicked preview button')
|
|
209
|
+
onPreviewClick: action('Clicked preview button'),
|
|
210
|
+
showLinks: false,
|
|
211
|
+
showAppNameAndVersion: true,
|
|
212
|
+
showBranch: true,
|
|
213
|
+
appName: 'Compass App'
|
|
191
214
|
};
|
|
192
215
|
AppShellDemo.argTypes = {
|
|
193
216
|
hideNavigation: { control: { type: 'boolean' } },
|
|
@@ -196,7 +219,11 @@ AppShellDemo.argTypes = {
|
|
|
196
219
|
text: { control: { type: 'text' } },
|
|
197
220
|
count: { control: { type: 'number' } },
|
|
198
221
|
compact: { control: { type: 'boolean' } },
|
|
222
|
+
onPreviewClick: { table: { disable: true } },
|
|
223
|
+
showLinks: { control: { type: 'boolean' } },
|
|
224
|
+
showAppNameAndVersion: { control: { type: 'boolean' } },
|
|
225
|
+
showBranch: { control: { type: 'boolean' } },
|
|
199
226
|
showPreview: { control: { type: 'boolean' } },
|
|
200
|
-
|
|
227
|
+
appName: { control: { type: 'text' } }
|
|
201
228
|
};
|
|
202
229
|
//# sourceMappingURL=AppShell.stories.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Action, StandardTreeProps, treeHelpers } from '@pega/cosmos-react-core';\nimport { AppShell, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n appExplorerMenuList,\n branchesMenuList,\n contents,\n PageContentProps,\n recordMenuList,\n treeList,\n TabbedPageComp\n} from './AppShell.mocks';\n\nexport default {\n title: 'Build/AppShell',\n component: AppShell,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport interface AppShellStoryProps extends BranchButtonProps {\n hideNavigation: boolean;\n showBreadcrumbs: boolean;\n showPreview: boolean;\n onPreviewClick: Action['onClick'];\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n );\n const [currentDrawer, setCurrentDrawer] = useState('explorer');\n const [currentUtil, setCurrentUtil] = useState('explorer');\n const [pageContent, setPageContent] = useState<PageContentProps>(contents[19]);\n\n const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n if (!clickedNode?.nodes) {\n setCurrentUtil(activeDrawerId);\n setCurrentNodeId(nodeId);\n setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n return;\n }\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, nodeId, node => {\n return {\n ...node,\n expanded: !node.expanded\n };\n })\n );\n };\n\n const appHeader = {\n brand: {\n name: 'AppStudioX',\n visual: {\n icon: 'pegasus'\n }\n },\n utils: {\n avatar: { name: 'Alan' },\n search: {\n placeholder: 'Search anything, anywhere…'\n },\n branch: {\n text: args.text,\n variant: args.variant,\n count: args.count,\n compact: args.compact,\n items: [\n {\n primary: 'Commit to branch',\n id: 'commitToBranch',\n onClick: action('Clicked commitToBranch')\n },\n {\n primary: 'Merge branch',\n id: 'mergeBranch',\n onClick: action('Clicked mergeBranch')\n },\n {\n primary: 'View branch',\n id: 'viewBranch',\n onClick: action('Clicked viewBranch')\n },\n {\n primary: 'Switch branch',\n id: 'switchBranch',\n onClick: action('Clicked switchBranch')\n },\n {\n primary: 'Add branch',\n id: 'addBranch',\n onClick: action('Clicked addBranch')\n },\n {\n primary: 'View all branches',\n id: 'viewAllBranches',\n onClick: action('Clicked viewAllBranches')\n }\n ]\n },\n action: args.showPreview\n ? {\n id: 'preview',\n text: 'Preview',\n onClick: args.onPreviewClick\n }\n : undefined\n },\n links: [\n {\n id: '1',\n name: 'Applications',\n onClick: () => action('Clicked Applications')()\n },\n {\n id: '2',\n name: 'Shared resources',\n onClick: () => action('Clicked Shared resources')()\n },\n {\n id: '3',\n name: 'Teams',\n onClick: () => action('Clicked Teams')()\n },\n {\n id: '4',\n name: 'AI & Analytics',\n onClick: () => action('Clicked AI & Analytics')()\n },\n {\n id: '5',\n name: 'Deploy',\n onClick: () => action('Clicked Deploy')()\n }\n ]\n };\n\n return (\n <>\n <AppShell\n main={<TabbedPageComp {...{ ...args, pageContent }} />}\n appHeader={appHeader}\n hideNav={args.hideNavigation}\n appInfo={{\n text: 'U+ Desk',\n visual: {\n icon: 'phone-in-solid',\n backgroundColor: '#0ac7c8',\n color: '#fff'\n },\n meta: ['1.0.0']\n }}\n navigation={{\n nodes: allNodes,\n currentNodeId,\n onNodeClick: id => {\n onNodeClick(id, currentDrawer);\n }\n }}\n utils={{\n onItemClick: id => {\n setCurrentDrawer(id);\n if (id === 'explorer') {\n const appExploreTree = currentNodeId\n ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n : appExplorerMenuList;\n setAllNodes(appExploreTree);\n }\n\n if (id === 'branches') {\n const branchTree = currentNodeId\n ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n : branchesMenuList;\n setAllNodes(branchTree);\n }\n\n if (id === 'records') {\n const recordTree = currentNodeId\n ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n : recordMenuList;\n setAllNodes(recordTree);\n }\n },\n currentItemId: currentUtil,\n items: [\n {\n label: 'App Explorer',\n id: 'explorer'\n },\n {\n label: 'Branches',\n id: 'branches'\n },\n {\n label: 'Records',\n id: 'records'\n }\n ],\n drawer: {\n onBeforeClose: () => {\n setCurrentDrawer('');\n setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n }\n },\n devMode: true\n }}\n />\n </>\n );\n};\n\nAppShellDemo.args = {\n hideNavigation: false,\n showBreadcrumbs: true,\n variant: undefined,\n text: 'Alpha branch',\n count: null,\n compact: false,\n showPreview: true,\n // eslint-disable-next-line demo-patterns/literal-args\n onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n hideNavigation: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n text: { control: { type: 'text' } },\n count: { control: { type: 'number' } },\n compact: { control: { type: 'boolean' } },\n showPreview: { control: { type: 'boolean' } },\n onPreviewClick: { table: { disable: true } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Action, StandardTreeProps, treeHelpers, Icon } from '@pega/cosmos-react-core';\nimport { AppShell, AppHeaderProps, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n appExplorerMenuList,\n branchesMenuList,\n contents,\n PageContentProps,\n recordMenuList,\n treeList,\n TabbedPageComp\n} from './AppShell.mocks';\n\nexport default {\n title: 'Build/AppShell',\n component: AppShell,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport interface AppShellStoryProps extends BranchButtonProps {\n hideNavigation: boolean;\n showBreadcrumbs: boolean;\n showPreview: boolean;\n onPreviewClick: Action['onClick'];\n showLinks: boolean;\n showBranch: boolean;\n showAppNameAndVersion: boolean;\n appName: string;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n );\n const [currentDrawer, setCurrentDrawer] = useState('explorer');\n const [currentUtil, setCurrentUtil] = useState('explorer');\n const [pageContent, setPageContent] = useState<PageContentProps>(contents[19]);\n\n const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n if (!clickedNode?.nodes) {\n setCurrentUtil(activeDrawerId);\n setCurrentNodeId(nodeId);\n setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n return;\n }\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, nodeId, node => {\n return {\n ...node,\n expanded: !node.expanded\n };\n })\n );\n };\n\n const [contexts, setContexts] = useState<AppHeaderProps['contexts']>([\n {\n id: '1',\n primary: 'Studio',\n selected: true,\n visual: <Icon name='app' />,\n href: 'www.pega.com'\n },\n {\n id: '2',\n primary: 'Administration',\n selected: false,\n visual: <Icon name='cloud' />,\n href: 'www.pega.com'\n }\n ]);\n\n const appHeader: AppHeaderProps = {\n brand: {\n label: 'Launchpad',\n logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n href: '/',\n onClick: e => {\n e.preventDefault();\n action('Navigated to root');\n }\n },\n contexts,\n onContextClick: id => {\n setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));\n },\n utils: {\n search: {\n placeholder: 'Search'\n },\n appInfo: args.showAppNameAndVersion\n ? {\n name: args.appName,\n version: '1.0.0'\n }\n : undefined,\n avatar: { name: 'Alan' },\n branch: args.showBranch\n ? {\n text: args.text,\n variant: args.variant,\n count: args.count,\n compact: args.compact,\n items: [\n {\n primary: 'Commit to branch',\n id: 'commitToBranch',\n onClick: action('Clicked commitToBranch')\n },\n {\n primary: 'Merge branch',\n id: 'mergeBranch',\n onClick: action('Clicked mergeBranch')\n },\n {\n primary: 'View branch',\n id: 'viewBranch',\n onClick: action('Clicked viewBranch')\n },\n {\n primary: 'Switch branch',\n id: 'switchBranch',\n onClick: action('Clicked switchBranch')\n },\n {\n primary: 'Add branch',\n id: 'addBranch',\n onClick: action('Clicked addBranch')\n },\n {\n primary: 'View all branches',\n id: 'viewAllBranches',\n onClick: action('Clicked viewAllBranches')\n }\n ]\n }\n : undefined,\n action: args.showPreview\n ? {\n id: 'preview',\n text: 'Preview',\n onClick: args.onPreviewClick,\n icon: 'play-solid'\n }\n : undefined\n },\n links: args.showLinks\n ? [\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 : []\n };\n\n return (\n <>\n <AppShell\n main={<TabbedPageComp {...{ ...args, pageContent }} />}\n appHeader={appHeader}\n hideNav={args.hideNavigation}\n appInfo={{\n text: 'U+ Desk',\n visual: {\n icon: 'phone-in-solid',\n backgroundColor: '#0ac7c8',\n color: '#fff'\n },\n meta: ['1.0.0']\n }}\n navigation={{\n nodes: allNodes,\n currentNodeId,\n onNodeClick: id => {\n onNodeClick(id, currentDrawer);\n }\n }}\n utils={{\n onItemClick: id => {\n setCurrentDrawer(id);\n if (id === 'explorer') {\n const appExploreTree = currentNodeId\n ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n : appExplorerMenuList;\n setAllNodes(appExploreTree);\n }\n\n if (id === 'branches') {\n const branchTree = currentNodeId\n ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n : branchesMenuList;\n setAllNodes(branchTree);\n }\n\n if (id === 'records') {\n const recordTree = currentNodeId\n ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n : recordMenuList;\n setAllNodes(recordTree);\n }\n },\n currentItemId: currentUtil,\n items: [\n {\n label: 'App Explorer',\n id: 'explorer'\n },\n {\n label: 'Branches',\n id: 'branches'\n },\n {\n label: 'Records',\n id: 'records'\n }\n ],\n drawer: {\n onBeforeClose: () => {\n setCurrentDrawer('');\n setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n }\n },\n devMode: true\n }}\n />\n </>\n );\n};\n\nAppShellDemo.args = {\n hideNavigation: false,\n showBreadcrumbs: true,\n variant: undefined,\n text: 'Alpha branch',\n count: null,\n compact: false,\n showPreview: true,\n // eslint-disable-next-line demo-patterns/literal-args\n onPreviewClick: action('Clicked preview button'),\n showLinks: false,\n showAppNameAndVersion: true,\n showBranch: true,\n appName: 'Compass App'\n};\n\nAppShellDemo.argTypes = {\n hideNavigation: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n text: { control: { type: 'text' } },\n count: { control: { type: 'number' } },\n compact: { control: { type: 'boolean' } },\n onPreviewClick: { table: { disable: true } },\n showLinks: { control: { type: 'boolean' } },\n showAppNameAndVersion: { control: { type: 'boolean' } },\n showBranch: { control: { type: 'boolean' } },\n showPreview: { control: { type: 'boolean' } },\n appName: { control: { type: 'text' } }\n};\n"]}
|
|
@@ -1,29 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
name: string;
|
|
5
|
-
visual: {};
|
|
6
|
-
};
|
|
7
|
-
utils: {
|
|
8
|
-
avatar: {
|
|
9
|
-
name: string;
|
|
10
|
-
};
|
|
11
|
-
search: {
|
|
12
|
-
placeholder: string;
|
|
13
|
-
};
|
|
14
|
-
branchName: string;
|
|
15
|
-
actions: {
|
|
16
|
-
primary: string;
|
|
17
|
-
id: string;
|
|
18
|
-
onClick: () => void;
|
|
19
|
-
}[];
|
|
20
|
-
};
|
|
21
|
-
links: {
|
|
22
|
-
id: string;
|
|
23
|
-
name: string;
|
|
24
|
-
onClick: () => void;
|
|
25
|
-
}[];
|
|
26
|
-
};
|
|
2
|
+
import { AppHeaderProps } from '@pega/cosmos-react-build';
|
|
3
|
+
export declare const appHeader: AppHeaderProps;
|
|
27
4
|
export declare const getOverviewCardData: () => {
|
|
28
5
|
id: string;
|
|
29
6
|
title: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryPage.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"GalleryPage.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,eAAO,MAAM,SAAS,EAAE,cAgDvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;GAyB/B,CAAC"}
|