@platformatic/ui-components 0.7.19 → 0.7.21

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,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-vP5MzAix.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-CY9YlI2t.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.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.19",
4
+ "version": "0.7.21",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -2,11 +2,11 @@
2
2
  import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import commonStyles from './Common.module.css'
5
- import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
5
+ import { DARK_GREEN, MAIN_DARK_BLUE, WHITE, MARGIN_4 } from './constants'
6
6
  import styles from './HorizontalSeparator.module.css'
7
7
  function HorizontalSeparator ({
8
- marginTop = 4,
9
- marginBottom = 4,
8
+ marginTop = MARGIN_4,
9
+ marginBottom = MARGIN_4,
10
10
  color = DARK_GREEN,
11
11
  opacity = 1
12
12
  }) {
@@ -64,6 +64,7 @@ export const ROLE_USER = 'user'
64
64
  export const ROLE_OWNER = 'owner'
65
65
 
66
66
  export const MARGIN_10 = 10
67
+ export const MARGIN_4 = 4
67
68
  export const MARGIN_8 = 8
68
69
  export const MARGIN_0 = 0
69
70
 
@@ -0,0 +1,99 @@
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 ComputerInIcon = ({
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
+ <path d='M14 3.5V3C14 2.44772 13.5523 2 13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V8.5' stroke='none' strokeLinecap='round' />
33
+ <path d='M14 6L6 6M6 6L8 8M6 6L8 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <rect x='6' y='10' width='4' height='2' stroke='none' />
35
+ <path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
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='M21 5.25V4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
50
+ <path d='M21 9L9 9M9 9L12 12M9 9L12 6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
52
+ <path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
53
+ </svg>
54
+ )
55
+ break
56
+ case LARGE:
57
+ icon = (
58
+ <svg
59
+ width={40}
60
+ height={40}
61
+ viewBox='0 0 40 40'
62
+ fill='none'
63
+ xmlns='http://www.w3.org/2000/svg'
64
+ className={className}
65
+ >
66
+ <path d='M35 8.75V6C35 5.44772 34.5523 5 34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
67
+ <path d='M35 15L15 15M15 15L20 20M15 15L20 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ <rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
69
+ <path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
70
+ </svg>
71
+ )
72
+ break
73
+
74
+ default:
75
+ break
76
+ }
77
+ return icon
78
+ }
79
+
80
+ ComputerInIcon.propTypes = {
81
+ /**
82
+ * color of text, icon and borders
83
+ */
84
+ color: PropTypes.oneOf(COLORS_ICON),
85
+ /**
86
+ * Size
87
+ */
88
+ size: PropTypes.oneOf(SIZES),
89
+ /**
90
+ * disabled
91
+ */
92
+ disabled: PropTypes.bool,
93
+ /**
94
+ * inactive
95
+ */
96
+ inactive: PropTypes.bool
97
+ }
98
+
99
+ export default ComputerInIcon
@@ -0,0 +1,99 @@
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 ComputerOutIcon = ({
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
+ <path d='M14 3.5V3C14 2.44772 13.5523 2 13 2H3C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H13C13.5523 10 14 9.55228 14 9V8.5' stroke='none' strokeLinecap='round' />
33
+ <path d='M6 6H14M14 6L12 4M14 6L12 8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <rect x='6' y='10' width='4' height='2' stroke='none' />
35
+ <path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V14H4V13Z' stroke='none' />
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='M21 5.25V4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
50
+ <path d='M9 9H21M21 9L18 6M21 9L18 12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51
+ <rect x='9' y='15' width='6' height='3' stroke='none' strokeWidth={1.5} />
52
+ <path d='M6 19C6 18.4477 6.44772 18 7 18H17C17.5523 18 18 18.4477 18 19V21H6V19Z' stroke='none' strokeWidth={1.5} />
53
+ </svg>
54
+ )
55
+ break
56
+ case LARGE:
57
+ icon = (
58
+ <svg
59
+ width={40}
60
+ height={40}
61
+ viewBox='0 0 40 40'
62
+ fill='none'
63
+ xmlns='http://www.w3.org/2000/svg'
64
+ className={className}
65
+ >
66
+ <path d='M35 8.75V6C35 5.44772 34.5523 5 34 5H6C5.44772 5 5 5.44772 5 6V24C5 24.5523 5.44772 25 6 25H34C34.5523 25 35 24.5523 35 24V21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
67
+ <path d='M15 15H35M35 15L30 10M35 15L30 20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ <rect x='15' y='25' width='10' height='5' stroke='none' strokeWidth={2} />
69
+ <path d='M10 31C10 30.4477 10.4477 30 11 30H29C29.5523 30 30 30.4477 30 31V35H10V31Z' stroke='none' strokeWidth={2} />
70
+ </svg>
71
+ )
72
+ break
73
+
74
+ default:
75
+ break
76
+ }
77
+ return icon
78
+ }
79
+
80
+ ComputerOutIcon.propTypes = {
81
+ /**
82
+ * color of text, icon and borders
83
+ */
84
+ color: PropTypes.oneOf(COLORS_ICON),
85
+ /**
86
+ * Size
87
+ */
88
+ size: PropTypes.oneOf(SIZES),
89
+ /**
90
+ * disabled
91
+ */
92
+ disabled: PropTypes.bool,
93
+ /**
94
+ * inactive
95
+ */
96
+ inactive: PropTypes.bool
97
+ }
98
+
99
+ export default ComputerOutIcon
@@ -0,0 +1,90 @@
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 RemoveIcon = ({
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
+ <path d='M2 8H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ </svg>
34
+ )
35
+ break
36
+ case MEDIUM:
37
+ icon = (
38
+ <svg
39
+ width={24}
40
+ height={24}
41
+ viewBox='0 0 24 24'
42
+ fill='none'
43
+ xmlns='http://www.w3.org/2000/svg'
44
+ className={className}
45
+ >
46
+ <path d='M3 11.9999H20.9999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
47
+ </svg>
48
+ )
49
+ break
50
+ case LARGE:
51
+ icon = (
52
+ <svg
53
+ width={40}
54
+ height={40}
55
+ viewBox='0 0 40 40'
56
+ fill='none'
57
+ xmlns='http://www.w3.org/2000/svg'
58
+ className={className}
59
+ >
60
+ <path d='M5 19.9999H34.9999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
61
+ </svg>
62
+ )
63
+ break
64
+
65
+ default:
66
+ break
67
+ }
68
+ return icon
69
+ }
70
+
71
+ RemoveIcon.propTypes = {
72
+ /**
73
+ * color of text, icon and borders
74
+ */
75
+ color: PropTypes.oneOf(COLORS_ICON),
76
+ /**
77
+ * Size
78
+ */
79
+ size: PropTypes.oneOf(SIZES),
80
+ /**
81
+ * disabled
82
+ */
83
+ disabled: PropTypes.bool,
84
+ /**
85
+ * inactive
86
+ */
87
+ inactive: PropTypes.bool
88
+ }
89
+
90
+ export default RemoveIcon
@@ -0,0 +1,91 @@
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 TableIcon = ({
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
+ <path d='M2 5V4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V5M2 5H6M2 5V8M14 5H10M14 5V8M6 5V14M6 5H10M6 14H4C2.89543 14 2 13.1046 2 12V11M6 14H10M10 5V14M10 14H12C13.1046 14 14 13.1046 14 12V11M2 8H14M2 8V11M14 8V11M2 11H14' stroke='none' />
33
+
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
+ <path d='M3 7.5V6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V7.5M3 7.5H9M3 7.5V12M21 7.5H15M21 7.5V12M9 7.5V21M9 7.5H15M9 21H6C4.34315 21 3 19.6569 3 18V16.5M9 21H15M15 7.5V21M15 21H18C19.6569 21 21 19.6569 21 18V16.5M3 12H21M3 12V16.5M21 12V16.5M3 16.5H21' stroke='none' strokeWidth={1.5} />
48
+ </svg>
49
+ )
50
+ break
51
+ case LARGE:
52
+ icon = (
53
+ <svg
54
+ width={40}
55
+ height={40}
56
+ viewBox='0 0 40 40'
57
+ fill='none'
58
+ xmlns='http://www.w3.org/2000/svg'
59
+ className={className}
60
+ >
61
+ <path d='M5 12.5V9C5 6.79086 6.79086 5 9 5H31C33.2091 5 35 6.79086 35 9V12.5M5 12.5H15M5 12.5V20M35 12.5H25M35 12.5V20M15 12.5V35M15 12.5H25M15 35H9C6.79086 35 5 33.2091 5 31V27.5M15 35H25M25 12.5V35M25 35H31C33.2091 35 35 33.2091 35 31V27.5M5 20H35M5 20V27.5M35 20V27.5M5 27.5H35' stroke='none' strokeWidth={2} />
62
+ </svg>
63
+ )
64
+ break
65
+
66
+ default:
67
+ break
68
+ }
69
+ return icon
70
+ }
71
+
72
+ TableIcon.propTypes = {
73
+ /**
74
+ * color of text, icon and borders
75
+ */
76
+ color: PropTypes.oneOf(COLORS_ICON),
77
+ /**
78
+ * Size
79
+ */
80
+ size: PropTypes.oneOf(SIZES),
81
+ /**
82
+ * disabled
83
+ */
84
+ disabled: PropTypes.bool,
85
+ /**
86
+ * inactive
87
+ */
88
+ inactive: PropTypes.bool
89
+ }
90
+
91
+ export default TableIcon
@@ -63,6 +63,8 @@ import CloudIcon from './CloudIcon'
63
63
  import CLIIcon from './CLIIcon'
