@platformatic/ui-components 0.1.12 → 0.1.13

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 (29) hide show
  1. package/.github/workflows/ci.yml +26 -0
  2. package/dist/assets/index.133cf9fb.css +1 -0
  3. package/dist/assets/index.97014e0d.js +797 -0
  4. package/dist/index.html +2 -2
  5. package/dist/main.css +52 -20
  6. package/index.js +13 -1
  7. package/package.json +9 -2
  8. package/src/components/Box.jsx +11 -0
  9. package/src/components/Box.module.css +3 -0
  10. package/src/components/FollowUs.jsx +35 -0
  11. package/src/components/FollowUs.module.css +11 -0
  12. package/src/components/FrontpageBackground.jsx +11 -0
  13. package/src/components/FrontpageBackground.module.css +10 -0
  14. package/src/components/List.jsx +20 -0
  15. package/src/components/List.module.css +11 -0
  16. package/src/components/ListElement.jsx +23 -0
  17. package/src/components/ListElement.module.css +23 -0
  18. package/src/components/Logo.jsx +76 -0
  19. package/src/stories/FollowUs.stories.jsx +14 -0
  20. package/src/stories/Frontpage.stories.jsx +42 -0
  21. package/src/stories/FrontpageBackground.stories.jsx +17 -0
  22. package/src/stories/HorizontalSeparator.stories.jsx +12 -0
  23. package/src/stories/List.stories.jsx +29 -0
  24. package/src/stories/ListElement.stories.jsx +15 -0
  25. package/src/stories/Logo.stories.jsx +14 -0
  26. package/src/stories/{TesxtWithLabel.stories.jsx → TextWithLabel.stories.jsx} +0 -0
  27. package/vitest.config.js +1 -1
  28. package/dist/assets/index.fcbe6de7.js +0 -797
  29. package/dist/platformatic-ui.css +0 -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.fcbe6de7.js"></script>
8
- <link rel="stylesheet" href="/platformatic-ui.css">
7
+ <script type="module" crossorigin src="/assets/index.97014e0d.js"></script>
8
+ <link rel="stylesheet" href="/assets/index.133cf9fb.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -540,6 +540,10 @@ video {
540
540
  }
541
541
  }
542
542
 
543
+ .static {
544
+ position: static;
545
+ }
546
+
543
547
  .m-3 {
544
548
  margin: 0.75rem;
545
549
  }
@@ -549,6 +553,11 @@ video {
549
553
  margin-bottom: 1rem;
550
554
  }
551
555
 
