@platformatic/ui-components 0.1.0

package/src/components/Api/Status.jsx

@@ -0,0 +1,19 @@
+'use strict'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+export default function ApiStatus (props) {
+  const { online } = props
+  const colorClass = online ? 'text-main-green' : 'text-error-red'
+  return (
+    <div className={colorClass}>
+      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-1`} />
+      {online && (
+        'Online'
+      )}
+
+      {!online && (
+        'Offline'
+      )}
+    </div>
+  )
+}

package/src/components/Api/Version.jsx

@@ -0,0 +1,8 @@
+'use strict'
+
+import BorderedText from '../BorderedText'
+
+export default function ApiVersion (props) {
+  const { version } = props
+  return (<div className='font-light'><BorderedText text={`v${version}`} /></div>)
+}

package/src/components/Api.jsx

@@ -0,0 +1,83 @@
+'use strict'
+
+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 Separator from './VerticalSeparator'
+import ApiStatus from './Api/Status'
+import BorderedBox from './BorderedBox'
+import HorizontalSeparator from './HorizontalSeparator'
+import styles from './Api.module.css'
+import { useState } from 'react'
+
+function ApiName (props) {
+  const { name } = props
+  return (
+    <span className='text-main-green font-semibold text-2xl'>{name}</span>
+  )
+}
+export default function API (props) {
+  const [isOpen, setIsOpen] = useState(true)
+  const { name, version, source, lastDeploy, graphql, openapi, online } = props.data
+  const color = online ? 'green' : 'red'
+  function getApiIcon () {
+    if (isOpen) {
+      return 'api-icon.svg'
+    }
+    return 'api-icon-closed.svg'
+  }
+  return (
+    <BorderedBox
+      color={color}
+    >
+      {isOpen && (
+        <>
+          <div className={styles.main}>
+            <div className='flex w-full'>
+              <img className='w-9 mr-5' src={getApiIcon()} />
+              <div className={styles.data}>
+                <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>
+                    <ApiVersion version={version} />
+                  </div>
+                  <div className={styles.status}>
+                    <ApiStatus online={online} />
+                  </div>
+
+                </div>
+
+                <div className='flex gap-2 items-center'>
+                  <span>Generated with: {source}</span>
+                  <Separator />
+                  <span>Last deployed: {lastDeploy}</span>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <HorizontalSeparator />
+          <ApiFooter
+            graphql={graphql}
+            openapi={openapi}
+          />
+        </>
+      )}
+      {!isOpen && (
+        <div className='flex items-center'>
+          <img className='w-9 mr-5' src={getApiIcon()} />
+          <ApiName name={name} />
+          <span onClick={() => { setIsOpen(!isOpen) }} className='ml-4 hover:cursor-pointer'>Click here to set up your api</span>
+        </div>
+
+      )}
+    </BorderedBox>
+  )
+}

package/src/components/Api.module.css

@@ -0,0 +1,11 @@
+.main {
+  @apply flex items-center text-white;
+}
+
+.data {
+  @apply flex flex-col w-full;
+}
+
+.status {
+  @apply justify-self-end;
+}

package/src/components/ApiDetail.jsx

@@ -0,0 +1,106 @@
+'use strict'
+
+import Endpoints from './Api/Endpoints'
+import BorderedBox from './BorderedBox'
+import BorderedText from './BorderedText'
+import HorizontalSeparator from './HorizontalSeparator'
+import TwoColumnsLayout from './layouts/TwoColumnsLayout'
+import StatsView from './StatView'
+import VerticalSeparator from './VerticalSeparator'
+
+export default function ApiDetails (props) {
+  const apiData = props.data
+  const { url, repository, version, openapi, graphql, source, lastDeploy } = apiData
+  const requestStats = {
+    mainStat: {
+      value: 12,
+      label: 'Total',
+      color: 'green'
+    },
+    otherStats: [
+      {
+        value: 8,
+        label: 'per minute',
+        color: 'green'
+      },
+      {
+        value: 0.5,
+        label: 'per second',
+        color: 'green'
+      }
+    ]
+  }
+
+  const latencyStats = {
+    mainStat: {
+      value: 150,
+      label: 'ms',
+      color: 'green',
+      pre: 'P90'
+    },
+    otherStats: [
+      {
+        value: 600,
+        label: 'ms',
+        color: 'green',
+        pre: 'P99'
+      },
+      {
+        value: 4.42,
+        label: 's',
+        color: 'green',
+        pre: 'P95'
+      }
+    ]
+  }
+  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>
+        <HorizontalSeparator />
+        <div className='flex gap-2 items-center'>
+          <span>Generated with: {source}</span>
+          <VerticalSeparator />
+          <span>Last deployed: {lastDeploy}</span>
+        </div>
+        <div className='flex items-center'>
+          <span className='mr-2'>Endpoints: </span><Endpoints graphql={graphql} openapi={openapi} />
+        </div>
+      </BorderedBox>
+      <TwoColumnsLayout>
+        <BorderedBox>
+          <StatsView
+            title='Requests'
+            tooltip='Number of requests'
+            stats={requestStats}
+          />
+        </BorderedBox>
+        <BorderedBox>
+          <StatsView
+            title='Latency'
+            tooltip='Request Latency'
+            stats={latencyStats}
+          />
+        </BorderedBox>
+      </TwoColumnsLayout>
+
+      <TwoColumnsLayout>
+        <BorderedBox>
+          Connected Clients
+        </BorderedBox>
+        <BorderedBox>
+          Failure Rate
+        </BorderedBox>
+      </TwoColumnsLayout>
+    </>
+
+  )
+}

package/src/components/BorderedBox.jsx

@@ -0,0 +1,15 @@
+'use strict'
+
+import { getColor } from '../lib/utils'
+import styles from './BorderedBox.module.css'
+import commonStyles from './Common.module.css'
+export default function BorderedBox (props) {
+  const { classes, color, children } = props
+  const borderColor = getColor('border', color)
+
+  return (
+    <div className={`${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor}`}>
+      {children}
+    </div>
+  )
+}

package/src/components/BorderedBox.module.css

@@ -0,0 +1,3 @@
+.borderedBox {
+  @apply rounded-md p-5 bg-dark-blue text-white mb-4 flex-1 gap-y-4;
+}

package/src/components/BorderedText.jsx

@@ -0,0 +1,8 @@
+'use strict'
+import styles from './BorderedText.module.css'
+
+export default function BorderedText (props) {
+  return (
+    <span className={styles.bordered}>{props.text}</span>
+  )
+}

package/src/components/BorderedText.module.css

@@ -0,0 +1,3 @@
+.bordered {
+  @apply border border-solid rounded-md px-2 py-1 border-white tracking-[.25rem] text-white;
+}

package/src/components/Common.module.css

@@ -0,0 +1,7 @@
+.padded {
+  @apply px-2 py-2.5;
+}
+
+.bordered {
+  @apply border border-solid box-border rounded-md;
+}

package/src/components/HorizontalSeparator.jsx

@@ -0,0 +1,5 @@
+'use strict'
+
+export default function HorizontalSeparator () {
+  return <hr className='text-dark-green my-4' />
+}

package/src/components/Main.jsx

@@ -0,0 +1,69 @@
+'use strict'
+
+import SearchBar from './SearchBar'
+import Api from './Api'
+import ApiDetails from './ApiDetail'
+import TabbedWindow from './TabbedWindow'
+import Prs from './Pr'
+import Playground from './Playground'
+import Versions from './Versions'
+import { useState } from 'react'
+export default function Main () {
+  const [currentSearch, setCurrentSearch] = useState('')
+  const apis = [
+    {
+      id: 1,
+      name: 'api-online',
+      version: '1.2.3',
+      source: 'Platformatic DB',
+      lastDeploy: '2022-10-10',
+      graphql: true,
+      openapi: true,
+      online: true,
+      url: 'https://example.com',
+      repository: 'platformatic/example'
+    },
+    {
+      id: 2,
+      name: 'api-offline',
+      version: '1.2.3',
+      source: 'Platformatic DB',
+      lastDeploy: '2022-10-10',
+      graphql: true,
+      openapi: true,
+      online: false
+    }
+  ]
+  const tabs = [
+    {
+      label: 'Overview',
+      component: () => <ApiDetails data={apis[0]} />
+    },
+    {
+      label: 'PRs',
+      component: () => <Prs />
+    },
+    {
+      label: 'Playground',
+      component: () => <Playground />
+    },
+    {
+      label: 'Versions',
+      component: () => <Versions />
+    }
+
+  ]
+  return (
+    <>
+      <h1 className='text-white text-2xl font-bold'>My APIs</h1>
+      <SearchBar action={(value) => setCurrentSearch(value)} />
+      {currentSearch !== '' && (
+        <span className='text-main-green'>You searched for {currentSearch}</span>
+      )}
+      <TabbedWindow
+        tabs={tabs}
+      />
+      {apis.map((api) => { return (<Api key={api.id} data={api} />) })}
+    </>
+  )
+}

package/src/components/Playground.jsx

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

package/src/components/Pr.jsx

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

package/src/components/SearchBar.jsx

@@ -0,0 +1,25 @@
+'use strict'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { useRef } from 'react'
+import styles from './SearchBar.module.css'
+import commonStyles from './Common.module.css'
+export default function SearchBar (props) {
+  const inputRef = useRef()
+  const { action } = props
+
+  function handleSearch () {
+    const value = inputRef.current.value
+    return action(value)
+  }
+  return (
+    <div className={`${styles.input} ${commonStyles.padded}`}>
+      <input type='text' placeholder='Search' className='grow' ref={inputRef} />
+      <button onClick={handleSearch}>
+        <FontAwesomeIcon color='white' icon={faSearch} />
+      </button>
+
+    </div>
+
+  )
+}

package/src/components/SearchBar.module.css

@@ -0,0 +1,6 @@
+.input {
+  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
+}
+.input > input:focus {
+  @apply outline-none;
+}

package/src/components/StatValue.jsx

@@ -0,0 +1,16 @@
+'use strict'
+import { Fragment } from 'react'
+import { getColor } from '../lib/utils'
+export default function StatValue (props) {
+  const { value, color, label, pre } = props
+  return (
+    <>
+      {pre && <span>{pre}</span>}
+      <span className={`text-5xl ${getColor('text', color)}`}>
+        {value}
+      </span>
+      <span>{label}</span>
+    </>
+
+  )
+}

package/src/components/StatView.jsx

@@ -0,0 +1,47 @@
+'use strict'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import styles from './StatsView.module.css'
+import HorizontalSeparator from './HorizontalSeparator'
+import VerticalSeparator from './VerticalSeparator'
+import StatValue from './StatValue'
+
+export default function StatsView (props) {
+  const { title, stats } = props
+  const mainStat = stats.mainStat
+  const otherStats = stats.otherStats
+  return (
+    <>
+      <div className={styles['stats-header']}>
+        <span className='text-xl'>{title}</span>
+        <FontAwesomeIcon icon={faCircleInfo} className='text-white' />
+      </div>
+      <div className={styles['stats-content']}>
+        {mainStat && (
+          <div className={styles['stats-main-stat']}>
+            <StatValue pre={mainStat.pre} label={mainStat.label} color={mainStat.color} value={mainStat.value} />
+          </div>
+        )}
+        {otherStats && (
+          <>
+            <HorizontalSeparator />
+            <div className='flex items-center justify-around'>
+              <div className={styles['stats-main-stat']}>
+                <StatValue pre={otherStats[0].pre} label={otherStats[0].label} color={otherStats[0].color} value={otherStats[0].value} />
+              </div>
+
+              <VerticalSeparator />
+              <div className={styles['stats-main-stat']}>
+                <StatValue pre={otherStats[1].pre} label={otherStats[1].label} color={otherStats[1].color} value={otherStats[1].value} />
+              </div>
+            </div>
+
+          </>
+
+        )}
+      </div>
+
+    </>
+  )
+}

package/src/components/StatsView.module.css

@@ -0,0 +1,10 @@
+.stats-header {
+  @apply flex justify-between items-center font-bold
+}
+.stats-main-stat {
+  @apply flex justify-center items-center;
+  gap: 1rem;
+}
+.stats-other-stats {
+
+}

package/src/components/TabbedWindow.jsx

@@ -0,0 +1,34 @@
+'use strict'
+import React, { useEffect, useState } from 'react'
+import styles from './TabbedWindow.module.css'
+
+export default function TabbedWindow (props) {
+  const [selected, setSelected] = useState(0)
+  const { tabs } = props
+  const headers = []
+  const components = []
+  tabs.forEach((tab) => {
+    headers.push(tab.label)
+    components.push(tab.component)
+  })
+  let currentComponent = components[selected]
+
+  useEffect(() => {
+    currentComponent = components[selected]
+  }, [selected])
+
+  return (
+    <div className={styles['tabbed-container']}>
+      <div className={styles['tabs-header']}>
+        {headers.map((header, index) => {
+          return (
+            <span onClick={() => setSelected(index)} key={index} className={selected === index ? styles['selected-tab'] : ''}>
+              {header}
+            </span>
+          )
+        })}
+      </div>
+      <div className={styles['tabs-content']}>{currentComponent()}</div>
+    </div>
+  )
+}

package/src/components/TabbedWindow.module.css

@@ -0,0 +1,10 @@
+.tabbed-container {
+  @apply bg-main-dark-blue;
+}
+
+.tabs-header {
+  @apply flex justify-between text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[4rem];
+}
+.selected-tab {
+  @apply underline text-main-green underline-offset-8 font-bold;
+}

package/src/components/Versions.jsx

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

package/src/components/VerticalSeparator.jsx

@@ -0,0 +1,5 @@
+'use strict'
+
+export default function VerticalSeparator () {
+  return <span className='text-dark-green m-3'> | </span>
+}

package/src/components/layouts/Layout.jsx

@@ -0,0 +1,10 @@
+'use strict'
+
+export default function Layout (props) {
+  return (
+    <div className='container mx-auto px-4 my-5 flex flex-col gap-10'>
+      {props.children}
+    </div>
+
+  )
+}

package/src/components/layouts/TwoColumnsLayout.jsx

@@ -0,0 +1,9 @@
+'use strict'
+
+export default function TwoColumnsLayout (props) {
+  return (
+    <div className='grid grid-cols-2 gap-x-4'>
+      {props.children}
+    </div>
+  )
+}

package/src/lib/utils.js

@@ -0,0 +1,20 @@
+'use strict'
+
+function getColor (type, color) {
+  let convertedColor
+  switch (color) {
+    case 'green':
+      convertedColor = 'main-green'
+      break
+    case 'red':
+      convertedColor = 'error-red'
+      break
+    default:
+      convertedColor = 'main-green'
+      break
+  }
+  return `${type}-${convertedColor}`
+}
+export {
+  getColor
+}

package/src/main.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/main.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/src/stories/BorderedBox.stories.jsx

@@ -0,0 +1,19 @@
+'use strict'
+import BorderedBox from '../components/BorderedBox'
+export default {
+  title: 'Example/BorderedBox',
+  component: BorderedBox,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    color: { control: 'color' }
+  }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+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'
+}

package/src/stories/Button.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};