@platformatic/ui-components 0.1.126 → 0.1.128

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-78f54889.js → index-0dbe23f0.js} +5 -5
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Tag.jsx +20 -6
  5. package/src/components/Tag.module.css +4 -2
  6. package/src/components/forms/Select.jsx +6 -2
  7. package/src/components/forms/Select.module.css +5 -2
  8. package/src/components/icons/StackablesPluginIcon.jsx +10 -9
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-78f54889.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-0dbe23f0.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index-89e9ad97.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.126",
4
+ "version": "0.1.128",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Tag.jsx CHANGED
@@ -3,15 +3,18 @@ import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import commonStyles from './Common.module.css'
5
5
  import styles from './Tag.module.css'
6
- import { COLORS_BUTTON } from './constants'
6
+ import { COLORS_BUTTON, OPACITY_100, OPACITY_20, OPACITY_30, OPACITY_60, WHITE } from './constants'
7
7
 
8
- function Tag ({ text, color, backgroundColor, bordered, opaque }) {
9
- const stylesColor = commonStyles[`text--${color}`]
8
+ function Tag ({ text, textClassName, color, backgroundColor, bordered, opaque, fullRounded }) {
9
+ const stylesColor = textClassName || commonStyles[`text--${color}`]
10
10
  let stylesBorderColor = ''
11
11
  if (bordered) {
12
12
  stylesBorderColor = `${styles.bordered} `
13
13
  stylesBorderColor += commonStyles[`bordered--${color}`]
14
14
  }
15
+ if (fullRounded) {
16
+ stylesBorderColor += ` ${styles.fullRounded}`
17
+ }
15
18
  const stylesBackgroundColor = backgroundColor ? commonStyles[`background-color-${backgroundColor}`] : ''
16
19
  const opacity = commonStyles[`background-color-opaque-${opaque}`]
17
20
  const className = `${styles.tag} ${stylesColor} ${stylesBorderColor} ${stylesBackgroundColor} ${opacity}`
@@ -29,6 +32,11 @@ Tag.propTypes = {
29
32
  * text
30
33
  */
31
34
  text: PropTypes.string,
35
+ /**
36
+ /**
37
+ * textClassName
38
+ */
39
+ textClassName: PropTypes.string,
32
40
  /**
33
41
  * backgroundColor
34
42
  */
@@ -40,16 +48,22 @@ Tag.propTypes = {
40
48
  /**
41
49
  * opaque
42
50
  */
43
- opaque: PropTypes.oneOf([100, 60, 30, 20])
51
+ opaque: PropTypes.oneOf([OPACITY_100, OPACITY_60, OPACITY_30, OPACITY_20]),
52
+ /**
53
+ * fullRounded
54
+ */
55
+ fullRounded: PropTypes.bool
44
56
 
45
57
  }
46
58
 
47
59
  Tag.defaultProps = {
48
60
  backgroundColor: '',
49
- color: 'white',
61
+ color: WHITE,
50
62
  text: '',
63
+ textClassName: '',
51
64
  bordered: true,
52
- opaque: 100
65
+ opaque: OPACITY_100,
66
+ fullRounded: false
53
67
  }
54
68
 
55
69
  export default Tag
package/src/components/Tag.module.css CHANGED
@@ -1,7 +1,9 @@
1
1
  .tag {
2
- @apply rounded-md px-2 py-1 tracking-super-widest w-fit;
2
+ @apply rounded-md px-4 py-2 w-fit;
3
3
  }
4
-
5
4
  .bordered {
6
5
  @apply border border-solid;
6
+ }
7
+ .fullRounded {
8
+ @apply rounded-full;
7
9
  }
package/src/components/forms/Select.jsx CHANGED
@@ -52,6 +52,8 @@ function Select ({
52
52
  singleOptionClassName += ` ${styles['bordered-bottom']}`
53
53
  }
54
54
 
55
+ const optionSpanClassName = commonStyles[`text--${mainColor}`]
56
+
55
57
  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
56
58
  function onFocusClassName () {
57
59
  return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
@@ -111,8 +113,9 @@ function Select ({
111
113
  >
112
114
  <div className={styles.liContent}>
113
115
  {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
114
- <span className={commonStyles[`text--${mainColor}`]}>{option.label}</span>
116
+ <span className={optionSpanClassName}>{option.label}</span>
115
117
  </div>
118
+ {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
116
119
  </li>
117
120
  )
118
121
  }
@@ -212,7 +215,8 @@ Select.propTypes = {
212
215
  icon: PropTypes.string,
213
216
  notSelectable: PropTypes.bool,
214
217
  notFilterable: PropTypes.bool,
215
- onClick: PropTypes.func
218
+ onClick: PropTypes.func,
219
+ descriptionValue: PropTypes.string
216
220
  })),
217
221
  /**
218
222
  * defaultOptionsClassName
package/src/components/forms/Select.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  @apply border border-solid rounded-md
24
24
  }
25
25
  .option {
26
- @apply w-full font-light cursor-pointer z-10;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
27
27
  }
28
28
  .bordered-bottom {
29
29
  @apply border-b
@@ -33,5 +33,8 @@
33
33
  transform: translateY(-50%);
34
34
  }
35
35
  .liContent {
36
- @apply px-4 py-2 inline-flex items-center gap-x-1 relative z-[-1];
36
+ @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
37
+ }
38
+ .descriptionValue {
39
+ @apply opacity-70
37
40
  }
package/src/components/icons/StackablesPluginIcon.jsx CHANGED
@@ -5,6 +5,7 @@ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../con
5
5
 
6
6
  const StackablesPluginIcon = ({ color, size, disabled }) => {
7
7
  let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ const filledClassName = styles[`filled-${color}`]
8
9
  if (disabled) {
9
10
  className += ` ${styles.iconDisabled}`
10
11
  }
@@ -28,9 +29,9 @@ const StackablesPluginIcon = ({ color, size, disabled }) => {
28
29
  <path d='M5.66943 10.9916V9.30066' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
29
30
  <path d='M2 7.20911V9.61228L5.67533 11.4672L7 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
30
31
  <path d='M9.38344 4.66032L5.67533 6.55991L2 4.70176L3.83767 3.81234M9.38344 4.66032L7.52939 3.79163M9.38344 4.66032V5.85938' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
31
- <path d='M10.5 14C10.5 14.2761 10.7239 14.5 11 14.5C11.2761 14.5 11.5 14.2761 11.5 14L10.5 14ZM10.5 12L10.5 14L11.5 14L11.5 12L10.5 12Z' fill='white' />
32
- <path d='M9.5 7C9.5 6.72386 9.27614 6.5 9 6.5C8.72386 6.5 8.5 6.72386 8.5 7L9.5 7ZM9.5 9L9.5 7L8.5 7L8.5 9L9.5 9Z' fill='white' />
33
- <path d='M13.5 7C13.5 6.72386 13.2761 6.5 13 6.5C12.7239 6.5 12.5 6.72386 12.5 7L13.5 7ZM13.5 9L13.5 7L12.5 7L12.5 9L13.5 9Z' fill='white' />
32
+ <path d='M10.5 14C10.5 14.2761 10.7239 14.5 11 14.5C11.2761 14.5 11.5 14.2761 11.5 14L10.5 14ZM10.5 12L10.5 14L11.5 14L11.5 12L10.5 12Z' fill='none' className={filledClassName} />
33
+ <path d='M9.5 7C9.5 6.72386 9.27614 6.5 9 6.5C8.72386 6.5 8.5 6.72386 8.5 7L9.5 7ZM9.5 9L9.5 7L8.5 7L8.5 9L9.5 9Z' fill='none' className={filledClassName} />
34
+ <path d='M13.5 7C13.5 6.72386 13.2761 6.5 13 6.5C12.7239 6.5 12.5 6.72386 12.5 7L13.5 7ZM13.5 9L13.5 7L12.5 7L12.5 9L13.5 9Z' fill='none' className={filledClassName} />
34
35
  <path d='M11 12C12.6569 12 14 10.6569 14 9H8C8 10.6569 9.34315 12 11 12Z' stroke='none' strokeLinejoin='round' />
35
36
  <path d='M5.66943 8.48436V6.79346' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
37
  <path d='M2 4.7019V7.10507L5.67533 8.96004L7 8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
@@ -59,9 +60,9 @@ const StackablesPluginIcon = ({ color, size, disabled }) => {
59
60
  <path d='M8.50439 16.4874V13.951' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
60
61
  <path d='M3 10.8137V14.4185L8.513 17.2009L10.5 16.5001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61
62
  <path d='M14.0752 6.99055L8.513 9.83993L3 7.0527L5.7565 5.71858M14.0752 6.99055L11.2941 5.6875M14.0752 6.99055V8.78912' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
62
- <path d='M15.75 21C15.75 21.4142 16.0858 21.75 16.5 21.75C16.9142 21.75 17.25 21.4142 17.25 21L15.75 21ZM15.75 18L15.75 21L17.25 21L17.25 18L15.75 18Z' fill='white' />
63
- <path d='M14.25 10.5C14.25 10.0858 13.9142 9.75 13.5 9.75C13.0858 9.75 12.75 10.0858 12.75 10.5L14.25 10.5ZM14.25 13.5L14.25 10.5L12.75 10.5L12.75 13.5L14.25 13.5Z' fill='white' />
64
- <path d='M20.25 10.5C20.25 10.0858 19.9142 9.75 19.5 9.75C19.0858 9.75 18.75 10.0858 18.75 10.5L20.25 10.5ZM20.25 13.5L20.25 10.5L18.75 10.5L18.75 13.5L20.25 13.5Z' fill='white' />
63
+ <path d='M15.75 21C15.75 21.4142 16.0858 21.75 16.5 21.75C16.9142 21.75 17.25 21.4142 17.25 21L15.75 21ZM15.75 18L15.75 21L17.25 21L17.25 18L15.75 18Z' fill='none' className={filledClassName} />
64
+ <path d='M14.25 10.5C14.25 10.0858 13.9142 9.75 13.5 9.75C13.0858 9.75 12.75 10.0858 12.75 10.5L14.25 10.5ZM14.25 13.5L14.25 10.5L12.75 10.5L12.75 13.5L14.25 13.5Z' fill='none' className={filledClassName} />
65
+ <path d='M20.25 10.5C20.25 10.0858 19.9142 9.75 19.5 9.75C19.0858 9.75 18.75 10.0858 18.75 10.5L20.25 10.5ZM20.25 13.5L20.25 10.5L18.75 10.5L18.75 13.5L20.25 13.5Z' fill='none' className={filledClassName} />
65
66
  <path d='M16.5 18C18.9853 18 21 15.9853 21 13.5H12C12 15.9853 14.0147 18 16.5 18Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
66
67
  <path d='M8.50439 12.7265V10.1902' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
67
68
  <path d='M3 7.05286V10.6576L8.513 13.4401L10.5 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
@@ -90,9 +91,9 @@ const StackablesPluginIcon = ({ color, size, disabled }) => {
90
91
  <path d='M14.1738 27.4787V23.2515' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
91
92
  <path d='M5 18.0226V24.0305L14.1883 28.6679L17.5 27.4998' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
92
93
  <path d='M23.4586 11.6508L14.1883 16.3997L5 11.7543L9.59416 9.5308M23.4586 11.6508L18.8235 9.479M23.4586 11.6508V14.6484' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
93
- <path d='M26.5 35C26.5 35.5523 26.9477 36 27.5 36C28.0523 36 28.5 35.5523 28.5 35L26.5 35ZM26.5 30L26.5 35L28.5 35L28.5 30L26.5 30Z' fill='white' />
94
- <path d='M23.5 17.5C23.5 16.9477 23.0523 16.5 22.5 16.5C21.9477 16.5 21.5 16.9477 21.5 17.5L23.5 17.5ZM23.5 22.5L23.5 17.5L21.5 17.5L21.5 22.5L23.5 22.5Z' fill='white' />
95
- <path d='M33.5 17.5C33.5 16.9477 33.0523 16.5 32.5 16.5C31.9477 16.5 31.5 16.9477 31.5 17.5L33.5 17.5ZM33.5 22.5L33.5 17.5L31.5 17.5L31.5 22.5L33.5 22.5Z' fill='white' />
94
+ <path d='M26.5 35C26.5 35.5523 26.9477 36 27.5 36C28.0523 36 28.5 35.5523 28.5 35L26.5 35ZM26.5 30L26.5 35L28.5 35L28.5 30L26.5 30Z' fill='none' className={filledClassName} />
95
+ <path d='M23.5 17.5C23.5 16.9477 23.0523 16.5 22.5 16.5C21.9477 16.5 21.5 16.9477 21.5 17.5L23.5 17.5ZM23.5 22.5L23.5 17.5L21.5 17.5L21.5 22.5L23.5 22.5Z' fill='none' className={filledClassName} />
96
+ <path d='M33.5 17.5C33.5 16.9477 33.0523 16.5 32.5 16.5C31.9477 16.5 31.5 16.9477 31.5 17.5L33.5 17.5ZM33.5 22.5L33.5 17.5L31.5 17.5L31.5 22.5L33.5 22.5Z' fill='none' className={filledClassName} />
96
97
  <path d='M27.5 30C31.6421 30 35 26.6421 35 22.5H20C20 26.6421 23.3579 30 27.5 30Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
97
98
  <path d='M14.1738 21.2108V16.9835' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
98
99
  <path d='M5 11.7545V17.7624L14.1883 22.3999L17.5 21.2498' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />