@platformatic/ui-components 0.2.13 → 0.2.15
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/assets/index-C7qZkR7V.js +40 -0
- package/dist/index.html +1 -1
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/TooltipV2.jsx +72 -0
- package/src/components/TooltipV2.module.css +31 -0
- package/src/components/icons/LogsRiskIcon.jsx +123 -0
- package/src/components/icons/index.js +2 -0
- package/dist/assets/index-C4aC07gj.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-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-C7qZkR7V.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-C-rgNKxt.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/index.js
CHANGED
|
@@ -37,6 +37,7 @@ import SearchBarV2 from './src/components/SearchBarV2'
|
|
|
37
37
|
import SimpleMetric from './src/components/SimpleMetric'
|
|
38
38
|
import Status from './src/components/Status'
|
|
39
39
|
import Tooltip from './src/components/Tooltip'
|
|
40
|
+
import TooltipV2 from './src/components/TooltipV2'
|
|
40
41
|
import TabbedWindow from './src/components/TabbedWindow'
|
|
41
42
|
import TabbedWindowV2 from './src/components/TabbedWindowV2'
|
|
42
43
|
import Tag from './src/components/Tag'
|
|
@@ -87,6 +88,7 @@ export {
|
|
|
87
88
|
Tag,
|
|
88
89
|
TextWithLabel,
|
|
89
90
|
Tooltip,
|
|
91
|
+
TooltipV2,
|
|
90
92
|
TwoColumnsLayout,
|
|
91
93
|
Versions,
|
|
92
94
|
VerticalSeparator
|
package/package.json
CHANGED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './TooltipV2.module.css'
|
|
4
|
+
import { useEffect, useRef, useState } from 'react'
|
|
5
|
+
import { ALIGNMENT_LEFT, ALIGNMENTS } from './constants'
|
|
6
|
+
|
|
7
|
+
function TooltipV2 ({ tooltipClassName, text, visible, alignment, elementClassName }) {
|
|
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
|
+
console.log('elementClassName', elementClassName)
|
|
17
|
+
const referenceBoundingClientRect = document.getElementsByClassName(elementClassName)[0]?.getBoundingClientRect()
|
|
18
|
+
if (referenceBoundingClientRect) {
|
|
19
|
+
const topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height)
|
|
20
|
+
const leftPosition = referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)
|
|
21
|
+
ref.current.style.top = `${topPosition}px`
|
|
22
|
+
ref.current.style.left = `${leftPosition}px`
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
} else {
|
|
26
|
+
setClassName(normalClassName())
|
|
27
|
+
}
|
|
28
|
+
}, [visible])
|
|
29
|
+
|
|
30
|
+
function normalClassName () {
|
|
31
|
+
return `${styles.pltTooltipText} ${tooltipClassName} ${alignmentClassName}`
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function visibleClassName () {
|
|
35
|
+
return `${normalClassName()} ${styles.pltTooltipTextVisible}`
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return <span ref={ref} className={className}>{text}</span>
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
TooltipV2.propTypes = {
|
|
42
|
+
/**
|
|
43
|
+
* text
|
|
44
|
+
*/
|
|
45
|
+
text: PropTypes.string,
|
|
46
|
+
/**
|
|
47
|
+
* tooltipClassName
|
|
48
|
+
*/
|
|
49
|
+
tooltipClassName: PropTypes.string,
|
|
50
|
+
/**
|
|
51
|
+
* visible
|
|
52
|
+
*/
|
|
53
|
+
visible: PropTypes.bool,
|
|
54
|
+
/**
|
|
55
|
+
* alignment
|
|
56
|
+
*/
|
|
57
|
+
alignment: PropTypes.oneOf(ALIGNMENTS),
|
|
58
|
+
/**
|
|
59
|
+
* alignment
|
|
60
|
+
*/
|
|
61
|
+
elementClassName: PropTypes.string
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
TooltipV2.defaultProps = {
|
|
65
|
+
text: '',
|
|
66
|
+
tooltipClassName: '',
|
|
67
|
+
visible: false,
|
|
68
|
+
alignment: ALIGNMENT_LEFT,
|
|
69
|
+
elementClassName: ''
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default TooltipV2
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
.pltTooltipText {
|
|
3
|
+
@apply bg-white text-rich-black text-center p-2;
|
|
4
|
+
z-index: 20;
|
|
5
|
+
position: fixed;
|
|
6
|
+
visibility: hidden;
|
|
7
|
+
border-radius: 6px;
|
|
8
|
+
padding: 0.25rem;
|
|
9
|
+
opacity: 0;
|
|
10
|
+
transition: opacity 0.3s;
|
|
11
|
+
transform: translateX(-50%);
|
|
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
|
+
left: 50%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.leftPltTooltip::after {
|
|
25
|
+
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pltTooltipTextVisible {
|
|
29
|
+
visibility: visible;
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
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 LogsRiskIcon = ({ color, size, disabled, inactive }) => {
|
|
7
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
8
|
+
if (disabled) {
|
|
9
|
+
className += ` ${styles.iconDisabled}`
|
|
10
|
+
}
|
|
11
|
+
if (inactive) {
|
|
12
|
+
className += ` ${styles.iconInactive}`
|
|
13
|
+
}
|
|
14
|
+
let icon = <></>
|
|
15
|
+
const filledClassName = styles[`filled-${color}`]
|
|
16
|
+
|
|
17
|
+
switch (size) {
|
|
18
|
+
case SMALL:
|
|
19
|
+
icon = (
|
|
20
|
+
<svg
|
|
21
|
+
width={16}
|
|
22
|
+
height={16}
|
|
23
|
+
viewBox='0 0 16 16'
|
|
24
|
+
fill='none'
|
|
25
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
26
|
+
className={className}
|
|
27
|
+
>
|
|
28
|
+
<path d='M6 12.5H3C2.44772 12.5 2 12.0523 2 11.5V3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V10.5' stroke='none' strokeLinecap='round' />
|
|
29
|
+
<path d='M2 5H14' stroke='none' />
|
|
30
|
+
<circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
31
|
+
<circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
32
|
+
<circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
33
|
+
<path d='M4 7H9' stroke='none' strokeLinecap='round' />
|
|
34
|
+
<path d='M5 9H7' stroke='none' strokeLinecap='round' />
|
|
35
|
+
<path d='M5 11H6' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<path d='M14 14H7L10.5 7L14 14Z' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
<path d='M10.5 9.5V11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<circle cx='10.5002' cy='12.8334' r='0.291667' 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
|
+
<path d='M9 18.75H4C3.44772 18.75 3 18.3023 3 17.75V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<path d='M3 7.5H21' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
55
|
+
<circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
56
|
+
<circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
57
|
+
<path d='M6 10.5H13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<path d='M7.5 13.5H10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
59
|
+
<path d='M7.5 16.5H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
60
|
+
<path d='M21 21H10.5L15.75 10.5L21 21Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
61
|
+
<path d='M15.75 14.25V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<circle cx='15.75' cy='19.25' r='0.4375' fill='none' className={filledClassName} />
|
|
63
|
+
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
case LARGE:
|
|
68
|
+
icon = (
|
|
69
|
+
<svg
|
|
70
|
+
width={40}
|
|
71
|
+
height={40}
|
|
72
|
+
viewBox='0 0 40 40'
|
|
73
|
+
fill='none'
|
|
74
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
75
|
+
className={className}
|
|
76
|
+
>
|
|
77
|
+
<path d='M15 31.25H6C5.44772 31.25 5 30.8023 5 30.25V6C5 5.44772 5.44772 5 6 5H34C34.5523 5 35 5.44772 35 6V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
78
|
+
<path d='M5 12.5H35' stroke='none' strokeWidth={2} />
|
|
79
|
+
<circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
80
|
+
<circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
81
|
+
<circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
82
|
+
<path d='M10 17.5H22.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
83
|
+
<path d='M12.5 22.5H17.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
84
|
+
<path d='M12.5 27.5H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<path d='M35 35H17.5L26.25 17.5L35 35Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
86
|
+
<path d='M26.25 23.75V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
87
|
+
<circle cx='26.2502' cy='32.0834' r='0.729167' fill='none' className={filledClassName} />
|
|
88
|
+
</svg>
|
|
89
|
+
)
|
|
90
|
+
break
|
|
91
|
+
|
|
92
|
+
default:
|
|
93
|
+
break
|
|
94
|
+
}
|
|
95
|
+
return icon
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
LogsRiskIcon.propTypes = {
|
|
99
|
+
/**
|
|
100
|
+
* color of text, icon and borders
|
|
101
|
+
*/
|
|
102
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
103
|
+
/**
|
|
104
|
+
* Size
|
|
105
|
+
*/
|
|
106
|
+
size: PropTypes.oneOf(SIZES),
|
|
107
|
+
/**
|
|
108
|
+
* disabled
|
|
109
|
+
*/
|
|
110
|
+
disabled: PropTypes.bool,
|
|
111
|
+
/**
|
|
112
|
+
* inactive
|
|
113
|
+
*/
|
|
114
|
+
inactive: PropTypes.bool
|
|
115
|
+
}
|
|
116
|
+
LogsRiskIcon.defaultProps = {
|
|
117
|
+
color: MAIN_DARK_BLUE,
|
|
118
|
+
size: MEDIUM,
|
|
119
|
+
disabled: false,
|
|
120
|
+
inactive: false
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export default LogsRiskIcon
|
|
@@ -88,6 +88,7 @@ import LensIcon from './LensIcon'
|
|
|
88
88
|
import LiveIcon from './LiveIcon'
|
|
89
89
|
import LoadingAppIcon from './LoadingAppIcon'
|
|
90
90
|
import LogOutIcon from './LogOutIcon'
|
|
91
|
+
import LogsRiskIcon from './LogsRiskIcon'
|
|
91
92
|
import MetricsIcon from './MetricsIcon'
|
|
92
93
|
import MetricsLoadingIcon from './MetricsLoadingIcon'
|
|
93
94
|
import NameAppIcon from './NameAppIcon'
|
|
@@ -233,6 +234,7 @@ export default {
|
|
|
233
234
|
LiveIcon,
|
|
234
235
|
LoadingAppIcon,
|
|
235
236
|
LogOutIcon,
|
|
237
|
+
LogsRiskIcon,
|
|
236
238
|
MetricsIcon,
|
|
237
239
|
MetricsLoadingIcon,
|
|
238
240
|
NameAppIcon,
|