@platformatic/ui-components 0.6.0 → 0.6.2

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 (24) hide show
  1. package/dist/assets/index-CTXhzp-V.js +40 -0
  2. package/dist/index.html +1 -1
  3. package/dist/main.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/CopyAndPaste.jsx +7 -2
  6. package/src/components/constants.js +2 -1
  7. package/src/components/icons/AddEnvVariableIcon.jsx +97 -0
  8. package/src/components/icons/AllAppsIcon.jsx +21 -1
  9. package/src/components/icons/AppDetailsIcon.jsx +17 -1
  10. package/src/components/icons/CheckListIcon.jsx +22 -1
  11. package/src/components/icons/CodeTestingIcon.jsx +23 -3
  12. package/src/components/icons/DeploymentHistoryIcon.jsx +24 -1
  13. package/src/components/icons/DownloadIcon.jsx +93 -0
  14. package/src/components/icons/GearIcon.jsx +17 -1
  15. package/src/components/icons/InfrastructureIcon.jsx +24 -1
  16. package/src/components/icons/MetricsLogsIcon.jsx +26 -1
  17. package/src/components/icons/PlatformaticServiceIcon.jsx +19 -3
  18. package/src/components/icons/ResourceIcon.jsx +22 -1
  19. package/src/components/icons/RocketIcon.jsx +19 -1
  20. package/src/components/icons/TaxonomyIcon.jsx +26 -4
  21. package/src/components/icons/index.js +4 -0
  22. package/src/stories/CopyAndPaste.stories.jsx +2 -1
  23. package/src/stories/PlatformaticIcon.stories.jsx +9 -0
  24. package/dist/assets/index-DIt4e34R.js +0 -40
