@platformatic/ui-components 0.1.42 → 0.1.43

package/package.json

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

package/src/components/MetricValue.jsx

@@ -5,11 +5,11 @@ import { getColor } from '../lib/utils'
 export default function MetricValue ({ pre, color, value, unit }) {
   return (
     <div className={styles.metric}>
-      {pre && <span>{pre}</span>}
+      {pre && <span className={styles.pre}>{pre}</span>}
       <span className={`${styles.value} ${getColor('text', color)}`}>
         {value}
       </span>
-      <span>{unit}</span>
+      <span className={styles.unit}>{unit}</span>
     </div>
   )
 }

package/src/components/MetricValue.module.css

@@ -1,8 +1,10 @@
 .metric {
-  @apply flex justify-center items-center;
-  gap: 1rem;
+  @apply flex justify-center items-center gap-x-2;
 }
-
 .value {
-  @apply text-5xl
+  @apply text-[32px] font-semibold;
+}
+.unit,
+.pre {
+  @apply text-sm;
 }

package/src/components/SimpleMetric.jsx

@@ -1,14 +1,13 @@
 'use strict'
 
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 // 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'
+import Icons from './icons'
 
 export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
   return (
@@ -16,10 +15,7 @@ export default function SimpleMetric ({ title, pre, color, unit, value, tooltip,
       <BorderedBox>
         <div className={styles.header}>
           <span className={styles.title}>{title}</span>
-          <FontAwesomeIcon
-            icon={faCircleExclamation}
-            data-tip={tooltip}
-          />
+          <Icons.CircleExclamationIcon tip={tooltip} />
         </div>
         <div>
           <MetricValue pre={pre} color={color} unit={unit} value={value} />

package/src/components/SimpleMetric.module.css

@@ -3,5 +3,5 @@
 }
 
 .title {
-  @apply text-xl;
+  @apply text-base font-semibold;
 }

package/src/components/icons/AppListIcon.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styles from './Icons.module.css'
+export default function AppListIcon ({ color = 'white' }) {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={49}
+      height={67}
+      viewBox='0 0 49 67'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path
+        d='M19.6628 38.0801H11.9961C11.4438 38.0801 10.9961 38.5278 10.9961 39.0801V53.7201C10.9961 54.2724 11.4438 54.7201 11.9961 54.7201H35.9961C36.5484 54.7201 36.9961 54.2724 36.9961 53.7201V39.0801C36.9961 38.5278 36.5484 38.0801 35.9961 38.0801H28.3294'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+      />
+      <rect
+        x={19.6631}
+        y={54.72}
+        width={8.66667}
+        height={4.16}
+        stroke='white'
+        strokeWidth={2}
+      />
+      <path
+        d='M15.3291 59.8799C15.3291 59.3276 15.7768 58.8799 16.3291 58.8799H31.6624C32.2147 58.8799 32.6624 59.3276 32.6624 59.8799V61.9999H15.3291V59.8799Z'
+        stroke='white'
+        strokeWidth={2}
+      />
+      <path
+        d='M23.9958 36L25.9416 41.749H32.2383L27.1441 45.302L29.0899 51.051L23.9958 47.498L18.9016 51.051L20.8474 45.302L15.7533 41.749H22.05L23.9958 36Z'
+        stroke='white'
+        strokeWidth={2}
+        strokeLinejoin='round'
+      />
+      <path
+        d='M20.9961 34H15.9961V25H13.9961'
+        stroke='white'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M19.9961 29.5V9'
+        stroke='white'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M27.9961 35H32V27H38.9961V19'
+        stroke='white'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M26 31.5V22H30.9961V14.5'
+        stroke='white'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={11.9961} cy={25} r={2} stroke='white' strokeWidth={2} />
+      <circle cx={19.9961} cy={7} r={2} stroke='white' strokeWidth={2} />
+      <circle cx={30.9961} cy={12} r={2} stroke='white' strokeWidth={2} />
+      <circle cx={38.9961} cy={17} r={2} stroke='white' strokeWidth={2} />
+    </svg>
+  )
+}

package/src/components/icons/CircleExclamationIcon.jsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
+  const className = styles[`${color}`]
+
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+      <path
+        d='M12 8.25V13.5'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={12} cy={15.75} r={0.75} fill='none' />
+    </svg>
+  )
+}
+
+export default CircleExclamationIcon

package/src/components/icons/index.js

@@ -2,7 +2,9 @@ import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
+import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import CircleExclamationIcon from './CircleExclamationIcon'
 import CloseModalIcon from './CloseModalIcon'
 import GearIcon from './GearIcon'
 import RoundCloseIcon from './RoundCloseIcon'
@@ -17,7 +19,9 @@ export default {
   ApiIconClosed,
   ApiEmptyIcon,
   AppIcon,
+  AppListIcon,
   AppEmptyIcon,
+  CircleExclamationIcon,
   CloseModalIcon,
   GearIcon,
   RoundCloseIcon,

package/src/stories/DetailedMetric.stories.jsx

@@ -3,7 +3,7 @@
 import DetailedMetric from '../components/DetailedMetric'
 
 export default {
-  title: 'Platformatic/DetailedMetric',
+  title: 'Platformatic/Metrics/DetailedMetric',
   component: DetailedMetric
 }
 

package/src/stories/SimpleMetric.stories.jsx

@@ -3,7 +3,7 @@
 import SimpleMetric from '../components/SimpleMetric'
 
 export default {
-  title: 'Platformatic/SimpleMetric',
+  title: 'Platformatic/Metrics/SimpleMetric',
   component: SimpleMetric
 }