@platformatic/ui-components 0.1.8 → 0.1.10

package/index.js

@@ -5,30 +5,32 @@ import ApiDetails from './src/components/ApiDetail'
 import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
+import GHLoginButton from './src/components/GHLoginButton'
 import Layout from './src/components/layouts/Layout'
+import LoginButton from './src/components/LoginButton'
 import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Playground from './src/components/Playground'
-import Prs from './src/components/Pr'
+import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
 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 LoginButton from './src/components/LoginButton'
-import GHLoginButton from './src/components/GHLoginButton'
 export {
   ApiSummary,
   ApiDetails,
   BorderedBox,
   BorderedText,
+  GHLoginButton,
   HorizontalSeparator,
   Layout,
+  LoginButton,
   TwoColumnsLayout,
   Playground,
-  Prs,
+  PullRequest,
   SearchBar,
   TabbedWindow,
+  TextWithLabel,
   Versions,
-  VerticalSeparator,
-  LoginButton,
-  GHLoginButton
+  VerticalSeparator
 }

package/package.json

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

package/src/components/ApiDetail.jsx

@@ -6,8 +6,10 @@ import BorderedText from './BorderedText'
 import HorizontalSeparator from './HorizontalSeparator'
 import TwoColumnsLayout from './layouts/TwoColumnsLayout'
 import StatsView from './StatsView'
+import TextWithLabel from './TextWithLabel'
 import VerticalSeparator from './VerticalSeparator'
 import React from 'react'
+import styles from './ApiDetail.module.css'
 export default function ApiDetails (props) {
   const { url, repository, version, openapi, graphql, source, lastDeploy } = props
   const requestStats = {
@@ -55,20 +57,22 @@ export default function ApiDetails (props) {
   return (
     <>
       <BorderedBox classes='api-data'>
-        <div>
-          Preview/Staging URL: <a href={url}>{url}</a>
-        </div>
-        <div>
-          Repository: <a href={`https://github.com/${repository}`}>{repository}</a>
-        </div>
-        <div>
-          Version: <BorderedText text={`v${version}`} />
+        <div className={styles.main}>
+          <div>
+            Preview/Staging URL: <a href={url}>{url}</a>
+          </div>
+          <div>
+            Repository: <a href={`https://github.com/${repository}`}>{repository}</a>
+          </div>
+          <div>
+            Version: <BorderedText text={`v${version}`} />
+          </div>
         </div>
         <HorizontalSeparator />
         <div className='flex gap-2 items-center'>
-          <span>Generated with: {source}</span>
+          <TextWithLabel label='Generated With' text={source} />
           <VerticalSeparator />
-          <span>Last deployed: {lastDeploy}</span>
+          <TextWithLabel label='Last deployed' text={lastDeploy} />
         </div>
         <div className='flex items-center'>
           <span className='mr-2'>Endpoints: </span><Endpoints graphql={graphql} openapi={openapi} />

package/src/components/ApiDetail.module.css

@@ -0,0 +1,3 @@
+.main {
+  @apply flex flex-col gap-y-4;
+}

package/src/components/ApiSummary.jsx

@@ -4,9 +4,10 @@ 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 ApiIconClosed from './Api/ApiIconClosed'
-import Separator from './VerticalSeparator'
+import ApiIcon from './icons/ApiIcon'
+import ApiIconClosed from './icons/ApiIconClosed'
+import VerticalSeparator from './VerticalSeparator'
+import TextWithLabel from './TextWithLabel'
 import ApiStatus from './Api/Status'
 import BorderedBox from './BorderedBox'
 import HorizontalSeparator from './HorizontalSeparator'
@@ -46,9 +47,9 @@ export default function ApiSummary (props) {
                 </div>
 
                 <div className='flex gap-2 items-center'>
-                  <span>Generated with: {source}</span>
-                  <Separator />
-                  <span>Last deployed: {lastDeploy}</span>
+                  <TextWithLabel label='Generated With' text={source} />
+                  <VerticalSeparator />
+                  <TextWithLabel label='Last deployed' text={lastDeploy} />
                 </div>
               </div>
 

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,31 @@
+'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 TextWithLabel from './TextWithLabel'
+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}>
+        <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>
+  )
+}

package/src/components/PullRequest.module.css

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

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/TextWithLabel.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './TextWithLabel.module.css'
+export default function TextWithLabel ({ label, text, children }) {
+  return (
+    <div className={styles.container}>
+      <span className={styles.label}>{label}:</span>
+      {text && <span className={styles.text}>{text}</span>}
+      {children && <span>{children}</span>}
+    </div>
+  )
+}

package/src/components/TextWithLabel.module.css

@@ -0,0 +1,9 @@
+.container {
+  @apply text-white
+}
+.label {
+  @apply font-thin mr-2;
+}
+.text {
+  @apply font-semibold;
+}

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,27 @@
+'use strict'
+import SearchBar from '../components/SearchBar'
+export default {
+  title: 'Platformatic/SearchBar',
+  component: SearchBar,
+  argTypes: {
+    onChange: { control: 'function' },
+    onSubmit: { control: 'function' }
+  }
+}
+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/stories/TesxtWithLabel.stories.jsx

@@ -0,0 +1,25 @@
+'use strict'
+
+import TextWithLabel from '../components/TextWithLabel'
+export default {
+  title: 'Platformatic/TextWithLabel',
+  component: TextWithLabel,
+  argTypes: {
+    label: { control: 'text' },
+    text: { control: 'text' }
+  }
+}
+const Template = (args) => <TextWithLabel {...args} />
+
+export const Standard = Template.bind({})
+
+Standard.args = {
+  label: 'Created By',
+  text: 'Platformatic Team'
+}
+
+export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
+
+WithLink.args = {
+  label: 'External Link'
+}

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>
-  )
-}