@platformatic/ui-components 0.2.9 → 0.2.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 (8) hide show
  1. package/dist/assets/index-BIC-Z3Mo.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/ButtonOnlyIcon.jsx +24 -18
  5. package/src/components/icons/APIDocsIcon.jsx +114 -0
  6. package/src/components/icons/EntrypointIcon.jsx +95 -0
  7. package/src/components/icons/index.js +4 -0
  8. package/dist/assets/index-BrHI_B3I.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-BrHI_B3I.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-BIC-Z3Mo.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.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.2.9",
4
+ "version": "0.2.11",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/ButtonOnlyIcon.jsx CHANGED
@@ -14,7 +14,6 @@ function ButtonOnlyIcon ({
14
14
  backgroundColor,
15
15
  size,
16
16
  disabled,
17
- bold,
18
17
  hoverEffect,
19
18
  bordered,
20
19
  fullWidth,
@@ -23,28 +22,21 @@ function ButtonOnlyIcon ({
23
22
  selected,
24
23
  ...rest
25
24
  }) {
26
- let buttonClassName = textClass
27
- buttonClassName += ` ${styles.button} ${styles['color-' + color]} `
28
25
  let contentClassName = `${styles.content} `
29
26
  if (paddingClass) {
30
27
  contentClassName += `${paddingClass} `
31
28
  } else {
32
29
  contentClassName += `${styles['button-' + size]} `
33
30
  }
34
- if (disabled) {
35
- buttonClassName += ' ' + commonStyles[`bordered--${color}-30`]
36
- contentClassName += ` ${styles.disabled}`
37
- } else {
38
- buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
39
- }
40
- if (!bordered) buttonClassName += ` ${styles['no-border']}`
41
- if (bold) buttonClassName += ` ${styles.fontBold}`
31
+ let baseButtonClassName = textClass
32
+ baseButtonClassName += ` ${styles.button} `
42
33
  if (fullWidth) {
43
- buttonClassName += ` ${styles.fullWidth}`
34
+ baseButtonClassName += ` ${styles.fullWidth}`
44
35
  }
45
- if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
36
+ if (selected) baseButtonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
46
37
  const [hover, setHover] = useState(false)
47
38
  const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
39
+ const [buttonClassName, setButtonClassName] = useState(disabled ? buttonRestClassName : buttonActiveClassName())
48
40
 
49
41
  useEffect(() => {
50
42
  if (!disabled) {
@@ -68,12 +60,30 @@ function ButtonOnlyIcon ({
68
60
  }
69
61
  }, [disabled, hover, hoverEffect])
70
62
 
63
+ useEffect(() => {
64
+ if (disabled) {
65
+ setButtonClassName(buttonRestClassName())
66
+ } else {
67
+ setButtonClassName(buttonActiveClassName())
68
+ }
69
+ }, [disabled])
70
+
71
71
  function restClassName () {
72
72
  return `${commonStyles['background-color-' + backgroundColor]} `
73
73
  }
74
74
 
75
+ function buttonRestClassName () {
76
+ if (!bordered) return ` ${styles['no-border']}`
77
+ return commonStyles[`bordered--${color}-30`]
78
+ }
79
+
80
+ function buttonActiveClassName () {
81
+ if (!bordered) return ` ${styles['no-border']}`
82
+ return commonStyles[`bordered--${color}-100`]
83
+ }
84
+
75
85
  return (
76
- <button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
86
+ <button className={`${baseButtonClassName} ${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
77
87
  <div className={`${contentClassName} ${backgroundClassName}`}>
78
88
  {platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={MEDIUM} onClick={null} disabled={disabled} /> : null}
79
89
  </div>
@@ -110,10 +120,6 @@ ButtonOnlyIcon.propTypes = {
110
120
  * Disabled
111
121
  */
112
122
  disabled: PropTypes.bool,
113
- /**
114
- * Bold
115
- */
116
- bold: PropTypes.bool,
117
123
  /**
118
124
  * Effect on hover
119
125
  */
package/src/components/icons/APIDocsIcon.jsx ADDED
@@ -0,0 +1,114 @@
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 APIDocsIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+ const filledClassName = styles[`filled-${color}`]
16
+
17
+ switch (size) {
18
+ case SMALL:
19
+ icon = (
20
+ <svg
21
+ width={16}
22
+ height={16}
23
+ viewBox='0 0 16 16'
24
+ fill='none'
25
+ xmlns='http://www.w3.org/2000/svg'
26
+ className={className}
27
+ >
28
+ <path d='M10 7.5V3C10 2.44772 9.55228 2 9 2H3C2.44772 2 2 2.44772 2 3V11C2 11.5523 2.44772 12 3 12H4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
29
+ <rect x='5.6001' y='9' width='8.4' height='5' rx='1' stroke='none' />
30
+ <path d='M3.5 3.5H8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
31
+ <path d='M3.5 5.5H8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32
+ <path d='M3.5 7.5H8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M7.40274 12.9999H6.74365L7.74791 10.0908H8.54053L9.54337 12.9999H8.88428L8.15558 10.7556H8.13286L7.40274 12.9999ZM7.36155 11.8564H8.91837V12.3366H7.36155V11.8564Z' fill='none' className={filledClassName} />
34
+ <path d='M9.89351 12.9999V10.0908H11.0412C11.2619 10.0908 11.4499 10.133 11.6052 10.2172C11.7605 10.3006 11.8788 10.4166 11.9603 10.5653C12.0427 10.713 12.0839 10.8834 12.0839 11.0766C12.0839 11.2698 12.0422 11.4403 11.9589 11.588C11.8755 11.7357 11.7548 11.8508 11.5966 11.9331C11.4394 12.0155 11.2491 12.0567 11.0256 12.0567H10.2941V11.5638H10.9262C11.0446 11.5638 11.1421 11.5435 11.2188 11.5028C11.2964 11.4611 11.3542 11.4038 11.3921 11.3309C11.4309 11.257 11.4503 11.1723 11.4503 11.0766C11.4503 10.98 11.4309 10.8957 11.3921 10.8238C11.3542 10.7509 11.2964 10.6945 11.2188 10.6547C11.1411 10.614 11.0427 10.5937 10.9233 10.5937H10.5086V12.9999H9.89351Z' fill='none' className={filledClassName} />
35
+ <path d='M13.0984 10.0908V12.9999H12.4834V10.0908H13.0984Z' fill='none' className={filledClassName} />
36
+ </svg>
37
+ )
38
+ break
39
+ case MEDIUM:
40
+ icon = (
41
+ <svg
42
+ width={24}
43
+ height={24}
44
+ viewBox='0 0 24 24'
45
+ fill='none'
46
+ xmlns='http://www.w3.org/2000/svg'
47
+ className={className}
48
+ >
49
+ <path d='M15 11.25V4C15 3.44772 14.5523 3 14 3H4C3.44772 3 3 3.44772 3 4V17C3 17.5523 3.44772 18 4 18H6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ <rect x='8.40015' y='13.5' width='12.6' height='7.5' rx='1' stroke='none' strokeWidth={1.5} />
51
+ <path d='M5.25 5.25H12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52
+ <path d='M5.25 8.25H12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
+ <path d='M5.25 11.25H12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54
+ <path d='M11.1041 19.4999H10.1155L11.6219 15.1362H12.8108L14.3151 19.4999H13.3264L12.2334 16.1334H12.1993L11.1041 19.4999ZM11.0423 17.7847H13.3776V18.5048H11.0423V17.7847Z' fill='none' className={filledClassName} />
55
+ <path d='M14.8403 19.4999V15.1362H16.5619C16.8928 15.1362 17.1748 15.1994 17.4077 15.3259C17.6407 15.4509 17.8182 15.6249 17.9404 15.8479C18.064 16.0695 18.1258 16.3252 18.1258 16.6149C18.1258 16.9047 18.0633 17.1604 17.9383 17.382C17.8133 17.6036 17.6322 17.7761 17.395 17.8997C17.1592 18.0233 16.8736 18.0851 16.5384 18.0851H15.4411V17.3457H16.3893C16.5668 17.3457 16.7131 17.3152 16.8282 17.2541C16.9447 17.1916 17.0313 17.1057 17.0881 16.9963C17.1464 16.8855 17.1755 16.7584 17.1755 16.6149C17.1755 16.47 17.1464 16.3436 17.0881 16.2357C17.0313 16.1263 16.9447 16.0418 16.8282 15.9821C16.7117 15.921 16.564 15.8905 16.385 15.8905H15.7629V19.4999H14.8403Z' fill='none' className={filledClassName} />
56
+ <path d='M19.6476 15.1362V19.4999H18.725V15.1362H19.6476Z' fill='none' className={filledClassName} />
57
+
58
+ </svg>
59
+ )
60
+ break
61
+ case LARGE:
62
+ icon = (
63
+ <svg
64
+ width={40}
65
+ height={40}
66
+ viewBox='0 0 40 40'
67
+ fill='none'
68
+ xmlns='http://www.w3.org/2000/svg'
69
+ className={className}
70
+ >
71
+ <path d='M25 18.75V6C25 5.44772 24.5523 5 24 5H6C5.44772 5 5 5.44772 5 6V29C5 29.5523 5.44772 30 6 30H10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
72
+ <rect x='14.0002' y='22.5' width='21' height='12.5' rx='1' stroke='none' strokeWidth={2} />
73
+ <path d='M8.75 8.75H21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
74
+ <path d='M8.75 13.75H21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
75
+ <path d='M8.75 18.75H21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
76
+ <path d='M18.5069 32.4998H16.8591L19.3698 25.2271H21.3513L23.8584 32.4998H22.2107L20.389 26.889H20.3321L18.5069 32.4998ZM18.4039 29.6411H22.2959V30.8414H18.4039V29.6411Z' fill='none' className={filledClassName} />
77
+ <path d='M24.7338 32.4998V25.2271H27.6031C28.1547 25.2271 28.6246 25.3324 29.0129 25.5431C29.4012 25.7514 29.6971 26.0414 29.9007 26.4131C30.1066 26.7824 30.2096 27.2086 30.2096 27.6915C30.2096 28.1745 30.1055 28.6006 29.8971 28.9699C29.6888 29.3393 29.3869 29.6269 28.9916 29.8329C28.5986 30.0388 28.1227 30.1418 27.564 30.1418H25.7352V28.9096H27.3155C27.6114 28.9096 27.8552 28.8587 28.047 28.7569C28.2411 28.6527 28.3855 28.5095 28.4802 28.3272C28.5773 28.1425 28.6258 27.9306 28.6258 27.6915C28.6258 27.4501 28.5773 27.2394 28.4802 27.0594C28.3855 26.8771 28.2411 26.7363 28.047 26.6369C27.8529 26.5351 27.6066 26.4842 27.3083 26.4842H26.2714V32.4998H24.7338Z' fill='none' className={filledClassName} />
78
+ <path d='M32.746 25.2271V32.4998H31.2084V25.2271H32.746Z' fill='none' className={filledClassName} />
79
+ </svg>
80
+ )
81
+ break
82
+
83
+ default:
84
+ break
85
+ }
86
+ return icon
87
+ }
88
+
89
+ APIDocsIcon.propTypes = {
90
+ /**
91
+ * color of text, icon and borders
92
+ */
93
+ color: PropTypes.oneOf(COLORS_ICON),
94
+ /**
95
+ * Size
96
+ */
97
+ size: PropTypes.oneOf(SIZES),
98
+ /**
99
+ * disabled
100
+ */
101
+ disabled: PropTypes.bool,
102
+ /**
103
+ * inactive
104
+ */
105
+ inactive: PropTypes.bool
106
+ }
107
+ APIDocsIcon.defaultProps = {
108
+ color: MAIN_DARK_BLUE,
109
+ size: MEDIUM,
110
+ disabled: false,
111
+ inactive: false
112
+ }
113
+
114
+ export default APIDocsIcon
package/src/components/icons/EntrypointIcon.jsx ADDED
@@ -0,0 +1,95 @@
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 EntrypointIcon = ({ color, size, disabled, inactive }) => {
7
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
8
+ if (disabled) {
9
+ className += ` ${styles.iconDisabled}`
10
+ }
11
+ if (inactive) {
12
+ className += ` ${styles.iconInactive}`
13
+ }
14
+ let icon = <></>
15
+
16
+ switch (size) {
17
+ case SMALL:
18
+ icon = (
19
+ <svg
20
+ width={16}
21
+ height={16}
22
+ viewBox='0 0 16 16'
23
+ fill='none'
24
+ xmlns='http://www.w3.org/2000/svg'
25
+ className={className}
26
+ >
27
+ <path d='M3.15354 5C4.15846 3.2066 6.03674 2 8.188 2C11.3979 2 14 4.68629 14 8C14 11.3137 11.3979 14 8.188 14C5.92177 14 3.95849 12.661 3 10.7075' stroke='none' strokeLinecap='round' />
28
+ <path d='M2 7.89995H10.7272M10.7272 7.89995L8.54543 5.69995M10.7272 7.89995L8.54543 10.1' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
29
+
30
+ </svg>
31
+ )
32
+ break
33
+ case MEDIUM:
34
+ icon = (
35
+ <svg
36
+ width={24}
37
+ height={24}
38
+ viewBox='0 0 24 24'
39
+ fill='none'
40
+ xmlns='http://www.w3.org/2000/svg'
41
+ className={className}
42
+ >
43
+ <path d='M4.73031 7.5C6.23769 4.80989 9.05511 3 12.282 3C17.0968 3 21 7.02944 21 12C21 16.9706 17.0968 21 12.282 21C8.88266 21 5.93773 18.9915 4.5 16.0613' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
44
+ <path d='M3 11.85H16.0909M16.0909 11.85L12.8181 8.55005M16.0909 11.85L12.8181 15.15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
45
+ </svg>
46
+ )
47
+ break
48
+ case LARGE:
49
+ icon = (
50
+ <svg
51
+ width={40}
52
+ height={40}
53
+ viewBox='0 0 40 40'
54
+ fill='none'
55
+ xmlns='http://www.w3.org/2000/svg'
56
+ className={className}
57
+ >
58
+ <path d='M7.88385 12.5C10.3962 8.01649 15.0918 5 20.47 5C28.4947 5 35 11.7157 35 20C35 28.2843 28.4947 35 20.47 35C14.8044 35 9.89621 31.6525 7.5 26.7688' stroke='none' strokeWidth={2} strokeLinecap='round' />
59
+ <path d='M5 19.75H26.8181M26.8181 19.75L21.3636 14.25M26.8181 19.75L21.3636 25.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
60
+ </svg>
61
+ )
62
+ break
63
+
64
+ default:
65
+ break
66
+ }
67
+ return icon
68
+ }
69
+
70
+ EntrypointIcon.propTypes = {
71
+ /**
72
+ * color of text, icon and borders
73
+ */
74
+ color: PropTypes.oneOf(COLORS_ICON),
75
+ /**
76
+ * Size
77
+ */
78
+ size: PropTypes.oneOf(SIZES),
79
+ /**
80
+ * disabled
81
+ */
82
+ disabled: PropTypes.bool,
83
+ /**
84
+ * inactive
85
+ */
86
+ inactive: PropTypes.bool
87
+ }
88
+ EntrypointIcon.defaultProps = {
89
+ color: MAIN_DARK_BLUE,
90
+ size: MEDIUM,
91
+ disabled: false,
92
+ inactive: false
93
+ }
94
+
95
+ export default EntrypointIcon
package/src/components/icons/index.js CHANGED
@@ -2,6 +2,7 @@ import AddIcon from './AddIcon'
2
2
  import AlertIcon from './AlertIcon'
3
3
  import AllAppsIcon from './AllAppsIcon'
4
4
  import AllInOneIcon from './AllInOneIcon'
5
+ import APIDocsIcon from './APIDocsIcon'
5
6
  import ApiCloudIcon from './ApiCloudIcon'
6
7
  import ApiIcon from './ApiIcon'
7
8
  import ApiIconClosed from './ApiIconClosed'
@@ -64,6 +65,7 @@ import DatabaseMigrationIcon from './DatabaseMigrationIcon'
64
65
  import DepencenciesReloadIcon from './DepencenciesReloadIcon'
65
66
  import EditDocumentIcon from './EditDocumentIcon'
66
67
  import EditIcon from './EditIcon'
68
+ import EntrypointIcon from './EntrypointIcon'
67
69
  import EnlargeIcon from './EnlargeIcon'
68
70
  import EntryIcon from './EntryIcon'
69
71
  import ExpandIcon from './ExpandIcon'
@@ -145,6 +147,7 @@ export default {
145
147
  AlertIcon,
146
148
  AllAppsIcon,
147
149
  AllInOneIcon,
150
+ APIDocsIcon,
148
151
  ApiCloudIcon,
149
152
  ApiIcon,
150
153
  ApiIconClosed,
@@ -207,6 +210,7 @@ export default {
207
210
  DepencenciesReloadIcon,
208
211
  EditDocumentIcon,
209
212
  EditIcon,
213
+ EntrypointIcon,
210
214
  EyeClosedIcon,
211
215
  EyeOpenedIcon,
212
216
  ExpandIcon,