@platformatic/ui-components 0.17.5 → 0.19.0

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 (14) hide show
  1. package/dist/assets/{index-DE70C3KG.css → index-C2gI5Mf9.css} +1 -1
  2. package/dist/assets/{index-ClqLkZZ-.js → index-yMgV75tX.js} +1 -1
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +0 -44
  5. package/package.json +7 -10
  6. package/src/components/ArcMetric.jsx +2 -2
  7. package/src/components/ArcMetric.module.css +9 -1
  8. package/src/components/TrendLine.jsx +2 -1
  9. package/src/components/TrendLine.module.css +3 -0
  10. package/src/components/TrendMetric.module.css +1 -1
  11. package/src/components/icons/PodSignalsIcon.jsx +76 -0
  12. package/src/components/icons/index.js +2 -0
  13. package/src/stories/Introduction.mdx +1 -1
  14. package/src/stories/TrendLine.stories.jsx +1 -1
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-ClqLkZZ-.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-DE70C3KG.css">
7
+ <script type="module" crossorigin src="/assets/index-yMgV75tX.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-C2gI5Mf9.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -600,26 +600,10 @@ video {
600
600
  visibility: visible;
601
601
  }
602
602
 
603
- .absolute {
604
- position: absolute;
605
- }
606
-
607
603
  .relative {
608
604
  position: relative;
609
605
  }
610
606
 
611
- .bottom-0 {
612
- bottom: 0px;
613
- }
614
-
615
- .left-0 {
616
- left: 0px;
617
- }
618
-
619
- .right-0 {
620
- right: 0px;
621
- }
622
-
623
607
  .col-span-1 {
624
608
  grid-column: span 1 / span 1;
625
609
  }
@@ -666,10 +650,6 @@ video {
666
650
  display: none;
667
651
  }
668
652
 
669
- .h-full {
670
- height: 100%;
671
- }
672
-
673
653
  .h-screen {
674
654
  height: 100vh;
675
655
  }
@@ -678,10 +658,6 @@ video {
678
658
  width: 25%;
679
659
  }
680
660
 
681
- .w-full {
682
- width: 100%;
683
- }
684
-
685
661
  .grow {
686
662
  flex-grow: 1;
687
663
  }
@@ -710,10 +686,6 @@ video {
710
686
  align-items: center;
711
687
  }
712
688
 
713
- .justify-center {
714
- justify-content: center;
715
- }
716
-
717
689
  .gap-10 {
718
690
  gap: 2.5rem;
719
691
  }
@@ -783,14 +755,6 @@ video {
783
755
  line-height: 1;
784
756
  }
785
757
 
