@platformatic/ui-components 0.1.83 → 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 (15) hide show
  1. package/dist/assets/{index.01fc1888.js → index.bd06830c.js} +8 -8
  2. package/dist/index.html +1 -1
  3. package/index.js +1 -0
  4. package/package.json +1 -1
  5. package/src/components/Button.jsx +1 -1
  6. package/src/components/Button.module.css +3 -0
  7. package/src/components/backgrounds/AppBackgroundIcon.jsx +24 -0
  8. package/src/components/backgrounds/LensBackgroundIcon.jsx +14 -0
  9. package/src/components/backgrounds/TimerBackgroundIcon.jsx +18 -0
  10. package/src/components/backgrounds/index.js +9 -0
  11. package/src/components/icons/RocketIcon.jsx +91 -0
  12. package/src/components/icons/index.js +3 -1
  13. package/src/stories/backgrounds/AppBackgroundIcon.stories.jsx +14 -0
  14. package/src/stories/backgrounds/LensBackgroundIcon.stories.jsx +14 -0
  15. package/src/stories/backgrounds/TimerBackgroundIcon.stories.jsx +14 -0
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.01fc1888.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.bd06830c.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.a6b7ebf4.css">
9
9
  </head>
10
10
  <body>
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.83",
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/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/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
@@ -48,10 +48,11 @@ import LiveIcon from './LiveIcon'
48
48
  import LoadingAppIcon from './LoadingAppIcon'
49
49
  import LogOutIcon from './LogOutIcon'
50
50
  import MetricsIcon from './MetricsIcon'
51
- import RestartIcon from './RestartIcon'
52
51
  import PlayIcon from './PlayIcon'
53
52
  import PullRequestIcon from './PullRequestIcon'
54
53
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
54
+ import RestartIcon from './RestartIcon'
55
+ import RocketIcon from './RocketIcon'
55
56
  import SendIcon from './SendIcon'
56
57
  import SocialDiscordIcon from './SocialDiscordIcon'
57
58
  import SocialGitHubIcon from './SocialGitHubIcon'
@@ -126,6 +127,7 @@ export default {
126
127
  PullRequestIcon,
127
128
  PullRequestLoadingIcon,
128
129
  RestartIcon,
130
+ RocketIcon,
129
131
  SendIcon,
130
132
  StopIcon,
131
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 = {}