package/src/components/icons/ResourceIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const ResourceIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -61,6 +61,27 @@ const ResourceIcon = ({
61
61
  </svg>
62
62
  )
63
63
  break
64
+ case EXTRA_MEDIUM:
65
+ icon = (
66
+ <svg
67
+ width={32}
68
+ height={32}
69
+ viewBox='0 0 32 32'
70
+ fill='none'
71
+ xmlns='http://www.w3.org/2000/svg'
72
+ className={className}
73
+ >
74
+ <path d='M14 10V5C14 4.44772 13.5523 4 13 4H5C4.44772 4 4 4.44772 4 5V13C4 13.5523 4.44772 14 5 14H10.25' stroke='none' strokeWidth={1.5} />
75
+ <path d='M18 23.8333L18 27C18 27.5523 18.4477 28 19 28L27 28C27.5523 28 28 27.5523 28 27L28 19C28 18.4477 27.5523 18 27 18L21.75 18' stroke='none' strokeWidth={1.5} />
76
+ <path d='M22 14L27 14C27.5523 14 28 13.5523 28 13L28 5C28 4.44772 27.5523 4 27 4L19 4C18.4477 4 18 4.44772 18 5L18 9' stroke='none' strokeWidth={1.5} />
77
+ <path d='M10 18L5 18C4.44772 18 4 18.4477 4 19L4 27C4 27.5523 4.44771 28 5 28L13 28C13.5523 28 14 27.5523 14 27L14 23' stroke='none' strokeWidth={1.5} />
78
+ <rect x='10' y='10' width='12' height='14' rx='1' stroke='none' strokeWidth={1.5} />
79
+ <path d='M12.7871 12.8198H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
80
+ <path d='M12.7871 16.7539H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
81
+ <path d='M12.7871 20.6885H19' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
82
+ </svg>
83
+ )
84
+ break
64
85
  case LARGE:
65
86
  icon = (
66
87
  <svg
package/src/components/icons/RocketIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const RocketIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -57,6 +57,24 @@ const RocketIcon = ({
57
57
  </svg>
58
58
  )
59
59
  break
60
+ case EXTRA_MEDIUM:
61
+ icon = (
62
+ <svg
63
+ width={32}
64
+ height={32}
65
+ viewBox='0 0 32 32'
66
+ fill='none'
67
+ xmlns='http://www.w3.org/2000/svg'
68
+ className={className}
69
+ >
70
+ <path d='M12.1054 17.1576L8.77172 13.8239C8.63919 13.6914 8.54619 13.5239 8.50405 13.3413L7.23262 7.83176C7.14953 7.47172 7.47221 7.14905 7.83225 7.23214L13.3418 8.50356C13.5244 8.5457 13.6915 8.63832 13.824 8.77085L17.1581 12.1049L22.8423 12.7366L19.8107 15.7682L20.5686 17.5366L17.537 20.5682L15.7685 19.8103L12.7369 22.8419L12.1054 17.1576Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
71
+ <path d='M18.4209 23.4736L20.9472 26' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
72
+ <path d='M22.2109 22.21L24.7373 24.7363' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
73
+ <path d='M23.4736 18.4209L26 20.9472' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
74
+ <circle cx='12' cy='11.9995' r='2' stroke='none' strokeWidth={1.5} />
75
+ </svg>
76
+ )
77
+ break
60
78
  case LARGE:
61
79
  icon = (
62
80
  <svg
package/src/components/icons/TaxonomyIcon.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Icons.module.css'
4
- import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, EXTRA_MEDIUM } from '../constants'
5
5
 
6
6
  const TaxonomyIcon = ({
7
7
  color = MAIN_DARK_BLUE,
@@ -41,7 +41,6 @@ const TaxonomyIcon = ({
41
41
  <path d='M12.8851 13.7534C13.5007 13.7534 13.9997 13.2559 13.9997 12.6423C13.9997 12.0287 13.5007 11.5312 12.8851 11.5312C12.2695 11.5312 11.7705 12.0287 11.7705 12.6423C11.7705 13.2559 12.2695 13.7534 12.8851 13.7534Z' stroke='none' />
42
42
  <path d='M7.04161 10.4999L5.06934 12.3636' stroke='none' />
43
43
  <path d='M4.46678 14C5.04062 14 5.50582 13.5363 5.50582 12.9643C5.50582 12.3923 5.04062 11.9286 4.46678 11.9286C3.89293 11.9286 3.42773 12.3923 3.42773 12.9643C3.42773 13.5363 3.89293 14 4.46678 14Z' stroke='none' />
44
-
45
44
  </svg>
46
45
  )
47
46
  break
@@ -55,7 +54,6 @@ const TaxonomyIcon = ({
55
54
  xmlns='http://www.w3.org/2000/svg'
56
55
  className={className}
57
56
  >
58
-
59
57
  <path d='M13.6584 14.5295C14.5633 14.5295 15.2963 13.8195 15.2963 12.9429C15.2963 12.0663 14.5633 11.3564 13.6584 11.3564C12.7535 11.3564 12.0205 12.0663 12.0205 12.9429C12.0205 13.8195 12.7535 14.5295 13.6584 14.5295Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
60
58
  <path d='M14.5706 8.82269V9.37068C14.5706 9.4752 14.6367 9.56935 14.7368 9.60608L15.45 9.87066C15.5473 9.90644 15.6569 9.88195 15.7287 9.80663L16.0715 9.44601C16.1726 9.33961 16.3445 9.33867 16.4465 9.44601L17.274 10.3047C17.3666 10.4008 17.3675 10.5505 17.2768 10.6475L16.8357 11.122C16.7658 11.1973 16.7488 11.3056 16.7923 11.3979L17.0907 12.0297C17.1332 12.1182 17.2239 12.1766 17.3241 12.1766H17.7812C17.9229 12.1766 18.0382 12.2895 18.0382 12.428V13.4882C18.0382 13.6275 17.9229 13.7396 17.7812 13.7396H17.3004C17.189 13.7396 17.0907 13.8102 17.0558 13.9138L16.813 14.6435C16.7837 14.7292 16.8045 14.8233 16.8669 14.8902L17.2617 15.3176C17.3581 15.4222 17.3486 15.5841 17.24 15.6764L16.3294 16.4569C16.2246 16.5464 16.0659 16.5389 15.9714 16.439L15.654 16.1038C15.5851 16.0304 15.4774 16.004 15.381 16.037L14.7179 16.2639C14.614 16.2997 14.5451 16.3948 14.5451 16.5021V17.0012C14.5451 17.1405 14.4298 17.2526 14.2882 17.2526H13.0782C12.9365 17.2526 12.8212 17.1396 12.8212 17.0012V16.5021C12.8212 16.3948 12.7523 16.2997 12.6484 16.2639L11.9853 16.037C11.8889 16.004 11.7822 16.0295 11.7123 16.1038L11.3949 16.439C11.3004 16.5389 11.1418 16.5473 11.0369 16.4569L10.1263 15.6764C10.0177 15.5841 10.0083 15.4222 10.1046 15.3176L10.4994 14.8902C10.5608 14.8233 10.5816 14.7292 10.5533 14.6435L10.3105 13.9138C10.2756 13.8102 10.1773 13.7396 10.0659 13.7396H9.58603C9.44434 13.7396 9.3291 13.6266 9.3291 13.4882V12.428C9.3291 12.2886 9.44434 12.1766 9.58603 12.1766H10.0432C10.1433 12.1766 10.235 12.1201 10.2765 12.0297L10.575 11.3979C10.6185 11.3056 10.6015 11.1973 10.5325 11.122L10.0914 10.6475C10.0007 10.5505 10.0016 10.4008 10.0942 10.3047L10.9217 9.44601C11.0237 9.34055 11.1956 9.34055 11.2957 9.44601L11.6386 9.80663C11.7095 9.88195 11.82 9.90644 11.9173 9.87066L12.6304 9.60608C12.7305 9.56935 12.7967 9.4752 12.7967 9.37068V8.82269C12.7967 8.68334 12.9119 8.57129 13.0536 8.57129H14.3099C14.4516 8.57129 14.5668 8.68428 14.5668 8.82269H14.5706Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61
59
  <path d='M13.6309 8.78501V5.86365' stroke='none' strokeWidth={1.5} />
@@ -68,7 +66,31 @@ const TaxonomyIcon = ({
68
66
  <path d='M19.3277 20.63C20.251 20.63 20.9996 19.8839 20.9996 18.9635C20.9996 18.043 20.251 17.2969 19.3277 17.2969C18.4043 17.2969 17.6558 18.043 17.6558 18.9635C17.6558 19.8839 18.4043 20.63 19.3277 20.63Z' stroke='none' strokeWidth={1.5} />
69
67
  <path d='M10.5624 15.7498L7.604 18.5454' stroke='none' strokeWidth={1.5} />
70
68
  <path d='M6.70016 21.0001C7.56093 21.0001 8.25873 20.3045 8.25873 19.4465C8.25873 18.5884 7.56093 17.8929 6.70016 17.8929C5.83939 17.8929 5.1416 18.5884 5.1416 19.4465C5.1416 20.3045 5.83939 21.0001 6.70016 21.0001Z' stroke='none' strokeWidth={1.5} />
71
-
69
+ </svg>
70
+ )
71
+ break
72
+ case EXTRA_MEDIUM:
73
+ icon = (
74
+ <svg
75
+ width={32}
76
+ height={32}
77
+ viewBox='0 0 32 32'
78
+ fill='none'
79
+ xmlns='http://www.w3.org/2000/svg'
80
+ className={className}
81
+ >
82
+ <path d='M18.7211 20.1505C20.206 20.1505 21.4089 18.9854 21.4089 17.5469C21.4089 16.1084 20.206 14.9434 18.7211 14.9434C17.2361 14.9434 16.0332 16.1084 16.0332 17.5469C16.0332 18.9854 17.2361 20.1505 18.7211 20.1505Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
83
+ <path d='M20.2181 10.7856V11.6849C20.2181 11.8564 20.3266 12.0109 20.4909 12.0712L21.6612 12.5053C21.8209 12.5641 22.0007 12.5239 22.1185 12.4003L22.6812 11.8085C22.8471 11.6339 23.1292 11.6323 23.2966 11.8085L24.6545 13.2177C24.8064 13.3753 24.8079 13.6209 24.6591 13.7801L23.9352 14.5588C23.8205 14.6824 23.7926 14.8601 23.8639 15.0116L24.3537 16.0483C24.4235 16.1936 24.5723 16.2894 24.7366 16.2894H25.4869C25.7194 16.2894 25.9085 16.4748 25.9085 16.7019V18.4418C25.9085 18.6705 25.7194 18.8543 25.4869 18.8543H24.6979C24.515 18.8543 24.3537 18.9702 24.2964 19.1402L23.898 20.3377C23.85 20.4783 23.8841 20.6328 23.9864 20.7425L24.6343 21.444C24.7924 21.6155 24.7769 21.8813 24.5987 22.0327L23.1044 23.3136C22.9323 23.4604 22.6719 23.448 22.5169 23.2842L21.9961 22.7342C21.8829 22.6137 21.7062 22.5704 21.5481 22.6245L20.4599 22.9968C20.2894 23.0556 20.1763 23.2116 20.1763 23.3878V24.2067C20.1763 24.4354 19.9872 24.6192 19.7546 24.6192H17.769C17.5365 24.6192 17.3474 24.4338 17.3474 24.2067V23.3878C17.3474 23.2116 17.2342 23.0556 17.0637 22.9968L15.9755 22.6245C15.8174 22.5704 15.6423 22.6121 15.5276 22.7342L15.0067 23.2842C14.8517 23.448 14.5913 23.4619 14.4193 23.3136L12.925 22.0327C12.7467 21.8813 12.7312 21.6155 12.8893 21.444L13.5373 20.7425C13.638 20.6328 13.6721 20.4783 13.6256 20.3377L13.2272 19.1402C13.1699 18.9702 13.0087 18.8543 12.8258 18.8543H12.0383C11.8058 18.8543 11.6167 18.6689 11.6167 18.4418V16.7019C11.6167 16.4733 11.8058 16.2894 12.0383 16.2894H12.7886C12.9529 16.2894 13.1032 16.1967 13.1714 16.0483L13.6613 15.0116C13.7326 14.8601 13.7047 14.6824 13.5915 14.5588L12.8676 13.7801C12.7188 13.6209 12.7204 13.3753 12.8723 13.2177L14.2301 11.8085C14.3976 11.6354 14.6797 11.6354 14.844 11.8085L15.4067 12.4003C15.5229 12.5239 15.7043 12.5641 15.8639 12.5053L17.0342 12.0712C17.1986 12.0109 17.3071 11.8564 17.3071 11.6849V10.7856C17.3071 10.5569 17.4962 10.373 17.7287 10.373H19.7903C20.0228 10.373 20.2119 10.5585 20.2119 10.7856H20.2181Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
84
+ <path d='M18.6768 10.7237V5.92969' stroke='none' strokeWidth={1.5} />
85
+ <path d='M18.7656 6.32943C20.1782 6.32943 21.3233 5.18799 21.3233 3.77995C21.3233 2.37191 20.1782 1.23047 18.7656 1.23047C17.3531 1.23047 16.208 2.37191 16.208 3.77995C16.208 5.18799 17.3531 6.32943 18.7656 6.32943Z' stroke='none' strokeWidth={1.5} />
86
+ <path d='M11.6229 17.5811H4.74512' stroke='none' strokeWidth={1.5} />
87
+ <path d='M3.08331 19.5156C4.10633 19.5156 4.93566 18.689 4.93566 17.6692C4.93566 16.6494 4.10633 15.8228 3.08331 15.8228C2.06028 15.8228 1.23096 16.6494 1.23096 17.6692C1.23096 18.689 2.06028 19.5156 3.08331 19.5156Z' stroke='none' strokeWidth={1.5} />
88
+ <path d='M24.1455 12.6133L26.9696 9.95752' stroke='none' strokeWidth={1.5} />
89
+ <path d='M28.0304 10.7887C29.1347 10.7887 30.03 9.89631 30.03 8.79548C30.03 7.69465 29.1347 6.80225 28.0304 6.80225C26.926 6.80225 26.0308 7.69465 26.0308 8.79548C26.0308 9.89631 26.926 10.7887 28.0304 10.7887Z' stroke='none' strokeWidth={1.5} />
90
+ <path d='M23.7925 22.853L26.4385 25.6667' stroke='none' strokeWidth={1.5} />
91
+ <path d='M28.0259 30.1617C29.5412 30.1617 30.7695 28.9372 30.7695 27.4268C30.7695 25.9164 29.5412 24.6919 28.0259 24.6919C26.5106 24.6919 25.2822 25.9164 25.2822 27.4268C25.2822 28.9372 26.5106 30.1617 28.0259 30.1617Z' stroke='none' strokeWidth={1.5} />
92
+ <path d='M13.641 22.1533L8.78613 26.741' stroke='none' strokeWidth={1.5} />
93
+ <path d='M7.30276 30.7689C8.7153 30.7689 9.8604 29.6274 9.8604 28.2194C9.8604 26.8114 8.7153 25.6699 7.30276 25.6699C5.89021 25.6699 4.74512 26.8114 4.74512 28.2194C4.74512 29.6274 5.89021 30.7689 7.30276 30.7689Z' stroke='none' strokeWidth={1.5} />
72
94
  </svg>
73
95
  )
74
96
  break
package/src/components/icons/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import AddIcon from './AddIcon'
2
+ import AddEnvVariableIcon from './AddEnvVariableIcon'
2
3
  import AlertIcon from './AlertIcon'
3
4
  import AllAppsIcon from './AllAppsIcon'
4
5
  import AllInOneIcon from './AllInOneIcon'
@@ -66,6 +67,7 @@ import DatabaseIcon from './DatabaseIcon'
66
67
  import DatabaseMigrationIcon from './DatabaseMigrationIcon'
67
68
  import DepencenciesReloadIcon from './DepencenciesReloadIcon'
68
69
  import DeploymentHistoryIcon from './DeploymentHistoryIcon'
70
+ import DownloadIcon from './DownloadIcon'
69
71
  import EditDocumentIcon from './EditDocumentIcon'
70
72
  import EditIcon from './EditIcon'
71
73
  import EntrypointIcon from './EntrypointIcon'
@@ -163,6 +165,7 @@ import ZoomOutIcon from './ZoomOutIcon'
163
165
 
164
166
  export default {
165
167
  AddIcon,
168
+ AddEnvVariableIcon,
166
169
  AlertIcon,
167
170
  AllAppsIcon,
168
171
  AllInOneIcon,
@@ -230,6 +233,7 @@ export default {
230
233
  DatabaseMigrationIcon,
231
234
  DepencenciesReloadIcon,
232
235
  DeploymentHistoryIcon,
236
+ DownloadIcon,
233
237
  EditDocumentIcon,
234
238
  EditIcon,
235
239
  EntrypointIcon,
package/src/stories/CopyAndPaste.stories.jsx CHANGED
@@ -26,5 +26,6 @@ export const CopyAndPasteDefault = Template.bind({})
26
26
  CopyAndPasteDefault.args = {
27
27
  value: 'copy this value',
28
28
  tooltipLabel: 'Tooltip show',
29
- color: WHITE
29
+ color: WHITE,
30
+ internalOverHandling: true
30
31
  }
package/src/stories/PlatformaticIcon.stories.jsx CHANGED
@@ -4,6 +4,7 @@ import Icons from '../components/icons'
4
4
  import {
5
5
  COLORS_ICON,
6
6
  EXTRA_LARGE,
7
+ EXTRA_MEDIUM,
7
8
  EXTRA_SMALL,
8
9
  LARGE,
9
10
  MEDIUM,
@@ -104,6 +105,14 @@ const AllIconsTemplate = (args) => {
104
105
  {...args}
105
106
  />
106
107
  </div>
108
+ <div style={col}>
109
+ <PlatformaticIcon
110
+ key={icon}
111
+ iconName={icon}
112
+ size={EXTRA_MEDIUM}
113
+ {...args}
114
+ />
115
+ </div>
107
116
  <div style={col}>
108
117
  <PlatformaticIcon
109
118
  key={icon}