@platformatic/ui-components 0.1.132 → 0.1.134
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-706e83c1.js +206 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/Button.module.css +1 -1
- package/src/components/Checkbox.module.css +7 -7
- package/src/components/HorizontalSeparator.module.css +4 -0
- package/src/components/SearchBarV2.jsx +3 -3
- package/src/components/Tag.module.css +1 -1
- package/src/components/icons/CircleCloseIcon.jsx +19 -1
- package/src/components/icons/ComputerIcon.jsx +89 -0
- package/src/components/icons/UserComputerIcon.jsx +98 -0
- package/src/components/icons/index.js +6 -2
- package/dist/assets/index-e93dce3e.js +0 -206
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-706e83c1.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index-89e9ad97.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.button {
|
|
2
|
-
@apply rounded text-center cursor-pointer font-normal
|
|
2
|
+
@apply rounded text-center cursor-pointer font-normal border border-solid box-border flex items-center justify-center gap-x-2;
|
|
3
3
|
}
|
|
4
4
|
.fontBold {
|
|
5
5
|
@apply font-semibold;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.checkbox {
|
|
2
|
-
@apply border p-2 rounded-sm relative inline-block h-2 w-2;
|
|
2
|
+
@apply border border-solid p-2 rounded-sm relative inline-block h-2 w-2 m-0;
|
|
3
3
|
-webkit-appearance: none;
|
|
4
4
|
}
|
|
5
5
|
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
|
|
20
20
|
.checkbox--main-dark-blue:checked:after,
|
|
21
21
|
.checkbox--white:checked:after {
|
|
22
|
-
@apply absolute top-[
|
|
22
|
+
@apply absolute top-[50%] left-[50%] h-full w-full;
|
|
23
|
+
transform: translate(-50%, -50%);
|
|
23
24
|
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
24
25
|
}
|
|
25
26
|
|
|
@@ -34,9 +35,8 @@
|
|
|
34
35
|
@apply bg-white text-rich-black;
|
|
35
36
|
}
|
|
36
37
|
.checkbox--rich-black:checked:after {
|
|
37
|
-
@apply absolute top-[
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
@apply absolute top-[50%] left-[50%] h-full w-full;
|
|
39
|
+
transform: translate(-50%, -50%);
|
|
42
40
|
|
|
41
|
+
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke%3D%22%2300050B%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
42
|
+
}
|
|
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
|
|
|
4
4
|
import commonStyles from './Common.module.css'
|
|
5
5
|
import styles from './SearchBarV2.module.css'
|
|
6
6
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
7
|
-
import {
|
|
7
|
+
import { RICH_BLACK, SMALL, TRANSPARENT, WHITE } from './constants'
|
|
8
8
|
function SearchBarV2 ({
|
|
9
9
|
onSubmit,
|
|
10
10
|
onChange,
|
|
@@ -67,11 +67,11 @@ function SearchBarV2 ({
|
|
|
67
67
|
|
|
68
68
|
return (
|
|
69
69
|
<div className={wrapperClassName} {...dataProps}>
|
|
70
|
-
<PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={
|
|
70
|
+
<PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={SMALL} onClick={handleSearch} />
|
|
71
71
|
<input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
|
|
72
72
|
{showClear && (
|
|
73
73
|
<div className={styles.clearContainer}>
|
|
74
|
-
<PlatformaticIcon iconName='CircleCloseIcon' color={color} size={
|
|
74
|
+
<PlatformaticIcon iconName='CircleCloseIcon' color={color} size={SMALL} onClick={handleClear} />
|
|
75
75
|
</div>
|
|
76
76
|
)}
|
|
77
77
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
|
-
import { COLORS_ICON, SIZES, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
import { COLORS_ICON, SIZES, MEDIUM, LARGE, MAIN_DARK_BLUE, SMALL } from '../constants'
|
|
5
5
|
|
|
6
6
|
const CircleCloseIcon = ({ color, size, disabled }) => {
|
|
7
7
|
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
@@ -11,6 +11,24 @@ const CircleCloseIcon = ({ color, size, disabled }) => {
|
|
|
11
11
|
let icon = <></>
|
|
12
12
|
|
|
13
13
|
switch (size) {
|
|
14
|
+
case SMALL:
|
|
15
|
+
icon = (
|
|
16
|
+
<svg
|
|
17
|
+
width={16}
|
|
18
|
+
height={16}
|
|
19
|
+
viewBox='0 0 16 16'
|
|
20
|
+
fill='none'
|
|
21
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
22
|
+
className={className}
|
|
23
|
+
>
|
|
24
|
+
<circle cx={8} cy={8} r={7.5} stroke='none' />
|
|
25
|
+
<path d='M4 4L12 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M4 12L12 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
|
|
28
|
+
</svg>
|
|
29
|
+
)
|
|
30
|
+
break
|
|
31
|
+
|
|
14
32
|
case MEDIUM:
|
|
15
33
|
icon = (
|
|
16
34
|
<svg
|
|
@@ -0,0 +1,89 @@
|
|
|
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 ComputerIcon = ({ color, size, disabled }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
let icon = <></>
|
|
12
|
+
|
|
13
|
+
switch (size) {
|
|
14
|
+
case SMALL:
|
|
15
|
+
icon = (
|
|
16
|
+
<svg
|
|
17
|
+
width={16}
|
|
18
|
+
height={16}
|
|
19
|
+
viewBox='0 0 16 16'
|
|
20
|
+
fill='none'
|
|
21
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
22
|
+
className={className}
|
|
23
|
+
>
|
|
24
|
+
<rect x='2' y='2' width='12' height='8' rx='1' stroke='none' />
|
|
25
|
+
<rect x='6' y='10' width='4' height='2' stroke='none' />
|
|
26
|
+
<path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
|
|
27
|
+
</svg>
|
|
28
|
+
)
|
|
29
|
+
break
|
|
30
|
+
case MEDIUM:
|
|
31
|
+
icon = (
|
|
32
|
+
<svg
|
|
33
|
+
width={24}
|
|
34
|
+
height={24}
|
|
35
|
+
viewBox='0 0 24 24'
|
|
36
|
+
fill='none'
|
|
37
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
38
|
+
className={className}
|
|
39
|
+
>
|
|
40
|
+
<rect x='3' y='3' width='18' height='12' rx='1' stroke='none' strokeWidth={1.5} />
|
|
41
|
+
<rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
|
|
42
|
+
<path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
case LARGE:
|
|
47
|
+
icon = (
|
|
48
|
+
<svg
|
|
49
|
+
width={40}
|
|
50
|
+
height={40}
|
|
51
|
+
viewBox='0 0 40 40'
|
|
52
|
+
fill='none'
|
|
53
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
54
|
+
className={className}
|
|
55
|
+
>
|
|
56
|
+
<rect x='5' y='5' width='30' height='20' rx='1' stroke='none' strokeWidth={2} />
|
|
57
|
+
<rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
|
|
58
|
+
<path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
|
|
59
|
+
</svg>
|
|
60
|
+
)
|
|
61
|
+
break
|
|
62
|
+
|
|
63
|
+
default:
|
|
64
|
+
break
|
|
65
|
+
}
|
|
66
|
+
return icon
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
ComputerIcon.propTypes = {
|
|
70
|
+
/**
|
|
71
|
+
* color of text, icon and borders
|
|
72
|
+
*/
|
|
73
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
74
|
+
/**
|
|
75
|
+
* Size
|
|
76
|
+
*/
|
|
77
|
+
size: PropTypes.oneOf(SIZES),
|
|
78
|
+
/**
|
|
79
|
+
* disabled
|
|
80
|
+
*/
|
|
81
|
+
disabled: PropTypes.bool
|
|
82
|
+
}
|
|
83
|
+
ComputerIcon.defaultProps = {
|
|
84
|
+
color: MAIN_DARK_BLUE,
|
|
85
|
+
size: MEDIUM,
|
|
86
|
+
disabled: false
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export default ComputerIcon
|
|
@@ -0,0 +1,98 @@
|
|
|
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 UserComputerIcon = ({ color, size, disabled }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
let icon = <></>
|
|
12
|
+
|
|
13
|
+
switch (size) {
|
|
14
|
+
case SMALL:
|
|
15
|
+
icon = (
|
|
16
|
+
<svg
|
|
17
|
+
width={16}
|
|
18
|
+
height={16}
|
|
19
|
+
viewBox='0 0 16 16'
|
|
20
|
+
fill='none'
|
|
21
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
22
|
+
className={className}
|
|
23
|
+
>
|
|
24
|
+
<rect x='6' y='6' width='8' height='5.33333' rx='1' stroke='none' />
|
|
25
|
+
<rect x='8.66675' y='11.3333' width='2.66667' height='1.33333' stroke='none' />
|
|
26
|
+
<path d='M7.33325 13.6667C7.33325 13.1145 7.78097 12.6667 8.33325 12.6667H11.6666C12.2189 12.6667 12.6666 13.1145 12.6666 13.6667V14.0001H7.33325V13.6667Z' stroke='none' />
|
|
27
|
+
<path d='M4.75503 8.80811C3.12101 9.39558 2 10.6044 2 12.0002H5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path d='M9.85693 4.5C9.85693 3.11929 8.73765 2 7.35693 2C5.97622 2 4.85693 3.11929 4.85693 4.5C4.85693 4.90476 4.95312 5.28704 5.12389 5.62526' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
|
|
30
|
+
</svg>
|
|
31
|
+
)
|
|
32
|
+
break
|
|
33
|
+
case MEDIUM:
|
|
34
|
+
icon = (
|
|
35
|
+
<svg
|
|
36
|
+
width={24}
|
|
37
|
+
height={24}
|
|
38
|
+
viewBox='0 0 24 24'
|
|
39
|
+
fill='none'
|
|
40
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
41
|
+
className={className}
|
|
42
|
+
>
|
|
43
|
+
<rect x='9' y='9' width='12' height='8' rx='1.5' stroke='none' strokeWidth={1.5} />
|
|
44
|
+
<rect x='13' y='17' width='4' height='2' stroke='none' strokeWidth={1.5} />
|
|
45
|
+
<path d='M11 20.5C11 19.6716 11.6716 19 12.5 19H17.5C18.3284 19 19 19.6716 19 20.5V21H11V20.5Z' stroke='none' strokeWidth={1.5} />
|
|
46
|
+
<path d='M7.13255 13.2119C4.68152 14.0931 3 15.9063 3 18H7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
47
|
+
<path d='M14.7856 6.75C14.7856 4.67893 13.1067 3 11.0356 3C8.96458 3 7.28564 4.67893 7.28564 6.75C7.28564 7.35713 7.42993 7.93057 7.68607 8.43788' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
|
|
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
|
+
<rect x='15' y='15' width='20' height='13.3333' rx='2.5' stroke='none' strokeWidth={2} />
|
|
63
|
+
<rect x='21.6667' y='28.3333' width='6.66667' height='3.33333' stroke='none' strokeWidth={2} />
|
|
64
|
+
<path d='M18.3333 34.1667C18.3333 32.786 19.4525 31.6667 20.8333 31.6667H29.1666C30.5473 31.6667 31.6666 32.786 31.6666 34.1667V35.0001H18.3333V34.1667Z' stroke='none' strokeWidth={2} />
|
|
65
|
+
<path d='M11.8876 22.02C7.80253 23.4887 5 26.5107 5 30.0002H12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M24.6426 11.25C24.6426 7.79822 21.8444 5 18.3926 5C14.9408 5 12.1426 7.79822 12.1426 11.25C12.1426 12.2619 12.383 13.2176 12.81 14.0631' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
|
|
68
|
+
</svg>
|
|
69
|
+
)
|
|
70
|
+
break
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break
|
|
74
|
+
}
|
|
75
|
+
return icon
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
UserComputerIcon.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* color of text, icon and borders
|
|
81
|
+
*/
|
|
82
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
83
|
+
/**
|
|
84
|
+
* Size
|
|
85
|
+
*/
|
|
86
|
+
size: PropTypes.oneOf(SIZES),
|
|
87
|
+
/**
|
|
88
|
+
* disabled
|
|
89
|
+
*/
|
|
90
|
+
disabled: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
UserComputerIcon.defaultProps = {
|
|
93
|
+
color: MAIN_DARK_BLUE,
|
|
94
|
+
size: MEDIUM,
|
|
95
|
+
disabled: false
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export default UserComputerIcon
|
|
@@ -44,8 +44,9 @@ import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
|
|
|
44
44
|
import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
|
|
45
45
|
import CloseIcon from './CloseIcon'
|
|
46
46
|
import CloudIcon from './CloudIcon'
|
|
47
|
-
import
|
|
47
|
+
import ComputerIcon from './ComputerIcon'
|
|
48
48
|
import CopyPasteIcon from './CopyPasteIcon'
|
|
49
|
+
import CreditCardIcon from './CreditCardIcon'
|
|
49
50
|
import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
|
|
50
51
|
import CreatingAppIcon from './CreatingAppIcon'
|
|
51
52
|
import DatabaseIcon from './DatabaseIcon'
|
|
@@ -112,6 +113,7 @@ import TwoUsersIcon from './TwoUsersIcon'
|
|
|
112
113
|
import TeamsIcon from './TeamsIcon'
|
|
113
114
|
import TrashIcon from './TrashIcon'
|
|
114
115
|
import UpgradeIcon from './UpgradeIcon'
|
|
116
|
+
import UserComputerIcon from './UserComputerIcon'
|
|
115
117
|
import UserIcon from './UserIcon'
|
|
116
118
|
import UserRemoveIcon from './UserRemoveIcon'
|
|
117
119
|
import UserRoleIcon from './UserRoleIcon'
|
|
@@ -170,8 +172,9 @@ export default {
|
|
|
170
172
|
CircleTwoArrowsUpIcon,
|
|
171
173
|
CloseIcon,
|
|
172
174
|
CloudIcon,
|
|
173
|
-
|
|
175
|
+
ComputerIcon,
|
|
174
176
|
CopyPasteIcon,
|
|
177
|
+
CreditCardIcon,
|
|
175
178
|
ConfigureDatabaseIcon,
|
|
176
179
|
CreatingAppIcon,
|
|
177
180
|
DatabaseIcon,
|
|
@@ -238,6 +241,7 @@ export default {
|
|
|
238
241
|
TwoUsersIcon,
|
|
239
242
|
TrashIcon,
|
|
240
243
|
UpgradeIcon,
|
|
244
|
+
UserComputerIcon,
|
|
241
245
|
UserIcon,
|
|
242
246
|
UserRemoveIcon,
|
|
243
247
|
UserRoleIcon,
|