@platformatic/ui-components 0.1.99 → 0.1.101

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.
Files changed (8) hide show
  1. package/dist/assets/{index.4003550d.js → index.793edd0a.js} +12 -12
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/forms/InputWithSeparator.jsx +21 -8
  5. package/src/components/forms/InputWithSeparator.module.css +5 -2
  6. package/src/components/icons/MetricsLoadingIcon.jsx +55 -0
  7. package/src/components/icons/index.js +2 -0
  8. package/src/stories/forms/InputWithSeparator.stories.jsx +4 -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.4003550d.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.793edd0a.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.bf6a37ab.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.99",
4
+ "version": "0.1.101",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
4
4
  import inputStyles from './Input.module.css'
5
5
  import styles from './InputWithSeparator.module.css'
6
6
  import commonStyles from '../Common.module.css'
7
- import PlatformaticIcon from '../PlatformaticIcon'
8
7
  import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, TRANSPARENT } from '../constants'
9
8
  import BorderedBox from '../BorderedBox'
10
9
  import ButtonFullRounded from '../ButtonFullRounded'
@@ -51,11 +50,10 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
51
50
 
52
51
  function renderChunk (chunk, index) {
53
52
  return (
54
- <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} opaque={20} classes={chunkClasses} key={index}>
53
+ <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} backgroundColorOpacity={20} classes={chunkClasses} key={index}>
55
54
  <div className={styles.chunkContent}>
56
55
  <span className={styles.chunkText}>{chunk}</span>
57
56
  <ButtonFullRounded
58
- className=''
59
57
  iconName='CircleCloseIcon'
60
58
  iconSize={MEDIUM}
61
59
  iconColor={MAIN_DARK_BLUE}
@@ -70,11 +68,25 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
70
68
  }
71
69
  return (
72
70
  <div className={inputStyles.container}>
73
- <div className={className}>
74
- {chunks.map((value, index) => renderChunk(value, index))}
75
- <input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
71
+ <div className={styles.container}>
72
+ <div className={className}>
73
+ {chunks.map((value, index) => renderChunk(value, index))}
74
+ <input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
75
+ </div>
76
+ {afterIcon &&
77
+ (
78
+ <ButtonFullRounded
79
+ className={styles.smallPadding}
80
+ iconName={afterIcon.iconName}
81
+ iconColor={afterIcon.color}
82
+ data-testid='after-icon'
83
+ onClick={afterIcon.handleClick}
84
+ iconSize={MEDIUM}
85
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
86
+ disabled={afterIcon.disabled}
87
+ />
88
+ )}
76
89
  </div>
77
- {afterIcon && <div className={styles.iconContainer}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={afterIcon.handleClick} /></div>}
78
90
  {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
79
91
  </div>
80
92
  )
@@ -115,7 +127,8 @@ InputWithSeparator.propTypes = {
115
127
  afterIcon: PropTypes.shape({
116
128
  iconName: PropTypes.string,
117
129
  color: PropTypes.string,
118
- handleClick: PropTypes.func
130
+ handleClick: PropTypes.func,
131
+ disabled: PropTypes.bool
119
132
  })
120
133
  }
121
134
 
package/src/components/forms/InputWithSeparator.module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @apply text-sm text-main-dark-blue;
6
6
  }
7
7
  .inputContainer {
8
- @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative;
8
+ @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow;
9
9
  }
10
10
  .smallPadding {
11
11
  @apply p-1 !important
@@ -21,4 +21,7 @@
21
21
  }
22
22
  .iconContainer {
23
23
  @apply absolute top-[14px] right-[0.5rem]
24
- }
24
+ }
25
+ .container {
26
+ @apply flex w-full items-center;
27
+ }
package/src/components/icons/MetricsLoadingIcon.jsx ADDED
@@ -0,0 +1,55 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, EXTRA_LARGE, SIZES } from '../constants'
5
+
6
+ const MetricsLoadingIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ const filledClassName = styles[`filled-${color}`]
9
+
10
+ let icon = <></>
11
+
12
+ switch (size) {
13
+ case EXTRA_LARGE:
14
+ icon = (
15
+ <svg
16
+ width={104}
17
+ height={104}
18
+ viewBox='0 0 104 104'
19
+ fill='none'
20
+ xmlns='http://www.w3.org/2000/svg'
21
+ className={className}
22
+ >
23
+ <rect x={28} y={22} width={12} height={42} rx={1.2} stroke='none' strokeWidth={3} />
24
+ <rect x={52} y={40} width={12} height={24} rx={1.2} stroke='none' strokeWidth={3} />
25
+ <rect x={76} y={4} width={12} height={60} rx={1.2} stroke='none' strokeWidth={3} />
26
+ <path d='M16 4V76H88' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
27
+ <rect x={4} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
28
+ <rect x={8} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
29
+ </svg>
30
+ )
31
+ break
32
+
33
+ default:
34
+ break
35
+ }
36
+ return icon
37
+ }
38
+
39
+ MetricsLoadingIcon.propTypes = {
40
+ /**
41
+ * color of text, icon and borders
42
+ */
43
+ color: PropTypes.oneOf(COLORS_ICON),
44
+ /**
45
+ * Size
46
+ */
47
+ size: PropTypes.oneOf(SIZES)
48
+ }
49
+
50
+ MetricsLoadingIcon.defaultProps = {
51
+ color: 'main-dark-blue',
52
+ size: 'medium'
53
+ }
54
+
55
+ export default MetricsLoadingIcon
package/src/components/icons/index.js CHANGED
@@ -51,6 +51,7 @@ import LiveIcon from './LiveIcon'
51
51
  import LoadingAppIcon from './LoadingAppIcon'
52
52
  import LogOutIcon from './LogOutIcon'
53
53
  import MetricsIcon from './MetricsIcon'
54
+ import MetricsLoadingIcon from './MetricsLoadingIcon'
54
55
  import OrganizationIcon from './OrganizationIcon'
55
56
  import PlayIcon from './PlayIcon'
56
57
  import PullRequestIcon from './PullRequestIcon'
@@ -138,6 +139,7 @@ export default {
138
139
  LoadingAppIcon,
139
140
  LogOutIcon,
140
141
  MetricsIcon,
142
+ MetricsLoadingIcon,
141
143
  OrganizationIcon,
142
144
  PlayIcon,
143
145
  PullRequestIcon,
package/src/stories/forms/InputWithSeparator.stories.jsx CHANGED
@@ -25,6 +25,8 @@ export default {
25
25
  const TemplateDefault = (args) => {
26
26
  const [value, setValue] = useState('')
27
27
  const [chunks, setChunks] = useState('')
28
+ const [errorMessage, setErrorMessage] = useState('')
29
+ // errorMessage: 'error message displayed just for to be see',
28
30
 
29
31
  function handleChange ({ value, chunks }) {
30
32
  setValue(value)
@@ -35,7 +37,8 @@ const TemplateDefault = (args) => {
35
37
  <>
36
38
  <p>Chunks: {chunks.toString()} </p>
37
39
  <p>Value inserted: {value} </p>
38
- <InputWithSeparator {...args} value={value} onChange={handleChange} />
40
+ <label>Add Error message: <input type='checkbox' onChange={() => setErrorMessage(errorMessage === '' ? 'custom message' : '')} /></label>
41
+ <InputWithSeparator {...args} value={value} onChange={handleChange} errorMessage={errorMessage} />
39
42
  </>
40
43
  )
41
44
  }