@platformatic/ui-components 0.1.17 → 0.1.19

package/index.js

@@ -7,6 +7,7 @@ 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 DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
 import FrontpageBackground from './src/components/FrontpageBackground'
 import GHLoginButton from './src/components/GHLoginButton'
@@ -35,6 +36,7 @@ export {
   Box,
   Button,
   DetailedMetric,
+  DropDown,
   FollowUs,
   FrontpageBackground,
   HorizontalSeparator,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -26,6 +26,7 @@
     "postcss": "^8.4.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-tooltip": "^4.4.3",
     "storybook-tailwind-foundations": "^1.1.2"
   },
   "devDependencies": {

package/src/components/ApiDetail.jsx

@@ -4,7 +4,6 @@ import Endpoints from './Api/Endpoints'
 import BorderedBox from './BorderedBox'
 import BorderedText from './BorderedText'
 import HorizontalSeparator from './HorizontalSeparator'
-import TwoColumnsLayout from './layouts/TwoColumnsLayout'
 import TextWithLabel from './TextWithLabel'
 import VerticalSeparator from './VerticalSeparator'
 import React from 'react'
@@ -35,14 +34,6 @@ export default function ApiDetails (props) {
           <span className='mr-2'>Endpoints: </span><Endpoints graphql={graphql} openapi={openapi} />
         </div>
       </BorderedBox>
-      <TwoColumnsLayout>
-        <BorderedBox>
-          Connected Clients
-        </BorderedBox>
-        <BorderedBox>
-          Failure Rate
-        </BorderedBox>
-      </TwoColumnsLayout>
     </>
 
   )

package/src/components/DropDown.jsx

@@ -0,0 +1,35 @@
+'use strict'
+
+import React, { useState } from 'react'
+import styles from './DropDown.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+export default function DropDown (props) {
+  const { header, items, align = 'left' } = props
+  const [open, setOpen] = useState(false)
+  function handleOpen () {
+    setOpen(!open)
+  }
+  return (
+    <div className={`${styles.dropDown} ${styles[align]}`}>
+      <span className={styles.header} onClick={handleOpen}>
+        {header}
+        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronLeft} />}
+        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
+      </span>
+      {open && (
+        <div className={styles.menu}>
+          {items.map((item, index) => {
+            return (
+              <div className={styles.item} key={index}>
+                {item}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+    </div>
+
+  )
+}

package/src/components/DropDown.module.css

@@ -0,0 +1,23 @@
+.dropDown {
+  @apply mx-4 relative flex flex-col;
+}
+
+.right {
+  @apply items-end;
+}
+
+.left {
+  @apply items-start;
+}
+.arrow {
+  @apply ml-2;
+}
+.header {
+  @apply hover:cursor-pointer
+}
+.menu {
+  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md;
+}
+.item {
+  @apply mb-2
+}

package/src/components/SimpleMetric.jsx

@@ -2,22 +2,31 @@
 
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+// The icon that is in design is not in the free version of fontawesome
+// Temporary using this one
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
+import ReactTooltip from 'react-tooltip'
 import BorderedBox from './BorderedBox'
 import styles from './SimpleMetric.module.css'
 import MetricValue from './MetricValue'
 
-export default function SimpleMetric ({ title, pre, color, unit, value, children }) {
+export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, 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>
+    <>
+      <BorderedBox>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <FontAwesomeIcon
+            icon={faCircleExclamation}
+            data-tip={tooltip}
+          />
+        </div>
+        <div>
+          <MetricValue pre={pre} color={color} unit={unit} value={value} />
+          {children}
+        </div>
+      </BorderedBox>
+      <ReactTooltip />
+    </>
   )
 }

package/src/stories/DetailedMetric.stories.jsx

@@ -16,6 +16,8 @@ Default.args = {
   color: 'green',
   unit: 'ms',
   value: 120,
+  pre: 'P90',
+  tooltip: 'This is a tooltip for the metric',
   leftDetail: {
     value: 600,
     unit: 'ms',
@@ -29,22 +31,3 @@ Default.args = {
     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/DropDown.stories.jsx

@@ -0,0 +1,43 @@
+'use strict'
+import DropDown from '../components/DropDown'
+export default {
+  title: 'Platformatic/DropDown',
+  component: DropDown,
+  decorators: [dd => <div className='text-white'>{dd()}</div>]
+}
+
+const Template = (args) => <DropDown {...args} />
+export const DefaultAlignment = Template.bind({})
+
+DefaultAlignment.args = {
+  header: 'My Menu',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignRight = Template.bind({})
+
+AlignRight.args = {
+  header: 'My Menu',
+  align: 'right',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignLeft = Template.bind({})
+
+AlignLeft.args = {
+  header: 'My Menu',
+  align: 'left',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}

package/src/stories/SimpleMetric.stories.jsx

@@ -15,7 +15,8 @@ Green.args = {
   title: 'Requests',
   color: 'green',
   unit: 'ms',
-  value: 120
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
 }
 
 export const Red = Template.bind({})
@@ -24,7 +25,8 @@ Red.args = {
   title: 'Requests',
   color: 'red',
   unit: 'ms',
-  value: 120
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
 }
 
 export const WithPrefix = Template.bind({})
@@ -34,5 +36,6 @@ WithPrefix.args = {
   color: 'green',
   unit: 'ms',
   value: 120,
-  pre: 'P90'
+  pre: 'P90',
+  tooltip: 'This is a tooltip for the metric'
 }