@platformatic/ui-components 0.6.0 → 0.6.1
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-DIt4e34R.js → index-U_mYeUt8.js} +8 -8
- package/dist/index.html +1 -1
- package/dist/main.css +1 -1
- package/package.json +1 -1
- package/src/components/CopyAndPaste.jsx +7 -2
- package/src/components/icons/AddEnvVariableIcon.jsx +97 -0
- package/src/components/icons/DownloadIcon.jsx +93 -0
- package/src/components/icons/index.js +4 -0
- package/src/stories/CopyAndPaste.stories.jsx +2 -1
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-U_mYeUt8.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/dist/main.css
CHANGED
package/package.json
CHANGED
|
@@ -12,7 +12,8 @@ function CopyAndPaste ({
|
|
|
12
12
|
timeout = 1500,
|
|
13
13
|
size = MEDIUM,
|
|
14
14
|
tooltipClassName = '',
|
|
15
|
-
position = POSITION_CENTER
|
|
15
|
+
position = POSITION_CENTER,
|
|
16
|
+
internalOverHandling = false
|
|
16
17
|
}) {
|
|
17
18
|
const [copied, setCopied] = useState(false)
|
|
18
19
|
|
|
@@ -25,7 +26,7 @@ function CopyAndPaste ({
|
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
return !copied
|
|
28
|
-
? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} />)
|
|
29
|
+
? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} internalOverHandling={internalOverHandling} />)
|
|
29
30
|
: (
|
|
30
31
|
<TooltipAbsolute
|
|
31
32
|
tooltipClassName={tooltipClassName}
|
|
@@ -63,6 +64,10 @@ CopyAndPaste.propTypes = {
|
|
|
63
64
|
* timeout
|
|
64
65
|
*/
|
|
65
66
|
timeout: PropTypes.number,
|
|
67
|
+
/**
|
|
68
|
+
* internalOverHandling
|
|
69
|
+
*/
|
|
70
|
+
internalOverHandling: PropTypes.bool,
|
|
66
71
|
/**
|
|
67
72
|
* timeout
|
|
68
73
|
*/
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const AddEnvVariableIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
tip = '',
|
|
10
|
+
disabled = false,
|
|
11
|
+
inactive = false
|
|
12
|
+
}) => {
|
|
13
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
14
|
+
if (disabled) {
|
|
15
|
+
className += ` ${styles.iconDisabled}`
|
|
16
|
+
}
|
|
17
|
+
if (inactive) {
|
|
18
|
+
className += ` ${styles.iconInactive}`
|
|
19
|
+
}
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
let icon = <></>
|
|
22
|
+
|
|
23
|
+
switch (size) {
|
|
24
|
+
case SMALL:
|
|
25
|
+
icon = (
|
|
26
|
+
<svg
|
|
27
|
+
width={16}
|
|
28
|
+
height={16}
|
|
29
|
+
viewBox='0 0 16 16'
|
|
30
|
+
fill='none'
|
|
31
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
data-tip={tip}
|
|
33
|
+
className={className}
|
|
34
|
+
>
|
|
35
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10M6.02882 4V8M4 6L8 6.04041' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M8 9.5V14H14V9.5M8 9.5V8H14V9.5M8 9.5H14' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
<path d='M10.6505 10.75L10.9899 11.332H11.0061L11.3495 10.75H11.9758L11.3576 11.75L12 12.75H11.3576L11.0061 12.1562H10.9899L10.6384 12.75H10L10.6343 11.75L10.0202 10.75H10.6505Z' fill='none' className={filledClassName} />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
data-tip={tip}
|
|
51
|
+
>
|
|
52
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15M9.04323 6V12M6 9L12 9.06062' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M12 14.25V21H21V14.25M12 14.25V12H21V14.25M12 14.25H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
54
|
+
<path d='M15.9758 16.125L16.4848 16.998H16.5091L17.0242 16.125H17.9636L17.0364 17.625L18 19.125H17.0364L16.5091 18.2344H16.4848L15.9576 19.125H15L15.9515 17.625L15.0303 16.125H15.9758Z' fill='none' className={filledClassName} />
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
data-tip={tip}
|
|
68
|
+
>
|
|
69
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C9.50941 5 5 9.52239 5 15.101C5 19.9878 8.46027 24.0641 13.0576 25M15.0721 10V20M10 15L20 15.101' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M20 23.75V35H35V23.75M20 23.75V20H35V23.75M20 23.75H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M26.6263 26.875L27.4747 28.3301H27.5152L28.3737 26.875H29.9394L28.3939 29.375L30 31.875H28.3939L27.5152 30.3906H27.4747L26.596 31.875H25L26.5859 29.375L25.0505 26.875H26.6263Z' fill='none' className={filledClassName} />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
AddEnvVariableIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(SIZES),
|
|
91
|
+
/**
|
|
92
|
+
* tip
|
|
93
|
+
*/
|
|
94
|
+
tip: PropTypes.string
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default AddEnvVariableIcon
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const DownloadIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M8 12L12 8M8 12L4 8M8 12V2.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M14 12V14H2V12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M12 18L18 12M12 18L6 12M12 18V3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M21 18V21H3V18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
</svg>
|
|
50
|
+
)
|
|
51
|
+
break
|
|
52
|
+
case LARGE:
|
|
53
|
+
icon = (
|
|
54
|
+
<svg
|
|
55
|
+
width={40}
|
|
56
|
+
height={40}
|
|
57
|
+
viewBox='0 0 40 40'
|
|
58
|
+
fill='none'
|
|
59
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
60
|
+
className={className}
|
|
61
|
+
>
|
|
62
|
+
<path d='M20 30L30 20M20 30L10 20M20 30V6.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M35 30V35H5V30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
break
|
|
70
|
+
}
|
|
71
|
+
return icon
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
DownloadIcon.propTypes = {
|
|
75
|
+
/**
|
|
76
|
+
* color of text, icon and borders
|
|
77
|
+
*/
|
|
78
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
79
|
+
/**
|
|
80
|
+
* Size
|
|
81
|
+
*/
|
|
82
|
+
size: PropTypes.oneOf(SIZES),
|
|
83
|
+
/**
|
|
84
|
+
* disabled
|
|
85
|
+
*/
|
|
86
|
+
disabled: PropTypes.bool,
|
|
87
|
+
/**
|
|
88
|
+
* inactive
|
|
89
|
+
*/
|
|
90
|
+
inactive: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export default DownloadIcon
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import AddIcon from './AddIcon'
|
|
2
|
+
import AddEnvVariableIcon from './AddEnvVariableIcon'
|
|
2
3
|
import AlertIcon from './AlertIcon'
|
|
3
4
|
import AllAppsIcon from './AllAppsIcon'
|
|
4
5
|
import AllInOneIcon from './AllInOneIcon'
|
|
@@ -66,6 +67,7 @@ import DatabaseIcon from './DatabaseIcon'
|
|
|
66
67
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
67
68
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
68
69
|
import DeploymentHistoryIcon from './DeploymentHistoryIcon'
|
|
70
|
+
import DownloadIcon from './DownloadIcon'
|
|
69
71
|
import EditDocumentIcon from './EditDocumentIcon'
|
|
70
72
|
import EditIcon from './EditIcon'
|
|
71
73
|
import EntrypointIcon from './EntrypointIcon'
|
|
@@ -163,6 +165,7 @@ import ZoomOutIcon from './ZoomOutIcon'
|
|
|
163
165
|
|
|
164
166
|
export default {
|
|
165
167
|
AddIcon,
|
|
168
|
+
AddEnvVariableIcon,
|
|
166
169
|
AlertIcon,
|
|
167
170
|
AllAppsIcon,
|
|
168
171
|
AllInOneIcon,
|
|
@@ -230,6 +233,7 @@ export default {
|
|
|
230
233
|
DatabaseMigrationIcon,
|
|
231
234
|
DepencenciesReloadIcon,
|
|
232
235
|
DeploymentHistoryIcon,
|
|
236
|
+
DownloadIcon,
|
|
233
237
|
EditDocumentIcon,
|
|
234
238
|
EditIcon,
|
|
235
239
|
EntrypointIcon,
|