@platformatic/ui-components 0.12.2 → 0.13.0

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 (16) hide show
  1. package/dist/assets/{index-CLfzl4yN.css → index-DMinbJlj.css} +1 -1
  2. package/dist/assets/index-_szOjVkB.js +49 -0
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +0 -14
  5. package/package.json +1 -1
  6. package/src/components/BorderedBox.jsx +17 -14
  7. package/src/components/Box.jsx +3 -1
  8. package/src/components/InfoBox.jsx +9 -7
  9. package/src/components/List.jsx +4 -3
  10. package/src/components/SimpleMetric.jsx +2 -1
  11. package/src/components/SplashScreen.jsx +14 -13
  12. package/src/components/SplashScreen.module.css +9 -1
  13. package/src/components/TextWithLabel.jsx +10 -7
  14. package/src/components/layouts/Layout.jsx +6 -4
  15. package/src/components/layouts/TwoColumnsLayout.jsx +2 -1
  16. package/dist/assets/index-CIcYuZGV.js +0 -49
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-CIcYuZGV.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-CLfzl4yN.css">
7
+ <script type="module" crossorigin src="/assets/index-_szOjVkB.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -721,21 +721,11 @@ video {
721
721
  padding: 0.5rem;
722
722
  }
723
723
 
724
- .px-2 {
725
- padding-left: 0.5rem;
726
- padding-right: 0.5rem;
727
- }
728
-
729
724
  .px-5 {
730
725
  padding-left: 1.25rem;
731
726
  padding-right: 1.25rem;
732
727
  }
733
728
 
