@platformatic/ui-components 0.7.9 → 0.7.11

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 (16) hide show
  1. package/dist/assets/index-DGOpiKCv.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Checkbox.module.css +6 -6
  5. package/src/components/Modal.jsx +7 -2
  6. package/src/components/ModalDirectional.jsx +1 -0
  7. package/src/components/Status.jsx +2 -2
  8. package/src/components/constants.js +3 -2
  9. package/src/components/forms/InputFileUpload.jsx +15 -2
  10. package/src/components/forms/InputWithSeparator.jsx +13 -2
  11. package/src/components/icons/CircleFullIcon.jsx +20 -5
  12. package/src/components/icons/MailIcon.jsx +93 -0
  13. package/src/components/icons/index.js +2 -0
  14. package/src/stories/PlatformaticIcon.stories.jsx +2 -2
  15. package/src/stories/forms/InputWithSeparator.stories.jsx +6 -1
  16. package/dist/assets/index-NSdDNClY.js +0 -40
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-NSdDNClY.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-DGOpiKCv.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-DVghlxYb.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.7.9",
4
+ "version": "0.7.11",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Checkbox.module.css CHANGED
@@ -14,10 +14,10 @@
14
14
  @apply border-white bg-rich-black
15
15
  }
16
16
  .checkbox--white:checked {
17
- @apply bg-rich-black text-white;
17
+ @apply bg-white text-rich-black;
18
18
  }
19
19
  .checkbox--main-dark-blue:checked:after,