556
+ .my-8 {
557
+ margin-top: 2rem;
558
+ margin-bottom: 2rem;
559
+ }
560
+
552
561
  .mx-auto {
553
562
  margin-left: auto;
554
563
  margin-right: auto;
@@ -559,6 +568,10 @@ video {
559
568
  margin-bottom: 1.25rem;
560
569
  }
561
570
 
571
+ .mr-2 {
572
+ margin-right: 0.5rem;
573
+ }
574
+
562
575
  .mr-5 {
563
576
  margin-right: 1.25rem;
564
577
  }
@@ -567,12 +580,12 @@ video {
567
580
  margin-left: 1rem;
568
581
  }
569
582
 
570
- .mr-2 {
571
- margin-right: 0.5rem;
583
+ .mt-24 {
584
+ margin-top: 6rem;
572
585
  }
573
586
 
574
- .mr-1 {
575
- margin-right: 0.25rem;
587
+ .mb-16 {
588
+ margin-bottom: 4rem;
576
589
  }
577
590
 
578
591
  .flex {
@@ -587,6 +600,10 @@ video {
587
600
  display: contents;
588
601
  }
589
602
 
603
+ .h-screen {
604
+ height: 100vh;
605
+ }
606
+
590
607
  .w-full {
591
608
  width: 100%;
592
609
  }
@@ -595,6 +612,10 @@ video {
595
612
  width: 2.25rem;
596
613
  }
597
614
 
615
+ .w-80 {
616
+ width: 20rem;
617
+ }
618
+
598
619
  .grow {
599
620
  flex-grow: 1;
600
621
  }
@@ -607,6 +628,10 @@ video {
607
628
  flex-direction: column;
608
629
  }
609
630
 
631
+ .place-items-center {
632
+ place-items: center;
633
+ }
634
+
610
635
  .items-center {
611
636
  align-items: center;
612
637
  }
@@ -619,14 +644,14 @@ video {
619
644
  justify-content: space-around;
620
645
  }
621
646
 
622
- .gap-4 {
623
- gap: 1rem;
624
- }
625
-
626
647
  .gap-2 {
627
648
  gap: 0.5rem;
628
649
  }
629
650
 
651
+ .gap-4 {
652
+ gap: 1rem;
653
+ }
654
+
630
655
  .gap-10 {
631
656
  gap: 2.5rem;
632
657
  }
@@ -636,10 +661,6 @@ video {
636
661
  column-gap: 1rem;
637
662
  }
638
663
 
639
- .rounded-full {
640
- border-radius: 9999px;
641
- }
642
-
643
664
  .border {
644
665
  border-width: 1px;
645
666
  }
@@ -654,10 +675,6 @@ video {
654
675
  border-color: rgb(33 250 144 / var(--tw-border-opacity));
655
676
  }
656
677
 
657
- .p-2 {
658
- padding: 0.5rem;
659
- }
660
-
661
678
  .px-4 {
662
679
  padding-left: 1rem;
663
680
  padding-right: 1rem;
@@ -678,6 +695,21 @@ video {
678
695
  line-height: 1.75rem;
679
696
  }
680
697
 
698
+ .text-4xl {
699
+ font-size: 2.25rem;
700
+ line-height: 2.5rem;
701
+ }
702
+
703
+ .text-3xl {
704
+ font-size: 1.875rem;
705
+ line-height: 2.25rem;
706
+ }
707
+
708
+ .text-6xl {
709
+ font-size: 3.75rem;
710
+ line-height: 1;
711
+ }
712
+
681
713
  .font-semibold {
682
714
  font-weight: 600;
683
715
  }
@@ -695,14 +727,14 @@ video {
695
727
  color: rgb(33 250 144 / var(--tw-text-opacity));
696
728
  }
697
729
 
698
- .text-dark-green {
730
+ .text-white {
699
731
  --tw-text-opacity: 1;
700
- color: rgb(2 120 63 / var(--tw-text-opacity));
732
+ color: rgb(255 255 255 / var(--tw-text-opacity));
701
733
  }
702
734
 
703
- .text-white {
735
+ .text-dark-green {
704
736
  --tw-text-opacity: 1;
705
- color: rgb(255 255 255 / var(--tw-text-opacity));
737
+ color: rgb(2 120 63 / var(--tw-text-opacity));
706
738
  }
707
739
 
708
740
  .text-error-red {
package/index.js CHANGED
@@ -17,6 +17,12 @@ import TabbedWindow from './src/components/TabbedWindow'
17
17
  import TextWithLabel from './src/components/TextWithLabel'
18
18
  import Versions from './src/components/Versions'
19
19
  import VerticalSeparator from './src/components/VerticalSeparator'
20
+ import FollowUs from './src/components/FollowUs'
21
+ import List from './src/components/List'
22
+ import ListElement from './src/components/ListElement'
23
+ import Logo from './src/components/Logo'
24
+ import Box from './src/components/Box'
25
+ import FrontpageBackground from './src/components/FrontpageBackground'
20
26
  export {
21
27
  ApiSummary,
22
28
  ApiDetails,
@@ -34,5 +40,11 @@ export {
34
40
  TabbedWindow,
35
41
  TextWithLabel,
36
42
  Versions,
37
- VerticalSeparator
43
+ VerticalSeparator,
44
+ FollowUs,
45
+ List,
46
+ ListElement,
47
+ Logo,
48
+ Box,
49
+ FrontpageBackground
38
50
  }
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.12",
4
+ "version": "0.1.13",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "scripts": {
@@ -19,6 +19,7 @@
19
19
  "dependencies": {
20
20
  "@fortawesome/fontawesome-svg-core": "^6.2.0",
21
21
  "@fortawesome/free-brands-svg-icons": "^6.2.0",
22
+ "@fortawesome/free-regular-svg-icons": "^6.2.0",
22
23
  "@fortawesome/free-solid-svg-icons": "^6.2.0",
23
24
  "@fortawesome/react-fontawesome": "^0.2.0",
24
25
  "autoprefixer": "^10.4.12",
@@ -29,6 +30,7 @@
29
30
  },
30
31
  "devDependencies": {
31
32
  "@babel/core": "^7.19.3",
33
+ "@fastify/pre-commit": "^2.0.2",
32
34
  "@storybook/addon-actions": "^6.5.12",
33
35
  "@storybook/addon-essentials": "^6.5.12",
34
36
  "@storybook/addon-interactions": "^6.5.12",
@@ -42,6 +44,7 @@
42
44
  "@types/react-dom": "^18.0.6",
43
45
  "@vitejs/plugin-react": "^2.1.0",
44
46
  "babel-loader": "^8.2.5",
47
+ "happy-dom": "^7.6.6",
45
48
  "jsdom": "^20.0.1",
46
49
  "react-test-renderer": "^18.2.0",
47
50
  "snazzy": "^9.0.0",
@@ -59,5 +62,9 @@
59
62
  "ignore": [
60
63
  "/dist"
61
64
  ]
62
- }
65
+ },
66
+ "pre-commit": [
67
+ "lint",
68
+ "test"
69
+ ]
63
70
  }
package/src/components/Box.jsx ADDED
@@ -0,0 +1,11 @@
1
+ 'use strict'
2
+
3
+ import styles from './Box.module.css'
4
+ import React from 'react'
5
+ export default function Box (props) {
6
+ return (
7
+ <div className={styles.box}>
8
+ {props.children}
9
+ </div>
10
+ )
11
+ }
package/src/components/Box.module.css ADDED
@@ -0,0 +1,3 @@
1
+ .box {
2
+ @apply mx-24 my-24 flex flex-col
3
+ }
package/src/components/FollowUs.jsx ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import styles from './FollowUs.module.css'
3
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
4
+ import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
5
+
6
+ export default function FollowUs ({ label = 'FOLLOW US ON' }) {
7
+ return (
8
+ <div className={styles.container}>
9
+ <div className={styles.label}>
10
+ {label}
11
+ </div>
12
+ <div className={styles.icon}>
13
+ <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
14
+ <FontAwesomeIcon icon={faTwitter} className='mr-2 text-white' />
15
+ </a>
16
+ </div>
17
+ <div className={styles.icon}>
18
+ <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
19
+ <FontAwesomeIcon icon={faLinkedin} className='mr-2 text-white' />
20
+ </a>
21
+ </div>
22
+ <div className={styles.icon}>
23
+ <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
24
+ <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
25
+ </a>
26
+ </div>
27
+ <div className={styles.icon}>
28
+ <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
29
+ <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
30
+ </a>
31
+ </div>
32
+
33
+ </div>
34
+ )
35
+ }
package/src/components/FollowUs.module.css ADDED
@@ -0,0 +1,11 @@
1
+ .container {
2
+ @apply flex w-96
3
+ }
4
+
5
+ .label {
6
+ @apply uppercase text-light-green
7
+ }
8
+
9
+ .icon {
10
+ @apply text-white ml-4
11
+ }
package/src/components/FrontpageBackground.jsx ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react'
2
+ import styles from './FrontpageBackground.module.css'
3
+
4
+ export default function FrontpageBackgound ({ label = 'platformatic', ...props }) {
5
+ return (
6
+ <div className={styles.bg}>
7
+ <div className={styles.label}> {label} </div>
8
+ {props.children}
9
+ </div>
10
+ )
11
+ }
package/src/components/FrontpageBackground.module.css ADDED
@@ -0,0 +1,10 @@
1
+ /* let's use some direct CSS here, with tailwind is quite convoluted to obtain the correct radial gradient */
2
+ .bg {
3
+ background: radial-gradient(circle at 0% 0%, rgba(33, 250, 144, 0.4) 0%, rgba(6, 31, 55, 0.4) 35%);
4
+ }
5
+
6
+ .label {
7
+ @apply text-light-green font-semibold w-full text-left uppercase px-8 py-4 text-clip
8
+ }
9
+
10
+
package/src/components/List.jsx ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import styles from './List.module.css'
3
+
4
+ export default function List ({ title, ...props }) {
5
+ return (
6
+ <div className={styles.container}>
7
+ {title &&
8
+ <div
9
+ className={styles.title}
10
+ data-testid='list-title'
11
+ {...props}
12
+ >
13
+ {title}
14
+ </div>}
15
+ <div className={styles.elements}>
16
+ {props.children}
17
+ </div>
18
+ </div>
19
+ )
20
+ }
package/src/components/List.module.css ADDED
@@ -0,0 +1,11 @@
1
+ .title {
2
+ @apply text-light-green font-bold w-full text-left uppercase
3
+ }
4
+
5
+ .container {
6
+ @apply w-full
7
+ }
8
+
9
+ .elements {
10
+ @apply flex flex-col
11
+ }
package/src/components/ListElement.jsx ADDED
@@ -0,0 +1,23 @@
1
+ import React from 'react'
2
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3
+ import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
4
+ import styles from './ListElement.module.css'
5
+ export default function List ({ title, detail }) {
6
+ return (
7
+ <div className={styles.container}>
8
+ <div className={styles.iconCol}>
9
+ <div data-testid='list-element-title-icon' className={styles.icon}>
10
+ <FontAwesomeIcon icon={faCircleCheck} />
11
+ </div>
12
+ </div>
13
+ <div className={styles.textCol}>
14
+ <div className={styles.title} data-testid='list-element-title'>
15
+ {title}
16
+ </div>
17
+ <div data-test-id='list-element-detail'>
18
+ {detail}
19
+ </div>
20
+ </div>
21
+ </div>
22
+ )
23
+ }
package/src/components/ListElement.module.css ADDED
@@ -0,0 +1,23 @@
1
+ .container {
2
+ @apply flex flex-row my-4
3
+ }
4
+
5
+ .iconCol {
6
+ @apply flex flex-col w-6
7
+ }
8
+
9
+ .icon {
10
+ @apply text-light-green
11
+ }
12
+
13
+ .title {
14
+ @apply flex text-light-green font-bold w-full text-left
15
+ }
16
+
17
+ .textCol {
18
+ @apply flex flex-col text-white text-justify w-96
19
+ }
20
+
21
+ .detailSpace {
22
+ @apply w-6
23
+ }
package/src/components/Logo.jsx ADDED
@@ -0,0 +1,76 @@
1
+ import React from 'react'
2
+ export default function Logo ({ width, heigth }) {
3
+ return (
4
+ <svg
5
+ data-name='Layer 1'
6
+ xmlns='http://www.w3.org/2000/svg'
7
+ viewBox='0 0 2000 2000'
8
+ width={width}
9
+ height={heigth}
10
+ >
11
+ <path
12
+ d='M610.13 1336.34h1012v-.29c136.31-6.16 244.94-118.58 244.94-256.4 0-141.77-114.93-256.7-256.7-256.7a255.52 255.52 0 0 0-118.5 29c-42.1-97.31-127.47-171.53-231.86-198.36m-866.79 0C243.55 692.05 133 827.87 133 989.53s110.76 297.67 260.58 336'
13
+ style={{
14
+ strokeWidth: '67.96px',
15
+ stroke: '#FFFFFF',
16
+ fill: 'none',
17
+ strokeLinecap: 'round',
18
+ strokeLinejoin: 'round'
19
+ }}
20
+ />
21
+ <path
22
+ d='M661.56 916.05a322.34 322.34 0 0 0 164.19 44.64c178.89 0 323.91-145 323.91-323.92s-145-323.91-323.91-323.91-323.92 145-323.92 323.91v483.15'
23
+ style={{
24
+ stroke: '#21fa90',
25
+ strokeWidth: '67.96px',
26
+ fill: 'none',
27
+ strokeLinecap: 'round',
28
+ strokeLinejoin: 'round'
29
+ }}
30
+ />
31
+ <path
32
+ style={{
33
+ opacity: 0.2,
34
+ stroke: '#21fa90',
35
+ strokeWidth: '67.96px',
36
+ fill: 'none',
37
+ strokeLinecap: 'round',
38
+ strokeLinejoin: 'round'
39
+ }}
40
+ d='M501.83 1630.69v56.45'
41
+ />
42
+ <path
43
+ style={{
44
+ opacity: 0.4,
45
+ stroke: '#21fa90',
46
+ strokeWidth: '67.96px',
47
+ fill: 'none',
48
+ strokeLinecap: 'round',
49
+ strokeLinejoin: 'round'
50
+ }}
51
+ d='M502.33 1453.1v89.15'
52
+ />
53
+ <path
54
+ style={{
55
+ opacity: 0.7,
56
+ stroke: '#21fa90',
57
+ strokeWidth: '67.96px',
58
+ fill: 'none',
59
+ strokeLinecap: 'round',
60
+ strokeLinejoin: 'round'
61
+ }}
62
+ d='M501.83 1211.73v149.07'
63
+ />
64
+ <path
65
+ d='m793.55 866.39-135 47.43 59.44 126'
66
+ style={{
67
+ strokeWidth: '70.05px',
68
+ stroke: '#21fa90',
69
+ fill: 'none',
70
+ strokeLinecap: 'round',
71
+ strokeLinejoin: 'round'
72
+ }}
73
+ />
74
+ </svg>
75
+ )
76
+ }
package/src/stories/FollowUs.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import FollowUs from '../components/FollowUs'
3
+
4
+ export default {
5
+ title: 'Platformatic/FollowUs',
6
+ component: FollowUs
7
+ }
8
+
9
+ const Template = (args) => <FollowUs {...args} />
10
+
11
+ export const FollowUsDefault = Template.bind({})
12
+ FollowUsDefault.args = {
13
+ label: 'Follow us on'
14
+ }
package/src/stories/Frontpage.stories.jsx ADDED
@@ -0,0 +1,42 @@
1
+
2
+ import React from 'react'
3
+ import FrontpageBackground from '../components/FrontpageBackground'
4
+ import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
5
+ import Box from '../components/Box'
6
+ import GHLoginButton from '../components/GHLoginButton'
7
+ import Logo from '../components/Logo'
8
+ import List from '../components/List'
9
+ import ListElement from '../components/ListElement'
10
+ import HorizontalSeparator from '../components/HorizontalSeparator'
11
+ import FollowUs from '../components/FollowUs'
12
+
13
+ export default {
14
+ title: 'Platformatic/Frontpage'
15
+ }
16
+
17
+ const Template = (args) =>
18
+ <FrontpageBackground>
19
+
20
+ <TwoColumnsLayout>
21
+ <Box>
22
+ <Logo width={80} />
23
+ <List title='platformatic'>
24
+ <ListElement title='Instant edge deploy' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
25
+ <ListElement title='Collaborate with previews' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
26
+ <ListElement title='Turn static to dynamic' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
27
+ <ListElement title='Ship directly to the edge' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
28
+ </List>
29
+ <HorizontalSeparator />
30
+ <FollowUs />
31
+ </Box>
32
+ <Box>
33
+ <p className='text-5xl text-main-green font-bold mt-24 mb-16'>Join the best backend teams</p>
34
+ <GHLoginButton />
35
+ <p className='text-white my-8 w-80'> by clicking continue, you agree to our <a href="javascript:alert('todo')">Terms of Service</a> and <a href="javascript:alert('todo')">Privacy policy.</a> </p>
36
+ <HorizontalSeparator />
37
+ </Box>
38
+ </TwoColumnsLayout>
39
+ </FrontpageBackground>
40
+
41
+ export const Frontpage = Template.bind({})
42
+ Frontpage.args = {}
package/src/stories/FrontpageBackground.stories.jsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import FrontpageBackground from '../components/FrontpageBackground'
3
+
4
+ export default {
5
+ title: 'Platformatic/FrontpageBackground',
6
+ component: FrontpageBackground
7
+ }
8
+
9
+ const Template = (args) =>
10
+ <FrontpageBackground>
11
+ <div className='grid h-screen place-items-center'>
12
+ <p className='text-main-green text-4xl'>Frontpage Background</p>
13
+ </div>
14
+ </FrontpageBackground>
15
+
16
+ export const FrontpageBackgroundDefault = Template.bind({})
17
+ FrontpageBackgroundDefault.args = {}
package/src/stories/HorizontalSeparator.stories.jsx ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import HorizontalSeparator from '../components/HorizontalSeparator'
3
+
4
+ export default {
5
+ title: 'Platformatic/HorizontalSeparator',
6
+ component: HorizontalSeparator
7
+ }
8
+
9
+ const Template = (args) => <HorizontalSeparator {...args} />
10
+
11
+ export const HorizontalSeparatorDefault = Template.bind({})
12
+ HorizontalSeparatorDefault.args = {}
package/src/stories/List.stories.jsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react'
2
+ import List from '../components/List'
3
+ import ListElement from '../components/ListElement'
4
+
5
+ export default {
6
+ title: 'Platformatic/List',
7
+ component: List
8
+ }
9
+
10
+ const Template = (args) => <List {...args} />
11
+ export const ListWithNoElements = Template.bind({})
12
+ ListWithNoElements.args = {
13
+ title: 'List Title'
14
+ }
15
+
16
+ const TemplateWithElements = (args) => (
17
+ <List {...args}>
18
+ <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
19
+ <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
20
+ </List>
21
+ )
22
+
23
+ export const ListWithElements = TemplateWithElements.bind({})
24
+ ListWithElements.args = {
25
+ title: 'List Title'
26
+ }
27
+
28
+ export const ListWithElementsNoTitle = TemplateWithElements.bind({})
29
+ ListWithElementsNoTitle.args = {}
package/src/stories/ListElement.stories.jsx ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react'
2
+ import ListElement from '../components/ListElement'
3
+
4
+ export default {
5
+ title: 'Platformatic/ListElement',
6
+ component: ListElement
7
+ }
8
+
9
+ const Template = (args) => <ListElement {...args} />
10
+
11
+ export const ListElementFull = Template.bind({})
12
+ ListElementFull.args = {
13
+ title: 'List Element Title',
14
+ detail: 'Lorem Ipsum dolor sit amet consectetur adipiscing elit. Qui enim potest, nisi quis potest, negare'
15
+ }
package/src/stories/Logo.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import Logo from '../components/Logo'
3
+
4
+ export default {
5
+ title: 'Platformatic/Logo',
6
+ component: Logo
7
+ }
8
+
9
+ const Template = (args) => <Logo {...args} />
10
+ export const LogoSmall = Template.bind({})
11
+ LogoSmall.args = {
12
+ width: 300,
13
+ heigth: 300
14
+ }
package/vitest.config.js CHANGED
@@ -7,7 +7,7 @@ export default defineConfig({
7
7
  plugins: [react()],
8
8
  test: {
9
9
  globals: true,
10
- environment: 'jsdom',
10
+ environment: 'happy-dom',
11
11
  exclude: ['node_modules']
12
12
  }
13
13