64
64
  import CodeTestingIcon from './CodeTestingIcon'
65
65
  import ComputerIcon from './ComputerIcon'
66
+ import ComputerInIcon from './ComputerInIcon'
67
+ import ComputerOutIcon from './ComputerOutIcon'
66
68
  import CopyPasteIcon from './CopyPasteIcon'
67
69
  import CreditCardIcon from './CreditCardIcon'
68
70
  import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
@@ -135,9 +137,10 @@ import PodPerformanceIcon from './PodPerformanceIcon'
135
137
  import PreviewPRIcon from './PreviewPRIcon'
136
138
  import PullRequestIcon from './PullRequestIcon'
137
139
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
140
+ import RecentAppsIcon from './RecentAppsIcon'
141
+ import RemoveIcon from './RemoveIcon'
138
142
  import RequestOwnershipIcon from './RequestOwnershipIcon'
139
143
  import RequestsIcon from './RequestsIcon'
140
- import RecentAppsIcon from './RecentAppsIcon'
141
144
  import ResourceIcon from './ResourceIcon'
142
145
  import RestartIcon from './RestartIcon'
143
146
  import RocketIcon from './RocketIcon'
@@ -166,6 +169,7 @@ import StackablesPluginIcon from './StackablesPluginIcon'
166
169
  import StackablesTemplateIcon from './StackablesTemplateIcon'
