@platformatic/ui-components 0.2.5 → 0.2.6

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 (12) hide show
  1. package/dist/assets/{index-DGu0wALr.css → index-C-rgNKxt.css} +1 -1
  2. package/dist/assets/index-CYL6XgVn.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +4 -0
  5. package/index.js +2 -0
  6. package/package.json +1 -1
  7. package/src/components/PlatformaticIcon.jsx +10 -3
  8. package/src/components/PlatformaticIcon.module.css +3 -0
  9. package/src/components/Tooltip.jsx +65 -0
  10. package/src/components/Tooltip.module.css +31 -0
  11. package/src/components/constants.js +5 -0
  12. package/dist/assets/index-DnNOQ9Mz.js +0 -206
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-DnNOQ9Mz.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-DGu0wALr.css">
7
+ <script type="module" crossorigin src="/assets/index-CYL6XgVn.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -586,6 +586,10 @@ video {
586
586
  }
587
587
  }
588
588
 
589
+ .visible {
590
+ visibility: visible;
591
+ }
592
+
589
593
  .relative {
590
594
  position: relative;
591
595
  }
package/index.js CHANGED
@@ -36,6 +36,7 @@ import SearchBar from './src/components/SearchBar'
36
36
  import SearchBarV2 from './src/components/SearchBarV2'
37
37
  import SimpleMetric from './src/components/SimpleMetric'
38
38
  import Status from './src/components/Status'
39
+ import Tooltip from './src/components/Tooltip'
39
40
  import TabbedWindow from './src/components/TabbedWindow'
40
41
  import TabbedWindowV2 from './src/components/TabbedWindowV2'
41
42
  import Tag from './src/components/Tag'
