@platformatic/ui-components 0.1.71 → 0.1.72

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 (8) hide show
  1. package/dist/assets/index.89c1e740.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Sidebar.module.css +1 -1
  5. package/src/components/icons/RestartIcon.jsx +79 -0
  6. package/src/components/icons/index.js +2 -0
  7. package/src/components/layouts/Layout.jsx +22 -3
  8. package/dist/assets/index.3420a13d.js +0 -40
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.3420a13d.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.89c1e740.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.a278d949.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.1.71",
4
+ "version": "0.1.72",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Sidebar.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10;
2
+ @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue;
3
3
  transition: max-width 0.2s linear;
4
4
  }
5
5
  .collapsed {
package/src/components/icons/RestartIcon.jsx ADDED
@@ -0,0 +1,79 @@
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 RestartIcon = ({ 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='M11.1765 9.05884V11.8824H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
22
+ <path d='M7.64706 13.2941C4.52827 13.2941 2 10.7658 2 7.64706C2 4.52827 4.52827 2 7.64706 2C10.7658 2 13.2941 4.52827 13.2941 7.64706C13.2941 8.35328 13.1645 9.02922 12.9277 9.65238C12.6843 10.2929 12.3277 10.8777 11.8824 11.3823' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
23
+ </svg>
24
+ )
25
+ break
26
+ case 'medium':
27
+ icon = (
28
+ <svg
29
+ width={24}
30
+ height={24}
31
+ viewBox='0 0 24 24'
32
+ fill='none'
33
+ xmlns='http://www.w3.org/2000/svg'
34
+ className={className}
35
+ >
36
+ <path d='M16.7646 13.5883V17.8236H20.9999' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
37
+ <path d='M11.4706 19.9412C6.79241 19.9412 3 16.1488 3 11.4706C3 6.79241 6.79241 3 11.4706 3C16.1488 3 19.9412 6.79241 19.9412 11.4706C19.9412 12.5299 19.7467 13.5438 19.3916 14.4786C19.0265 15.4394 18.4916 16.3166 17.8235 17.0735' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
38
+ </svg>
39
+ )
40
+ break
41
+ case 'large':
42
+ icon = (
43
+ <svg
44
+ width={40}
45
+ height={40}
46
+ viewBox='0 0 40 40'
47
+ fill='none'
48
+ xmlns='http://www.w3.org/2000/svg'
49
+ className={className}
50
+ >
51
+ <path d='M27.9412 22.647V29.7059H35' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
52
+ <path d='M19.1176 33.2353C11.3207 33.2353 5 26.9146 5 19.1176C5 11.3207 11.3207 5 19.1176 5C26.9146 5 33.2353 11.3207 33.2353 19.1176C33.2353 20.8832 32.9112 22.573 32.3193 24.1309C31.7108 25.7324 30.8193 27.1944 29.7059 28.4559' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
53
+ </svg>
54
+ )
55
+ break
56
+
57
+ default:
58
+ break
59
+ }
60
+ return icon
61
+ }
62
+
63
+ RestartIcon.propTypes = {
64
+ /**
65
+ * color of text, icon and borders
66
+ */
67
+ color: PropTypes.oneOf(COLORS_ICON),
68
+ /**
69
+ * Size
70
+ */
71
+ size: PropTypes.oneOf(SIZES)
72
+ }
73
+
74
+ RestartIcon.defaultProps = {
75
+ color: 'main-dark-blue',
76
+ size: 'medium'
77
+ }
78
+
79
+ export default RestartIcon
package/src/components/icons/index.js CHANGED
@@ -44,6 +44,7 @@ import LiveIcon from './LiveIcon'
44
44
  import LoadingAppIcon from './LoadingAppIcon'
45
45
  import LogOutIcon from './LogOutIcon'
46
46
  import MetricsIcon from './MetricsIcon'
47
+ import RestartIcon from './RestartIcon'
47
48
  import PlayIcon from './PlayIcon'
48
49
  import PullRequestIcon from './PullRequestIcon'
49
50
  import SendIcon from './SendIcon'
@@ -112,6 +113,7 @@ export default {
112
113
  MetricsIcon,
113
114
  PlayIcon,
114
115
  PullRequestIcon,
116
+ RestartIcon,
115
117
  SendIcon,
116
118
  StopIcon,
117
119
  SocialDiscordIcon,
package/src/components/layouts/Layout.jsx CHANGED
@@ -1,11 +1,30 @@
1
1
  'use strict'
2
2
  import React from 'react'
3
+ import PropTypes from 'prop-types'
3
4
 
4
- export default function Layout (props) {
5
+ function Layout ({ className, children }) {
5
6
  return (
6
- <div className='container mx-auto px-5 my-5 flex flex-col gap-10 h-screen'>
7
- {props.children}
7
+ <div className={className}>
8
+ {children}
8
9
  </div>
9
10
 
10
11
  )
11
12
  }
13
+
14
+ Layout.propTypes = {
15
+ /**
16
+ * className
17
+ */
18
+ className: PropTypes.string,
19
+ /**
20
+ * children
21
+ */
22
+ children: PropTypes.node
23
+ }
24
+
25
+ Layout.defaultProps = {
26
+ className: 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
27
+ children: null
28
+ }
29
+
30
+ export default Layout