167
170
  import StopIcon from './StopIcon'
168
171
  import StoppedAppIcon from './StoppedAppIcon'
172
+ import TableIcon from './TableIcon'
169
173
  import TaxonomyIcon from './TaxonomyIcon'
170
174
  import TerminalIcon from './TerminalIcon'
171
175
  import TwoUsersIcon from './TwoUsersIcon'
@@ -253,6 +257,8 @@ export default {
253
257
  CLIIcon,
254
258
  CodeTestingIcon,
255
259
  ComputerIcon,
260
+ ComputerInIcon,
261
+ ComputerOutIcon,
256
262
  CopyPasteIcon,
257
263
  CreditCardIcon,
258
264
  ConfigureDatabaseIcon,
@@ -325,9 +331,10 @@ export default {
325
331
  PreviewPRIcon,
326
332
  PullRequestIcon,
327
333
  PullRequestLoadingIcon,
334
+ RecentAppsIcon,
335
+ RemoveIcon,
328
336
  RequestOwnershipIcon,
329
337
  RequestsIcon,
330
- RecentAppsIcon,
331
338
  ResourceIcon,
332
339
  RestartIcon,
333
340
  RocketIcon,
@@ -356,6 +363,7 @@ export default {
356
363
  StackablesIcon,
357
364
  StackablesPluginIcon,
358
365
  StackablesTemplateIcon,
366
+ TableIcon,
359
367
  TaxonomyIcon,
360
368
  TerminalIcon,
361
369
  TeamsIcon,