@platformatic/ui-components 0.1.9 → 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.9",
+  "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

@@ -5,8 +5,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
 import ApiVersion from './Api/Version'
 import ApiIcon from './icons/ApiIcon'
-import ApiIconClosed from './Api/ApiIconClosed'
-import Separator from './VerticalSeparator'
+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/PullRequest.jsx

@@ -4,6 +4,7 @@ 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 (
@@ -14,22 +15,16 @@ export default function PullRequest ({ id, title, lastCommit, url }) {
         <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>
+        <TextWithLabel label='PR Title' text={title} />
       </div>
 
       <HorizontalSeparator />
-      <div>
-        <span className={styles.label}>Last commit by: </span>
-        <span className={styles.value}>{lastCommit.author}</span>
+      <div className={styles.footer}>
+        <TextWithLabel label='Last commit by' text={lastCommit.author} />
         <VerticalSeparator />
-        <span className={styles.label}>Commit SHA: </span>
-        <span className={styles.value}>{lastCommit.sha}</span>
+        <TextWithLabel label='Commit SHA' text={lastCommit.sha} />
         <VerticalSeparator />
-        <span className={styles.label}>Last Update: </span>
-        <span className={styles.value}>{lastCommit.date}</span>
+        <TextWithLabel label='Last Update' text={lastCommit.date} />
       </div>
     </BorderedBox>
   )

package/src/components/PullRequest.module.css

@@ -7,12 +7,6 @@
 .header {
   @apply flex items-center gap-x-4 mb-4;
 }
-.label {
-  @apply font-thin;
-}
-.value {
-  @apply font-semibold;
-}
-.content {
-  
+.footer {
+  @apply flex items-center
 }

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/stories/SearchBar.stories.jsx

@@ -4,7 +4,8 @@ export default {
   title: 'Platformatic/SearchBar',
   component: SearchBar,
   argTypes: {
-    color: { control: 'color' }
+    onChange: { control: 'function' },
+    onSubmit: { control: 'function' }
   }
 }
 const Template = (args) => {

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'
+}