@platformatic/ui-components 0.1.82 → 0.1.84

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 (19) hide show
  1. package/dist/assets/{index.b15f7bcc.css → index.a6b7ebf4.css} +1 -1
  2. package/dist/assets/{index.5afee9ab.js → index.bd06830c.js} +9 -9
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +8 -2
  5. package/index.js +1 -0
  6. package/package.json +1 -1
  7. package/src/components/Button.jsx +1 -1
  8. package/src/components/Button.module.css +3 -0
  9. package/src/components/VerticalSeparator.jsx +1 -1
  10. package/src/components/backgrounds/AppBackgroundIcon.jsx +24 -0
  11. package/src/components/backgrounds/LensBackgroundIcon.jsx +14 -0
  12. package/src/components/backgrounds/TimerBackgroundIcon.jsx +18 -0
  13. package/src/components/backgrounds/index.js +9 -0
  14. package/src/components/icons/LabelIcon.jsx +80 -0
  15. package/src/components/icons/RocketIcon.jsx +91 -0
  16. package/src/components/icons/index.js +5 -1
  17. package/src/stories/backgrounds/AppBackgroundIcon.stories.jsx +14 -0
  18. package/src/stories/backgrounds/LensBackgroundIcon.stories.jsx +14 -0
  19. package/src/stories/backgrounds/TimerBackgroundIcon.stories.jsx +14 -0
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.5afee9ab.js"></script>
8
- <link rel="stylesheet" href="/assets/index.b15f7bcc.css">
7
+ <script type="module" crossorigin src="/assets/index.bd06830c.js"></script>
8
+ <link rel="stylesheet" href="/assets/index.a6b7ebf4.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -544,8 +544,14 @@ video {
544
544
  position: relative;
545
545
  }
546
546
 
