@platformatic/ui-components 0.1.113 → 0.1.115
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-0432a374.js +206 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/forms/Select.jsx +19 -2
- package/src/components/icons/CircleCheckMarkButtonIcon.jsx +49 -0
- package/src/components/icons/CircleCopyPasteIcon.jsx +19 -1
- package/src/components/icons/CircleEditIcon.jsx +20 -1
- package/src/components/icons/CircleRestartIcon.jsx +18 -1
- package/src/components/icons/index.js +2 -0
- package/src/stories/forms/Select.stories.jsx +25 -0
- package/dist/assets/index-4434ad72.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-0432a374.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index-d649dd46.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -67,10 +67,13 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
|
|
|
67
67
|
</ul>
|
|
68
68
|
)
|
|
69
69
|
}
|
|
70
|
-
const
|
|
70
|
+
const notFilterableOptions = options.filter(option => option.notFilterable)
|
|
71
|
+
const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
|
|
72
|
+
|
|
71
73
|
return (
|
|
72
74
|
<ul className={styles.options}>
|
|
73
75
|
{filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
|
|
76
|
+
{notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
|
|
74
77
|
</ul>
|
|
75
78
|
)
|
|
76
79
|
}
|
|
@@ -85,10 +88,23 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
|
|
|
85
88
|
onClear()
|
|
86
89
|
}
|
|
87
90
|
|
|
91
|
+
function handleFocus () {
|
|
92
|
+
setShowOptions(true)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function handleBlur (event) {
|
|
96
|
+
event.preventDefault()
|
|
97
|
+
setTimeout(() => {
|
|
98
|
+
if (showOptions) {
|
|
99
|
+
setShowOptions(false)
|
|
100
|
+
}
|
|
101
|
+
}, 100)
|
|
102
|
+
}
|
|
103
|
+
|
|
88
104
|
return (
|
|
89
105
|
<div className={styles.container}>
|
|
90
106
|
<div className={styles.selectContainer}>
|
|
91
|
-
<input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} />
|
|
107
|
+
<input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
|
|
92
108
|
<div className={styles.icons}>
|
|
93
109
|
{value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
|
|
94
110
|
<PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} />
|
|
@@ -127,6 +143,7 @@ Select.propTypes = {
|
|
|
127
143
|
]),
|
|
128
144
|
icon: PropTypes.string,
|
|
129
145
|
notSelectable: PropTypes.bool,
|
|
146
|
+
notFilterable: PropTypes.bool,
|
|
130
147
|
onClick: PropTypes.func
|
|
131
148
|
})),
|
|
132
149
|
/**
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, MEDIUM, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const CircleCheckMarkButtonIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
let icon = <></>
|
|
9
|
+
|
|
10
|
+
switch (size) {
|
|
11
|
+
case MEDIUM:
|
|
12
|
+
icon = (
|
|
13
|
+
<svg
|
|
14
|
+
width={26}
|
|
15
|
+
height={26}
|
|
16
|
+
viewBox='0 0 26 26'
|
|
17
|
+
fill='none'
|
|
18
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
19
|
+
className={className}
|
|
20
|
+
>
|
|
21
|
+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
|
|
22
|
+
<path d='M7 13L12 17L19 9' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
|
+
</svg>
|
|
24
|
+
)
|
|
25
|
+
break
|
|
26
|
+
|
|
27
|
+
default:
|
|
28
|
+
break
|
|
29
|
+
}
|
|
30
|
+
return icon
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
CircleCheckMarkButtonIcon.propTypes = {
|
|
34
|
+
/**
|
|
35
|
+
* color of text, icon and borders
|
|
36
|
+
*/
|
|
37
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
38
|
+
/**
|
|
39
|
+
* Size
|
|
40
|
+
*/
|
|
41
|
+
size: PropTypes.oneOf([MEDIUM])
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
CircleCheckMarkButtonIcon.defaultProps = {
|
|
45
|
+
color: MAIN_DARK_BLUE,
|
|
46
|
+
size: MEDIUM
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export default CircleCheckMarkButtonIcon
|
|
@@ -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, SMALL, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
|
|
5
5
|
|
|
6
6
|
const CircleCopyPasteIcon = ({ color, size }) => {
|
|
7
7
|
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
@@ -26,6 +26,24 @@ const CircleCopyPasteIcon = ({ color, size }) => {
|
|
|
26
26
|
)
|
|
27
27
|
break
|
|
28
28
|
|
|
29
|
+
case MEDIUM:
|
|
30
|
+
icon = (
|
|
31
|
+
<svg
|
|
32
|
+
width={26}
|
|
33
|
+
height={26}
|
|
34
|
+
viewBox='0 0 26 26'
|
|
35
|
+
fill='none'
|
|
36
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
37
|
+
className={className}
|
|
38
|
+
>
|
|
39
|
+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
|
|
40
|
+
<path d='M10.499 19.7504V9.30664C10.499 8.89243 10.8348 8.55664 11.249 8.55664H16.122C16.3063 8.55664 16.4841 8.62449 16.6215 8.74724L20.2486 11.9864C20.4079 12.1287 20.499 12.3322 20.499 12.5458V19.7504C20.499 20.1646 20.1632 20.5004 19.749 20.5004H11.249C10.8348 20.5004 10.499 20.1646 10.499 19.7504Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
|
|
41
|
+
<path d='M16.124 12.737V8.55664L20.499 12.737H16.124Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
<path d='M14.875 7.95903L12.2454 5.68293C12.1091 5.56495 11.9349 5.50001 11.7546 5.50001H8.76704H6.25C5.83579 5.50001 5.5 5.83579 5.5 6.25001L5.50001 16.1669C5.50001 16.5811 5.83579 16.9169 6.25001 16.9169H9.87501' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
|
|
43
|
+
</svg>
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
|
|
29
47
|
default:
|
|
30
48
|
break
|
|
31
49
|
}
|
|
@@ -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, SMALL, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
|
|
5
5
|
|
|
6
6
|
const CircleEditIcon = ({ color, size }) => {
|
|
7
7
|
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
@@ -27,6 +27,25 @@ const CircleEditIcon = ({ color, size }) => {
|
|
|
27
27
|
)
|
|
28
28
|
break
|
|
29
29
|
|
|
30
|
+
case MEDIUM:
|
|
31
|
+
icon = (
|
|
32
|
+
<svg
|
|
33
|
+
width={26}
|
|
34
|
+
height={26}
|
|
35
|
+
viewBox='0 0 26 26'
|
|
36
|
+
fill='none'
|
|
37
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
38
|
+
className={className}
|
|
39
|
+
>
|
|
40
|
+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
|
|
41
|
+
<rect x='16.083' y='7.75977' width='3.17647' height='11.6471' transform='rotate(45 16.083 7.75977)' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
|
|
42
|
+
<path d='M10.0928 18.2402L7.84668 15.9941L6.72363 19.3633L10.0928 18.2402Z' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
|
|
43
|
+
<path d='M17.2684 6.57238C17.8542 5.98659 18.804 5.98659 19.3898 6.57238L19.5145 6.69716C20.1003 7.28295 20.1003 8.2327 19.5145 8.81848L18.3291 10.0039L16.083 7.75782L17.2684 6.57238Z' stroke='none' strokeWidth='1.5' />
|
|
44
|
+
|
|
45
|
+
</svg>
|
|
46
|
+
)
|
|
47
|
+
break
|
|
48
|
+
|
|
30
49
|
default:
|
|
31
50
|
break
|
|
32
51
|
}
|
|
@@ -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, SMALL, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
|
|
5
5
|
|
|
6
6
|
const CircleRestartIcon = ({ color, size }) => {
|
|
7
7
|
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
@@ -22,7 +22,24 @@ const CircleRestartIcon = ({ color, size }) => {
|
|
|
22
22
|
<path d='M5.05117 6.23517C5.89557 4.88792 7.33948 4 8.97888 4C11.5819 4 13.6921 6.23858 13.6921 9C13.6921 9.50216 13.6224 9.98702 13.4925 10.4443M4.33079 8.16667C4.28793 8.43767 4.26562 8.71607 4.26562 9C4.26562 11.7614 6.37582 14 8.97888 14C10.3866 14 11.6502 13.3453 12.5138 12.3073' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
23
23
|
<path d='M12.2388 8.87502L13.47 10.4981L15 9.19192' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
24
24
|
<path d='M5.771 9.35161L4.29088 7.98235L3.00014 9.5525' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
</svg>
|
|
26
|
+
)
|
|
27
|
+
break
|
|
25
28
|
|
|
29
|
+
case MEDIUM:
|
|
30
|
+
icon = (
|
|
31
|
+
<svg
|
|
32
|
+
width={26}
|
|
33
|
+
height={26}
|
|
34
|
+
viewBox='0 0 26 26'
|
|
35
|
+
fill='none'
|
|
36
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
37
|
+
className={className}
|
|
38
|
+
>
|
|
39
|
+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
|
|
40
|
+
<path d='M7.07675 8.85276C8.34335 6.83189 10.5092 5.5 12.9683 5.5C16.8729 5.5 20.0382 8.85786 20.0382 13C20.0382 13.7532 19.9335 14.4805 19.7388 15.1664M5.99619 11.75C5.9319 12.1565 5.89844 12.5741 5.89844 13C5.89844 17.1421 9.06373 20.5 12.9683 20.5C15.0799 20.5 16.9753 19.518 18.2707 17.9609' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
<path d='M17.8574 12.8125L19.7043 15.2471L21.9992 13.2879' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
<path d='M8.15723 13.5273L5.93706 11.4735L4.00095 13.8287' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
26
43
|
</svg>
|
|
27
44
|
)
|
|
28
45
|
break
|
|
@@ -23,6 +23,7 @@ import CheckListIcon from './CheckListIcon'
|
|
|
23
23
|
import CircleAddIcon from './CircleAddIcon'
|
|
24
24
|
import CircleArrowLeftIcon from './CircleArrowLeftIcon'
|
|
25
25
|
import CircleArrowRightIcon from './CircleArrowRightIcon'
|
|
26
|
+
import CircleCheckMarkButtonIcon from './CircleCheckMarkButtonIcon'
|
|
26
27
|
import CircleCheckMarkIcon from './CircleCheckMarkIcon'
|
|
27
28
|
import CircleCheckMarkFullIcon from './CircleCheckMarkFullIcon'
|
|
28
29
|
import CircleCopyPasteIcon from './CircleCopyPasteIcon'
|
|
@@ -123,6 +124,7 @@ export default {
|
|
|
123
124
|
CircleAddIcon,
|
|
124
125
|
CircleArrowLeftIcon,
|
|
125
126
|
CircleArrowRightIcon,
|
|
127
|
+
CircleCheckMarkButtonIcon,
|
|
126
128
|
CircleCheckMarkIcon,
|
|
127
129
|
CircleCheckMarkFullIcon,
|
|
128
130
|
CircleExclamationIcon,
|
|
@@ -117,3 +117,28 @@ withDifferentOptions.args = {
|
|
|
117
117
|
}),
|
|
118
118
|
borderColor: MAIN_DARK_BLUE
|
|
119
119
|
}
|
|
120
|
+
|
|
121
|
+
export const githubRepoExample = TemplateBorderMainDarkBlue2.bind({})
|
|
122
|
+
|
|
123
|
+
githubRepoExample.args = {
|
|
124
|
+
name: 'test',
|
|
125
|
+
placeholder: 'Platformatic',
|
|
126
|
+
options: [...Array(4).keys()].map(ele => ({
|
|
127
|
+
label: `GitHub Repo ${ele}`,
|
|
128
|
+
value: `Value${ele}`,
|
|
129
|
+
iconName: 'SocialGitHubIcon'
|
|
130
|
+
})).concat({
|
|
131
|
+
label: 'this is an option that is not selectable',
|
|
132
|
+
iconName: 'AddIcon',
|
|
133
|
+
value: 123123,
|
|
134
|
+
notSelectable: true,
|
|
135
|
+
onClick: () => alert('you clicked last but not least')
|
|
136
|
+
}).concat({
|
|
137
|
+
label: 'Add Github repo',
|
|
138
|
+
iconName: 'PlayIcon',
|
|
139
|
+
value: 123123,
|
|
140
|
+
notSelectable: true,
|
|
141
|
+
notFilterable: true
|
|
142
|
+
}),
|
|
143
|
+
borderColor: MAIN_DARK_BLUE
|
|
144
|
+
}
|