@platformatic/ui-components 0.1.62 → 0.1.64

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.86ac9c31.js → index.f5218dec.js} +1 -1
  2. package/dist/index.html +1 -1
  3. package/index.js +3 -1
  4. package/package.json +1 -1
  5. package/src/components/CopyAndPaste.jsx +62 -0
  6. package/src/components/FollowUs.jsx +36 -12
  7. package/src/components/FollowUs.module.css +12 -5
  8. package/src/components/Sidebar.jsx +1 -0
  9. package/src/components/constants.js +1 -0
  10. package/src/components/forms/Preview.jsx +33 -13
  11. package/src/components/forms/Preview.module.css +1 -1
  12. package/src/components/icons/LoadingAppIcon.jsx +19 -0
  13. package/src/stories/CopyAndPaste.stories.jsx +28 -0
  14. package/src/stories/FollowUs.stories.jsx +8 -2
  15. package/src/stories/forms/Preview.stories.jsx +21 -5
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.86ac9c31.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.f5218dec.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.560569d1.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 CopyAndPaste from './src/components/CopyAndPaste'
7
8
  import Checkbox from './src/components/Checkbox'
8
9
  import DetailedMetric from './src/components/DetailedMetric'
9
10
  import DropDown from './src/components/DropDown'
@@ -21,7 +22,7 @@ import Loadable from './src/components/Loadable'
21
22
  import LoadingSpinner from './src/components/LoadingSpinner'
22
23
  import LoginButton from './src/components/LoginButton'
23
24
  import Logo from './src/components/Logo'
24
- import Logos from './src/components/logs'
25
+ import Logos from './src/components/logos'
25
26
  import Modal from './src/components/Modal'
26
27
  import PlatformaticIcon from './src/components/PlatformaticIcon'
27
28
  import Playground from './src/components/Playground'
@@ -41,6 +42,7 @@ export {
41
42
  Button,
42
43
  ButtonFullRounded,
43
44
  Checkbox,
45
+ CopyAndPaste,
44
46
  DetailedMetric,
45
47
  DropDown,
46
48
  FollowUs,
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.62",
4
+ "version": "0.1.64",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/CopyAndPaste.jsx ADDED
@@ -0,0 +1,62 @@
1
+
2
+ import PropTypes from 'prop-types'
3
+ import { COLORS_ICON, MEDIUM, SIZES } from './constants'
4
+ import { useState } from 'react'
5
+ import PlatformaticIcon from './PlatformaticIcon'
6
+ import ReactTooltip from 'react-tooltip'
7
+
8
+ function CopyAndPaste ({ value, tooltipLabel, color, timeout, size }) {
9
+ const [copied, setCopied] = useState(false)
10
+
11
+ function copy () {
12
+ navigator.clipboard.writeText(value)
13
+ setCopied(true)
14
+ setTimeout(() => {
15
+ setCopied(false)
16
+ }, timeout)
17
+ }
18
+
19
+ return !copied
20
+ ? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} />)
21
+ : (
22
+ <>
23
+ <span data-tip={tooltipLabel} data-place='top'>
24
+ <PlatformaticIcon size={size} iconName='CircleCheckMarkIcon' color={color} onClick={null} />
25
+ </span>
26
+ <ReactTooltip place='top' type='info' />
27
+ </>
28
+ )
29
+ }
30
+
31
+ CopyAndPaste.propTypes = {
32
+ /**
33
+ * value
34
+ */
35
+ value: PropTypes.string,
36
+ /**
37
+ * tooltipLabel
38
+ */
39
+ tooltipLabel: PropTypes.string,
40
+ /**
41
+ * size
42
+ */
43
+ size: PropTypes.oneOf(SIZES),
44
+ /**
45
+ * color
46
+ */
47
+ color: PropTypes.oneOf(COLORS_ICON),
48
+ /**
49
+ * timeout
50
+ */
51
+ timeout: PropTypes.number
52
+ }
53
+
54
+ CopyAndPaste.defaultProps = {
55
+ value: 'app',
56
+ tooltipLabel: 'Create your app now',
57
+ color: 'main-dark-blue',
58
+ timeout: 1500,
59
+ size: MEDIUM
60
+ }
61
+
62
+ export default CopyAndPaste
package/src/components/FollowUs.jsx CHANGED
@@ -1,34 +1,58 @@
1
1
  import React from 'react'
