@platformatic/ui-components 0.17.2 → 0.17.4
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/dist/assets/{index-BeInQDZN.js → index-CebhuZ6r.js} +6 -6
- package/dist/index.html +1 -1
- package/index.js +5 -1
- package/package.json +1 -1
- package/src/components/icons/HeartBeatIcon.jsx +70 -0
- package/src/components/icons/TechIcon.jsx +106 -0
- package/src/components/icons/index.js +4 -0
- package/src/stories/icons/Icons.stories.jsx +0 -90
package/dist/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CebhuZ6r.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DE70C3KG.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/index.js
CHANGED
|
@@ -25,6 +25,7 @@ import LoginButton from './src/components/LoginButton'
|
|
|
25
25
|
import Logo from './src/components/Logo'
|
|
26
26
|
import LogoDropDown from './src/components/LogoDropDown'
|
|
27
27
|
import Logos from './src/components/logos'
|
|
28
|
+
import MetricInfoBox from './src/components/MetricInfoBox'
|
|
28
29
|
import Modal from './src/components/Modal'
|
|
29
30
|
import ModalDirectional from './src/components/ModalDirectional'
|
|
30
31
|
import ModalStepsForward from './src/components/ModalStepsForward'
|
|
@@ -41,6 +42,7 @@ import TooltipAbsolute from './src/components/TooltipAbsolute'
|
|
|
41
42
|
import TabbedWindow from './src/components/TabbedWindow'
|
|
42
43
|
import Tag from './src/components/Tag'
|
|
43
44
|
import TextWithLabel from './src/components/TextWithLabel'
|
|
45
|
+
import TrendMetric from './src/components/TrendMetric'
|
|
44
46
|
import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
|
|
45
47
|
import Versions from './src/components/Versions'
|
|
46
48
|
import VerticalSeparator from './src/components/VerticalSeparator'
|
|
@@ -61,8 +63,9 @@ export {
|
|
|
61
63
|
GHLoginButton,
|
|
62
64
|
Forms,
|
|
63
65
|
Icons,
|
|
64
|
-
Logos,
|
|
65
66
|
InfoBox,
|
|
67
|
+
Logos,
|
|
68
|
+
MetricInfoBox,
|
|
66
69
|
Sidebar,
|
|
67
70
|
Layout,
|
|
68
71
|
List,
|
|
@@ -87,6 +90,7 @@ export {
|
|
|
87
90
|
TabbedWindow,
|
|
88
91
|
Tag,
|
|
89
92
|
TextWithLabel,
|
|
93
|
+
TrendMetric,
|
|
90
94
|
Tooltip,
|
|
91
95
|
TooltipAbsolute,
|
|
92
96
|
TwoColumnsLayout,
|
package/package.json
CHANGED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const HeartBeatIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={17}
|
|
26
|
+
viewBox='0 0 16 17'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<path d='M2 8.5H4L6 12L8 2.5L10.5 14.5L12 5.5H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
</svg>
|
|
33
|
+
)
|
|
34
|
+
break
|
|
35
|
+
case MEDIUM:
|
|
36
|
+
icon = (
|
|
37
|
+
<svg
|
|
38
|
+
width={24}
|
|
39
|
+
height={25}
|
|
40
|
+
viewBox='0 0 24 25'
|
|
41
|
+
fill='none'
|
|
42
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
43
|
+
className={className}
|
|
44
|
+
>
|
|
45
|
+
<path d='M3 12.5H6L9 18L12 3.5L15.75 21.5L18 8.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
46
|
+
</svg>
|
|
47
|
+
)
|
|
48
|
+
break
|
|
49
|
+
case LARGE:
|
|
50
|
+
icon = (
|
|
51
|
+
<svg
|
|
52
|
+
width={40}
|
|
53
|
+
height={41}
|
|
54
|
+
viewBox='0 0 40 41'
|
|
55
|
+
fill='none'
|
|
56
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
57
|
+
className={className}
|
|
58
|
+
>
|
|
59
|
+
<path d='M5 20.5H10L15 30L20 5.5L26.25 34.5L30 13.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
</svg>
|
|
61
|
+
)
|
|
62
|
+
break
|
|
63
|
+
|
|
64
|
+
default:
|
|
65
|
+
break
|
|
66
|
+
}
|
|
67
|
+
return icon
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export default HeartBeatIcon
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const TechIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={17}
|
|
26
|
+
viewBox='0 0 16 17'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<rect x='5' y='5.5' width='6' height='6' stroke='none' strokeLinejoin='round' />
|
|
32
|
+
<path d='M6 5.5V2.5' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<path d='M8 5.5V2.5' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<path d='M10 5.5V2.5' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M6 14.5V11.5' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M8 14.5V11.5' stroke='none' strokeLinecap='round' />
|
|
37
|
+
<path d='M10 14.5V11.5' stroke='none' strokeLinecap='round' />
|
|
38
|
+
<path d='M5 10.5L2 10.5' stroke='none' strokeLinecap='round' />
|
|
39
|
+
<path d='M5 8.5L2 8.5' stroke='none' strokeLinecap='round' />
|
|
40
|
+
<path d='M5 6.5L2 6.5' stroke='none' strokeLinecap='round' />
|
|
41
|
+
<path d='M14 10.5L11 10.5' stroke='none' strokeLinecap='round' />
|
|
42
|
+
<path d='M14 8.5L11 8.5' stroke='none' strokeLinecap='round' />
|
|
43
|
+
<path d='M14 6.5L11 6.5' stroke='none' strokeLinecap='round' />
|
|
44
|
+
</svg>
|
|
45
|
+
)
|
|
46
|
+
break
|
|
47
|
+
case MEDIUM:
|
|
48
|
+
icon = (
|
|
49
|
+
<svg
|
|
50
|
+
width={24}
|
|
51
|
+
height={25}
|
|
52
|
+
viewBox='0 0 24 25'
|
|
53
|
+
fill='none'
|
|
54
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
55
|
+
className={className}
|
|
56
|
+
>
|
|
57
|
+
<rect x='7.5' y='8.25' width='9' height='9' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
58
|
+
<path d='M9 8.25V3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
|
+
<path d='M12 8.25V3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M15 8.25V3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
<path d='M9 21.75V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
62
|
+
<path d='M12 21.75V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
63
|
+
<path d='M15 21.75V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
64
|
+
<path d='M7.5 15.75L3 15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
65
|
+
<path d='M7.5 12.75L3 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
66
|
+
<path d='M7.5 9.75L3 9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
67
|
+
<path d='M21 15.75L16.5 15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
68
|
+
<path d='M21 12.75L16.5 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
69
|
+
<path d='M21 9.75L16.5 9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
70
|
+
</svg>
|
|
71
|
+
)
|
|
72
|
+
break
|
|
73
|
+
case LARGE:
|
|
74
|
+
icon = (
|
|
75
|
+
<svg
|
|
76
|
+
width={40}
|
|
77
|
+
height={41}
|
|
78
|
+
viewBox='0 0 40 41'
|
|
79
|
+
fill='none'
|
|
80
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
81
|
+
className={className}
|
|
82
|
+
>
|
|
83
|
+
<rect x='12.5' y='13.75' width='15' height='15' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
84
|
+
<path d='M15 13.75V6.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<path d='M20 13.75V6.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
86
|
+
<path d='M25 13.75V6.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
87
|
+
<path d='M15 36.25V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
88
|
+
<path d='M20 36.25V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
89
|
+
<path d='M25 36.25V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
90
|
+
<path d='M12.5 26.25L5 26.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
91
|
+
<path d='M12.5 21.25L5 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
92
|
+
<path d='M12.5 16.25L5 16.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
93
|
+
<path d='M35 26.25L27.5 26.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
94
|
+
<path d='M35 21.25L27.5 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
95
|
+
<path d='M35 16.25L27.5 16.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
96
|
+
</svg>
|
|
97
|
+
)
|
|
98
|
+
break
|
|
99
|
+
|
|
100
|
+
default:
|
|
101
|
+
break
|
|
102
|
+
}
|
|
103
|
+
return icon
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
export default TechIcon
|
|
@@ -105,6 +105,7 @@ import GearIcon from './GearIcon'
|
|
|
105
105
|
import GenerationLoadingIcon from './GenerationLoadingIcon'
|
|
106
106
|
import GitHubRepo2Icon from './GitHubRepo2Icon'
|
|
107
107
|
import GitHubRepoIcon from './GitHubRepoIcon'
|
|
108
|
+
import HeartBeatIcon from './HeartBeatIcon'
|
|
108
109
|
import GiveOwnershipIcon from './GiveOwnershipIcon'
|
|
109
110
|
import GraphQLEditsIcon from './GraphQLEditsIcon'
|
|
110
111
|
import GraphQLIcon from './GraphQLIcon'
|
|
@@ -205,6 +206,7 @@ import StopIcon from './StopIcon'
|
|
|
205
206
|
import SuspendIcon from './SuspendIcon'
|
|
206
207
|
import SwitchIcon from './SwitchIcon'
|
|
207
208
|
import TableIcon from './TableIcon'
|
|
209
|
+
import TechIcon from './TechIcon'
|
|
208
210
|
import TaxonomyIcon from './TaxonomyIcon'
|
|
209
211
|
import TeamsIcon from './TeamsIcon'
|
|
210
212
|
import TerminalIcon from './TerminalIcon'
|
|
@@ -339,6 +341,7 @@ export default {
|
|
|
339
341
|
GiveOwnershipIcon,
|
|
340
342
|
GraphQLEditsIcon,
|
|
341
343
|
GraphQLIcon,
|
|
344
|
+
HeartBeatIcon,
|
|
342
345
|
HorizontalPodAutoscalerIcon,
|
|
343
346
|
HourglassIcon,
|
|
344
347
|
ImportAppIcon,
|
|
@@ -436,6 +439,7 @@ export default {
|
|
|
436
439
|
SuspendIcon,
|
|
437
440
|
SwitchIcon,
|
|
438
441
|
TableIcon,
|
|
442
|
+
TechIcon,
|
|
439
443
|
TaxonomyIcon,
|
|
440
444
|
TeamsIcon,
|
|
441
445
|
TerminalIcon,
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import PullRequestIcon from '../../components/icons/PullRequestIcon'
|
|
3
|
-
import CloseIcon from '../../components/icons/CloseIcon'
|
|
4
|
-
import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
|
|
5
|
-
import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
|
|
6
|
-
import UpgradeIcon from '../../components/icons/UpgradeIcon'
|
|
7
|
-
import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
|
|
8
3
|
import { COLORS_ICON, LARGE, MEDIUM, RICH_BLACK, SIZES, SMALL } from '../../components/constants'
|
|
9
4
|
import icons from '../../components/icons/index.js'
|
|
10
5
|
|
|
@@ -37,91 +32,6 @@ export default {
|
|
|
37
32
|
}
|
|
38
33
|
}
|
|
39
34
|
|
|
40
|
-
const PullRequestIconTemplate = (args) => <PullRequestIcon {...args} />
|
|
41
|
-
export const PullRequestIconDefault = PullRequestIconTemplate.bind({})
|
|
42
|
-
PullRequestIconDefault.args = {}
|
|
43
|
-
|
|
44
|
-
const CloseIconTemplate = (args) => <CloseIcon {...args} />
|
|
45
|
-
export const CloseIconDefault = CloseIconTemplate.bind({})
|
|
46
|
-
CloseIconDefault.args = {}
|
|
47
|
-
|
|
48
|
-
const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
|
|
49
|
-
export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
|
|
50
|
-
CircleCloseIconDefault.args = {}
|
|
51
|
-
|
|
52
|
-
const WorkspaceIconsTemplate = () =>
|
|
53
|
-
[<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map(
|
|
54
|
-
(component, index) => {
|
|
55
|
-
const listElement = []
|
|
56
|
-
listElement.push(React.cloneElement(component, { key: `0${index}` }))
|
|
57
|
-
listElement.push(
|
|
58
|
-
React.cloneElement(component, {
|
|
59
|
-
key: `1${index}`,
|
|
60
|
-
size: 'small',
|
|
61
|
-
color: 'main-green'
|
|
62
|
-
})
|
|
63
|
-
)
|
|
64
|
-
listElement.push(
|
|
65
|
-
React.cloneElement(component, { key: `2${index}`, color: 'error-red' })
|
|
66
|
-
)
|
|
67
|
-
listElement.push(
|
|
68
|
-
React.cloneElement(component, {
|
|
69
|
-
key: `3${index}`,
|
|
70
|
-
size: 'small',
|
|
71
|
-
color: 'error-red'
|
|
72
|
-
})
|
|
73
|
-
)
|
|
74
|
-
listElement.push(
|
|
75
|
-
React.cloneElement(component, {
|
|
76
|
-
key: `4${index}`,
|
|
77
|
-
color: 'main-dark-blue'
|
|
78
|
-
})
|
|
79
|
-
)
|
|
80
|
-
listElement.push(
|
|
81
|
-
React.cloneElement(component, {
|
|
82
|
-
key: `5${index}`,
|
|
83
|
-
size: 'small',
|
|
84
|
-
color: 'main-dark-blue'
|
|
85
|
-
})
|
|
86
|
-
)
|
|
87
|
-
return listElement
|
|
88
|
-
}
|
|
89
|
-
)
|
|
90
|
-
|
|
91
|
-
export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
|
|
92
|
-
WorkspaceIconsAll.args = {}
|
|
93
|
-
|
|
94
|
-
const LargeIconsTemplate = () =>
|
|
95
|
-
[<UpgradeIcon key='b' size='extra-large' />].map((component) => component)
|
|
96
|
-
export const LargeIconsDefault = LargeIconsTemplate.bind({})
|
|
97
|
-
LargeIconsDefault.args = {}
|
|
98
|
-
|
|
99
|
-
const AllSizesIcons = (Icon) => () => {
|
|
100
|
-
const icons = ['small', 'medium', 'large'].map((size) => (
|
|
101
|
-
<div key={size} className='' style={{ backgroundColor: RICH_BLACK }}>
|
|
102
|
-
<Icon size={size} color={RICH_BLACK} />
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
))
|
|
106
|
-
return icons
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export const ExpandIcons = AllSizesIcons(icons.ExpandIcon).bind({})
|
|
110
|
-
export const CollapseIcons = AllSizesIcons(icons.CollapseIcon).bind({})
|
|
111
|
-
export const EnlargeIcons = AllSizesIcons(icons.EnlargeIcon).bind({})
|
|
112
|
-
export const AppOptimizedIcons = AllSizesIcons(icons.AppOptimizedIcon).bind({})
|
|
113
|
-
export const AWSIcons = AllSizesIcons(icons.AWSIcon).bind({})
|
|
114
|
-
export const ImportIcons = AllSizesIcons(icons.ImportIcon).bind({})
|
|
115
|
-
export const ExportIcons = AllSizesIcons(icons.ExportIcon).bind({})
|
|
116
|
-
export const InfoCircleIcons = AllSizesIcons(icons.InfoCircleIcon).bind({})
|
|
117
|
-
export const CollapseSquareIcons = AllSizesIcons(icons.CollapseSquareIcon).bind({})
|
|
118
|
-
export const ExpandSquareIcon = AllSizesIcons(icons.ExpandSquareIcon).bind({})
|
|
119
|
-
export const EntrypointIcon = AllSizesIcons(icons.EntrypointIcon).bind({})
|
|
120
|
-
export const AlertIcon = AllSizesIcons(icons.AlertIcon).bind({})
|
|
121
|
-
export const ScheduledJobSettingsIcons = AllSizesIcons(icons.ScheduledJobSettingsIcon).bind({})
|
|
122
|
-
export const ScheduledJobsSuspendIcons = AllSizesIcons(icons.ScheduledJobsSuspendIcon).bind({})
|
|
123
|
-
export const ScheduledJobsDetailIcons = AllSizesIcons(icons.ScheduledJobsDetailIcon).bind({})
|
|
124
|
-
|
|
125
35
|
const IconPreviewTemplate = ({ iconName, size, color }) => {
|
|
126
36
|
const Icon = icons[iconName]
|
|
127
37
|
if (!Icon) return <div>Icon not found</div>
|