547
- .m-3 {
548
- margin: 0.75rem;
547
+ .my-auto {
548
+ margin-top: auto;
549
+ margin-bottom: auto;
550
+ }
551
+
552
+ .mx-5 {
553
+ margin-left: 1.25rem;
554
+ margin-right: 1.25rem;
549
555
  }
550
556
 
551
557
  .mx-auto {
package/index.js CHANGED
@@ -4,6 +4,7 @@ import BorderedBox from './src/components/BorderedBox'
4
4
  import Box from './src/components/Box'
5
5
  import Button from './src/components/Button'
6
6
  import ButtonFullRounded from './src/components/ButtonFullRounded'
7
+ import Backgrounds from './src/components/backgrounds'
7
8
  import CopyAndPaste from './src/components/CopyAndPaste'
8
9
  import Checkbox from './src/components/Checkbox'
9
10
  import DetailedMetric from './src/components/DetailedMetric'
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.1.82",
4
+ "version": "0.1.84",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -46,7 +46,7 @@ function Button ({
46
46
  return (
47
47
  <button className={className} disabled={disabled} alt={label} {...rest}>
48
48
  {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
49
- <span>{label}</span>
49
+ <span className={styles.label}>{label}</span>
50
50
  </button>
51
51
  )
52
52
  }
package/src/components/Button.module.css CHANGED
@@ -96,4 +96,7 @@
96
96
 
97
97
  .fullWidth {
98
98
  @apply w-full;
99
+ }
100
+ .label {
101
+ @apply w-max;
99
102
  }
package/src/components/VerticalSeparator.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
3
  export default function VerticalSeparator () {
4
- return <span className='text-dark-green m-3'> | </span>
4
+ return <span className='text-dark-green my-auto mx-5'> | </span>
5
5
  }
package/src/components/backgrounds/AppBackgroundIcon.jsx ADDED
@@ -0,0 +1,24 @@
1
+ 'use strict'
2
+
3
+ const AppBackgroundIcon = () => {
4
+ return (
5
+ <svg width='669' height='669' viewBox='0 0 669 669' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
+ <g opacity='0.05'>
7
+ <path d='M286.786 380.769H217.563C203.362 380.769 191.851 392.28 191.851 406.48V537.332C191.851 551.532 203.362 563.044 217.563 563.044H450.944C465.144 563.044 476.656 551.532 476.656 537.332V406.48C476.656 392.28 465.144 380.769 450.944 380.769H381.721' stroke='white' stroke-width='31' stroke-linecap='round' />
8
+ <rect x='286.786' y='563.042' width='94.9349' height='45.5688' stroke='white' stroke-width='31' />
9
+ <path d='M239.318 634.324C239.318 620.123 250.829 608.612 265.029 608.612H403.476C417.676 608.612 429.188 620.123 429.188 634.324V642.789H239.318V634.324Z' stroke='white' stroke-width='31' />
10
+ <path d='M334.253 357.983L355.567 420.958H424.541L368.74 459.878L390.054 522.853L334.253 483.932L278.451 522.853L299.766 459.878L243.964 420.958H312.939L334.253 357.983Z' stroke='white' stroke-width='31' stroke-linejoin='round' />
11
+ <path d='M156.246 476.653H73.1784V310.516' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
12
+ <path d='M239.315 334.25V120.647' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
13
+ <path d='M512.253 476.652H595.321V381.718' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
14
+ <path d='M405.451 346.117V274.916H488.519V144.38' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
15
+ <circle cx='73.179' cy='263.049' r='47.4675' stroke='white' stroke-width='31' />
16
+ <circle cx='239.315' cy='73.1789' r='47.4675' stroke='white' stroke-width='31' />
17
+ <circle cx='488.52' cy='96.9123' r='47.4675' stroke='white' stroke-width='31' />
18
+ <circle cx='595.321' cy='334.25' r='47.4675' stroke='white' stroke-width='31' />
19
+ </g>
20
+ </svg>
21
+ )
22
+ }
23
+
24
+ export default AppBackgroundIcon
package/src/components/backgrounds/LensBackgroundIcon.jsx ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict'
2
+
3
+ const LensBackgroundIcon = () => {
4
+ return (
5
+ <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
+ <g opacity='0.05'>
7
+ <circle cx='258.75' cy='258.75' r='258.75' transform='matrix(-1 0 0 1 724.5 103.5)' stroke='white' stroke-width='41.4' />
8
+ <path d='M103.5 724.5L258.75 569.25' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
9
+ </g>
10
+ </svg>
11
+ )
12
+ }
13
+
14
+ export default LensBackgroundIcon
package/src/components/backgrounds/TimerBackgroundIcon.jsx ADDED
@@ -0,0 +1,18 @@
1
+ 'use strict'
2
+
3
+ const TimerBackgroundIcon = () => {
4
+ return (
5
+ <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
+ <g opacity='0.05'>
7
+ <ellipse cx='409.996' cy='451.818' rx='254.746' ry='255.434' stroke='white' stroke-width='41.4' />
8
+ <path d='M409.988 196.385V103.5M317.353 103.5H502.622' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
9
+ <path d='M607.247 255.825L640.369 223.361M607.992 190.15L672.746 256.572' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
10
+ <path d='M222.392 259.332L190.165 225.975M156.897 258.289L223.432 193.66' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
11
+ <path d='M491.054 335.708L409.994 475.036' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
12
+ </g>
13
+ </svg>
14
+
15
+ )
16
+ }
17
+
18
+ export default TimerBackgroundIcon
package/src/components/backgrounds/index.js ADDED
@@ -0,0 +1,9 @@
1
+ import AppBackgroundIcon from './AppBackgroundIcon'
2
+ import LensBackgroundIcon from './LensBackgroundIcon'
3
+ import TimerBackgroundIcon from './TimerBackgroundIcon'
4
+
5
+ export default {
6
+ AppBackgroundIcon,
7
+ LensBackgroundIcon,
8
+ TimerBackgroundIcon
9
+ }
package/src/components/icons/LabelIcon.jsx ADDED
@@ -0,0 +1,80 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
5
+
6
+ const LabelIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ let icon = <></>
9
+
10
+ switch (size) {
11
+ case SMALL:
12
+ icon = (
13
+ <svg
14
+ width={16}
15
+ height={16}
16
+ viewBox='0 0 16 16'
17
+ fill='none'
18
+ xmlns='http://www.w3.org/2000/svg'
19
+ className={className}
20
+ >
21
+ <path d='M3.05518 8.18267C3.01573 7.89342 3.10464 7.60137 3.29858 7.38318L8.30775 1.74751C8.67466 1.33472 9.30673 1.29752 9.71952 1.66443L13.4567 4.98613C13.8695 5.35304 13.9067 5.98511 13.5398 6.3979L8.53058 12.0336C8.33665 12.2518 8.05705 12.3743 7.76517 12.3691L4.47301 12.3098C3.97985 12.301 3.56682 11.9339 3.50017 11.4452L3.05518 8.18267Z' stroke='none' />
22
+ <circle cx={6.60545} cy={8.93103} r={1.5} transform='rotate(-48.3682 6.60545 8.93103)' stroke='none' />
23
+
24
+ </svg>
25
+ )
26
+ break
27
+ case MEDIUM:
28
+ icon = (
29
+ <svg
30
+ width={24}
31
+ height={24}
32
+ viewBox='0 0 24 24'
33
+ fill='none'
34
+ xmlns='http://www.w3.org/2000/svg'
35
+ className={className}
36
+ >
37
+ <path d='M4.55169 12.0459C4.51224 11.7566 4.60115 11.4646 4.79509 11.2464L12.7938 2.24731C13.1607 1.83452 13.7928 1.79732 14.2056 2.16422L20.5587 7.81112C20.9715 8.17803 21.0087 8.8101 20.6418 9.22289L12.6431 18.222C12.4492 18.4402 12.1696 18.5627 11.8777 18.5575L6.28101 18.4568C5.78786 18.4479 5.37482 18.0808 5.30817 17.5921L4.55169 12.0459Z' stroke='none' strokeWidth={1.5} />
38
+ <circle cx={9.90817} cy={13.3963} r={2.25} transform='rotate(-48.3682 9.90817 13.3963)' stroke='none' strokeWidth={1.5} />
39
+
40
+ </svg>
41
+ )
42
+ break
43
+ case LARGE:
44
+ icon = (
45
+ <svg
46
+ width={40}
47
+ height={40}
48
+ viewBox='0 0 40 40'
49
+ fill='none'
50
+ xmlns='http://www.w3.org/2000/svg'
51
+ className={className}
52
+ >
53
+ <path d='M7.54472 19.7728C7.50526 19.4836 7.59417 19.1916 7.78811 18.9734L21.7659 3.2474C22.1328 2.8346 22.7649 2.7974 23.1777 3.16431L34.7628 13.4616C35.1756 13.8285 35.2128 14.4606 34.8459 14.8734L20.8681 30.5993C20.6742 30.8175 20.3946 30.9401 20.1027 30.9348L9.89701 30.7513C9.40386 30.7424 8.99083 30.3753 8.92417 29.8866L7.54472 19.7728Z' stroke='none' strokeWidth={2} />
54
+ </svg>
55
+ )
56
+ break
57
+
58
+ default:
59
+ break
60
+ }
61
+ return icon
62
+ }
63
+
64
+ LabelIcon.propTypes = {
65
+ /**
66
+ * color of text, icon and borders
67
+ */
68
+ color: PropTypes.oneOf(COLORS_ICON),
69
+ /**
70
+ * Size
71
+ */
72
+ size: PropTypes.oneOf(SIZES)
73
+ }
74
+
75
+ LabelIcon.defaultProps = {
76
+ color: 'main-dark-blue',
77
+ size: 'medium'
78
+ }
79
+
80
+ export default LabelIcon
package/src/components/icons/RocketIcon.jsx ADDED
@@ -0,0 +1,91 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES } from '../constants'
5
+
6
+ const RocketIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ let icon = <></>
9
+
10
+ switch (size) {
11
+ case 'small':
12
+ icon = (
13
+ <svg
14
+ width={16}
15
+ height={16}
16
+ viewBox='0 0 16 16'
17
+ fill='none'
18
+ xmlns='http://www.w3.org/2000/svg'
19
+ className={className}
20
+ >
21
+ <path d='M6.0527 8.57904L4.48734 7.01368C4.35482 6.88116 4.26192 6.71377 4.21978 6.53115L3.70625 4.30588C3.62317 3.94585 3.94584 3.62317 4.30588 3.70626L6.53115 4.21978C6.71377 4.26192 6.88087 4.35454 7.0134 4.48706L8.57904 6.0527L11.4211 6.36853L9.90533 7.88433L10.2843 8.76855L8.76848 10.2843L7.88426 9.9054L6.36846 11.4212L6.0527 8.57904Z' stroke='none' strokeLinejoin='round' />
22
+ <path d='M9.21045 11.7371L10.4736 13.0002' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
23
+ <path d='M11.1055 11.1053L12.3686 12.3685' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
24
+ <path d='M11.7368 9.21069L13 10.4739' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
25
+ <circle cx={6} cy={6} r={1} stroke='none' />
26
+
27
+ </svg>
28
+ )
29
+ break
30
+ case 'medium':
31
+ icon = (
32
+ <svg
33
+ width={24}
34
+ height={24}
35
+ viewBox='0 0 24 24'
36
+ fill='none'
37
+ xmlns='http://www.w3.org/2000/svg'
38
+ className={className}
39
+ >
40
+ <path d='M9.07905 12.8684L6.62981 10.4192C6.49728 10.2867 6.40405 10.119 6.36191 9.93633L5.46944 6.06894C5.38635 5.70891 5.70903 5.38623 6.06906 5.46932L9.93645 6.36179C10.1191 6.40394 10.2862 6.49655 10.4187 6.62908L12.8686 9.07893L17.1317 9.55267L14.858 11.8264L15.4264 13.1527L13.1527 15.4264L11.8264 14.858L9.55269 17.1317L9.07905 12.8684Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
41
+ <path d='M13.8157 17.6056L15.7104 19.5003' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
42
+ <path d='M16.6582 16.658L18.553 18.5527' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
43
+ <path d='M17.6052 13.816L19.5 15.7108' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
44
+ <circle cx={9} cy={9} r={1.5} stroke='none' strokeWidth={1.5} />
45
+
46
+ </svg>
47
+ )
48
+ break
49
+ case 'large':
50
+ icon = (
51
+ <svg
52
+ width={40}
53
+ height={40}
54
+ viewBox='0 0 40 40'
55
+ fill='none'
56
+ xmlns='http://www.w3.org/2000/svg'
57
+ className={className}
58
+ >
59
+ <path d='M15.1318 21.4475L10.9146 17.2304C10.7821 17.0978 10.6883 16.9296 10.6462 16.7469L8.9958 9.59531C8.91272 9.23527 9.23539 8.9126 9.59543 8.99569L16.7471 10.6461C16.9297 10.6882 17.0968 10.7808 17.2293 10.9133L21.4476 15.1316L28.5528 15.9212L24.7633 19.7107L25.7107 21.9212L21.9212 25.7107L19.7107 24.7634L15.9212 28.5529L15.1318 21.4475Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
60
+ <path d='M23.0261 29.3427L26.184 32.5006' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
61
+ <path d='M27.7637 27.7634L30.9216 30.9213' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
62
+ <path d='M29.342 23.0267L32.5 26.1847' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
63
+ <circle cx={15} cy={15} r={2.5} stroke='none' strokeWidth={2} />
64
+
65
+ </svg>
66
+ )
67
+ break
68
+
69
+ default:
70
+ break
71
+ }
72
+ return icon
73
+ }
74
+
75
+ RocketIcon.propTypes = {
76
+ /**
77
+ * color of text, icon and borders
78
+ */
79
+ color: PropTypes.oneOf(COLORS_ICON),
80
+ /**
81
+ * Size
82
+ */
83
+ size: PropTypes.oneOf(SIZES)
84
+ }
85
+
86
+ RocketIcon.defaultProps = {
87
+ color: 'main-dark-blue',
88
+ size: 'medium'
89
+ }
90
+
91
+ export default RocketIcon
package/src/components/icons/index.js CHANGED
@@ -41,16 +41,18 @@ import GearIcon from './GearIcon'
41
41
  import GenerationLoadingIcon from './GenerationLoadingIcon'
42
42
  import GraphQLIcon from './GraphQLIcon'
43
43
  import KeyIcon from './KeyIcon'
44
+ import LabelIcon from './LabelIcon'
44
45
  import LayersIcon from './LayersIcon'
45
46
  import LensIcon from './LensIcon'
46
47
  import LiveIcon from './LiveIcon'
47
48
  import LoadingAppIcon from './LoadingAppIcon'
48
49
  import LogOutIcon from './LogOutIcon'
49
50
  import MetricsIcon from './MetricsIcon'
50
- import RestartIcon from './RestartIcon'
51
51
  import PlayIcon from './PlayIcon'
52
52
  import PullRequestIcon from './PullRequestIcon'
53
53
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
54
+ import RestartIcon from './RestartIcon'
55
+ import RocketIcon from './RocketIcon'
54
56
  import SendIcon from './SendIcon'
55
57
  import SocialDiscordIcon from './SocialDiscordIcon'
56
58
  import SocialGitHubIcon from './SocialGitHubIcon'
@@ -114,6 +116,7 @@ export default {
114
116
  GenerationLoadingIcon,
115
117
  GraphQLIcon,
116
118
  KeyIcon,
119
+ LabelIcon,
117
120
  LayersIcon,
118
121
  LensIcon,
119
122
  LiveIcon,
@@ -124,6 +127,7 @@ export default {
124
127
  PullRequestIcon,
125
128
  PullRequestLoadingIcon,
126
129
  RestartIcon,
130
+ RocketIcon,
127
131
  SendIcon,
128
132
  StopIcon,
129
133
  SocialDiscordIcon,
package/src/stories/backgrounds/AppBackgroundIcon.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict'
2
+ import React from 'react'
3
+ import AppBackgroundIcon from '../../components/backgrounds/AppBackgroundIcon'
4
+
5
+ export default {
6
+ title: 'Platformatic/Backgrounds/App',
7
+ component: AppBackgroundIcon
8
+ }
9
+
10
+ const Template = () => <AppBackgroundIcon />
11
+
12
+ export const DefaultApp = Template.bind({})
13
+
14
+ DefaultApp.args = {}
package/src/stories/backgrounds/LensBackgroundIcon.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict'
2
+ import React from 'react'
3
+ import LensBackgroundIcon from '../../components/backgrounds/LensBackgroundIcon'
4
+
5
+ export default {
6
+ title: 'Platformatic/Backgrounds/Lens',
7
+ component: LensBackgroundIcon
8
+ }
9
+
10
+ const Template = () => <LensBackgroundIcon />
11
+
12
+ export const DefaultApp = Template.bind({})
13
+
14
+ DefaultApp.args = {}
package/src/stories/backgrounds/TimerBackgroundIcon.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict'
2
+ import React from 'react'
3
+ import TimerBackgroundIcon from '../../components/backgrounds/TimerBackgroundIcon'
4
+
5
+ export default {
6
+ title: 'Platformatic/Backgrounds/Timer',
7
+ component: TimerBackgroundIcon
8
+ }
9
+
10
+ const Template = () => <TimerBackgroundIcon />
11
+
12
+ export const DefaultApp = Template.bind({})
13
+
14
+ DefaultApp.args = {}