@platformatic/ui-components 0.6.11 → 0.7.0

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/dist/index.html CHANGED
@@ -4,8 +4,8 @@
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-3WVulCbJ.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
7
+ <script type="module" crossorigin src="/assets/index-CzGl5ygC.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-Bdl3RcHK.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
3
3
  */
4
4
 
5
5
  /*
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.6.11",
4
+ "version": "0.7.0",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './BorderedBox.module.css'
4
4
  import commonStyles from './Common.module.css'
5
5
  import React from 'react'
6
- import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITY_100 } from './constants'
6
+ import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITIES, OPACITY_100 } from './constants'
7
7
  function BorderedBox ({
8
8
  classes = '',
9
9
  color = MAIN_GREEN,
@@ -47,11 +47,11 @@ BorderedBox.propTypes = {
47
47
  /**
48
48
  * backgroundColorOpacity
49
49
  */
50
- backgroundColorOpacity: PropTypes.oneOf([100, 60, 30, 20, 10]),
50
+ backgroundColorOpacity: PropTypes.oneOf(OPACITIES),
51
51
  /**
52
52
  * borderColorOpacity
53
53
  */
54
- borderColorOpacity: PropTypes.oneOf([100, 60, 30, 20, 10]),
54
+ borderColorOpacity: PropTypes.oneOf(OPACITIES),
55
55
  /**
56
56
  * clickable
57
57
  */
@@ -237,6 +237,9 @@
237
237
  .background-color-opaque-100 {
238
238
  @apply bg-opacity-100 !important;
239
239
  }
240
+ .background-color-opaque-70 {
241
+ @apply bg-opacity-70 !important;
242
+ }
240
243
  .background-color-opaque-60 {
241
244
  @apply bg-opacity-60 !important;
242
245
  }
@@ -69,7 +69,9 @@ export const OPACITY_10 = 10
69
69
  export const OPACITY_20 = 20
70
70
  export const OPACITY_30 = 30
71
71
  export const OPACITY_60 = 60
72
+ export const OPACITY_70 = 70
72
73
  export const OPACITY_100 = 100
74
+ export const OPACITIES = [OPACITY_10, OPACITY_20, OPACITY_30, OPACITY_60, OPACITY_70, OPACITY_100]
73
75
 
74
76
  export const DIRECTION_BOTTOM = 'bottom'
75
77
  export const DIRECTION_LEFT = 'left'
