@platformatic/ui-components 0.1.86 → 0.1.87

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 (15) hide show
  1. package/dist/assets/index.2c94de34.js +206 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Modal.jsx +0 -1
  5. package/src/components/Modal.module.css +0 -3
  6. package/src/components/PlatformaticIcon.jsx +7 -1
  7. package/src/components/SimpleMetric.jsx +10 -14
  8. package/src/components/constants.js +3 -0
  9. package/src/components/forms/Field.module.css +1 -1
  10. package/src/components/icons/CreditCardIcon.jsx +85 -0
  11. package/src/components/icons/LogOutIcon.jsx +11 -3
  12. package/src/components/icons/UserRemoveIcon.jsx +11 -3
  13. package/src/components/icons/UserRoleIcon.jsx +11 -3
  14. package/src/components/icons/index.js +2 -0
  15. package/dist/assets/index.4ee166cb.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.4ee166cb.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.2c94de34.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.bbcc19d7.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.86",
4
+ "version": "0.1.87",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Modal.jsx CHANGED
@@ -78,7 +78,6 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
78
78
  <div className={contentFullscreen}>
79
79
  <div className={titleFullscreen}>
80
80
  {renderLogo()}
81
- <h3>PLATFORMATIC</h3>
82
81
  </div>
83
82
  <div>{children}</div>
84
83
  </div>
package/src/components/Modal.module.css CHANGED
@@ -35,9 +35,6 @@
35
35
  .title--cover {
36
36
  @apply inline-flex items-center;
37
37
  }
38
- .title--cover h3 {
39
- @apply text-[22px] text-dark-blue font-bold tracking-widest mx-3;
40
- }
41
38
  .modal--small {
42
39
  @apply min-w-[480px] max-w-[480px];
43
40
  }
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
3
  import PropTypes from 'prop-types'
4
+ import ReactTooltip from 'react-tooltip'
4
5
  import Icons from './icons'
5
6
  import styles from './PlatformaticIcon.module.css'
6
7
  import { COLORS_ICON, SIZES } from './constants'
@@ -19,7 +20,12 @@ function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
19
20
  icon = (<span className={className} onClick={onClick}>{icon}</span>)
20
21
  }
21
22
  }
22
- return icon
23
+ return (
24
+ <>
25
+ {icon}
26
+ {tip && <ReactTooltip place='top' type='info' />}
27
+ </>
28
+ )
23
29
  }
24
30
 
25
31
  PlatformaticIcon.propTypes = {
package/src/components/SimpleMetric.jsx CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict'
2
2
 
3
3
  import React from 'react'
4
- import ReactTooltip from 'react-tooltip'
5
4
  import BorderedBox from './BorderedBox'
6
5
  import styles from './SimpleMetric.module.css'
7
6
  import MetricValue from './MetricValue'
@@ -11,18 +10,15 @@ import { BACKGROUND_COLOR_OPAQUE, MEDIUM, WHITE } from './constants'
11
10
  export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
12
11
  const withoutChildrenSingleMetric = !children ? styles.centerMetric : ''
13
12
  return (
14
- <>
15
- <BorderedBox>
16
- <div className={styles.header}>
17
- <span className={styles.title}>{title}</span>
18
- <ButtonFullRounded hoverEffect={BACKGROUND_COLOR_OPAQUE} iconColor={WHITE} iconSize={MEDIUM} iconName='CircleExclamationIcon' tip={tooltip} onClick={() => {}} />
19
- </div>
20
- <div className={withoutChildrenSingleMetric}>
21
- <MetricValue pre={pre} color={color} unit={unit} value={value} fontValue='large' />
22
- {children}
23
- </div>
24
- </BorderedBox>
25
- <ReactTooltip place='top' type='info' />
26
- </>
13
+ <BorderedBox>
14
+ <div className={styles.header}>
15
+ <span className={styles.title}>{title}</span>
16
+ <ButtonFullRounded hoverEffect={BACKGROUND_COLOR_OPAQUE} iconColor={WHITE} iconSize={MEDIUM} iconName='CircleExclamationIcon' tip={tooltip} onClick={() => {}} />
17
+ </div>
18
+ <div className={withoutChildrenSingleMetric}>
19
+ <MetricValue pre={pre} color={color} unit={unit} value={value} fontValue='large' />
20
+ {children}
21
+ </div>
22
+ </BorderedBox>
27
23
  )
28
24
  }
