@platformatic/ui-components 0.7.18 → 0.7.20

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 (13) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/assets/{index-TVRb_Qow.css → index-CtkV5_8h.css} +1 -1
  3. package/dist/assets/index-Z73K0bGv.js +40 -0
  4. package/dist/index.html +2 -2
  5. package/dist/main.css +1 -1
  6. package/package.json +2 -2
  7. package/src/components/HorizontalSeparator.jsx +3 -3
  8. package/src/components/TabbedWindow.module.css +1 -1
  9. package/src/components/constants.js +1 -0
  10. package/src/components/icons/RemoveIcon.jsx +90 -0
  11. package/src/components/icons/TableIcon.jsx +91 -0
  12. package/src/components/icons/index.js +6 -2
  13. package/dist/assets/index-D8X__ie8.js +0 -40
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-D8X__ie8.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-TVRb_Qow.css">
7
+ <script type="module" crossorigin src="/assets/index-Z73K0bGv.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.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.7 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.4.10 | 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.7.18",
4
+ "version": "0.7.20",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -46,7 +46,7 @@
46
46
  "@vitejs/plugin-react": "^4.0.0",
47
47
  "babel-loader": "^9.0.0",
48
48
  "happy-dom": "^14.0.0",
49
- "jsdom": "^24.0.0",
49
+ "jsdom": "^25.0.0",
50
50
  "react-test-renderer": "^18.2.0",
51
51
  "snazzy": "^9.0.0",
52
52
  "standard": "^17.0.0",
package/src/components/HorizontalSeparator.jsx CHANGED
@@ -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
  }) {
package/src/components/TabbedWindow.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 font-light opacity-70 hover:opacity-100;
9
9
  }
10
10
  .selected-tab {
11
- @apply underline underline-offset-8 font-medium opacity-100;
11
+ @apply underline underline-offset-8 opacity-100;
12
12
  }
13
13
  .tabContentClassName {
14
14
  @apply max-h-[calc(100vH-10rem)] overflow-y-auto;
package/src/components/constants.js CHANGED
@@ -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
 
package/src/components/icons/RemoveIcon.jsx ADDED
@@ -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
package/src/components/icons/TableIcon.jsx ADDED
@@ -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
package/src/components/icons/index.js CHANGED
@@ -135,9 +135,10 @@ import PodPerformanceIcon from './PodPerformanceIcon'
135
135
  import PreviewPRIcon from './PreviewPRIcon'
136
136
  import PullRequestIcon from './PullRequestIcon'
137
137
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
138
+ import RecentAppsIcon from './RecentAppsIcon'
139
+ import RemoveIcon from './RemoveIcon'
138
140
  import RequestOwnershipIcon from './RequestOwnershipIcon'
139
141
  import RequestsIcon from './RequestsIcon'
140
- import RecentAppsIcon from './RecentAppsIcon'
141
142
  import ResourceIcon from './ResourceIcon'
142
143
  import RestartIcon from './RestartIcon'
143
144
  import RocketIcon from './RocketIcon'
@@ -166,6 +167,7 @@ import StackablesPluginIcon from './StackablesPluginIcon'
166
167
  import StackablesTemplateIcon from './StackablesTemplateIcon'
167
168
  import StopIcon from './StopIcon'
168
169
  import StoppedAppIcon from './StoppedAppIcon'
170
+ import TableIcon from './TableIcon'
169
171
  import TaxonomyIcon from './TaxonomyIcon'
170
172
  import TerminalIcon from './TerminalIcon'
171
173
  import TwoUsersIcon from './TwoUsersIcon'
@@ -325,9 +327,10 @@ export default {
325
327
  PreviewPRIcon,
326
328
  PullRequestIcon,
327
329
  PullRequestLoadingIcon,
330
+ RecentAppsIcon,
331
+ RemoveIcon,
328
332
  RequestOwnershipIcon,
329
333
  RequestsIcon,
330
- RecentAppsIcon,
331
334
  ResourceIcon,
332
335
  RestartIcon,
333
336
  RocketIcon,
@@ -356,6 +359,7 @@ export default {
356
359
  StackablesIcon,
357
360
  StackablesPluginIcon,
358
361
  StackablesTemplateIcon,
362
+ TableIcon,
359
363
  TaxonomyIcon,
360
364
  TerminalIcon,
361
365
  TeamsIcon,