2
+ import PropTypes from 'prop-types'
2
3
  import styles from './FollowUs.module.css'
3
4
  import Icons from './icons'
5
+ import { MAIN_GREEN, WHITE, MEDIUM } from './constants'
6
+
7
+ function FollowUs ({ label, useOnFrontpage }) {
8
+ const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
9
+ const iconColor = useOnFrontpage ? WHITE : MAIN_GREEN
10
+ const className = styles[`container${suffix}`]
11
+ const iconClassName = styles[`icon${suffix}`]
12
+ const labelClassName = styles[`label${suffix}`]
4
13
 
5
- export default function FollowUs ({ label = 'FOLLOW US ON' }) {
6
14
  return (
7
- <div className={styles.container}>
8
- <div className={styles.label}>
15
+ <div className={className}>
16
+ <div className={labelClassName}>
9
17
  {label}
10
18
  </div>
11
- <div className={styles.icon}>
19
+ <div className={iconClassName}>
12
20
  <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
13
- <Icons.SocialTwitterIcon color='white' size='medium' />
21
+ <Icons.SocialTwitterIcon color={iconColor} size={MEDIUM} />
14
22
  </a>
15
23
  </div>
16
- <div className={styles.icon}>
24
+ <div className={iconClassName}>
17
25
  <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
18
- <Icons.SocialLinkedInIcon color='white' size='medium' />
26
+ <Icons.SocialLinkedInIcon color={iconColor} size={MEDIUM} />
19
27
  </a>
20
28
  </div>
21
- <div className={styles.icon}>
29
+ <div className={iconClassName}>
22
30
  <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
23
- <Icons.SocialGitHubIcon color='white' size='medium' />
31
+ <Icons.SocialGitHubIcon color={iconColor} size={MEDIUM} />
24
32
  </a>
25
33
  </div>
26
- <div className={styles.icon}>
34
+ <div className={iconClassName}>
27
35
  <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
28
- <Icons.SocialDiscordIcon color='white' size='medium' />
36
+ <Icons.SocialDiscordIcon color={iconColor} size={MEDIUM} />
29
37
  </a>
30
38
  </div>
31
-
32
39
  </div>
33
40
  )
34
41
  }
42
+
43
+ FollowUs.propTypes = {
44
+ /**
45
+ * label
46
+ */
47
+ label: PropTypes.string,
48
+ /**
49
+ * frontPageAspect
50
+ */
51
+ frontPageAspect: PropTypes.bool
52
+ }
53
+
54
+ FollowUs.defaultProps = {
55
+ label: 'Follow us on',
56
+ useOnFrontpage: true
57
+ }
58
+ export default FollowUs
package/src/components/FollowUs.module.css CHANGED
@@ -1,11 +1,18 @@
1
- .container {
1
+ .containerFrontpage {
2
2
  @apply flex w-full items-center;
3
3
  }
4
-
5
- .label {
4
+ .containerDashboard {
5
+ @apply flex items-center;
6
+ }
7
+ .labelFrontpage {
6
8
  @apply uppercase text-light-green tracking-more-widest text-sm mr-8;
7
9
  }
8
-
9
- .icon {
10
+ .labelDashboard {
11
+ @apply text-white text-xs mr-2;
12
+ }
13
+ .iconFrontpage {
10
14
  @apply text-white mx-4 text-xl;
11
15
  }
16
+ .iconDashboard {
17
+ @apply mx-2;
18
+ }
package/src/components/Sidebar.jsx CHANGED
@@ -92,6 +92,7 @@ function Sidebar (props) {
92
92
  <PlatformaticIcon
93
93
  iconName='CircleAddIcon'
94
94
  color='white'
95
+ size='medium'
95
96
  tip={addTitle}
96
97
  />
97
98
  {!collapsed && <span className={styles.item}>{addTitle}</span>}
package/src/components/constants.js CHANGED
@@ -3,6 +3,7 @@ export const COLORS_BUTTON = ['main-green', 'dark-green', 'light-green', 'main-d
3
3
  export const COLORS_BORDERED_BOX = ['main-green', 'error-red', 'white', 'dark-blue', 'warning-yellow', 'transparent']
4
4
  export const WHITE = 'white'
5
5
  export const MAIN_DARK_BLUE = 'main-dark-blue'
6
+ export const MAIN_GREEN = 'main-green'
6
7
  export const SMALL = 'small'
7
8
  export const MEDIUM = 'medium'
8
9
  export const LARGE = 'large'
package/src/components/forms/Preview.jsx CHANGED
@@ -2,27 +2,30 @@ import React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Preview.module.css'
4
4
  import PlatformaticIcon from '../PlatformaticIcon'
5
+ import CopyAndPaste from '../CopyAndPaste'
6
+ import { SIZES, COLORS_ICON } from '../constants'
5
7
 
6
8
  function renderLink (value) {
7
9
  return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
8
10
  }
9
11
 
10
- function renderParagraph (value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon) {
12
+ function renderParagraph (value, useCopyAndPaste, copyAndPaste, usePlatformaticIcon, platformaticIcon) {
11
13
  return (
12
14
  <>
13
15
  <p className={styles.value}>
14
16
  {value}
15
- {afterValueIcon && (<PlatformaticIcon iconName={afterValueIcon} color={afterValueIconColor} size='medium' classes={styles.afterIcon} onClick={() => onClickAfterValueIcon} />)}
17
+ {useCopyAndPaste && (<CopyAndPaste {...copyAndPaste} />)}
18
+ {usePlatformaticIcon && (<PlatformaticIcon {...platformaticIcon} />)}
16
19
  </p>
17
20
  </>
18
21
  )
19
22
  }
20
- function Preview ({ title, value, isLink, children, afterValueIcon, afterValueIconColor, onClickAfterValueIcon }) {
23
+ function Preview ({ title, value, isLink, children, useCopyAndPaste, copyAndPaste, usePlatformaticIcon, platformaticIcon }) {
21
24
  return (
22
25
  <>
23
26
  <div className={styles.container}>
24
27
  <p className={styles.title}>{title}</p>
25
- {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon)}
28
+ {isLink ? renderLink(value) : renderParagraph(value, useCopyAndPaste, copyAndPaste, usePlatformaticIcon, platformaticIcon)}
26
29
  </div>
27
30
  {children}
28
31
  </>
@@ -50,26 +53,43 @@ Preview.propTypes = {
50
53
  */
51
54
  children: PropTypes.node,
52
55
  /**
53
- * afterValueIcon
56
+ * useCopyAndPaste
54
57
  */
55
- afterValueIcon: PropTypes.string,
58
+ useCopyAndPaste: PropTypes.bool,
56
59
  /**
57
- * afterValueIconColor
60
+ * copyAndPaste
58
61
  */
59
- afterValueIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
62
+ copyAndPaste: PropTypes.shape({
63
+ value: PropTypes.string,
64
+ tooltipLabel: PropTypes.string,
65
+ iconSize: PropTypes.oneOf(SIZES),
66
+ iconColor: PropTypes.oneOf(COLORS_ICON),
67
+ timeout: PropTypes.number
68
+ }),
60
69
  /**
61
- * onClickAfterValueIcon
70
+ * usePlatformaticIcon
62
71
  */
63
- onClickAfterValueIcon: PropTypes.func
72
+ usePlatformaticIcon: PropTypes.bool,
73
+ /**
74
+ * platformaticIcon
75
+ */
76
+ platformaticIcon: PropTypes.shape({
77
+ iconName: PropTypes.string.isRequired,
78
+ color: PropTypes.oneOf(COLORS_ICON),
79
+ size: PropTypes.oneOf(SIZES),
80
+ onClick: PropTypes.func
81
+ })
64
82
  }
65
83
 
66
84
  Preview.defaultProps = {
67
85
  title: '',
68
86
  value: '',
69
87
  isLink: false,
70
- afterValueIconColor: 'main-dark-blue',
71
- afterValueIcon: null,
72
- onClickAfterValueIcon: () => {}
88
+ children: null,
89
+ useCopyAndPaste: false,
90
+ copyAndPaste: null,
91
+ platformaticIcon: null,
92
+ usePlatformaticIcon: false
73
93
  }
74
94
 
75
95
  export default Preview
package/src/components/forms/Preview.module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @apply text-sm text-main-dark-blue pb-1;
6
6
  }
7
7
  .value {
8
- @apply text-xl font-semibold text-main-dark-blue inline-flex;
8
+ @apply text-xl font-semibold text-main-dark-blue flex items-center gap-x-2;
9
9
  }
10
10
  .link {
11
11
  @apply font-semibold;
package/src/components/icons/LoadingAppIcon.jsx CHANGED
@@ -29,6 +29,25 @@ const LoadingAppIcon = ({ color, size }) => {
29
29
  )
30
30
  break
31
31
 
32
+ case 'extra-large':
33
+ icon = (
34
+ <svg
35
+ width='105'
36
+ height='104'
37
+ viewBox='0 0 105 104'
38
+ fill='none'
39
+ xmlns='http://www.w3.org/2000/svg'
40
+ className={className}
41
+ >
42
+ <rect x={4.5} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
43
+ <rect x={8.5} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
44
+ <path d='M54.3526 56.027L50.5 52.8917L29.4868 68L37.5132 43.5542L16.5 28.4458L42.4737 28.4458L50.5 4L58.5263 28.4458L84.5 28.4458L63.4868 43.5542L64.8673 45.6216' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
45
+ <circle cx={69.0579} cy={60.71} r={11.0305} stroke='none' strokeWidth={3} />
46
+ <path d='M84.5006 76.1527L77.8823 69.5344' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
47
+ </svg>
48
+ )
49
+
50
+ break
32
51
  default:
33
52
  break
34
53
  }
package/src/stories/CopyAndPaste.stories.jsx ADDED
@@ -0,0 +1,28 @@
1
+ import React from 'react'
2
+ import CopyAndPaste from '../components/CopyAndPaste'
3
+
4
+ const divStyle = {
5
+ width: '100%',
6
+ height: 'auto',
7
+ padding: '50px',
8
+ backgroundColor: 'white'
9
+ }
10
+
11
+ export default {
12
+ title: 'Platformatic/CopyAndPaste',
13
+ component: CopyAndPaste,
14
+ decorators: [
15
+ (Story) => (
16
+ <div style={divStyle}>
17
+ <Story />
18
+ </div>
19
+ )
20
+ ]
21
+ }
22
+
23
+ const Template = (args) => <CopyAndPaste {...args} />
24
+ export const CopyAndPasteDefault = Template.bind({})
25
+ CopyAndPasteDefault.args = {
26
+ value: 'copy this value',
27
+ tooltipLabel: 'Tooltip show'
28
+ }
package/src/stories/FollowUs.stories.jsx CHANGED
@@ -8,7 +8,13 @@ export default {
8
8
 
9
9
  const Template = (args) => <FollowUs {...args} />
10
10
 
11
- export const FollowUsDefault = Template.bind({})
12
- FollowUsDefault.args = {
11
+ export const FollowUsFrontpage = Template.bind({})
12
+ FollowUsFrontpage.args = {
13
13
  label: 'Follow us on'
14
14
  }
15
+
16
+ export const FollowUsDashboard = Template.bind({})
17
+ FollowUsDashboard.args = {
18
+ label: 'Follow us:',
19
+ useOnFrontpage: false
20
+ }
package/src/stories/forms/Preview.stories.jsx CHANGED
@@ -46,12 +46,28 @@ WithChildren.args = {
46
46
  value: 'My value'
47
47
  }
48
48
 
49
- export const WithIcon = Template.bind({})
49
+ export const WithPlatformaticIcon = Template.bind({})
50
50
 
51
- WithIcon.args = {
51
+ WithPlatformaticIcon.args = {
52
52
  title: 'My title',
53
53
  value: 'My value',
54
- afterValueIcon: 'WorkspaceStaticIcon',
55
- afterValueIconColor: 'main-green',
56
- onClickAfterValueIcon: () => alert('icon clicked')
54
+ usePlatformaticIcon: true,
55
+ platformaticIcon: {
56
+ iconName: 'WorkspaceStaticIcon',
57
+ color: 'main-green',
58
+ onClick: () => alert('icon clicked')
59
+ }
60
+ }
61
+
62
+ export const WithCopyAndPasteIcon = Template.bind({})
63
+
64
+ WithCopyAndPasteIcon.args = {
65
+ title: 'My title',
66
+ value: 'My value',
67
+ useCopyAndPaste: true,
68
+ copyAndPaste: {
69
+ color: 'main-dark-blue',
70
+ value: 'My value',
71
+ tooltipLabel: 'Great! My Value copied!!'
72
+ }
57
73
  }