package/src/components/constants.js CHANGED
@@ -37,3 +37,6 @@ export const FONT_XS = 'xs'
37
37
  export const ROLE_ADMIN = 'admin'
38
38
  export const ROLE_USER = 'user'
39
39
  export const ROLE_OWNER = 'owner'
40
+
41
+ export const MARGIN_10 = 10
42
+ export const MARGIN_0 = 0
package/src/components/forms/Field.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- @apply flex flex-col;
2
+ @apply flex flex-col w-full;
3
3
  }
4
4
  .title {
5
5
  @apply text-xl font-semibold;
package/src/components/icons/CreditCardIcon.jsx ADDED
@@ -0,0 +1,85 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES } from '../constants'
5
+
6
+ const CreditCardIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ let icon = <></>
9
+
10
+ switch (size) {
11
+ case 'small':
12
+ icon = (
13
+ <svg
14
+ width={16}
15
+ height={16}
16
+ viewBox='0 0 16 16'
17
+ fill='none'
18
+ xmlns='http://www.w3.org/2000/svg'
19
+ className={className}
20
+ >
21
+ <rect x={2} y={4} width={12} height={8} rx={1} stroke='none' />
22
+ <path d='M2 6H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
23
+ <rect x={9} y={8} width={3} height={2} rx='0.5' stroke='none' />
24
+
25
+ </svg>
26
+ )
27
+ break
28
+ case 'medium':
29
+ icon = (
30
+ <svg
31
+ width={24}
32
+ height={24}
33
+ viewBox='0 0 24 24'
34
+ fill='none'
35
+ xmlns='http://www.w3.org/2000/svg'
36
+ className={className}
37
+ >
38
+ <rect x={3} y={6} width={18} height={12} rx={1} stroke='none' strokeWidth={1.5} />
39
+ <path d='M3 9H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
40
+ <rect x={14} y={12} width={4.5} height={3} rx={0.5} stroke='none' strokeWidth={1.5} />
41
+
42
+ </svg>
43
+ )
44
+ break
45
+ case 'large':
46
+ icon = (
47
+ <svg
48
+ width={40}
49
+ height={40}
50
+ viewBox='0 0 40 40'
51
+ fill='none'
52
+ xmlns='http://www.w3.org/2000/svg'
53
+ className={className}
54
+ >
55
+ <rect x={5} y={10} width={30} height={20} rx={1} stroke='none' strokeWidth={2} />
56
+ <path d='M5 15H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
57
+ <rect x={24} y={20} width={7.5} height={5} rx={0.5} stroke='none' strokeWidth={2} />
58
+
59
+ </svg>
60
+ )
61
+ break
62
+
63
+ default:
64
+ break
65
+ }
66
+ return icon
67
+ }
68
+
69
+ CreditCardIcon.propTypes = {
70
+ /**
71
+ * color of text, icon and borders
72
+ */
73
+ color: PropTypes.oneOf(COLORS_ICON),
74
+ /**
75
+ * Size
76
+ */
77
+ size: PropTypes.oneOf(SIZES)
78
+ }
79
+
80
+ CreditCardIcon.defaultProps = {
81
+ color: 'main-dark-blue',
82
+ size: 'medium'
83
+ }
84
+
85
+ export default CreditCardIcon
package/src/components/icons/LogOutIcon.jsx CHANGED
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
4
  import { COLORS_ICON, SIZES } from '../constants'
5
5
 
