@platformatic/ui-components 0.1.16 → 0.1.17

package/index.js

@@ -6,6 +6,7 @@ import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import Box from './src/components/Box'
 import Button from './src/components/Button'
+import DetailedMetric from './src/components/DetailedMetric'
 import FollowUs from './src/components/FollowUs'
 import FrontpageBackground from './src/components/FrontpageBackground'
 import GHLoginButton from './src/components/GHLoginButton'
@@ -19,6 +20,7 @@ import Logo from './src/components/Logo'
 import Playground from './src/components/Playground'
 import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
+import SimpleMetric from './src/components/SimpleMetric'
 import Status from './src/components/Status'
 import TabbedWindow from './src/components/TabbedWindow'
 import TextWithLabel from './src/components/TextWithLabel'
@@ -32,6 +34,7 @@ export {
   BorderedText,
   Box,
   Button,
+  DetailedMetric,
   FollowUs,
   FrontpageBackground,
   HorizontalSeparator,
@@ -45,6 +48,7 @@ export {
   Playground,
   PullRequest,
   SearchBar,
+  SimpleMetric,
   Status,
   TabbedWindow,
   TextWithLabel,

package/package.json

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

package/src/components/ApiDetail.jsx

@@ -5,55 +5,12 @@ import BorderedBox from './BorderedBox'
 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 = {
-    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'>
@@ -78,23 +35,6 @@ export default function ApiDetails (props) {
           <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

package/src/components/Button.jsx

@@ -1,6 +1,10 @@
+'use strict'
+
+import React from 'react'
 import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-export default function Button ({ icon, label, onClick, primary, color, ...props }) {
+export default function Button (props) {
+  const { icon, label, primary, color } = props
   let buttonClass = 'primary'
   if (!primary) {
     buttonClass = 'secondary'
@@ -11,7 +15,7 @@ export default function Button ({ icon, label, onClick, primary, color, ...props
     colorClass = 'red'
   }
   return (
-    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`}>
+    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`} {...props}>
       {icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='button-icon' /> : null}
       <span>{label}</span>
     </button>

package/src/components/DetailedMetric.jsx

@@ -0,0 +1,32 @@
+'use strict'
+
+import React from 'react'
+import SimpleMetric from './SimpleMetric'
+import HorizontalSeparator from './HorizontalSeparator'
+import VerticalSeparator from './VerticalSeparator'
+import styles from './DetailedMetric.module.css'
+import MetricValue from './MetricValue'
+export default function DetailedMetric (props) {
+  const { leftDetail, rightDetail } = props
+  return (
+    <SimpleMetric {...props}>
+      <HorizontalSeparator />
+      <div className={styles.detailContainer}>
+        <MetricValue
+          pre={leftDetail.pre}
+          unit={leftDetail.unit}
+          color={leftDetail.color}
+          value={leftDetail.value}
+        />
+        <VerticalSeparator />
+        <MetricValue
+          pre={rightDetail.pre}
+          unit={rightDetail.unit}
+          color={rightDetail.color}
+          value={rightDetail.value}
+        />
+      </div>
+    </SimpleMetric>
+
+  )
+}

package/src/components/DetailedMetric.module.css

@@ -0,0 +1,3 @@
+.detailContainer {
+  @apply flex items-center justify-around;
+}

package/src/components/Input.jsx

@@ -1,4 +1,5 @@
 'use strict'
+import React from 'react'
 import styles from './Input.module.css'
 import commonStyles from './Common.module.css'
 export default function Input ({ placeholder, value, name }) {

package/src/components/MetricValue.jsx

@@ -0,0 +1,15 @@
+'use strict'
+import React from 'react'
+import styles from './MetricValue.module.css'
+import { getColor } from '../lib/utils'
+export default function MetricValue ({ pre, color, value, unit }) {
+  return (
+    <div className={styles.metric}>
+      {pre && <span>{pre}</span>}
+      <span className={`${styles.value} ${getColor('text', color)}`}>
+        {value}
+      </span>
+      <span>{unit}</span>
+    </div>
+  )
+}

package/src/components/MetricValue.module.css

@@ -0,0 +1,8 @@
+.metric {
+  @apply flex justify-center items-center;
+  gap: 1rem;
+}
+
+.value {
+  @apply text-5xl
+}

package/src/components/SimpleMetric.jsx

@@ -0,0 +1,23 @@
+'use strict'
+
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import BorderedBox from './BorderedBox'
+import styles from './SimpleMetric.module.css'
+import MetricValue from './MetricValue'
+
+export default function SimpleMetric ({ title, pre, color, unit, value, children }) {
+  return (
+    <BorderedBox>
+      <div className={styles.header}>
+        <span className={styles.title}>{title}</span>
+        <FontAwesomeIcon icon={faCircleInfo} className='text-white' />
+      </div>
+      <div>
+        <MetricValue pre={pre} color={color} unit={unit} value={value} />
+        {children}
+      </div>
+    </BorderedBox>
+  )
+}

package/src/components/SimpleMetric.module.css

@@ -0,0 +1,7 @@
+.header {
+  @apply flex justify-between items-center font-bold;
+}
+
+.title {
+  @apply text-xl;
+}

package/src/stories/DetailedMetric.stories.jsx

@@ -0,0 +1,50 @@
+'use strict'
+
+import DetailedMetric from '../components/DetailedMetric'
+
+export default {
+  title: 'Platformatic/DetailedMetric',
+  component: DetailedMetric
+}
+
+const Template = (args) => <DetailedMetric {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  leftDetail: {
+    value: 600,
+    unit: 'ms',
+    color: 'green',
+    pre: 'P99'
+  },
+  rightDetail: {
+    value: 4.42,
+    unit: 's',
+    color: 'green',
+    pre: 'P95'
+  }
+}
+
+// export const Red = Template.bind({})
+
+// Red.args = {
+//   title: 'Requests',
+//   color: 'red',
+//   unit: 'ms',
+//   value: 120
+// }
+
+// export const WithPrefix = Template.bind({})
+
+// WithPrefix.args = {
+//   title: 'Requests',
+//   color: 'green',
+//   unit: 'ms',
+//   value: 120,
+//   pre: 'P90'
+// }

package/src/stories/SimpleMetric.stories.jsx

@@ -0,0 +1,38 @@
+'use strict'
+
+import SimpleMetric from '../components/SimpleMetric'
+
+export default {
+  title: 'Platformatic/SimpleMetric',
+  component: SimpleMetric
+}
+
+const Template = (args) => <SimpleMetric {...args} />
+
+export const Green = Template.bind({})
+
+Green.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120
+}
+
+export const Red = Template.bind({})
+
+Red.args = {
+  title: 'Requests',
+  color: 'red',
+  unit: 'ms',
+  value: 120
+}
+
+export const WithPrefix = Template.bind({})
+
+WithPrefix.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  pre: 'P90'
+}

package/src/components/StatValue.jsx

@@ -1,16 +0,0 @@
-'use strict'
-import React 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/StatsView.jsx

@@ -1,47 +0,0 @@
-'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'
-import React from 'react'
-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

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