20
- .checkbox--white:checked:after {
20
+ .checkbox--rich-black:checked:after {
21
21
  @apply absolute h-full w-full;
22
22
  top: 1px;
23
23
  left: 1.5px;
@@ -34,9 +34,9 @@
34
34
  .checkbox--rich-black:checked {
35
35
  @apply bg-white text-rich-black;
36
36
  }
37
- .checkbox--rich-black:checked:after {
38
- @apply absolute top-[50%] left-[50%] h-full w-full;
39
- transform: translate(-50%, -50%);
40
-
37
+ .checkbox--white:checked:after {
38
+ @apply absolute h-full w-full;
39
+ top: 1px;
40
+ left: 1.5px;
41
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
42
  }
package/src/components/Modal.jsx CHANGED
@@ -97,7 +97,6 @@ function Modal ({
97
97
  }
98
98
 
99
99
  function closeModal (event) {
100
- console.log('closeModal', event)
101
100
  if (event.target === blurRef.current) {
102
101
  event.preventDefault()
103
102
  event.stopPropagation()
@@ -133,7 +132,13 @@ function Modal ({
133
132
  <div className={modalClassName}>
134
133
  <div className={headerClassName}>
135
134
  <div className={styles.title}>{title}</div>
136
- <PlatformaticIcon iconName='CloseIcon' color={MAIN_DARK_BLUE} size={SMALL} onClick={() => setIsOpen(false)} />
135
+ <PlatformaticIcon
136
+ iconName='CloseIcon'
137
+ color={MAIN_DARK_BLUE}
138
+ size={SMALL}
139
+ onClick={() => setIsOpen(false)}
140
+ internalOverHandling
141
+ />
137
142
  </div>
138
143
  <div>
139
144
  {children}
package/src/components/ModalDirectional.jsx CHANGED
@@ -46,6 +46,7 @@ function ModalDirectional ({
46
46
  iconName='CloseIcon'
47
47
  size={MEDIUM}
48
48
  onClick={() => closeModal()}
49
+ internalOverHandling
49
50
  />
50
51
  </div>
51
52
  {children}
package/src/components/Status.jsx CHANGED
@@ -2,12 +2,12 @@
2
2
  import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import PlatformaticIcon from './PlatformaticIcon'
5
- import { COLORS_ICON, EXTRA_SMALL, SIZES, WHITE } from './constants'
5
+ import { COLORS_ICON, TINY, SIZES, WHITE } from './constants'
6
6
 
7
7
  function Status ({
8
8
  color = WHITE,
9
9
  status = '',
10
- size = EXTRA_SMALL
10
+ size = TINY
11
11
  }) {
12
12
  const className = `inline-flex items-center text-${color}`
13
13
  return (
package/src/components/constants.js CHANGED
@@ -15,14 +15,15 @@ export const FIRE_ENGINE_RED = 'fire-engine-red'
15
15
  export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
16
16
 
17
17
  export const NONE = 'none'
18
- export const EXTRA_SMALL = 'extra-small'
18
+ export const MINI = 'mini'
19
+ export const TINY = 'tiny'
19
20
  export const SMALL = 'small'
20
21
  export const MEDIUM = 'medium'
21
22
  export const EXTRA_MEDIUM = 'extra-medium'
22
23
  export const LARGE = 'large'
23
24
  export const EXTRA_LARGE = 'extra-large'
24
25
 
25
- export const SIZES = [EXTRA_SMALL, SMALL, MEDIUM, EXTRA_MEDIUM, LARGE, EXTRA_LARGE]
26
+ export const SIZES = [MINI, TINY, SMALL, MEDIUM, EXTRA_MEDIUM, LARGE, EXTRA_LARGE]
26
27
  export const PADDING_SIZES = [NONE, ...SIZES]
27
28
  export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
28
29
  export const BOX_SHADOW = 'box-shadow'
package/src/components/forms/InputFileUpload.jsx CHANGED
@@ -66,8 +66,15 @@ function InputFileUpload ({
66
66
  }
67
67
 
68
68
  function handleFileInput (e) {
69
- setFile(e.target.files[0])
70
- onFileSelect(e.target.files[0])
69
+ if ((e.target.files?.length ?? 0) > 0) {
70
+ setFile(e.target.files[0])
71
+ onFileSelect(e.target.files[0])
72
+ } else {
73
+ // Ignore the Cancel Button
74
+ if (file !== null) {
75
+ document.getElementById(idInputFile).value = file.name
76
+ }
77
+ }
71
78
  }
72
79
 
73
80
  function clearFile () {
@@ -93,7 +100,13 @@ function InputFileUpload ({
93
100
  onFocus={() => handleFocus()}
94
101
  onBlur={() => handleBlur()}
95
102
  accept={acceptFiles}
103
+ style={{ display: 'none' }}
96
104
  />
105
+ <label
106
+ for={idInputFile}
107
+ className={focus ? focusedClassName() : normalClassName()}
108
+ >{file !== null ? file.name : 'Select .env file'}
109
+ </label>
97
110
  {file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
98
111
  </div>
99
112
  {file !== null && (
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -4,9 +4,10 @@ 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 { DULLS_BACKGROUND_COLOR, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
7
+ import { DULLS_BACKGROUND_COLOR, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SIZES, SMALL, TRANSPARENT, WHITE } from '../constants'
8
8
  import BorderedBox from '../BorderedBox'
9
9
  import ButtonFullRounded from '../ButtonFullRounded'
10
+ import PlatformaticIcon from '../PlatformaticIcon'
10
11
 
11
12
  function InputWithSeparator ({
12
13
  placeholder = '',
@@ -19,6 +20,7 @@ function InputWithSeparator ({
19
20
  onChange = () => {},
20
21
  disabled = false,
21
22
  afterIcon = null,
23
+ beforeIcon = null,
22
24
  defaultValue = '',
23
25
  defaultValueSeparator = ',',
24
26
  separators = [''],
@@ -89,7 +91,7 @@ function InputWithSeparator ({
89
91
  }
90
92
 
91
93
  function normalClassName () {
92
- return `${baseClassName} ${commonStyles.fullWidth} `
94
+ return `${baseClassName} `
93
95
  }
94
96
 
95
97
  function withChunksClassName () {
@@ -139,6 +141,7 @@ function InputWithSeparator ({
139
141
  <div className={inputStyles.container}>
140
142
  <div className={styles.container}>
141
143
  <div className={inputContainerClassName}>
144
+ {beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} size={beforeIcon.size} data-testid='before-icon' color={beforeIcon.color} onClick={null} />}
142
145
  {chunks.map((value, index) => renderChunk(value, index))}
143
146
  <input
144
147
  type='text'
@@ -225,6 +228,14 @@ InputWithSeparator.propTypes = {
225
228
  handleClick: PropTypes.func,
226
229
  disabled: PropTypes.bool
227
230
  }),
231
+ /**
232
+ * beforeIcon: PlatformaticIcon props
233
+ */
234
+ beforeIcon: PropTypes.shape({
235
+ iconName: PropTypes.string,
236
+ color: PropTypes.string,
237
+ size: PropTypes.oneOf(SIZES)
238
+ }),
228
239
  /**
229
240
  * errorMessage
230
241
  */
package/src/components/icons/CircleFullIcon.jsx CHANGED
@@ -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, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, MINI, TINY, LARGE, MEDIUM, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const CircleFullIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -20,12 +20,27 @@ const CircleFullIcon = ({
20
20
  let icon = <></>
21
21
 
22
22
  switch (size) {
23
- case EXTRA_SMALL:
23
+ case MINI:
24
24
  icon = (
25
25
  <svg
26
- width={8}
27
- height={8}
28
- viewBox='0 0 8 8'
26
+ width={4}
27
+ height={4}
28
+ viewBox='0 0 4 4'
29
+ fill='none'
30
+ xmlns='http://www.w3.org/2000/svg'
31
+ className={className}
32
+ >
33
+ <circle cx={2} cy={2} r={2} fill='none' className={filledClassName} />
34
+ </svg>
35
+ )
36
+ break
37
+
38
+ case TINY:
39
+ icon = (
40
+ <svg
41
+ width={4}
42
+ height={4}
43
+ viewBox='0 0 4 4'
29
44
  fill='none'
30
45
  xmlns='http://www.w3.org/2000/svg'
31
46
  className={className}
package/src/components/icons/MailIcon.jsx ADDED
@@ -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 MailIcon = ({
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
+ <rect x='2' y='4' width='12' height='8' rx='1' stroke='none' />
33
+ <path d='M2.5 4.5L8 8.5L13.5 4.5' 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
+ <rect x='3' y='6' width='18' height='12' rx='1' stroke='none' strokeWidth={1.5} />
48
+ <path d='M3.75 6.75L12 12.75L20.25 6.75' 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
+ <rect x='5' y='10' width='30' height='20' rx='1' stroke='none' strokeWidth={2} />
63
+ <path d='M6.25 11.25L20 21.25L33.75 11.25' 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
+ MailIcon.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 MailIcon
package/src/components/icons/index.js CHANGED
@@ -105,6 +105,7 @@ import LiveIcon from './LiveIcon'
105
105
  import LoadingAppIcon from './LoadingAppIcon'
106
106
  import LogOutIcon from './LogOutIcon'
107
107
  import LogsRiskIcon from './LogsRiskIcon'
108
+ import MailIcon from './MailIcon'
108
109
  import MetricsIcon from './MetricsIcon'
109
110
  import MetricsLoadingIcon from './MetricsLoadingIcon'
110
111
  import MetricsLogsIcon from './MetricsLogsIcon'
@@ -292,6 +293,7 @@ export default {
292
293
  LoadingAppIcon,
293
294
  LogOutIcon,
294
295
  LogsRiskIcon,
296
+ MailIcon,
295
297
  MetricsIcon,
296
298
  MetricsLoadingIcon,
297
299
  MetricsLogsIcon,
package/src/stories/PlatformaticIcon.stories.jsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  COLORS_ICON,
6
6
  EXTRA_LARGE,
7
7
  EXTRA_MEDIUM,
8
- EXTRA_SMALL,
8
+ TINY,
9
9
  LARGE,
10
10
  MEDIUM,
11
11
  SIZES,
@@ -85,7 +85,7 @@ const AllIconsTemplate = (args) => {
85
85
  <PlatformaticIcon
86
86
  key={icon}
87
87
  iconName={icon}
88
- size={EXTRA_SMALL}
88
+ size={TINY}
89
89
  {...args}
90
90
  />
91
91
  </div>
package/src/stories/forms/InputWithSeparator.stories.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
- import { ERROR_RED } from '../../components/constants'
3
+ import { ERROR_RED, MAIN_GREEN, MEDIUM } from '../../components/constants'
4
4
  import InputWithSeparator from '../../components/forms/InputWithSeparator'
5
5
 
6
6
  const divStyle = {
@@ -66,6 +66,11 @@ Default.args = {
66
66
  iconName: 'AddIcon',
67
67
  color: ERROR_RED,
68
68
  handleClick: () => alert("I'm an AddIcon")
69
+ },
70
+ beforeIcon: {
71
+ iconName: 'UserIcon',
72
+ color: MAIN_GREEN,
73
+ size: MEDIUM
69
74
  }
70
75
  }
71
76