6
- const LogOutIcon = ({ color, size }) => {
6
+ const LogOutIcon = ({ color, size, tip }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
@@ -16,6 +16,7 @@ const LogOutIcon = ({ color, size }) => {
16
16
  viewBox='0 0 16 16'
17
17
  fill='none'
18
18
  xmlns='http://www.w3.org/2000/svg'
19
+ data-tip={tip}
19
20
  className={className}
20
21
  >
21
22
  <path d='M8.38687 5.5V3C8.38687 2.44772 7.93915 2 7.38687 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44771 14 3 14H7.38687C7.93915 14 8.38687 13.5523 8.38687 13V11.5' stroke='none' strokeLinecap='round' />
@@ -32,6 +33,7 @@ const LogOutIcon = ({ color, size }) => {
32
33
  viewBox='0 0 24 24'
33
34
  fill='none'
34
35
  xmlns='http://www.w3.org/2000/svg'
36
+ data-tip={tip}
35
37
  className={className}
36
38
  >
37
39
  <path d='M12.5803 8.25V4C12.5803 3.44772 12.1326 3 11.5803 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H11.5803C12.1326 21 12.5803 20.5523 12.5803 20V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
@@ -48,6 +50,7 @@ const LogOutIcon = ({ color, size }) => {
48
50
  viewBox='0 0 40 40'
49
51
  fill='none'
50
52
  xmlns='http://www.w3.org/2000/svg'
53
+ data-tip={tip}
51
54
  className={className}
52
55
  >
53
56
  <path d='M20.9672 13.75V6C20.9672 5.44772 20.5195 5 19.9672 5H6C5.44772 5 5 5.44772 5 6V34C5 34.5523 5.44772 35 6 35H19.9672C20.5195 35 20.9672 34.5523 20.9672 34V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
@@ -71,12 +74,17 @@ LogOutIcon.propTypes = {
71
74
  /**
72
75
  * Size
73
76
  */
74
- size: PropTypes.oneOf(SIZES)
77
+ size: PropTypes.oneOf(SIZES),
78
+ /**
79
+ * tip
80
+ */
81
+ tip: PropTypes.string
75
82
  }
76
83
 
77
84
  LogOutIcon.defaultProps = {
78
85
  color: 'main-dark-blue',
79
- size: 'medium'
86
+ size: 'medium',
87
+ tip: ''
80
88
  }
81
89
 
82
90
  export default LogOutIcon
package/src/components/icons/UserRemoveIcon.jsx CHANGED
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
4
  import { COLORS_ICON, SIZES } from '../constants'
5
5
 
6
- const UserRemoveIcon = ({ color, size }) => {
6
+ const UserRemoveIcon = ({ color, size, tip }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
@@ -16,6 +16,7 @@ const UserRemoveIcon = ({ color, size }) => {
16
16
  viewBox='0 0 16 16'
17
17
  fill='none'
18
18
  xmlns='http://www.w3.org/2000/svg'
19
+ data-tip={tip}
19
20
  className={className}
20
21
  >
21
22
  <path d='M7 10.0553C4.16229 10.3727 2 12.018 2 14H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
@@ -35,6 +36,7 @@ const UserRemoveIcon = ({ color, size }) => {
35
36
  viewBox='0 0 24 24'
36
37
  fill='none'
37
38
  xmlns='http://www.w3.org/2000/svg'
39
+ data-tip={tip}
38
40
  className={className}
39
41
  >
40
42
  <path d='M10.5 15.083C6.24343 15.559 3 18.027 3 21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
@@ -53,6 +55,7 @@ const UserRemoveIcon = ({ color, size }) => {
53
55
  viewBox='0 0 40 40'
54
56
  fill='none'
55
57
  xmlns='http://www.w3.org/2000/svg'
58
+ data-tip={tip}
56
59
  className={className}
57
60
  >
58
61
  <path d='M17.5 25.1383C10.4057 25.9317 5 30.045 5 35H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
@@ -78,12 +81,17 @@ UserRemoveIcon.propTypes = {
78
81
  /**
79
82
  * Size
80
83
  */
81
- size: PropTypes.oneOf(SIZES)
84
+ size: PropTypes.oneOf(SIZES),
85
+ /**
86
+ * tip
87
+ */
88
+ tip: PropTypes.string
82
89
  }
83
90
 
84
91
  UserRemoveIcon.defaultProps = {
85
92
  color: 'main-dark-blue',
86
- size: 'medium'
93
+ size: 'medium',
94
+ tip: ''
87
95
  }
88
96
 
89
97
  export default UserRemoveIcon
package/src/components/icons/UserRoleIcon.jsx CHANGED
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
4
  import { COLORS_ICON, SIZES } from '../constants'
5
5
 
6
- const UserRoleIcon = ({ color, size }) => {
6
+ const UserRoleIcon = ({ color, size, tip }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
@@ -16,6 +16,7 @@ const UserRoleIcon = ({ color, size }) => {
16
16
  viewBox='0 0 16 16'
17
17
  fill='none'
18
18
  xmlns='http://www.w3.org/2000/svg'
19
+ data-tip={tip}
19
20
  className={className}
20
21
  >
21
22
  <path d='M7.5 14H2C2 12.325 3.34521 10.8745 5.30604 10.1695C5.89513 9.95773 6.53978 9.81323 7.22021 9.75015' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
@@ -34,6 +35,7 @@ const UserRoleIcon = ({ color, size }) => {
34
35
  viewBox='0 0 24 24'
35
36
  fill='none'
36
37
  xmlns='http://www.w3.org/2000/svg'
38
+ data-tip={tip}
37
39
  className={className}
38
40
  >
39
41
  <path d='M11.25 21H3C3 18.4876 5.01782 16.3117 7.95906 15.2543C8.84269 14.9366 9.80967 14.7198 10.8303 14.6252' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
@@ -52,6 +54,7 @@ const UserRoleIcon = ({ color, size }) => {
52
54
  viewBox='0 0 40 40'
53
55
  fill='none'
54
56
  xmlns='http://www.w3.org/2000/svg'
57
+ data-tip={tip}
55
58
  className={className}
56
59
  >
57
60
  <path d='M18.75 35H5C5 30.8126 8.36304 27.1862 13.2651 25.4238C14.7378 24.8943 16.3495 24.5331 18.0505 24.3754' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
@@ -77,12 +80,17 @@ UserRoleIcon.propTypes = {
77
80
  /**
78
81
  * Size
79
82
  */
80
- size: PropTypes.oneOf(SIZES)
83
+ size: PropTypes.oneOf(SIZES),
84
+ /**
85
+ * tip
86
+ */
87
+ tip: PropTypes.string
81
88
  }
82
89
 
83
90
  UserRoleIcon.defaultProps = {
84
91
  color: 'main-dark-blue',
85
- size: 'medium'
92
+ size: 'medium',
93
+ tip: ''
86
94
  }
87
95
 
88
96
  export default UserRoleIcon
package/src/components/icons/index.js CHANGED
@@ -31,6 +31,7 @@ import CircleGearIcon from './CircleGearIcon'
31
31
  import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
32
32
  import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
33
33
  import CloseIcon from './CloseIcon'
34
+ import CreditCardIcon from './CreditCardIcon'
34
35
  import CopyPasteIcon from './CopyPasteIcon'
35
36
  import DatabaseIcon from './DatabaseIcon'
36
37
  import EditIcon from './EditIcon'
@@ -112,6 +113,7 @@ export default {
112
113
  CircleTwoArrowsDownIcon,
113
114
  CircleTwoArrowsUpIcon,
114
115
  CloseIcon,
116
+ CreditCardIcon,
115
117
  CopyPasteIcon,
116
118
  DatabaseIcon,
117
119
  EditIcon,