@@ -0,0 +1,119 @@
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 GraphQLEditsIcon = ({
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
+ const filledClassName = styles[`filled-${color}`]
20
+
21
+ let icon = <></>
22
+
23
+ switch (size) {
24
+ case SMALL:
25
+ icon = (
26
+ <svg
27
+ width={16}
28
+ height={16}
29
+ viewBox='0 0 16 16'
30
+ fill='none'
31
+ xmlns='http://www.w3.org/2000/svg'
32
+ className={className}
33
+ >
34
+ <rect x='11.376' y='6.36633' width='1.9323' height='7.0851' transform='rotate(45 11.376 6.36633)' stroke='none' strokeLinejoin='round' />
35
+ <path d='M7.73304 12.7427L6.3667 11.3763L5.68353 13.4259L7.73304 12.7427Z' stroke='none' strokeLinejoin='round' />
36
+ <path d='M12.0595 5.68317C12.4368 5.30587 13.0485 5.30587 13.4258 5.68317V5.68317C13.8032 6.06048 13.8032 6.67221 13.4258 7.04951L12.7427 7.73268L11.3763 6.36634L12.0595 5.68317Z' stroke='none' />
37
+ <circle cx='5' cy='2' r='1' fill='none' className={filledClassName} />
38
+ <circle cx='5' cy='9' r='1' fill='none' className={filledClassName} />
39
+ <path d='M2 7V4L5 2M2 7L5 9L8 7M2 7H8M2 7L5 2M5 2L8 4V7M5 2L8 7' stroke='none' />
40
+ <circle cx='8' cy='4' r='1' fill='none' className={filledClassName} />
41
+ <circle cx='8' cy='7' r='1' fill='none' className={filledClassName} />
42
+ <circle cx='2' cy='7' r='1' fill='none' className={filledClassName} />
43
+ <circle cx='2' cy='4' r='1' fill='none' className={filledClassName} />
44
+ </svg>
45
+ )
46
+ break
47
+ case MEDIUM:
48
+ icon = (
49
+ <svg
50
+ width={24}
51
+ height={24}
52
+ viewBox='0 0 24 24'
53
+ fill='none'
54
+ xmlns='http://www.w3.org/2000/svg'
55
+ className={className}
56
+ >
57
+ <rect x='17.064' y='9.54956' width='2.89845' height='10.6276' transform='rotate(45 17.064 9.54956)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
58
+ <path d='M11.5988 19.114L9.54932 17.0645L8.52456 20.1387L11.5988 19.114Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
59
+ <path d='M18.4067 8.20711C18.7972 7.81658 19.4304 7.81658 19.8209 8.20711L20.4562 8.84241C20.8467 9.23293 20.8467 9.8661 20.4562 10.2566L19.1138 11.599L17.0643 9.54951L18.4067 8.20711Z' stroke='none' strokeWidth={1.5} />
60
+ <circle cx='7.5' cy='3' r='1.5' fill='none' className={filledClassName} />
61
+ <circle cx='7.5' cy='13.5' r='1.5' fill='none' className={filledClassName} />
62
+ <path d='M3 10.5V6L7.5 3M3 10.5L7.5 13.5L12 10.5M3 10.5H12M3 10.5L7.5 3M7.5 3L12 6V10.5M7.5 3L12 10.5' stroke='none' strokeWidth={1.5} />
63
+ <circle cx='12' cy='6' r='1.5' fill='none' className={filledClassName} />
64
+ <circle cx='12' cy='10.5' r='1.5' fill='none' className={filledClassName} />
65
+ <circle cx='3' cy='10.5' r='1.5' fill='none' className={filledClassName} />
66
+ <circle cx='3' cy='6' r='1.5' fill='none' className={filledClassName} />
67
+ </svg>
68
+ )
69
+ break
70
+ case LARGE:
71
+ icon = (
72
+ <svg
73
+ width={40}
74
+ height={40}
75
+ viewBox='0 0 40 40'
76
+ fill='none'
77
+ xmlns='http://www.w3.org/2000/svg'
78
+ className={className}
79
+ >
80
+ <rect x='28.4404' y='15.9159' width='4.83075' height='17.7127' transform='rotate(45 28.4404 15.9159)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
81
+ <path d='M19.3319 31.8567L15.916 28.4408L14.2081 33.5646L19.3319 31.8567Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
82
+ <path d='M31.1493 13.2071C31.5399 12.8166 32.173 12.8166 32.5636 13.2071L34.5652 15.2087C34.9557 15.5993 34.9557 16.2324 34.5652 16.623L31.8564 19.3317L28.4406 15.9159L31.1493 13.2071Z' stroke='none' strokeWidth={2} />
83
+ <circle cx='12.5' cy='5' r='2.5' fill='none' className={filledClassName} />
84
+ <circle cx='12.5' cy='22.5' r='2.5' fill='none' className={filledClassName} />
85
+ <path d='M5 17.5V10L12.5 5M5 17.5L12.5 22.5L20 17.5M5 17.5H20M5 17.5L12.5 5M12.5 5L20 10V17.5M12.5 5L20 17.5' stroke='none' strokeWidth={2} />
86
+ <circle cx='20' cy='10' r='2.5' fill='none' className={filledClassName} />
87
+ <circle cx='20' cy='17.5' r='2.5' fill='none' className={filledClassName} />
88
+ <circle cx='5' cy='17.5' r='2.5' fill='none' className={filledClassName} />
89
+ <circle cx='5' cy='10' r='2.5' fill='none' className={filledClassName} />
90
+ </svg>
91
+ )
92
+ break
93
+
94
+ default:
95
+ break
96
+ }
97
+ return icon
98
+ }
99
+
100
+ GraphQLEditsIcon.propTypes = {
101
+ /**
102
+ * color of text, icon and borders
103
+ */
104
+ color: PropTypes.oneOf(COLORS_ICON),
105
+ /**
106
+ * Size
107
+ */
108
+ size: PropTypes.oneOf(SIZES),
109
+ /**
110
+ * disabled
111
+ */
112
+ disabled: PropTypes.bool,
113
+ /**
114
+ * inactive
115
+ */
116
+ inactive: PropTypes.bool
117
+ }
118
+
119
+ export default GraphQLEditsIcon
@@ -0,0 +1,104 @@
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 OpenAPIEditsIcon = ({
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
+ const filledClassName = styles[`filled-${color}`]
20
+
21
+ let icon = <></>
22
+
23
+ switch (size) {
24
+ case SMALL:
25
+ icon = (
26
+ <svg
27
+ width={16}
28
+ height={16}
29
+ viewBox='0 0 16 16'
30
+ fill='none'
31
+ xmlns='http://www.w3.org/2000/svg'
32
+ className={className}
33
+ >
34
+ <rect x='11.376' y='6.36633' width='1.9323' height='7.0851' transform='rotate(45 11.376 6.36633)' stroke='none' strokeLinejoin='round' />
35
+ <path d='M7.73304 12.7427L6.3667 11.3763L5.68353 13.4259L7.73304 12.7427Z' stroke='none' strokeLinejoin='round' />
36
+ <path d='M12.0595 5.68317C12.4368 5.30587 13.0485 5.30587 13.4258 5.68317V5.68317C13.8032 6.06048 13.8032 6.67221 13.4258 7.04951L12.7427 7.73268L11.3763 6.36634L12.0595 5.68317Z' stroke='none' />
37
+ <path d='M10.9995 3.25662C10.9331 3.2872 10.944 3.35803 10.9263 3.41074C10.7255 4.0051 10.138 4.31738 9.54037 4.12824C9.41039 4.0872 9.33876 4.10852 9.24661 4.20108C8.53595 4.91455 7.82127 5.6236 7.10377 6.33024C7.01967 6.41313 6.98707 6.47591 7.03093 6.60227C7.19914 7.09039 7.00639 7.60065 6.57178 7.87027C6.14804 8.13304 5.57823 8.07187 5.22451 7.7258C4.86435 7.37288 4.78548 6.82923 5.03296 6.40388C5.2901 5.96203 5.81605 5.74674 6.30619 5.90288C6.44864 5.94835 6.53033 5.9238 6.63214 5.82119C7.3424 5.10771 8.0591 4.40027 8.77579 3.69283C8.84742 3.62201 8.87921 3.56768 8.84138 3.45541C8.63575 2.84938 8.94561 2.24053 9.54319 2.0526C10.1448 1.86347 10.754 2.19948 10.9404 2.81759C10.9561 2.8703 10.9307 2.94274 10.9999 2.97614V3.25622L10.9995 3.25662Z' fill='none' className={filledClassName} />
38
+ <path d='M5.89288 2.84767C6.81078 2.84887 7.54276 3.07744 8.21238 3.51688C8.30775 3.57965 8.32103 3.61305 8.23451 3.69957C7.71258 4.22472 7.19468 4.75349 6.6808 5.28668C6.59066 5.38004 6.51138 5.39815 6.38422 5.36716C5.3794 5.12089 4.38826 5.87863 4.40476 6.89271C4.41563 7.55105 4.73594 8.0428 5.33675 8.31362C5.95887 8.5941 6.55444 8.50235 7.07033 8.05487C7.51218 7.67177 7.67435 7.17117 7.56973 6.59492C7.548 6.4754 7.57134 6.39734 7.65504 6.31283C8.17254 5.79251 8.68843 5.27139 9.19668 4.74182C9.31096 4.6227 9.34919 4.66294 9.42042 4.77683C10.3391 6.2408 10.1592 8.2943 8.99949 9.57598C8.18461 10.4762 7.16973 10.9361 5.95807 10.9353C4.08846 10.9341 2.41765 9.5293 2.0752 7.68988C1.65709 5.44241 3.01885 3.39897 5.25465 2.9193C5.50294 2.86618 5.75485 2.84284 5.89288 2.84767Z' fill='none' className={filledClassName} />
39
+ </svg>
40
+ )
41
+ break
42
+ case MEDIUM:
43
+ icon = (
44
+ <svg
45
+ width={24}
46
+ height={24}
47
+ viewBox='0 0 24 24'
48
+ fill='none'
49
+ xmlns='http://www.w3.org/2000/svg'
50
+ className={className}
51
+ >
52
+ <rect x='17.0645' y='9.54956' width='2.89845' height='10.6276' transform='rotate(45 17.0645 9.54956)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
53
+ <path d='M11.5993 19.114L9.5498 17.0645L8.52505 20.1387L11.5993 19.114Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
54
+ <path d='M18.4072 8.20711C18.7977 7.81658 19.4308 7.81658 19.8214 8.20711L20.4567 8.84241C20.8472 9.23293 20.8472 9.8661 20.4567 10.2566L19.1143 11.599L17.0647 9.54951L18.4072 8.20711Z' stroke='none' strokeWidth={1.5} />
55
+ <path d='M16.4993 4.88493C16.3997 4.9308 16.416 5.03704 16.3894 5.11611C16.0882 6.00766 15.2069 6.47606 14.3106 6.19236C14.1156 6.13079 14.0081 6.16279 13.8699 6.30162C12.8039 7.37183 11.7319 8.4354 10.6557 9.49536C10.5295 9.6197 10.4806 9.71386 10.5464 9.9034C10.7987 10.6356 10.5096 11.401 9.85767 11.8054C9.22206 12.1996 8.36734 12.1078 7.83676 11.5887C7.29653 11.0593 7.17822 10.2438 7.54944 9.60582C7.93515 8.94305 8.72408 8.62011 9.45929 8.85431C9.67297 8.92252 9.7955 8.8857 9.94822 8.73178C11.0136 7.66157 12.0886 6.60041 13.1637 5.53925C13.2711 5.43301 13.3188 5.35152 13.2621 5.18312C12.9536 4.27407 13.4184 3.3608 14.3148 3.07891C15.2172 2.79521 16.1311 3.29923 16.4105 4.22638C16.4341 4.30546 16.3961 4.41411 16.4999 4.46421V4.88432L16.4993 4.88493Z' fill='none' className={filledClassName} />
56
+ <path d='M8.83932 4.27144C10.2162 4.27325 11.3141 4.6161 12.3186 5.27525C12.4616 5.36942 12.4815 5.41952 12.3518 5.5493C11.5689 6.33702 10.792 7.13017 10.0212 7.92996C9.88599 8.07 9.76708 8.09716 9.57633 8.05068C8.0691 7.68127 6.58239 8.81788 6.60714 10.339C6.62344 11.3265 7.10392 12.0641 8.00512 12.4704C8.93831 12.8911 9.83166 12.7535 10.6055 12.0822C11.2683 11.5076 11.5115 10.7567 11.3546 9.89232C11.322 9.71305 11.357 9.59594 11.4826 9.46918C12.2588 8.68871 13.0326 7.90702 13.795 7.11266C13.9664 6.93399 14.0238 6.99435 14.1306 7.16518C15.5087 9.36114 15.2389 12.4414 13.4992 14.3639C12.2769 15.7142 10.7546 16.4041 8.9371 16.4029C6.1327 16.4011 3.62648 14.2939 3.1128 11.5348C2.48564 8.16356 4.52828 5.09839 7.88198 4.37888C8.25441 4.2992 8.63228 4.26419 8.83932 4.27144Z' fill='none' className={filledClassName} />
57
+ </svg>
58
+ )
59
+ break
60
+ case LARGE:
61
+ icon = (
62
+ <svg
63
+ width={40}
64
+ height={40}
65
+ viewBox='0 0 40 40'
66
+ fill='none'
67
+ xmlns='http://www.w3.org/2000/svg'
68
+ className={className}
69
+ >
70
+ <rect x='28.4404' y='15.9159' width='4.83075' height='17.7127' transform='rotate(45 28.4404 15.9159)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
71
+ <path d='M19.3319 31.8567L15.916 28.4408L14.2081 33.5646L19.3319 31.8567Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
72
+ <path d='M31.1493 13.2071C31.5399 12.8166 32.173 12.8166 32.5636 13.2071L34.5652 15.2087C34.9557 15.5993 34.9557 16.2324 34.5652 16.623L31.8564 19.3317L28.4406 15.9159L31.1493 13.2071Z' stroke='none' strokeWidth={2} />
73
+ <path d='M27.4988 8.14155C27.3328 8.21801 27.36 8.39507 27.3157 8.52686C26.8137 10.0128 25.3449 10.7934 23.8509 10.3206C23.526 10.218 23.3469 10.2713 23.1165 10.5027C21.3399 12.2864 19.5532 14.059 17.7594 15.8256C17.5492 16.0328 17.4677 16.1898 17.5773 16.5057C17.9979 17.726 17.516 19.0016 16.4295 19.6757C15.3701 20.3326 13.9456 20.1797 13.0613 19.3145C12.1609 18.4322 11.9637 17.0731 12.5824 16.0097C13.2253 14.9051 14.5401 14.3669 15.7655 14.7572C16.1216 14.8709 16.3258 14.8095 16.5804 14.553C18.356 12.7693 20.1477 11.0007 21.9395 9.23208C22.1185 9.05502 22.198 8.91921 22.1035 8.63852C21.5894 7.12345 22.364 5.60133 23.858 5.13151C25.362 4.65868 26.8851 5.49871 27.3509 7.04397C27.3901 7.17576 27.3268 7.35684 27.4998 7.44035V8.14054L27.4988 8.14155Z' fill='none' className={filledClassName} />
74
+ <path d='M14.7322 7.1191C17.0269 7.12212 18.8569 7.69355 20.5309 8.79213C20.7694 8.94907 20.8026 9.03257 20.5863 9.24887C19.2815 10.5617 17.9867 11.8837 16.702 13.2166C16.4766 13.45 16.2785 13.4953 15.9606 13.4178C13.4485 12.8022 10.9707 14.6965 11.0119 17.2317C11.0391 18.8776 11.8399 20.1069 13.3419 20.784C14.8972 21.4852 16.3861 21.2558 17.6758 20.1371C18.7805 19.1794 19.1859 17.9279 18.9243 16.4872C18.87 16.1885 18.9283 15.9933 19.1376 15.782C20.4313 14.4812 21.7211 13.1784 22.9917 11.8545C23.2774 11.5567 23.373 11.6573 23.551 11.942C25.8478 15.6019 25.3981 20.7357 22.4987 23.9399C20.4615 26.1904 17.9243 27.3403 14.8952 27.3383C10.2212 27.3352 6.04413 23.8232 5.188 19.2246C4.14274 13.606 7.54714 8.49736 13.1366 7.29818C13.7574 7.16538 14.3871 7.10703 14.7322 7.1191Z' fill='none' className={filledClassName} />
75
+ </svg>
76
+ )
77
+ break
78
+
79
+ default:
80
+ break
81
+ }
82
+ return icon
83
+ }
84
+
85
+ OpenAPIEditsIcon.propTypes = {
86
+ /**
87
+ * color of text, icon and borders
88
+ */
89
+ color: PropTypes.oneOf(COLORS_ICON),
90
+ /**
91
+ * Size
92
+ */
93
+ size: PropTypes.oneOf(SIZES),
94
+ /**
95
+ * disabled
96
+ */
97
+ disabled: PropTypes.bool,
98
+ /**
99
+ * inactive
100
+ */
101
+ inactive: PropTypes.bool
102
+ }
103
+
104
+ export default OpenAPIEditsIcon
@@ -87,6 +87,7 @@ import GiveOwnershipIcon from './GiveOwnershipIcon'
87
87
  import GitHubRepoIcon from './GitHubRepoIcon'
88
88
  import GitHubRepo2Icon from './GitHubRepo2Icon'
89
89
  import GraphQLIcon from './GraphQLIcon'
90
+ import GraphQLEditsIcon from './GraphQLEditsIcon'
90
91
  import K8SMetricsIcon from './K8SMetricsIcon'
91
92
  import KeyIcon from './KeyIcon'
92
93
  import ImportAppIcon from './ImportAppIcon'
@@ -109,6 +110,7 @@ import NoActivitiesIcon from './NoActivitiesIcon'
109
110
  import NoDeploymentsIcon from './NoDeploymentsIcon'
110
111
  import NoMetricsIcon from './NoMetricsIcon'
111
112
  import NotCompliantServiceIcon from './NotCompliantServiceIcon'
113
+ import OpenAPIEditsIcon from './OpenAPIEditsIcon'
112
114
  import OrganizationIcon from './OrganizationIcon'
113
115
  import OutOfBoxGraphQLIcon from './OutOfBoxGraphQLIcon'
114
116
  import OutdatedServiceIcon from './OutdatedServiceIcon'
@@ -257,6 +259,7 @@ export default {
257
259
  GitHubRepoIcon,
258
260
  GitHubRepo2Icon,
259
261
  GraphQLIcon,
262
+ GraphQLEditsIcon,
260
263
  ImportAppIcon,
261
264
  InfrastructureIcon,
262
265
  InternetIcon,
@@ -279,6 +282,7 @@ export default {
279
282
  NoDeploymentsIcon,
280
283
  NoMetricsIcon,
281
284
  NotCompliantServiceIcon,
285
+ OpenAPIEditsIcon,
282
286
  OrganizationIcon,
283
287
  OutdatedServiceIcon,
284
288
  OtherLogosGoogleIcon,