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

@platformatic/ui-components 0.1.11 → 0.1.12

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 (133) 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.fcbe6de7.js"></script>
+    <link rel="stylesheet" href="/platformatic-ui.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css CHANGED Viewed

@@ -559,10 +559,6 @@ video {
   margin-bottom: 1.25rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
-}
 .mr-5 {
   margin-right: 1.25rem;
 }
@@ -571,6 +567,10 @@ video {
   margin-left: 1rem;
 }
+.mr-2 {
+  margin-right: 0.5rem;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -587,10 +587,6 @@ video {
   display: contents;
 }
-.h-screen {
-  height: 100vh;
-}
 .w-full {
   width: 100%;
 }
@@ -623,14 +619,14 @@ video {
   justify-content: space-around;
 }
-.gap-2 {
-  gap: 0.5rem;
-}
 .gap-4 {
   gap: 1rem;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -640,6 +636,10 @@ video {
        column-gap: 1rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .border {
   border-width: 1px;
 }
@@ -654,6 +654,10 @@ video {
   border-color: rgb(33 250 144 / var(--tw-border-opacity));
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -674,21 +678,6 @@ 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-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
 .font-semibold {
   font-weight: 600;
 }

package/dist/platformatic-ui.css ADDED Viewed

@@ -0,0 +1 @@

+ ._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_1atg3_1{padding:.625rem .5rem}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_sk3z1_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_sk3z1_5{display:flex;width:100%;flex-direction:column}._stats-header_19k8x_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_19k8x_4{display:flex;align-items:center;justify-content:center;gap:1rem}._tabbed-container_129x6_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_129x6_5{margin-bottom:1rem;display:flex;height:4rem;justify-content:space-between;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_129x6_5:hover{cursor:pointer}._selected-tab_129x6_8{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-1{margin-right:.25rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.w-full{width:100%}.w-9{width:2.25rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Regular.ttf) format("truetype");font-weight:500}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Bold.ttf) format("truetype");font-weight:700}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}.bordered{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}.padded{padding:.625rem .5rem}.api-footer{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.api-status{justify-self:end}.bordered-box{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}

package/index.js CHANGED Viewed

@@ -12,6 +12,7 @@ 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'
@@ -29,6 +30,7 @@ export {
   Playground,
   PullRequest,
   SearchBar,
+  Status,
   TabbedWindow,
   TextWithLabel,
   Versions,

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {

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/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/PullRequest.stories.jsx CHANGED Viewed

@@ -4,14 +4,13 @@ export default {
   title: 'Platformatic/PullRequest',
   component: PullRequest,
   argTypes: {
-    color: { control: 'color' }
   }
 }
-const Template = (args) => <PullRequest {...args}>Hello Platformatic</PullRequest>
+const Template = (args) => <PullRequest {...args} />
-export const Standard = Template.bind({})
-Standard.args = {
+export const Available = Template.bind({})
+Available.args = {
   id: '88',
   title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
   url: 'http://example.com',
@@ -19,5 +18,32 @@ Standard.args = {
     sha: 'bgb3ffe3',
     author: 'Foobar',
     date: '2022-10-11'
-  }
+  },
+  status: 'available'
+}
+export const Running = Template.bind({})
+Running.args = {
+  id: '88',
+  title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
+  url: 'http://example.com',
+  lastCommit: {
+    sha: 'bgb3ffe3',
+    author: 'Foobar',
+    date: '2022-10-11'
+  },
+  status: 'running'
+}
+export const Unavailable = Template.bind({})
+Unavailable.args = {
+  id: '88',
+  title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
+  url: 'http://example.com',
+  lastCommit: {
+    sha: 'bgb3ffe3',
+    author: 'Foobar',
+    date: '2022-10-11'
+  },
+  status: 'unavailable'
 }

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

@@ -0,0 +1,31 @@
+'use strict'
+import Status from '../components/Status'
+export default {
+  title: 'Platformatic/Status',
+  component: Status,
+  argTypes: {}
+}
+const Template = (args) => <Status {...args} />
+export const White = Template.bind({})
+White.args = {
+  color: 'white',
+  status: 'available'
+}
+export const Green = Template.bind({})
+Green.args = {
+  color: 'green',
+  status: 'online'
+}
+export const Red = Template.bind({})
+Red.args = {
+  color: 'red',
+  status: 'offline'
+}