npm - @platformatic/ui-components - Versions diffs - 0.1.11 → 0.1.13 - Mend

@platformatic/ui-components 0.1.11 → 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 (153) hide show

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index.03c3e650.js"></script>
-    <link rel="stylesheet" href="/assets/index.2277ba1a.css">
+    <script type="module" crossorigin src="/assets/index.97014e0d.js"></script>
+    <link rel="stylesheet" href="/assets/index.133cf9fb.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css CHANGED Viewed

@@ -540,6 +540,10 @@ video {
   }
 }
+.static {
+  position: static;
+}
 .m-3 {
   margin: 0.75rem;
 }
@@ -549,6 +553,11 @@ video {
   margin-bottom: 1rem;
 }
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -571,8 +580,12 @@ video {
   margin-left: 1rem;
 }
-.mr-1 {
-  margin-right: 0.25rem;
+.mt-24 {
+  margin-top: 6rem;
+}
+.mb-16 {
+  margin-bottom: 4rem;
 }
 .flex {
@@ -599,6 +612,10 @@ video {
   width: 2.25rem;
 }
+.w-80 {
+  width: 20rem;
+}
 .grow {
   flex-grow: 1;
 }
@@ -611,6 +628,10 @@ video {
   flex-direction: column;
 }
+.place-items-center {
+  place-items: center;
+}
 .items-center {
   align-items: center;
 }
@@ -674,16 +695,16 @@ video {
   line-height: 1.75rem;
 }
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .text-6xl {
   font-size: 3.75rem;
   line-height: 1;
@@ -706,14 +727,14 @@ video {
   color: rgb(33 250 144 / var(--tw-text-opacity));
 }
-.text-dark-green {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(2 120 63 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-white {
+.text-dark-green {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 .text-error-red {

package/index.js CHANGED Viewed

@@ -12,10 +12,17 @@ import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Playground from './src/components/Playground'
 import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
+import Status from './src/components/Status'
 import TabbedWindow from './src/components/TabbedWindow'
 import TextWithLabel from './src/components/TextWithLabel'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
+import FollowUs from './src/components/FollowUs'
+import List from './src/components/List'
+import ListElement from './src/components/ListElement'
+import Logo from './src/components/Logo'
+import Box from './src/components/Box'
+import FrontpageBackground from './src/components/FrontpageBackground'
 export {
   ApiSummary,
   ApiDetails,
@@ -29,8 +36,15 @@ export {
   Playground,
   PullRequest,
   SearchBar,
+  Status,
   TabbedWindow,
   TextWithLabel,
   Versions,
-  VerticalSeparator
+  VerticalSeparator,
+  FollowUs,
+  List,
+  ListElement,
+  Logo,
+  Box,
+  FrontpageBackground
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -19,6 +19,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "autoprefixer": "^10.4.12",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
+    "@fastify/pre-commit": "^2.0.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-interactions": "^6.5.12",
@@ -42,6 +44,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-loader": "^8.2.5",
+    "happy-dom": "^7.6.6",
     "jsdom": "^20.0.1",
     "react-test-renderer": "^18.2.0",
     "snazzy": "^9.0.0",
@@ -59,5 +62,9 @@
     "ignore": [
       "/dist"
     ]
-  }
+  },
+  "pre-commit": [
+    "lint",
+    "test"
+  ]
 }

package/src/components/ApiSummary.jsx CHANGED Viewed

@@ -8,7 +8,7 @@ import ApiIcon from './icons/ApiIcon'
 import ApiIconClosed from './icons/ApiIconClosed'
 import VerticalSeparator from './VerticalSeparator'
 import TextWithLabel from './TextWithLabel'
-import ApiStatus from './Api/Status'
+import Status from './Status'
 import BorderedBox from './BorderedBox'
 import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Api.module.css'
@@ -41,7 +41,7 @@ export default function ApiSummary (props) {
                     <ApiVersion version={version} />
                   </div>
                   <div className={styles.status}>
-                    <ApiStatus online={online} />
+                    <Status color={color} status={online ? 'online' : 'offline'} />
                   </div>
                 </div>

package/src/components/Box.jsx ADDED Viewed

@@ -0,0 +1,11 @@
+'use strict'
+import styles from './Box.module.css'
+import React from 'react'
+export default function Box (props) {
+  return (
+    <div className={styles.box}>
+      {props.children}
+    </div>
+  )
+}

package/src/components/Box.module.css ADDED Viewed

@@ -0,0 +1,3 @@
+.box {
+  @apply mx-24 my-24 flex flex-col
+}

package/src/components/FollowUs.jsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react'
+import styles from './FollowUs.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
+export default function FollowUs ({ label = 'FOLLOW US ON' }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        {label}
+      </div>
+      <div className={styles.icon}>
+        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faTwitter} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faLinkedin} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
+        </a>
+      </div>
+    </div>
+  )
+}

package/src/components/FollowUs.module.css ADDED Viewed

@@ -0,0 +1,11 @@
+.container {
+  @apply flex w-96
+}
+.label {
+  @apply uppercase text-light-green
+}
+.icon {
+  @apply text-white ml-4
+}

package/src/components/FrontpageBackground.jsx ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './FrontpageBackground.module.css'
+export default function FrontpageBackgound ({ label = 'platformatic', ...props }) {
+  return (
+    <div className={styles.bg}>
+      <div className={styles.label}> {label} </div>
+      {props.children}
+    </div>
+  )
+}

package/src/components/FrontpageBackground.module.css ADDED Viewed

@@ -0,0 +1,10 @@
+/* let's use some direct CSS here, with tailwind is quite convoluted to obtain the correct radial gradient  */
+.bg {
+  background: radial-gradient(circle at 0% 0%, rgba(33, 250, 144, 0.4) 0%, rgba(6, 31, 55, 0.4) 35%);
+}
+.label {
+  @apply text-light-green font-semibold w-full text-left uppercase px-8 py-4 text-clip
+}

package/src/components/List.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './List.module.css'
+export default function List ({ title, ...props }) {
+  return (
+    <div className={styles.container}>
+      {title &&
+        <div
+          className={styles.title}
+          data-testid='list-title'
+          {...props}
+        >
+          {title}
+        </div>}
+      <div className={styles.elements}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/components/List.module.css ADDED Viewed

@@ -0,0 +1,11 @@
+.title {
+  @apply text-light-green font-bold w-full text-left uppercase
+}
+.container {
+  @apply w-full
+}
+.elements {
+  @apply flex flex-col
+}

package/src/components/ListElement.jsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import styles from './ListElement.module.css'
+export default function List ({ title, detail }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconCol}>
+        <div data-testid='list-element-title-icon' className={styles.icon}>
+          <FontAwesomeIcon icon={faCircleCheck} />
+        </div>
+      </div>
+      <div className={styles.textCol}>
+        <div className={styles.title} data-testid='list-element-title'>
+          {title}
+        </div>
+        <div data-test-id='list-element-detail'>
+          {detail}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ListElement.module.css ADDED Viewed

@@ -0,0 +1,23 @@
+.container {
+  @apply flex flex-row my-4
+}
+.iconCol {
+  @apply flex flex-col w-6
+}
+.icon {
+  @apply text-light-green
+}
+.title {
+  @apply flex text-light-green font-bold w-full text-left
+}
+.textCol {
+  @apply flex flex-col text-white text-justify w-96
+}
+.detailSpace {
+  @apply w-6
+}

package/src/components/Logo.jsx ADDED Viewed

@@ -0,0 +1,76 @@
+import React from 'react'
+export default function Logo ({ width, heigth }) {
+  return (
+    <svg
+      data-name='Layer 1'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 2000 2000'
+      width={width}
+      height={heigth}
+    >
+      <path
+        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'
+        style={{
+          strokeWidth: '67.96px',
+          stroke: '#FFFFFF',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+      <path
+        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'
+        style={{
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+      <path
+        style={{
+          opacity: 0.2,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M501.83 1630.69v56.45'
+      />
+      <path
+        style={{
+          opacity: 0.4,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M502.33 1453.1v89.15'
+      />
+      <path
+        style={{
+          opacity: 0.7,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M501.83 1211.73v149.07'
+      />
+      <path
+        d='m793.55 866.39-135 47.43 59.44 126'
+        style={{
+          strokeWidth: '70.05px',
+          stroke: '#21fa90',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+    </svg>
+  )
+}

package/src/components/PullRequest.jsx CHANGED Viewed

@@ -6,26 +6,61 @@ import PullRequestIcon from './icons/PullRequestIcon'
 import styles from './PullRequest.module.css'
 import TextWithLabel from './TextWithLabel'
 import VerticalSeparator from './VerticalSeparator'
-export default function PullRequest ({ id, title, lastCommit, url }) {
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faStopCircle, faRotateRight } from '@fortawesome/free-solid-svg-icons'
+import Status from './Status'
+export default function PullRequest ({ id, title, lastCommit, url, status, onStop, onReload }) {
+  let prStatusColor
+  if (status === 'available') {
+    prStatusColor = 'white'
+  } else if (status === 'running') {
+    prStatusColor = 'green'
+  } else if (status === 'unavailable') {
+    prStatusColor = 'white'
+  }
+  function handleStop () {
+    if (onStop) {
+      onStop()
+    }
+  }
+  function handleReload () {
+    if (onReload) {
+      onReload()
+    }
+  }
   return (
-    <BorderedBox color='green'>
-      <div className={styles.header}>
-        <PullRequestIcon />
-        <span className={styles.id}>#{id}</span>
-        <span><a href={url} target='_blank' rel='noreferrer'>{url}</a></span>
-      </div>
-      <div className={styles.content}>
-        <TextWithLabel label='PR Title' text={title} />
-      </div>
+    <div className={status === 'unavailable' ? styles.unavailable : null}>
+      <BorderedBox color={prStatusColor}>
+        <div className={styles.header}>
+          <div className={styles.title}>
+            <PullRequestIcon />
+            <span className={styles.id}>#{id}</span>
+            <span><a href={url} target='_blank' rel='noreferrer'>{url}</a></span>
+          </div>
+          <div className={styles.status}>
+            <Status color={prStatusColor} status={status} />
+            <VerticalSeparator />
+            <div className={styles.icons}>
+              <FontAwesomeIcon icon={faStopCircle} mask={['circle']} onClick={handleStop} />
+              <FontAwesomeIcon icon={faRotateRight} mask={['circle']} onClick={handleReload} />
+            </div>
+          </div>
+        </div>
+        <div className={styles.content}>
+          <TextWithLabel label='PR Title' text={title} />
+        </div>
+        <HorizontalSeparator />
+        <div className={styles.footer}>
+          <TextWithLabel label='Last commit by' text={lastCommit.author} />
+          <VerticalSeparator />
+          <TextWithLabel label='Commit SHA' text={lastCommit.sha} />
+          <VerticalSeparator />
+          <TextWithLabel label='Last Update' text={lastCommit.date} />
+        </div>
+      </BorderedBox>
+    </div>
-      <HorizontalSeparator />
-      <div className={styles.footer}>
-        <TextWithLabel label='Last commit by' text={lastCommit.author} />
-        <VerticalSeparator />
-        <TextWithLabel label='Commit SHA' text={lastCommit.sha} />
-        <VerticalSeparator />
-        <TextWithLabel label='Last Update' text={lastCommit.date} />
-      </div>
-    </BorderedBox>
   )
 }

package/src/components/PullRequest.module.css CHANGED Viewed

@@ -5,8 +5,23 @@
   @apply text-xl text-main-green font-semibold;
 }
 .header {
-  @apply flex items-center gap-x-4 mb-4;
+  @apply flex items-center justify-between mb-4;
+}
+.title {
+  @apply flex items-center gap-x-4;
 }
 .footer {
-  @apply flex items-center
+  @apply flex items-center;
+}
+.status {
+  @apply flex items-center;
+}
+.unavailable {
+  @apply opacity-30;
+}
+.icons {
+  @apply flex justify-between gap-x-2;
+}
+.icons > *:hover {
+  @apply cursor-pointer;
 }

package/src/components/Status.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+export default function Status (props) {
+  const { color, status } = props
+  function getColorClass (color) {
+    switch (color) {
+      case 'green':
+        return 'text-main-green'
+      case 'red':
+        return 'text-error-red'
+      case 'white':
+      default:
+        return 'text-white'
+    }
+  }
+  const colorClass = getColorClass(color)
+  return (
+    <div className={colorClass}>
+      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
+      {status}
+    </div>
+  )
+}

package/src/lib/utils.js CHANGED Viewed

@@ -9,6 +9,9 @@ function getColor (type, color) {
     case 'red':
       convertedColor = 'error-red'
       break
+    case 'white':
+      convertedColor = 'white'
+      break
     default:
       convertedColor = 'main-green'
       break

package/src/stories/BorderedBox.stories.jsx CHANGED Viewed

@@ -5,7 +5,10 @@ export default {
   component: BorderedBox,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    color: { control: 'color' }
+    color: {
+      options: ['green', 'red', 'white'],
+      control: { type: ' radio' }
+    }
   }
 }
@@ -13,7 +16,7 @@ export default {
 const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBox>
 export const Green = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Green.args = {
   color: 'green'
 }
@@ -22,3 +25,9 @@ export const Red = Template.bind({})
 Red.args = {
   color: 'red'
 }
+export const White = Template.bind({})
+White.args = {
+  color: 'white'
+}

package/src/stories/FollowUs.stories.jsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from 'react'
+import FollowUs from '../components/FollowUs'
+export default {
+  title: 'Platformatic/FollowUs',
+  component: FollowUs
+}
+const Template = (args) => <FollowUs {...args} />
+export const FollowUsDefault = Template.bind({})
+FollowUsDefault.args = {
+  label: 'Follow us on'
+}