@platformatic/ui-components 0.1.42 → 0.1.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "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/Modal.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import useEscapeKey from '../hooks/useEscapeKey'
-import CloseModalIcon from './icons/CloseModalIcon'
-import RoundCloseIcon from './icons/RoundCloseIcon'
-import RoundCloseHoverIcon from './icons/RoundCloseHoverIcon'
+import CloseIcon from './icons/CloseIcon'
+import CircleCloseIcon from './icons/CircleCloseIcon'
+import CircleCloseHoverIcon from './icons/CircleCloseHoverIcon'
 import Logo from './Logo'
 import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
@@ -25,7 +25,7 @@ export default function Modal (props) {
               <div className={styles.header}>
                 <div className={styles.title}>{title}</div>
                 <div className={styles.close} onClick={() => setIsOpen(false)}>
-                  <CloseModalIcon />
+                  <CloseIcon />
                 </div>
               </div>
               <div>
@@ -50,7 +50,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <RoundCloseHoverIcon /> : <RoundCloseIcon />}
+                  {isHoverCloseModal ? <CircleCloseHoverIcon /> : <CircleCloseIcon />}
                 </div>
               </div>
               <p className={styles.titleInvite}>{title}</p>
@@ -73,7 +73,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <RoundCloseHoverIcon color='main-dark-blue' /> : <RoundCloseIcon color='main-dark-blue' />}
+                  {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
                 </div>
               </div>
               <div className={classNameFullScreen}>

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/{RoundCloseHoverIcon.jsx → CircleCloseHoverIcon.jsx}

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styles from './Icons.module.css'
 
-const RoundCloseHoverIcon = ({ color = 'green' }) => {
+const CircleCloseHoverIcon = ({ color = 'green' }) => {
   const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
   return (
     <svg
@@ -39,4 +39,4 @@ const RoundCloseHoverIcon = ({ color = 'green' }) => {
   )
 }
 
-export default RoundCloseHoverIcon
+export default CircleCloseHoverIcon

package/src/components/icons/{RoundCloseIcon.jsx → CircleCloseIcon.jsx}

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styles from './Icons.module.css'
 
-const RoundCloseIcon = ({ color = 'green' }) => {
+const CircleCloseIcon = ({ color = 'green' }) => {
   const className = styles[`${color}`]
   return (
     <svg
@@ -29,4 +29,4 @@ const RoundCloseIcon = ({ color = 'green' }) => {
   )
 }
 
-export default RoundCloseIcon
+export default CircleCloseIcon

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/CloseIcon.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CloseIcon = ({ color = 'main-dark-blue' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path
+        d='M2 2L14 14'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M2 14L14 2'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CloseIcon

package/src/components/icons/TriangleExclamationIcon.jsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TriangleExclamationIcon = ({ color = 'red' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path d='M14 14H2L8 2L14 14Z' stroke='none' strokeLinejoin='round' />
+      <path
+        d='M8 6V10.5'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={8} cy={12} r={0.5} fill='none' />
+    </svg>
+  )
+}
+
+export default TriangleExclamationIcon

package/src/components/icons/index.js

@@ -2,28 +2,34 @@ 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 CloseModalIcon from './CloseModalIcon'
+import CircleExclamationIcon from './CircleExclamationIcon'
+import CircleCloseIcon from './CircleCloseIcon'
+import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CloseIcon from './CloseIcon'
 import GearIcon from './GearIcon'
-import RoundCloseIcon from './RoundCloseIcon'
-import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
 import PuzzleDynamicIcon from './PuzzleDynamicIcon'
 import PuzzleIcon from './PuzzleIcon'
 import PullRequestIcon from './PullRequestIcon'
+import TriangleExclamationIcon from './TriangleExclamationIcon'
 
 export default {
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
   AppIcon,
+  AppListIcon,
   AppEmptyIcon,
-  CloseModalIcon,
+  CircleExclamationIcon,
+  CircleCloseIcon,
+  CircleCloseHoverIcon,
+  CloseIcon,
   GearIcon,
-  RoundCloseIcon,
-  RoundCloseHoverIcon,
   MetricsIcon,
   PuzzleDynamicIcon,
   PuzzleIcon,
-  PullRequestIcon
+  PullRequestIcon,
+  TriangleExclamationIcon
 }

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
 }
 

package/src/stories/icons/Icons.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PullRequestIcon from '../../components/icons/PullRequestIcon'
+import CloseIcon from '../../components/icons/CloseIcon'
+import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
+import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
+
+export default {
+  title: 'Platformatic/Icons',
+  component: PullRequestIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'white', 'red']
+      }
+    }
+  }
+}
+
+const PullRequestIconTemplate = (args) => <PullRequestIcon {...args} />
+export const PullRequestIconDefault = PullRequestIconTemplate.bind({})
+PullRequestIconDefault.args = {}
+
+const CloseIconTemplate = (args) => <CloseIcon {...args} />
+export const CloseIconDefault = CloseIconTemplate.bind({})
+CloseIconDefault.args = {}
+
+const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
+export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
+CircleCloseIconDefault.args = {}
+
+const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
+export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
+TriangleExclamationIconDefault.args = {}

package/src/components/icons/CloseModalIcon.jsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-
-const CloseModalIcon = () => (
-  <svg
-    width={16}
-    height={16}
-    viewBox='0 0 16 16'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <path
-      d='M2 2L14 14'
-      stroke='#00283D'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M2 14L14 2'
-      stroke='#00283D'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalIcon

package/src/stories/icons/PullRequestIcon.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PullRequestIcon from '../../components/icons/PullRequestIcon'
-
-export default {
-  title: 'Platformatic/Icons',
-  component: PullRequestIcon,
-  argTypes: {
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['green', 'white', 'red']
-      }
-    }
-  }
-}
-
-const Template = (args) => <PullRequestIcon {...args} />
-export const PullRequestIconDefault = Template.bind({})
-PullRequestIconDefault.args = {}