734
- .py-1 {
735
- padding-top: 0.25rem;
736
- padding-bottom: 0.25rem;
737
- }
738
-
739
729
  .text-2xl {
740
730
  font-size: 1.5rem;
741
731
  line-height: 2rem;
@@ -761,10 +751,6 @@ video {
761
751
  line-height: 1;
762
752
  }
763
753
 
764
- .text-\[13px\] {
765
- font-size: 13px;
766
- }
767
-
768
754
  .text-sm {
769
755
  font-size: 0.875rem;
770
756
  line-height: 1.25rem;
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.12.2",
4
+ "version": "0.13.0",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/BorderedBox.jsx CHANGED
@@ -3,20 +3,23 @@ import PropTypes from 'prop-types'
3
3
  import styles from './BorderedBox.module.css'
4
4
  import commonStyles from './Common.module.css'
5
5
  import { COLORS_BORDERED_BOX, DARK_BLUE, TRANSPARENT, OPACITIES, OPACITY_100 } from './constants'
6
- function BorderedBox ({
7
- classes = '',
8
- color = TRANSPARENT,
9
- children,
10
- backgroundColor = DARK_BLUE,
11
- backgroundColorOpacity = OPACITY_100,
12
- borderColorOpacity = OPACITY_100,
13
- clickable = false,
14
- onClick = () => {},
15
- internalOverHandling = false,
16
- backgroundColorOver = null,
17
- backgroundColorOpacityOver = null,
18
- borderColorOpacityOver = null
19
- }) {
6
+
7
+ function BorderedBox (props) {
8
+ const {
9
+ classes = '',
10
+ color = TRANSPARENT,
11
+ children,
12
+ backgroundColor = DARK_BLUE,
13
+ backgroundColorOpacity = OPACITY_100,
14
+ borderColorOpacity = OPACITY_100,
15
+ clickable = false,
16
+ onClick = () => {},
17
+ internalOverHandling = false,
18
+ backgroundColorOver = null,
19
+ backgroundColorOpacityOver = null,
20
+ borderColorOpacityOver = null
21
+ } = props
22
+
20
23
  const [over, setOver] = useState(false)
21
24
  const [className, setClassName] = useState(normalClassName())
22
25
 
package/src/components/Box.jsx CHANGED
@@ -1,6 +1,8 @@
1
1
  import styles from './Box.module.css'
2
2
  import React from 'react'
3
- export default function Box ({ justifyCentered, children }) {
3
+
4
+ export default function Box (props) {
5
+ const { justifyCentered, children } = props
4
6
  let className = `${styles.box}`
5
7
  if (justifyCentered) className += ` ${styles.justifyCentered}`
6
8
 
package/src/components/InfoBox.jsx CHANGED
@@ -5,13 +5,15 @@ import Button from './Button'
5
5
  import PlatformaticIcon from './PlatformaticIcon'
6
6
  import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
7
7
 
8
- function InfoBox ({
9
- children,
10
- iconName = '',
11
- iconColor = MAIN_GREEN,
12
- helpText = '',
13
- buttonProps = null
14
- }) {
8
+ function InfoBox (props) {
9
+ const {
10
+ children,
11
+ iconName = '',
12
+ iconColor = MAIN_GREEN,
13
+ helpText = '',
14
+ buttonProps = null
15
+ } = props
16
+
15
17
  return (
16
18
  <div className={styles.container}>
17
19
  <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />
package/src/components/List.jsx CHANGED
@@ -1,19 +1,20 @@
1
1
  import React from 'react'
2
2
  import styles from './List.module.css'
3
3
 
4
- export default function List ({ title, ...props }) {
4
+ export default function List (props) {
5
+ const { title, children, ...rest } = props
5
6
  return (
6
7
  <div className={styles.container}>
7
8
  {title &&
8
9
  <div
9
10
  className={styles.title}
10
11
  data-testid='list-title'
11
- {...props}
12
+ {...rest}
12
13
  >
13
14
  {title}
14
15
  </div>}
15
16
  <div className={styles.elements}>
16
- {props.children}
17
+ {children}
17
18
  </div>
18
19
  </div>
19
20
  )
package/src/components/SimpleMetric.jsx CHANGED
@@ -5,7 +5,8 @@ import MetricValue from './MetricValue'
5
5
  import ButtonFullRounded from './ButtonFullRounded'
6
6
  import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
7
7
 
8
- export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
8
+ export default function SimpleMetric (props) {
9
+ const { title, pre, color, unit, value, tooltip, children } = props
9
10
  const withoutChildrenSingleMetric = !children ? styles.centerMetric : ''
10
11
  return (
11
12
  <BorderedBox>
package/src/components/SplashScreen.jsx CHANGED
@@ -3,15 +3,18 @@ import styles from './SplashScreen.module.css'
3
3
  import { ERROR_RED, MAIN_GREEN, RICH_BLACK, WHITE } from './constants'
4
4
  import Icons from './icons'
5
5
  import Button from './Button'
6
- export default function SplashScreen ({
7
- success = true,
8
- timeout = 5000,
9
- message = '',
10
- title = 'Operation completed',
11
- blur = false,
12
- children,
13
- onDestroyed = () => {}
14
- }) {
6
+
7
+ export default function SplashScreen (props) {
8
+ const {
9
+ success = true,
10
+ timeout = 5000,
11
+ message = '',
12
+ title = 'Operation completed',
13
+ blur = false,
14
+ children,
15
+ onDestroyed = () => {}
16
+ } = props
17
+
15
18
  const [destroyed, setDestroyed] = useState(false)
16
19
  useEffect(() => {
17
20
  if (destroyed) {
@@ -52,13 +55,11 @@ export default function SplashScreen ({
52
55
  backgroundColor={WHITE}
53
56
  onClick={() => setDestroyed(true)}
54
57
  label='Dismiss'
55
- paddingClass='px-2 py-1'
56
- textClass='text-[13px]'
58
+ paddingClass={styles.buttonPadding}
59
+ textClass={styles.buttonText}
57
60
  />
58
61
  </div>
59
-
60
62
  </div>
61
-
62
63
  </div>
63
64
  )
64
65
  }
package/src/components/SplashScreen.module.css CHANGED
@@ -32,4 +32,12 @@
32
32
 
33
33
  .button {
34
34
  @apply flex items-center justify-center;
35
- }
35
+ }
36
+
37
+ .buttonPadding {
38
+ @apply px-2 py-1;
39
+ }
40
+
41
+ .buttonText {
42
+ @apply text-[14px];
43
+ }
package/src/components/TextWithLabel.jsx CHANGED
@@ -3,13 +3,16 @@ import PropTypes from 'prop-types'
3
3
  import { FONT_BASE, FONT_XS, MAIN_DARK_BLUE, WHITE } from './constants'
4
4
  import commonStyles from './Common.module.css'
5
5
  import styles from './TextWithLabel.module.css'
6
- function TextWithLabel ({
7
- label = '',
8
- text = '',
9
- children,
10
- color = WHITE,
11
- fontSize = FONT_BASE
12
- }) {
6
+
7
+ function TextWithLabel (props) {
8
+ const {
9
+ label = '',
10
+ text = '',
11
+ children,
12
+ color = WHITE,
13
+ fontSize = FONT_BASE
14
+ } = props
15
+
13
16
  const className = commonStyles[`text--${color}`] + ' ' + commonStyles[`text--${fontSize}`]
14
17
  return (
15
18
  <div className={className}>
package/src/components/layouts/Layout.jsx CHANGED
@@ -1,10 +1,12 @@
1
1
  import React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
 
4
- function Layout ({
5
- className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
6
- children = null
7
- }) {
4
+ function Layout (props) {
5
+ const {
6
+ className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
7
+ children = null
8
+ } = props
9
+
8
10
  return (
9
11
  <div className={className}>
10
12
  {children}
package/src/components/layouts/TwoColumnsLayout.jsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react'
2
2
  import styles from './TwoColumnsLayout.module.css'
3
3
 
4
- export default function TwoColumnsLayout ({ children, gridTemplate = 'columns' }) {
4
+ export default function TwoColumnsLayout (props) {
5
+ const { children, gridTemplate = 'columns' } = props
5
6
  const className = styles[`${gridTemplate}`]
6
7
  return (
7
8
  <div className={className}>