@@ -85,6 +86,7 @@ export {
85
86
  TabbedWindowV2,
86
87
  Tag,
87
88
  TextWithLabel,
89
+ Tooltip,
88
90
  TwoColumnsLayout,
89
91
  Versions,
90
92
  VerticalSeparator
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.5",
4
+ "version": "0.2.6",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
- import ReactTooltip from 'react-tooltip'
5
4
  import Icons from './icons'
6
5
  import styles from './PlatformaticIcon.module.css'
7
6
  import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
7
+ import Tooltip from './Tooltip'
8
8
 
9
9
  function PlatformaticIcon ({
10
10
  iconName,
@@ -13,6 +13,7 @@ function PlatformaticIcon ({
13
13
  size,
14
14
  classes,
15
15
  tip,
16
+ tipClassName,
16
17
  disabled,
17
18
  inactive,
18
19
  internalOverHandling,
@@ -30,7 +31,7 @@ function PlatformaticIcon ({
30
31
  ...rest
31
32
  })
32
33
  if (onClick && !disabled) {
33
- let className = styles.cursorPointer
34
+ let className = `${styles.cursorPointer} ${tip ? styles.pltTooltip : ''}`
34
35
  if (classes) className += ` ${classes}`
35
36
  icon = (
36
37
  <div
@@ -40,14 +41,15 @@ function PlatformaticIcon ({
40
41
  onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
41
42
  >
42
43
  {icon}
44
+ {tip && <Tooltip tooltipClassName={tipClassName} text={tip} visible={hover} />}
43
45
  </div>
44
46
  )
45
47
  }
46
48
  }
49
+
47
50
  return (
48
51
  <>
49
52
  {icon}
50
- {tip && <ReactTooltip place='top' type='info' />}
51
53
  </>
52
54
  )
53
55
  }
@@ -77,6 +79,10 @@ PlatformaticIcon.propTypes = {
77
79
  * tip
78
80
  */
79
81
  tip: PropTypes.string,
82
+ /**
83
+ * tip
84
+ */
85
+ tipClassName: PropTypes.string,
80
86
  /**
81
87
  * disabled
82
88
  */
@@ -98,6 +104,7 @@ PlatformaticIcon.defaultProps = {
98
104
  onClick: () => {},
99
105
  classes: '',
100
106
  tip: '',
107
+ tipClassName: '',
101
108
  disabled: false,
102
109
  inactive: false,
103
110
  internalOverHandling: false
package/src/components/PlatformaticIcon.module.css CHANGED
@@ -1,3 +1,6 @@
1
1
  .cursorPointer {
2
2
  @apply cursor-pointer;
3
+ }
4
+ .pltTooltip {
5
+ @apply relative;
3
6
  }
package/src/components/Tooltip.jsx ADDED
@@ -0,0 +1,65 @@
1
+ 'use strict'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Tooltip.module.css'
4
+ import { useEffect, useRef, useState } from 'react'
5
+ import { ALIGNMENT_CENTER, ALIGNMENT_LEFT, ALIGNMENTS } from './constants'
6
+
7
+ function Tooltip ({ tooltipClassName, text, visible, alignment }) {
8
+ const ref = useRef(null)
9
+ const alignmentClassName = styles[`${alignment}PltTooltip`]
10
+ const [className, setClassName] = useState(normalClassName())
11
+
12
+ useEffect(() => {
13
+ if (visible) {
14
+ setClassName(visibleClassName())
15
+ if (ref.current) {
16
+ if (alignment === ALIGNMENT_LEFT) {
17
+ ref.current.style.marginLeft = '-0px'
18
+ }
19
+ if (alignment === ALIGNMENT_CENTER) {
20
+ ref.current.style.marginLeft = '-' + ((ref.current.clientWidth / 2) - 12) + 'px'
21
+ }
22
+ }
23
+ } else {
24
+ setClassName(normalClassName())
25
+ }
26
+ }, [visible])
27
+
28
+ function normalClassName () {
29
+ return `${styles.pltTooltipText} ${tooltipClassName} ${alignmentClassName}`
30
+ }
31
+
32
+ function visibleClassName () {
33
+ return `${normalClassName()} ${styles.pltTooltipTextVisible}`
34
+ }
35
+
36
+ return <span ref={ref} className={className}>{text}</span>
37
+ }
38
+
39
+ Tooltip.propTypes = {
40
+ /**
41
+ * text
42
+ */
43
+ text: PropTypes.string,
44
+ /**
45
+ * tooltipClassName
46
+ */
47
+ tooltipClassName: PropTypes.string,
48
+ /**
49
+ * visible
50
+ */
51
+ visible: PropTypes.bool,
52
+ /**
53
+ * alignment
54
+ */
55
+ alignment: PropTypes.oneOf(ALIGNMENTS)
56
+ }
57
+
58
+ Tooltip.defaultProps = {
59
+ text: '',
60
+ tooltipClassName: '',
61
+ visible: false,
62
+ alignment: ALIGNMENT_LEFT
63
+ }
64
+
65
+ export default Tooltip
package/src/components/Tooltip.module.css ADDED
@@ -0,0 +1,31 @@
1
+
2
+ .pltTooltipText {
3
+ @apply bg-white text-rich-black text-center p-2;
4
+ margin-top: -65px;
5
+ z-index: 20;
6
+ position: fixed;
7
+ visibility: hidden;
8
+ border-radius: 6px;
9
+ padding: 0.25rem;
10
+ opacity: 0;
11
+ transition: opacity 0.3s;
12
+ }
13
+
14
+ .pltTooltipText::after {
15
+ content: "";
16
+ position: absolute;
17
+ top: 100%;
18
+ border-width: 5px;
19
+ border-style: solid;
20
+ border-color: white transparent transparent transparent;
21
+ }
22
+
23
+ .leftPltTooltip::after {
24
+ left: 5%;
25
+ margin-left: -5px;
26
+ }
27
+
28
+ .pltTooltipTextVisible {
29
+ visibility: visible;
30
+ opacity: 1;
31
+ }
package/src/components/constants.js CHANGED
@@ -68,3 +68,8 @@ export const OPACITY_20 = 20
68
68
  export const OPACITY_30 = 30
69
69
  export const OPACITY_60 = 60
70
70
  export const OPACITY_100 = 100
71
+
72
+ export const ALIGNMENT_LEFT = 'left'
73
+ export const ALIGNMENT_RIGHT = 'rigth'
74
+ export const ALIGNMENT_CENTER = 'center'
75
+ export const ALIGNMENTS = [ALIGNMENT_LEFT, ALIGNMENT_CENTER, ALIGNMENT_RIGHT]