@platformatic/ui-components 0.1.7 → 0.1.9

package/package.json

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

package/src/components/ApiSummary.jsx

@@ -4,7 +4,7 @@ import ApiFooter from './Api/Footer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
 import ApiVersion from './Api/Version'
-import ApiIcon from './Api/ApiIcon'
+import ApiIcon from './icons/ApiIcon'
 import ApiIconClosed from './Api/ApiIconClosed'
 import Separator from './VerticalSeparator'
 import ApiStatus from './Api/Status'
@@ -36,11 +36,7 @@ export default function ApiSummary (props) {
                 <div className='flex items-center justify-between'>
                   <div className='flex items-center justify-between gap-4'>
                     <ApiName name={name} />
-                    <span>
-                      <a href='#' className='border p-2 rounded-full'>
-                        <FontAwesomeIcon color='white' icon={faLink} />
-                      </a>
-                    </span>
+                    <span><FontAwesomeIcon color='white' icon={faLink} /></span>
                     <ApiVersion version={version} />
                   </div>
                   <div className={styles.status}>

package/src/components/Main.jsx

@@ -4,7 +4,7 @@ import SearchBar from './SearchBar'
 import Api from './Api'
 import ApiDetails from './ApiDetail'
 import TabbedWindow from './TabbedWindow'
-import Prs from './Pr'
+import Prs from './PullRequest'
 import Playground from './Playground'
 import Versions from './Versions'
 import React, { useState } from 'react'

package/src/components/PullRequest.jsx

@@ -0,0 +1,36 @@
+'use strict'
+import React from 'react'
+import BorderedBox from './BorderedBox'
+import HorizontalSeparator from './HorizontalSeparator'
+import PullRequestIcon from './icons/PullRequestIcon'
+import styles from './PullRequest.module.css'
+import VerticalSeparator from './VerticalSeparator'
+export default function PullRequest ({ id, title, lastCommit, url }) {
+  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}>
+        <div>
+          <span className={styles.label}>PR Title: </span>
+          <span className={styles.value}>{title}</span>
+        </div>
+      </div>
+
+      <HorizontalSeparator />
+      <div>
+        <span className={styles.label}>Last commit by: </span>
+        <span className={styles.value}>{lastCommit.author}</span>
+        <VerticalSeparator />
+        <span className={styles.label}>Commit SHA: </span>
+        <span className={styles.value}>{lastCommit.sha}</span>
+        <VerticalSeparator />
+        <span className={styles.label}>Last Update: </span>
+        <span className={styles.value}>{lastCommit.date}</span>
+      </div>
+    </BorderedBox>
+  )
+}

package/src/components/PullRequest.module.css

@@ -0,0 +1,18 @@
+.container {
+  @apply flex flex-col;
+}
+.id {
+  @apply text-xl text-main-green font-semibold;
+}
+.header {
+  @apply flex items-center gap-x-4 mb-4;
+}
+.label {
+  @apply font-thin;
+}
+.value {
+  @apply font-semibold;
+}
+.content {
+  
+}

package/src/components/SearchBar.jsx

@@ -6,15 +6,23 @@ import styles from './SearchBar.module.css'
 import commonStyles from './Common.module.css'
 export default function SearchBar (props) {
   const inputRef = useRef()
-  const { action } = props
-
+  const { onSubmit, onChange } = props
   function handleSearch () {
-    const value = inputRef.current.value
-    return action(value)
+    if (onSubmit) {
+      const value = inputRef.current.value
+      return onSubmit(value)
+    }
+  }
+
+  function handleChange () {
+    if (onChange) {
+      const value = inputRef.current.value
+      return onChange(value)
+    }
   }
   return (
     <div className={`${styles.input} ${commonStyles.padded}`}>
-      <input type='text' placeholder='Search' className='grow' ref={inputRef} />
+      <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} />
       <button onClick={handleSearch}>
         <FontAwesomeIcon color='white' icon={faSearch} />
       </button>

package/src/components/TabbedWindow.jsx

@@ -22,7 +22,7 @@ export default function TabbedWindow (props) {
       <div className={styles['tabs-header']}>
         {headers.map((header, index) => {
           return (
-            <span onClick={() => setSelected(index)} key={index} className={selected === index ? styles['selected-tab'] : ''}>
+            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
               {header}
             </span>
           )

package/src/components/TabbedWindow.module.css

@@ -3,8 +3,15 @@
 }
 
 .tabs-header {
-  @apply flex justify-between text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[4rem];
+  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[2rem];
+}
+.tab {
+  @apply mr-4 min-w-[105px] text-center;
 }
 .selected-tab {
   @apply underline text-main-green underline-offset-8 font-bold;
+}
+
+.tabs-content {
+  @apply h-screen
 }

package/src/components/{Api → icons}/ApiIcon.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 export default function ApiIcon () {
   return (
     <svg

package/src/components/{Api → icons}/ApiIconClosed.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 export default function ApiIconClosed () {
   return (
     <svg

package/src/components/icons/PullRequestIcon.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+const PullRequestIcon = () => (
+  <svg
+    width={40}
+    height={40}
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx={9.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
+    <circle cx={9.5} cy={9.5} r={4.5} stroke='#fff' strokeWidth={2} />
+    <path stroke='#fff' strokeWidth={2} d='M9 14v12' />
+    <circle cx={30.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
+    <path
+      d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
+      stroke='#fff'
+      strokeWidth={2}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='m26 5-4.5 4.5L26 14'
+      stroke='#fff'
+      strokeWidth={2}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export default PullRequestIcon

package/src/components/layouts/Layout.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 export default function Layout (props) {
   return (
-    <div className='container mx-auto px-4 my-5 flex flex-col gap-10'>
+    <div className='container mx-auto px-4 my-5 flex flex-col gap-10 h-screen'>
       {props.children}
     </div>
 

package/src/stories/PullRequest.stories.jsx

@@ -0,0 +1,23 @@
+'use strict'
+import PullRequest from '../components/PullRequest'
+export default {
+  title: 'Platformatic/PullRequest',
+  component: PullRequest,
+  argTypes: {
+    color: { control: 'color' }
+  }
+}
+
+const Template = (args) => <PullRequest {...args}>Hello Platformatic</PullRequest>
+
+export const Standard = Template.bind({})
+Standard.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'
+  }
+}

package/src/stories/SearchBar.stories.jsx

@@ -0,0 +1,26 @@
+'use strict'
+import SearchBar from '../components/SearchBar'
+export default {
+  title: 'Platformatic/SearchBar',
+  component: SearchBar,
+  argTypes: {
+    color: { control: 'color' }
+  }
+}
+const Template = (args) => {
+  return (
+    <>
+      <SearchBar {...args}>Hello Platformatic</SearchBar>
+    </>
+
+  )
+}
+export const Standard = Template.bind({})
+Standard.args = {
+  onChange: (value) => {
+    console.log('Current search: ' + value)
+  },
+  onSubmit: (value) => {
+    alert('Query value: ' + value)
+  }
+}

package/src/components/Pr.jsx

@@ -1,9 +0,0 @@
-'use strict'
-import React from 'react'
-import BorderedBox from './BorderedBox'
-
-export default function Prs () {
-  return (
-    <BorderedBox color='green'>PR</BorderedBox>
-  )
-}