786
- .text-\[1\.2rem\] {
787
- font-size: 1.2rem;
788
- }
789
-
790
- .text-\[2\.3rem\] {
791
- font-size: 2.3rem;
792
- }
793
-
794
758
  .text-sm {
795
759
  font-size: 0.875rem;
796
760
  line-height: 1.25rem;
@@ -800,10 +764,6 @@ video {
800
764
  font-weight: 700;
801
765
  }
802
766
 
803
- .font-normal {
804
- font-weight: 400;
805
- }
806
-
807
767
  .text-dark-green {
808
768
  --tw-text-opacity: 1;
809
769
  color: rgb(2 120 63 / var(--tw-text-opacity, 1));
@@ -824,10 +784,6 @@ video {
824
784
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
825
785
  }
826
786
 
827
- .text-white\/70 {
828
- color: rgb(255 255 255 / 0.7);
829
- }
830
-
831
787
  .ring {
832
788
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
833
789
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
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.17.5",
4
+ "version": "0.19.0",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -22,7 +22,6 @@
22
22
  "prepare": "rm -Rf dist; npm run build; npm run tailwind"
23
23
  },
24
24
  "dependencies": {
25
- "@storybook/test": "^8.0.8",
26
25
  "autoprefixer": "^10.4.12",
27
26
  "d3": "^7.9.0",
28
27
  "postcss": "^8.4.17",
@@ -32,14 +31,12 @@
32
31
  },
33
32
  "devDependencies": {
34
33
  "@babel/core": "^7.19.3",
35
- "@chromatic-com/storybook": "^3.0.0",
34
+ "@chromatic-com/storybook": "^4.1.1",
36
35
  "@fastify/pre-commit": "^2.0.2",
37
- "@storybook/addon-actions": "^8.0.8",
38
- "@storybook/addon-essentials": "^8.0.8",
39
- "@storybook/addon-interactions": "^8.0.8",
40
- "@storybook/addon-links": "^8.0.8",
41
- "@storybook/react": "^8.0.8",
42
- "@storybook/react-vite": "^8.0.8",
36
+ "@storybook/addon-docs": "^9.1.2",
37
+ "@storybook/addon-links": "^9.1.2",
38
+ "@storybook/react-vite": "^9.1.2",
39
+ "@testing-library/dom": "^10.4.1",
43
40
  "@testing-library/jest-dom": "^6.0.0",
44
41
  "@testing-library/react": "^16.0.0",
45
42
  "@types/react": "^19.0.0",
@@ -52,7 +49,7 @@
52
49
  "react-test-renderer": "^19.0.0",
53
50
  "snazzy": "^9.0.0",
54
51
  "standard": "^17.0.0",
55
- "storybook": "^8.0.8",
52
+ "storybook": "^9.1.2",
56
53
  "tailwindcss": "^3.1.8",
57
54
  "tsd": "^0.31.2",
58
55
  "vite": "^5.0.0",
package/src/components/ArcMetric.jsx CHANGED
@@ -112,9 +112,9 @@ export function SemiCircleProgress ({
112
112
  />
113
113
  </svg>
114
114
  {showPercentValue && (
115
- <div className='flex items-center justify-center gap-2 absolute bottom-0 left-0 right-0 text-white text-[2.3rem] font-bold'>
115
+ <div className={styles.percentContainer}>
116
116
  <span>{value}</span>
117
- <span className='text-white/70 text-[1.2rem] font-normal'>{unit}</span>
117
+ <span className={styles.percentUnit}>{unit}</span>
118
118
  </div>
119
119
 
120
120
  )}
package/src/components/ArcMetric.module.css CHANGED
@@ -28,4 +28,12 @@
28
28
  font-weight: 400;
29
29
  min-width: 120px;
30
30
  text-align: left;
31
- }
31
+ }
32
+
33
+ .percentContainer {
34
+ @apply flex items-center justify-center gap-2 absolute bottom-0 left-0 right-0 text-white text-[2.3rem] font-bold;
35
+ }
36
+
37
+ .percentUnit {
38
+ @apply text-white/70 text-[1.2rem] font-normal;
39
+ }
package/src/components/TrendLine.jsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
2
  import * as d3 from 'd3'
3
+ import styles from './TrendLine.module.css'
3
4
 
4
5
  /**
5
6
  * TrendLine component
@@ -132,7 +133,7 @@ function TrendLine ({ yValues }) {
132
133
  }, [yValues, dimensions])
133
134
 
134
135
  return (
135
- <div className='w-full h-full' ref={typedContainerRef} style={{ position: 'relative' }}>
136
+ <div className={styles.line} ref={typedContainerRef} style={{ position: 'relative' }}>
136
137
  <svg
137
138
  ref={ref}
138
139
  width='100%'
package/src/components/TrendLine.module.css ADDED
@@ -0,0 +1,3 @@
1
+ .line {
2
+ @apply w-full h-full;
3
+ }
package/src/components/TrendMetric.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  .contentGraph {
21
- @apply w-[210px] h-[60px];
21
+ @apply w-[210px] h-[25px];
22
22
  }
23
23
  .container {
24
24
  @apply flex items-center justify-center gap-4;
package/src/components/icons/PodSignalsIcon.jsx ADDED
@@ -0,0 +1,76 @@
1
+ import * as React from 'react'
2
+ import styles from './Icons.module.css'
3
+ import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4
+
5
+ const PodSignalsIcon = ({
6
+ color = MAIN_DARK_BLUE,
7
+ size = MEDIUM,
8
+ disabled = false,
9
+ inactive = false
10
+ }) => {
11
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
12
+ if (disabled) {
13
+ className += ` ${styles.iconDisabled}`
14
+ }
15
+ if (inactive) {
16
+ className += ` ${styles.iconInactive}`
17
+ }
18
+ let icon = <></>
19
+
20
+ switch (size) {
21
+ case SMALL:
22
+ icon = (
23
+ <svg
24
+ width={16}
25
+ height={16}
26
+ viewBox='0 0 16 16'
27
+ fill='none'
28
+ xmlns='http://www.w3.org/2000/svg'
29
+ className={className}
30
+ >
31
+ <path d='M8.01795 6.35413L6.2859 7.35413V9.35413L8.01795 10.3541L9.75 9.35413V7.35413L8.01795 6.35413Z' stroke='none' strokeLinejoin='round' />
32
+ <path d='M12.1169 4.11709C13.2763 5.11966 14 6.54093 14 8.11709C14 9.69326 13.2763 11.1145 12.1169 12.1171M3.88308 12.1171C2.72365 11.1145 2 9.69326 2 8.11709C2 6.47853 2.78208 5.00736 4.02282 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M10.3519 5.15155C11.3508 5.81802 12 6.89802 12 8.11699C12 9.33596 11.3508 10.416 10.3519 11.0824M5.6481 11.0824C4.64924 10.416 4 9.33596 4 8.11699C4 6.86433 4.68563 5.75841 5.73174 5.09723' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ </svg>
35
+ )
36
+ break
37
+ case MEDIUM:
38
+ icon = (
39
+ <svg
40
+ width={24}
41
+ height={24}
42
+ viewBox='0 0 24 24'
43
+ fill='none'
44
+ xmlns='http://www.w3.org/2000/svg'
45
+ className={className}
46
+ >
47
+ <path d='M12.0269 9.35413L9.42885 10.8541V13.8541L12.0269 15.3541L14.625 13.8541V10.8541L12.0269 9.35413Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
48
+ <path d='M18.1754 6.17564C19.9145 7.67949 21 9.8114 21 12.1756C21 14.5399 19.9145 16.6718 18.1754 18.1756M5.82463 18.1756C4.08548 16.6718 3 14.5399 3 12.1756C3 9.71779 4.17313 7.51105 6.03424 6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M15.5278 7.72735C17.0261 8.72706 18 10.3471 18 12.1755C18 14.004 17.0261 15.624 15.5278 16.6237M8.47216 16.6237C6.97385 15.624 6 14.004 6 12.1755C6 10.2965 7.02844 8.63765 8.59761 7.64587' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+ </svg>
51
+ )
52
+ break
53
+ case LARGE:
54
+ icon = (
55
+ <svg
56
+ width={40}
57
+ height={40}
58
+ viewBox='0 0 40 40'
59
+ fill='none'
60
+ xmlns='http://www.w3.org/2000/svg'
61
+ className={className}
62
+ >
63
+ <path d='M20.0449 15.3541L15.7147 17.8541V22.8541L20.0449 25.3541L24.375 22.8541V17.8541L20.0449 15.3541Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
64
+ <path d='M30.2923 10.2927C33.1909 12.7992 35 16.3523 35 20.2927C35 24.2331 33.1909 27.7863 30.2923 30.2927M9.70771 30.2927C6.80913 27.7863 5 24.2331 5 20.2927C5 16.1963 6.95521 12.5184 10.0571 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
65
+ <path d='M25.8797 12.8788C28.3769 14.545 30 17.245 30 20.2925C30 23.3399 28.3769 26.0399 25.8797 27.7061M14.1203 27.7061C11.6231 26.0399 10 23.3399 10 20.2925C10 17.1608 11.7141 14.396 14.3293 12.743' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66
+ </svg>
67
+ )
68
+ break
69
+
70
+ default:
71
+ break
72
+ }
73
+ return icon
74
+ }
75
+
76
+ export default PodSignalsIcon
package/src/components/icons/index.js CHANGED
@@ -162,6 +162,7 @@ import PodMetricsIcon from './PodMetricsIcon'
162
162
  import PodPerformanceIcon from './PodPerformanceIcon'
163
163
  import PodSettingsIcon from './PodSettingsIcon'
164
164
  import PodServicesIcon from './PodServicesIcon'
165
+ import PodSignalsIcon from './PodSignalsIcon'
165
166
  import PreviewPRIcon from './PreviewPRIcon'
166
167
  import PullRequestIcon from './PullRequestIcon'
167
168
  import PullRequestLoadingIcon from './PullRequestLoadingIcon'
@@ -398,6 +399,7 @@ export default {
398
399
  PodPerformanceIcon,
399
400
  PodSettingsIcon,
400
401
  PodServicesIcon,
402
+ PodSignalsIcon,
401
403
  PreviewPRIcon,
402
404
  PullRequestIcon,
403
405
  PullRequestLoadingIcon,
package/src/stories/Introduction.mdx CHANGED
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/blocks';
1
+ import { Meta } from '@storybook/addon-docs/blocks';
2
2
  import Code from './assets/code-brackets.svg';
3
3
  import Colors from './assets/colors.svg';
4
4
  import Comments from './assets/comments.svg';
package/src/stories/TrendLine.stories.jsx CHANGED
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import TrendLine from '../components/TrendLine'
3
3
 
4
4
  export default {
5
- title: 'Components/TrendLine',
5
+ title: 'Platformatic/Metrics/TrendLine',
6
6
  component: TrendLine
7
7
  }
8
8