@platformatic/ui-components 0.19.2 → 0.19.4

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 (11) hide show
  1. package/dist/assets/{index-C7nsqvHo.js → index-DEoizFxJ.js} +1 -1
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Button.jsx +3 -2
  5. package/src/components/Button.module.css +1 -1
  6. package/src/components/LoadingSpinner.jsx +2 -2
  7. package/src/components/icons/MarkdownDownloadIcon.jsx +62 -0
  8. package/src/components/icons/index.js +2 -0
  9. package/src/components/loaders/SpinnerCircularV2.jsx +31 -0
  10. package/src/components/loaders/SpinnerCircularV2.module.css +34 -0
  11. package/src/stories/Button.stories.jsx +20 -1
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-C7nsqvHo.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-DEoizFxJ.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CMl46sxX.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.19.2",
4
+ "version": "0.19.4",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  ACTIVE_AND_INACTIVE_STATUS,
13
13
  TRANSPARENT
14
14
  } from './constants'
15
- import SpinnerCircular from './loaders/SpinnerCircular'
15
+ import SpinnerCircularV2 from './loaders/SpinnerCircularV2'
16
16
 
17
17
  function Button ({
18
18
  textClass = '',
@@ -111,7 +111,8 @@ function Button ({
111
111
  return (
112
112
  <button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
113
113
  <div className={`${contentClassName} ${backgroundClassName}`}>
114
- {loading ? <SpinnerCircular className={styles.spinner} size={30} thickness={2} color={color} /> : null}
114
+ {loading ? <SpinnerCircularV2 className={styles.spinner} size={28} thickness={1} color={color} /> : null}
115
+
115
116
  {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
116
117
  <span className={styles.label}>{label}</span>
117
118
  {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
package/src/components/Button.module.css CHANGED
@@ -147,5 +147,5 @@
147
147
  @apply cursor-default;
148
148
  }
149
149
  .spinner {
150
- @apply z-50 relative top-[20px] left-[20px] transform -translate-x-1/2 -translate-y-1/2
150
+ @apply z-50 relative transform -translate-x-1/2 -translate-y-1/2
151
151
  }
package/src/components/LoadingSpinner.jsx CHANGED
@@ -2,13 +2,13 @@ import React from 'react'
2
2
  import styles from './LoadingSpinner.module.css'
3
3
  import SpinnerCircular from './loaders/SpinnerCircular'
4
4
 
5
- function LoadingSpinner ({ loading = false }) {
5
+ function LoadingSpinner ({ loading = false, size = 60 }) {
6
6
  // If null then loading not started, if true then loading, if false then done loading
7
7
  return loading
8
8
  ? (
9
9
  <div className={styles.container} data-testid='loading-spinner'>
10
10
  <div data-testid='loading-spinner-content' className={styles.relative}>
11
- <SpinnerCircular className={styles.spinner} size={60} />
11
+ <SpinnerCircular className={styles.spinner} size={size} />
12
12
  </div>
13
13
  </div>
14
14
  )
package/src/components/icons/MarkdownDownloadIcon.jsx ADDED
@@ -0,0 +1,62 @@
1
+ import * as React from 'react'
2
+ import { SMALL, MEDIUM, LARGE } from '../constants'
3
+
4
+ const MarkdownDownloadIcon = ({ size = SMALL }) => {
5
+ let icon = <></>
6
+
7
+ switch (size) {
8
+ case SMALL:
9
+ icon = (
10
+ <svg
11
+ width={16}
12
+ height={16}
13
+ viewBox='0 0 16 16'
14
+ fill='none'
15
+ xmlns='http://www.w3.org/2000/svg'
16
+ >
17
+ <path d='M11.5002 14V8M11.5002 14L9.32617 11.8031M11.5002 14L13.7352 11.7414' stroke='#00050B' strokeLinecap='round' strokeLinejoin='round' />
18
+ <path d='M3 5H4.44324L5.96757 9.03125H6.03243L7.55676 5H9V11H7.86487V7.09473H7.81892L6.38649 10.9707H5.61351L4.18108 7.08008H4.13514V11H3V5Z' fill='#00050B' />
19
+ <path d='M8 2H2V12.5H7.5M8 2L10 3.5V4M8 2V4H10M10 9.5V4' stroke='#00050B' strokeLinecap='round' strokeLinejoin='round' />
20
+ </svg>
21
+ )
22
+ break
23
+
24
+ case MEDIUM:
25
+ icon = (
26
+ <svg
27
+ width={24}
28
+ height={24}
29
+ viewBox='0 0 24 24'
30
+ fill='none'
31
+ xmlns='http://www.w3.org/2000/svg'
32
+ >
33
+ <path d='M17.2502 21V12M17.2502 21L13.9893 17.7047M17.2502 21L20.6028 17.6121' stroke='#00050B' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
34
+ <path d='M4.5 7.5H6.66487L8.95135 13.5469H9.04865L11.3351 7.5H13.5V16.5H11.7973V10.6421H11.7284L9.57973 16.4561H8.42027L6.27162 10.6201H6.2027V16.5H4.5V7.5Z' fill='#00050B' />
35
+ <path d='M12 3H3V18.75H11.25M12 3L15 5.25V6M12 3V6H15M15 14.25V6' stroke='#00050B' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
36
+ </svg>
37
+ )
38
+ break
39
+
40
+ case LARGE:
41
+ icon = (
42
+ <svg
43
+ width={40}
44
+ height={40}
45
+ viewBox='0 0 40 40'
46
+ fill='none'
47
+ xmlns='http://www.w3.org/2000/svg'
48
+ >
49
+ <path d='M28.7504 35V20M28.7504 35L23.3154 29.5078M28.7504 35L34.338 29.3535' stroke='#00050B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
50
+ <path d='M7.5 12.5H11.1081L14.9189 22.5781H15.0811L18.8919 12.5H22.5V27.5H19.6622V17.7368H19.5473L15.9662 27.4268H14.0338L10.4527 17.7002H10.3378V27.5H7.5V12.5Z' fill='#00050B' />
51
+ <path d='M20 5H5V31.25H18.75M20 5L25 8.75V10M20 5V10H25M25 23.75V10' stroke='#00050B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
52
+ </svg>
53
+ )
54
+ break
55
+
56
+ default:
57
+ break
58
+ }
59
+ return icon
60
+ }
61
+
62
+ export default MarkdownDownloadIcon
package/src/components/icons/index.js CHANGED
@@ -133,6 +133,7 @@ import LoadingAppIcon from './LoadingAppIcon'
133
133
  import LogOutIcon from './LogOutIcon'
134
134
  import LogsRiskIcon from './LogsRiskIcon'
135
135
  import MailIcon from './MailIcon'
136
+ import MarkdownDownloadIcon from './MarkdownDownloadIcon'
136
137
  import MetricsIcon from './MetricsIcon'
137
138
  import MetricsLoadingIcon from './MetricsLoadingIcon'
138
139
  import MetricsLogsIcon from './MetricsLogsIcon'
@@ -371,6 +372,7 @@ export default {
371
372
  LogOutIcon,
372
373
  LogsRiskIcon,
373
374
  MailIcon,
375
+ MarkdownDownloadIcon,
374
376
  MetricsIcon,
375
377
  MetricsLoadingIcon,
376
378
  MetricsLogsIcon,
package/src/components/loaders/SpinnerCircularV2.jsx ADDED
@@ -0,0 +1,31 @@
1
+ // https://loading.io/css/
2
+ import React from 'react'
3
+ import styles from './SpinnerCircularV2.module.css'
4
+ import { WHITE } from '../constants'
5
+
6
+ function SpinnerCircular ({
7
+ className = '',
8
+ color = WHITE,
9
+ size = 60,
10
+ thickness = 4
11
+ }) {
12
+ const styleRing = { width: `${size / 4}px`, height: `${size / 4}px` }
13
+ const styleDiv = {
14
+ width: `${size - 16}px`,
15
+ height: `${size - 16}px`,
16
+ margin: `${thickness}px`,
17
+ borderWidth: `${thickness}px`
18
+ }
19
+
20
+ const spinnerClassName = styles[`ring${color}`] + ` ${styles.ring} ${className}`
21
+ return (
22
+ <div className={spinnerClassName} style={styleRing}>
23
+ <div style={styleDiv} />
24
+ <div style={styleDiv} />
25
+ <div style={styleDiv} />
26
+ <div style={styleDiv} />
27
+ </div>
28
+ )
29
+ }
30
+
31
+ export default SpinnerCircular
package/src/components/loaders/SpinnerCircularV2.module.css ADDED
@@ -0,0 +1,34 @@
1
+ .ringwhite {
2
+ color: white;
3
+ }
4
+ .ring,
5
+ .ring div {
6
+ box-sizing: border-box;
7
+ }
8
+ .ring div {
9
+ box-sizing: border-box;
10
+ display: block;
11
+ position: absolute;
12
+ border-style: solid;
13
+ border-color: currentColor;
14
+ border-radius: 50%;
15
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
16
+ border-color: currentColor transparent transparent transparent;
17
+ }
18
+ .ring div:nth-child(1) {
19
+ animation-delay: -0.45s;
20
+ }
21
+ .ring div:nth-child(2) {
22
+ animation-delay: -0.3s;
23
+ }
24
+ .ring div:nth-child(3) {
25
+ animation-delay: -0.15s;
26
+ }
27
+ @keyframes lds-ring {
28
+ 0% {
29
+ transform: rotate(0deg);
30
+ }
31
+ 100% {
32
+ transform: rotate(360deg);
33
+ }
34
+ }
package/src/stories/Button.stories.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import Button from '../components/Button'
3
3
  import {
4
4
  ALTERNATE_RICH_BLACK,
@@ -676,3 +676,22 @@ LoadingButton.args = {
676
676
  label: 'Loading Button',
677
677
  loading: true
678
678
  }
679
+
680
+ export const ClickToLoad = (args) => {
681
+ const [loading, setLoading] = useState(false)
682
+ return (
683
+ <Button
684
+ label='Click to Load'
685
+ loading={loading}
686
+ onClick={() => {
687
+ setLoading(true)
688
+ setTimeout(() => setLoading(false), 2000)
689
+ }}
690
+ />
691
+ )
692
+ }
693
+
694
+ ClickToLoad.args = {
695
+ label: 'Click to Load',
696
+ loading: false
697
+ }