@platformatic/ui-components 0.1.116 → 0.1.118
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/.nvmrc +1 -1
- package/dist/assets/index-0313f1c8.js +206 -0
- package/dist/index.html +1 -1
- package/package.json +2 -2
- package/src/components/Button.jsx +11 -2
- package/src/components/forms/Input.module.css +2 -1
- package/src/components/forms/Password.module.css +2 -1
- package/src/components/forms/RadioGroup.module.css +2 -1
- package/src/components/forms/Select.jsx +33 -3
- package/src/components/forms/TextArea.module.css +2 -1
- package/src/components/icons/CircleSubtractIcon.jsx +79 -0
- package/src/components/icons/index.js +2 -0
- package/dist/assets/index-c5108672.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-0313f1c8.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index-d72b255b.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@platformatic/ui-components",
|
|
3
3
|
"description": "Platformatic UI Components",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.118",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"storybook": "^7.0.20",
|
|
54
54
|
"tailwindcss": "^3.1.8",
|
|
55
55
|
"vite": "^4.0.0",
|
|
56
|
-
"vitest": "^0.
|
|
56
|
+
"vitest": "^0.34.0"
|
|
57
57
|
},
|
|
58
58
|
"standard": {
|
|
59
59
|
"globals": [
|
|
@@ -18,6 +18,7 @@ function Button ({
|
|
|
18
18
|
bordered,
|
|
19
19
|
fullWidth,
|
|
20
20
|
platformaticIcon,
|
|
21
|
+
platformaticIconAfter,
|
|
21
22
|
selected,
|
|
22
23
|
...rest
|
|
23
24
|
}) {
|
|
@@ -46,8 +47,9 @@ function Button ({
|
|
|
46
47
|
if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
|
|
47
48
|
return (
|
|
48
49
|
<button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
|
|
49
|
-
{platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
|
|
50
|
+
{platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
|
|
50
51
|
<span className={styles.label}>{label}</span>
|
|
52
|
+
{platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} /> : null}
|
|
51
53
|
</button>
|
|
52
54
|
)
|
|
53
55
|
}
|
|
@@ -94,12 +96,19 @@ Button.propTypes = {
|
|
|
94
96
|
*/
|
|
95
97
|
fullWidth: PropTypes.bool,
|
|
96
98
|
/**
|
|
97
|
-
* platformaticIcon: should be removed
|
|
99
|
+
* platformaticIcon: should be removed
|
|
98
100
|
*/
|
|
99
101
|
platformaticIcon: PropTypes.shape({
|
|
100
102
|
iconName: PropTypes.string,
|
|
101
103
|
color: PropTypes.string
|
|
102
104
|
}),
|
|
105
|
+
/**
|
|
106
|
+
* platformaticIconAfter: should be removed
|
|
107
|
+
*/
|
|
108
|
+
platformaticIconAfter: PropTypes.shape({
|
|
109
|
+
iconName: PropTypes.string,
|
|
110
|
+
color: PropTypes.string
|
|
111
|
+
}),
|
|
103
112
|
/**
|
|
104
113
|
* Selected: default false
|
|
105
114
|
*/
|
|
@@ -6,7 +6,20 @@ import commonStyles from '../Common.module.css'
|
|
|
6
6
|
import { MAIN_DARK_BLUE, MAIN_GREEN, SMALL } from '../constants'
|
|
7
7
|
import PlatformaticIcon from '../PlatformaticIcon'
|
|
8
8
|
|
|
9
|
-
function Select ({
|
|
9
|
+
function Select ({
|
|
10
|
+
placeholder,
|
|
11
|
+
name,
|
|
12
|
+
value,
|
|
13
|
+
options,
|
|
14
|
+
borderColor,
|
|
15
|
+
errorMessage,
|
|
16
|
+
onChange,
|
|
17
|
+
onSelect,
|
|
18
|
+
onClear,
|
|
19
|
+
disabled,
|
|
20
|
+
optionsIconColor,
|
|
21
|
+
optionSelected
|
|
22
|
+
}) {
|
|
10
23
|
const inputRef = useRef()
|
|
11
24
|
const [showOptions, setShowOptions] = useState(false)
|
|
12
25
|
const [isSelected, setIsSelected] = useState(false)
|
|
@@ -43,6 +56,12 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
|
|
|
43
56
|
}
|
|
44
57
|
}, [value])
|
|
45
58
|
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (optionSelected) {
|
|
61
|
+
setSelected(optionSelected)
|
|
62
|
+
}
|
|
63
|
+
}, [optionSelected])
|
|
64
|
+
|
|
46
65
|
function renderLi (option, index) {
|
|
47
66
|
return (
|
|
48
67
|
<li
|
|
@@ -169,7 +188,17 @@ Select.propTypes = {
|
|
|
169
188
|
/**
|
|
170
189
|
* optionsIconColor
|
|
171
190
|
*/
|
|
172
|
-
optionsIconColor: PropTypes.string
|
|
191
|
+
optionsIconColor: PropTypes.string,
|
|
192
|
+
/**
|
|
193
|
+
* optionSelected
|
|
194
|
+
*/
|
|
195
|
+
optionSelected: PropTypes.shape({
|
|
196
|
+
label: PropTypes.string,
|
|
197
|
+
value: PropTypes.oneOfType([
|
|
198
|
+
PropTypes.string,
|
|
199
|
+
PropTypes.number
|
|
200
|
+
])
|
|
201
|
+
})
|
|
173
202
|
}
|
|
174
203
|
|
|
175
204
|
Select.defaultProps = {
|
|
@@ -184,7 +213,8 @@ Select.defaultProps = {
|
|
|
184
213
|
onSelect: () => {},
|
|
185
214
|
onClear: () => {},
|
|
186
215
|
disabled: false,
|
|
187
|
-
optionsIconColor: MAIN_DARK_BLUE
|
|
216
|
+
optionsIconColor: MAIN_DARK_BLUE,
|
|
217
|
+
optionSelected: null
|
|
188
218
|
}
|
|
189
219
|
|
|
190
220
|
export default Select
|
|
@@ -0,0 +1,79 @@
|
|
|
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 CircleSubtractIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case SMALL:
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={16}
|
|
15
|
+
height={16}
|
|
16
|
+
viewBox='0 0 16 16'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<circle cx={8} cy={8} r={6} stroke='none' />
|
|
22
|
+
<line x1={5} y1={8} x2={11} y2={8} stroke='none' strokeLinecap='round' />
|
|
23
|
+
</svg>
|
|
24
|
+
)
|
|
25
|
+
break
|
|
26
|
+
case MEDIUM:
|
|
27
|
+
icon = (
|
|
28
|
+
<svg
|
|
29
|
+
width={24}
|
|
30
|
+
height={24}
|
|
31
|
+
viewBox='0 0 24 24'
|
|
32
|
+
fill='none'
|
|
33
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
34
|
+
className={className}
|
|
35
|
+
>
|
|
36
|
+
<circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
|
|
37
|
+
<line x1={7.5} y1={12} x2={16.5} y2={12} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case LARGE:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={40}
|
|
45
|
+
height={40}
|
|
46
|
+
viewBox='0 0 40 40'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
|
|
52
|
+
<line x1={12.25} y1={20.25} x2={27.75} y2={20.25} stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
53
|
+
</svg>
|
|
54
|
+
)
|
|
55
|
+
break
|
|
56
|
+
|
|
57
|
+
default:
|
|
58
|
+
break
|
|
59
|
+
}
|
|
60
|
+
return icon
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
CircleSubtractIcon.propTypes = {
|
|
64
|
+
/**
|
|
65
|
+
* color of text, icon and borders
|
|
66
|
+
*/
|
|
67
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
68
|
+
/**
|
|
69
|
+
* Size
|
|
70
|
+
*/
|
|
71
|
+
size: PropTypes.oneOf(SIZES)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
CircleSubtractIcon.defaultProps = {
|
|
75
|
+
color: MAIN_DARK_BLUE,
|
|
76
|
+
size: MEDIUM
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export default CircleSubtractIcon
|
|
@@ -34,6 +34,7 @@ import CircleEditIcon from './CircleEditIcon'
|
|
|
34
34
|
import CircleFullIcon from './CircleFullIcon'
|
|
35
35
|
import CircleGearIcon from './CircleGearIcon'
|
|
36
36
|
import CircleRestartIcon from './CircleRestartIcon'
|
|
37
|
+
import CircleSubtractIcon from './CircleSubtractIcon'
|
|
37
38
|
import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
|
|
38
39
|
import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
|
|
39
40
|
import CloseIcon from './CloseIcon'
|
|
@@ -135,6 +136,7 @@ export default {
|
|
|
135
136
|
CircleFullIcon,
|
|
136
137
|
CircleGearIcon,
|
|
137
138
|
CircleRestartIcon,
|
|
139
|
+
CircleSubtractIcon,
|
|
138
140
|
CircleTwoArrowsDownIcon,
|
|
139
141
|
CircleTwoArrowsUpIcon,
|
|
140
142
|
CloseIcon,
|