@platformatic/ui-components 0.12.1 → 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 (18) hide show
  1. package/dist/assets/{index-lxtoGZUQ.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 -32
  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/Report.jsx +3 -2
  11. package/src/components/Report.module.css +7 -0
  12. package/src/components/SimpleMetric.jsx +2 -1
  13. package/src/components/SplashScreen.jsx +16 -15
  14. package/src/components/SplashScreen.module.css +26 -2
  15. package/src/components/TextWithLabel.jsx +10 -7
  16. package/src/components/layouts/Layout.jsx +6 -4
  17. package/src/components/layouts/TwoColumnsLayout.jsx +2 -1
  18. package/dist/assets/index-DdZDgVK5.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-DdZDgVK5.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-lxtoGZUQ.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
@@ -622,10 +622,6 @@ video {
622
622
  margin-bottom: 1.25rem;
623
623
  }
624
624
 
625
- .mb-4 {
626
- margin-bottom: 1rem;
627
- }
628
-
629
625
  .ml-2 {
630
626
  margin-left: 0.5rem;
631
627
  }
@@ -716,10 +712,6 @@ video {
716
712
  background-color: rgb(0 5 11 / var(--tw-bg-opacity, 1));
717
713
  }
718
714
 
719
- .bg-rich-black\/50 {
720
- background-color: rgb(0 5 11 / 0.5);
721
- }
722
-
723
715
  .bg-white {
724
716
  --tw-bg-opacity: 1;
725
717
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -729,21 +721,11 @@ video {
729
721
  padding: 0.5rem;
730
722
  }
731
723
 
732
- .px-2 {
733
- padding-left: 0.5rem;
734
- padding-right: 0.5rem;
735
- }
736
-
737
724
  .px-5 {
738
725
  padding-left: 1.25rem;
739
726
  padding-right: 1.25rem;
740
727
  }
741
728
 
742
- .py-1 {
743
- padding-top: 0.25rem;
744
- padding-bottom: 0.25rem;
745
- }
746
-
747
729
  .text-2xl {
748
730
  font-size: 1.5rem;
749
731
  line-height: 2rem;
@@ -769,10 +751,6 @@ video {
769
751
  line-height: 1;
770
752
  }
771
753
 
772
- .text-\[13px\] {
773
- font-size: 13px;
774
- }
775
-
776
754
  .text-sm {
777
755
  font-size: 0.875rem;
778
756
  line-height: 1.25rem;
@@ -802,10 +780,6 @@ video {
802
780
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
803
781
  }
804
782
 
805
- .text-white\/70 {
806
- color: rgb(255 255 255 / 0.7);
807
- }
808
-
809
783
  .ring {
810
784
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
811
785
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -821,12 +795,6 @@ video {
821
795
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
822
796
  }
823
797
 
824
- .backdrop-blur-sm {
825
- --tw-backdrop-blur: blur(4px);
826
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
827
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
828
- }
829
-
830
798
  :root {
831
799
  background-color: transparent;
832
800
  font-family: 'Montserrat';
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.1",
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/Report.jsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
  import Icons from './icons'
3
3
  import { ERROR_RED, MAIN_GREEN, WARNING_YELLOW } from './constants'
4
+ import styles from './Report.module.css'
4
5
 
5
6
  function getIcon (type) {
6
7
  switch (type) {
@@ -17,7 +18,7 @@ function Step ({
17
18
  label
18
19
  }) {
19
20
  return (
20
- <div className='flex items-center gap-x-2'>
21
+ <div className={styles.step}>
21
22
  {getIcon(type)}
22
23
  <span>{label}</span>
23
24
  </div>
@@ -32,7 +33,7 @@ export default function Report ({
32
33
  })
33
34
  }
34
35
  return (
35
- <div className='text-white/70 flex flex-col gap-y-2'>
36
+ <div className={styles.container}>
36
37
  {renderSteps()}
37
38
  </div>
38
39
 
package/src/components/Report.module.css ADDED
@@ -0,0 +1,7 @@
1
+ .container {
2
+ @apply text-white/70 flex flex-col gap-y-2;
3
+ }
4
+
5
+ .step {
6
+ @apply flex items-center gap-x-2;
7
+ }
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) {
@@ -36,13 +39,13 @@ export default function SplashScreen ({
36
39
  }
37
40
  }
38
41
  return (
39
- <div className={`${styles.container} ${blur ? 'backdrop-blur-sm bg-rich-black/50' : 'bg-rich-black'}`} onClick={() => setDestroyed(true)}>
42
+ <div className={`${styles.container} ${blur ? styles.blur : styles.solid}`} onClick={() => setDestroyed(true)}>
40
43
  <div className={styles.content}>
41
44
  <div className={styles.icon}>{renderIcon()}</div>
42
45
  <div className={styles.title}>{title}</div>
43
46
  <div className={styles.message}>{message}</div>
44
47
 
45
- <div className='mb-4'>
48
+ <div className={styles.childrenContainer}>
46
49
  {children}
47
50
  </div>
48
51
 
@@ -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
@@ -1,5 +1,13 @@
1
1
  .container {
2
- @apply fixed inset-0 flex items-center justify-center text-white;
2
+ @apply fixed inset-0 flex items-center justify-center text-white;
3
+ }
4
+
5
+ .container.blur {
6
+ @apply backdrop-blur-sm bg-rich-black/50;
7
+ }
8
+
9
+ .container.solid {
10
+ @apply bg-rich-black;
3
11
  }
4
12
 
5
13
  .title {
@@ -16,4 +24,20 @@
16
24
 
17
25
  .content {
18
26
  @apply flex flex-col gap-y-2 items-center justify-center text-center bg-transparent;
19
- }
27
+ }
28
+
29
+ .childrenContainer {
30
+ @apply mb-4;
31
+ }
32
+
33
+ .button {
34
+ @apply flex items-center justify-center;
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}>