@platformatic/ui-components 0.1.41 → 0.1.43

package/index.js

@@ -63,5 +63,5 @@ export {
   TextWithLabel,
   TwoColumnsLayout,
   Versions,
-  VerticalSeparator,
+  VerticalSeparator
 }

package/package.json

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

package/src/components/BorderedBox.jsx

@@ -5,11 +5,13 @@ import styles from './BorderedBox.module.css'
 import commonStyles from './Common.module.css'
 import React from 'react'
 export default function BorderedBox (props) {
-  const { classes, color, children } = props
+  const { classes, color, children, backgroundColor = 'dark-blue' } = props
   const borderColor = getColor('border', color)
+  const styledBackgroundColor = styles[`background-color-${backgroundColor}`]
+  const className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor}`
 
   return (
-    <div className={`${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor}`}>
+    <div className={className}>
       {children}
     </div>
   )

package/src/components/BorderedBox.module.css

@@ -1,3 +1,9 @@
 .borderedBox {
-  @apply rounded-md p-5 bg-dark-blue text-white flex-1 gap-y-4;
+  @apply rounded-md p-5 text-white flex-1 gap-y-4;
+}
+.background-color-dark-blue{
+  @apply bg-dark-blue !important;
+}
+.background-color-transparent{
+  @apply bg-transparent ;
 }

package/src/components/Common.module.css

@@ -2,11 +2,14 @@
   @apply border border-solid box-border rounded-md;
 }
 .bordered--main-green {
-  @apply border-main-green
+  @apply border-main-green;
 }
 .bordered--main-dark-blue {
   @apply border-main-dark-blue;
 }
+.bordered--error-red {
+  @apply border-error-red;
+}
 
 .error-message {
   @apply absolute -bottom-5 text-error-red text-xs px-2;

package/src/components/DropDown.module.css

@@ -19,7 +19,7 @@
   @apply border border-transparent rounded-full mr-2;
 }
 .menu {
-  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-[999] text-sm min-w-[175px];
+  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[175px];
 }
 .item {
   @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest; 

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

@@ -8,11 +8,13 @@ import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
 
 export default function Modal (props) {
-  const { setIsOpen, title, layout = 'info' } = props
+  const { setIsOpen, title, layout = 'info', maxWidth = 50 } = props
   const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
   useEscapeKey(() => setIsOpen(false))
-
+  const styledMaxWidth = styles[`maxW${maxWidth}`]
+  const classNameFullScreen = `${styles.contentFullscreen} ${styledMaxWidth}`
   let whichModal = <></>
+
   switch (layout) {
     case 'info':
       whichModal = (
@@ -74,7 +76,7 @@ export default function Modal (props) {
                   {isHoverCloseModal ? <RoundCloseHoverIcon color='main-dark-blue' /> : <RoundCloseIcon color='main-dark-blue' />}
                 </div>
               </div>
-              <div className={styles.contentFullscreen}>
+              <div className={classNameFullScreen}>
                 <div className={styles.titleFullscreen}>
                   <Logo width={100} heigth={80} color='main-dark-blue' />
                   <h3>PLATFORMATIC</h3>

package/src/components/Modal.module.css

@@ -39,9 +39,14 @@
   @apply font-bold text-lg text-main-green text-center;
 }
 .contentFullscreen {
-  @apply h-auto max-w-[70%] w-full pt-4;
+  @apply h-auto w-full pt-4;
+}
+.maxW50 {
+  @apply max-w-[50%];
+}
+.maxW70 {
+  @apply max-w-[70%];
 }
-
 .titleFullscreen {
   @apply inline-flex items-center;
 }

package/src/components/Sidebar.jsx

@@ -1,21 +1,21 @@
 import React, { useState } from 'react'
-import PuzzleIcon from './icons/PuzzleIcon'
+import Icons from './icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faPlusCircle, faGear } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
-import Button from './Button'
 import HorizontalSeparator from './HorizontalSeparator'
+import PropTypes from 'prop-types'
 
-export default function Sidebar (props) {
+function Sidebar (props) {
   const {
     title,
-    defaultSelected = 0,
-    onClickItemSelectedParent = () => {},
-    items = [],
-    onClickAdd = () => {},
-    addTitle = 'Add',
-    onClickSettings = () => {}
+    defaultSelected,
+    onClickItemSelectedParent,
+    items,
+    onClickAdd,
+    addTitle,
+    onClickSettings
   } = props
   const [collapsed, setCollapsed] = useState(false)
   const [selectedItem, setSelectedItem] = useState(defaultSelected)
@@ -25,15 +25,37 @@ export default function Sidebar (props) {
     onClickItemSelectedParent(index)
   }
 
+  function renderItemIcon (iconName, title, isSelected) {
+    if (iconName) {
+      return React.createElement(Icons[`${iconName}`], {
+        size: 'small',
+        color: isSelected ? 'green' : 'white',
+        tip: title
+      })
+    }
+    return (<></>)
+  }
+
   return (
     <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
       {collapsed
         ? (
           <>
-            <button type='button' className={styles.buttonPuzzle} onClick={() => { setCollapsed(false) }}>
-              <PuzzleIcon tip='expand' />
+            <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
+              <Icons.PuzzleIcon color='white' />
             </button>
-            <ReactTooltip />
+            <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
+              {title}
+            </div>
+            <HorizontalSeparator marginBottom={2} marginTop={2} />
+            <div className={styles.bottom}>
+              <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
+                <Icons.GearIcon color='white' />
+              </button>
+              <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
+                Settings
+              </div>
+            </div>
           </>
           )
         : (
@@ -50,8 +72,11 @@ export default function Sidebar (props) {
                 return (
                   <React.Fragment key={index}>
                     <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
-                      <PuzzleIcon size='small' color={isSelected ? 'green' : 'white'} tip={item} />
-                      <span className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>{item}</span>
+                      {renderItemIcon(item.iconName, item.title, isSelected)}
+                      <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
+                        <span className={styles.itemSubTitle}>{item.subTitle}</span>
+                        <span className={styles.itemTitle}>{item.title}</span>
+                      </div>
                     </button>
                     <ReactTooltip />
                   </React.Fragment>
@@ -63,13 +88,66 @@ export default function Sidebar (props) {
                 {!collapsed && <span className={styles.item}>{addTitle}</span>}
               </button>
             </div>
+            <HorizontalSeparator marginBottom='2' marginTop='2' />
+
+            <div className={styles.bottom}>
+              <button type='button' className={`${styles.buttonSettings} ${styles.buttonSettingsExpanded}`} onClick={onClickSettings}>
+                <Icons.GearIcon color='white' size='small' /> <span className={styles.titleSettings}>Settings</span>
+              </button>
+            </div>
           </>
           )}
-      <HorizontalSeparator marginBottom={2} marginTop={2} />
-
-      <div className={styles.bottom}>
-        <Button color='white' label='Settings' type='button' onClick={() => onClickSettings()} icon={faGear} />
-      </div>
     </div>
   )
 }
+
+Sidebar.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * defaultSelected
+   */
+  defaultSelected: PropTypes.number,
+  /**
+   * addTitle
+   */
+  addTitle: PropTypes.string,
+  /**
+   * items: array with keys
+   * title: name to display
+   * subtitle: secondary title
+   * icon: what Icon
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    iconName: PropTypes.string
+  })),
+  /**
+   * Apply onClickItemSelectedParent
+   */
+  onClickItemSelectedParent: PropTypes.func,
+  /**
+   * Apply onClickAdd: function called clicking on plus button
+   */
+  onClickAdd: PropTypes.func,
+  /**
+   * Apply onClickSettings: function called clicking on Settings button
+   */
+  onClickSettings: PropTypes.func
+
+}
+
+Sidebar.defaultProps = {
+  title: '',
+  defaultSelected: 0,
+  onClickItemSelectedParent: () => {},
+  items: [],
+  onClickAdd: () => {},
+  addTitle: 'Add',
+  onClickSettings: () => {}
+}
+
+export default Sidebar

package/src/components/Sidebar.module.css

@@ -5,8 +5,11 @@
 .collapsed {
   @apply max-w-[96px] text-center;
 }
-.buttonPuzzle {
-  @apply border-0;
+.buttonExpand {
+  @apply border rounded-md p-1 border-white;
+}
+.buttonSettings {
+  @apply border rounded-md p-1 border-white;
 }
 .buttonCollapse {
   @apply absolute border border-white rounded-full h-6 w-6 right-[-0.875rem]; 
@@ -17,15 +20,26 @@
 .title {
   @apply text-white font-bold py-3;
 }
+.titleCollapsed {
+  @apply text-white text-[10px];
+}
 .buttonItem {
-  @apply flex items-center border-0 w-full mx-auto;
+  @apply flex items-center justify-start border-0 w-full;
 }
 .buttonItemCollapsed {
-  @apply w-auto
+  @apply w-auto;
 }
 .item {
-  @apply text-sm text-white ml-2 grow-0;
+  @apply text-white ml-2 grow-0 text-left flex flex-col;
+  width: calc(100% - 28px)
+}
+.itemSubTitle {
+  @apply text-[10px] leading-[10px]; 
+}
+.itemTitle{
+  @apply text-xs text-ellipsis overflow-hidden whitespace-nowrap;
 }
+
 .itemSelected {
   @apply text-light-green;
 }
@@ -35,9 +49,11 @@
 .bottom {
   @apply absolute left-0 bottom-[1rem] w-full px-4;
 }
-
-.bottom button {
-  @apply w-full;
+.titleSettings {
+  @apply text-white font-semibold ml-3;
+}
+.buttonSettingsExpanded {
+  @apply flex items-center justify-center w-full;
 }
 
 @keyframes fadeIn {

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/forms/Input.jsx

@@ -5,16 +5,19 @@ import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeInputIcon, afterInputIcon, afterInputIconColor, onClickBeforeIcon }) {
-  const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeInputIcon, beforeInputIconColor, afterInputIcon, afterInputIconColor, onClickBeforeIcon }) {
+  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+  const showError = errorMessage.length > 0
+  if (showError) className += ' ' + commonStyles['bordered--error-red']
+  const classNameBeforeInput = `${styles.beforeInputIcon} ` + styles[`color-${beforeInputIconColor}`]
   return (
     <div className={styles.container}>
       <div className={className}>
-        {beforeInputIcon && <FontAwesomeIcon icon={beforeInputIcon} className={styles.beforeInputIcon} data-testid='before-icon' color='white' onClick={() => onClickBeforeIcon()} />}
+        {beforeInputIcon && <FontAwesomeIcon icon={beforeInputIcon} className={classNameBeforeInput} data-testid='before-icon' color='white' onClick={() => onClickBeforeIcon()} />}
         <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
         {afterInputIcon && <FontAwesomeIcon icon={afterInputIcon} className={styles[`color-${afterInputIconColor}`]} data-testid='after-icon' />}
       </div>
-      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
   )
 }
@@ -48,6 +51,10 @@ Input.propTypes = {
    * beforeInputIcon
    */
   beforeInputIcon: PropTypes.object,
+  /**
+   * beforeInputIconColor
+   */
+  beforeInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
   /**
    * afterInputIcon
    */
@@ -55,7 +62,7 @@ Input.propTypes = {
   /**
    * afterInputIconColor
    */
-  afterInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue']),
+  afterInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
   /**
    * onClickBeforeIcon
    */
@@ -71,6 +78,7 @@ Input.defaultProps = {
   onChange: () => {},
   disabled: false,
   beforeInputIcon: null,
+  beforeInputIconColor: 'main-dark-blue',
   afterInputIcon: null,
   onClickBeforeIcon: () => {},
   afterInputIconColor: 'main-dark-blue'

package/src/components/forms/Input.module.css

@@ -19,6 +19,9 @@
 .color-error-red{
   @apply text-error-red;
 }
+.color-white{
+  @apply text-white;
+}
 
 [type='text']:focus {
   outline: none;

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

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const GearIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = styles[`${color}`]
+  let dimension = 33
+  switch (size) {
+    case 'small':
+      dimension = 16
+      break
+    default:
+      break
+  }
+  return (
+    <svg
+      width={dimension}
+      height={dimension}
+      viewBox='0 0 33 32'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path
+        d='M16.5016 20.6575C19.011 20.6575 21.0452 18.6574 21.0452 16.1901C21.0452 13.7228 19.011 11.7227 16.5016 11.7227C13.9922 11.7227 11.958 13.7228 11.958 16.1901C11.958 18.6574 13.9922 20.6575 16.5016 20.6575Z'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M18.9391 4.69606V6.21219C18.9391 6.50074 19.1219 6.76144 19.3974 6.86269L21.3641 7.59418C21.6318 7.69289 21.9356 7.62455 22.1312 7.417L23.076 6.41974C23.354 6.12613 23.8277 6.1236 24.1083 6.41721L26.3891 8.79139C26.6439 9.05716 26.6465 9.46973 26.3968 9.73803L25.1818 11.0491C24.9887 11.2567 24.9423 11.5579 25.0633 11.811L25.8871 13.5575C26.003 13.803 26.2552 13.9625 26.5307 13.9625H27.7921C28.1834 13.9625 28.5 14.2738 28.5 14.6585V17.5895C28.5 17.9743 28.1834 18.2856 27.7921 18.2856H26.4663C26.16 18.2856 25.8871 18.4805 25.7919 18.7665L25.1225 20.7838C25.0427 21.0217 25.0994 21.2824 25.2719 21.4672L26.3608 22.6492C26.6259 22.9378 26.6002 23.3858 26.3016 23.6414L23.7916 25.8005C23.5033 26.0485 23.0657 26.0257 22.8057 25.7498L21.9304 24.8235C21.7399 24.621 21.4439 24.5476 21.1788 24.6387L19.351 25.2664C19.0653 25.3651 18.8748 25.6283 18.8748 25.9245V27.3039C18.8748 27.6887 18.5581 28 18.1668 28H14.8306C14.4393 28 14.1227 27.6887 14.1227 27.3039V25.9245C14.1227 25.6283 13.9322 25.3651 13.6464 25.2664L11.8187 24.6387C11.5535 24.5476 11.2575 24.6184 11.067 24.8235L10.1917 25.7498C9.93173 26.0257 9.4941 26.0485 9.20578 25.8005L6.69586 23.6414C6.39724 23.3858 6.3715 22.9378 6.63665 22.6492L7.72557 21.4672C7.89547 21.2824 7.95211 21.0217 7.87488 20.7838L7.20557 18.7665C7.11032 18.4805 6.83745 18.2856 6.53111 18.2856H5.20793C4.81664 18.2856 4.5 17.9743 4.5 17.5895V14.6585C4.5 14.2738 4.81664 13.9625 5.20793 13.9625H6.46932C6.74477 13.9625 6.99705 13.8055 7.11289 13.5575L7.93666 11.811C8.05765 11.5554 8.00874 11.2567 7.81825 11.0491L6.60319 9.73803C6.35348 9.46973 6.35605 9.05463 6.61091 8.79139L8.89172 6.41721C9.17232 6.12613 9.64598 6.12613 9.92401 6.41974L10.8688 7.417C11.0644 7.62455 11.3682 7.69289 11.6359 7.59418L13.6026 6.86269C13.8781 6.76144 14.0609 6.50074 14.0609 6.21219V4.69606C14.0609 4.31133 14.3775 4 14.7688 4H18.2312C18.6225 4 18.9391 4.31133 18.9391 4.69606Z'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default GearIcon

package/src/components/icons/PuzzleDynamicIcon.jsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import styles from './Icons.module.css'
-const PuzzleDynamicIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
+const PuzzleDynamicIcon = ({ color = 'green', size = 'normal' }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let dimension = 40
+  let dimension = 33
   switch (size) {
     case 'small':
       dimension = 24
@@ -14,49 +14,49 @@ const PuzzleDynamicIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
     <svg
       width={dimension}
       height={dimension}
-      viewBox='0 0 24 25'
+      viewBox='0 0 32 33'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       className={className}
     >
       <rect
-        x={3}
-        y={3.5}
-        width={6}
-        height={7.55245}
+        x={4}
+        y={4.83325}
+        width={8}
+        height={10.0699}
         rx={1}
         stroke='none'
         strokeWidth={1.5}
       />
       <path
-        d='M12 3.5L16.5 7.25L12 11V3.5Z'
+        d='M16 4.83325L22 9.83325L16 14.8333V4.83325Z'
         stroke='none'
-        strokeWidth={1.5}
+        strokeWidth={2}
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <rect
-        x={21}
-        y={21.5}
-        width={6}
-        height={7.55245}
+        x={28}
+        y={28.8333}
+        width={8}
+        height={10.0699}
         rx={1}
-        transform='rotate(-180 21 21.5)'
+        transform='rotate(-180 28 28.8333)'
         stroke='none'
-        stroke-width={1.5}
+        strokeWidth={1.5}
       />
       <rect
-        x={12}
-        y={21.5}
-        width={9}
-        height={7.55245}
+        x={16}
+        y={28.8333}
+        width={12}
+        height={10.0699}
         rx={1}
-        transform='rotate(-180 12 21.5)'
-        stroke='#21FA90'
-        stroke-width={1.5}
+        transform='rotate(-180 16 28.8333)'
+        stroke='none'
+        strokeWidth={1.5}
       />
       <path
-        d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
+        d='M22 12.8333V14.8333L28 9.83325L22 4.83325V6.83325'
         stroke='none'
         strokeWidth={1.5}
         strokeLinecap='round'

package/src/components/icons/PuzzleIcon.jsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import styles from './Icons.module.css'
 const PuzzleIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let dimension = 40
+  let dimension = 33
   switch (size) {
     case 'small':
       dimension = 24
@@ -14,47 +14,47 @@ const PuzzleIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
     <svg
       width={dimension}
       height={dimension}
-      viewBox='0 0 40 40'
+      viewBox='0 0 33 32'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       className={className}
       data-tip={tip}
     >
       <rect
-        x={5}
-        y={5}
-        width={10}
-        height={12.5874}
+        x={4.5}
+        y={4}
+        width={8}
+        height={10.0699}
         rx={1}
         stroke='none'
         strokeWidth={1.5}
       />
       <rect
-        x={20}
-        y={5}
-        width={15}
-        height={12.5874}
+        x={16.5}
+        y={4}
+        width={12}
+        height={10.0699}
         rx={1}
         stroke='none'
         strokeWidth={1.5}
       />
       <rect
-        x={35}
-        y={35}
-        width={10}
-        height={12.5874}
+        x={28.5}
+        y={28}
+        width={8}
+        height={10.0699}
         rx={1}
-        transform='rotate(-180 35 35)'
+        transform='rotate(-180 28.5 28)'
         stroke='none'
         strokeWidth={1.5}
       />
       <rect
-        x={20}
-        y={35}
-        width={15}
-        height={12.5874}
+        x={16.5}
+        y={28}
+        width={12}
+        height={10.0699}
         rx={1}
-        transform='rotate(-180 20 35)'
+        transform='rotate(-180 16.5 28)'
         stroke='none'
         strokeWidth={1.5}
       />

package/src/components/icons/index.js

@@ -2,8 +2,11 @@ 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'
 import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
@@ -16,8 +19,11 @@ export default {
   ApiIconClosed,
   ApiEmptyIcon,
   AppIcon,
+  AppListIcon,
   AppEmptyIcon,
+  CircleExclamationIcon,
   CloseModalIcon,
+  GearIcon,
   RoundCloseIcon,
   RoundCloseHoverIcon,
   MetricsIcon,

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/Sidebar.stories.jsx

@@ -35,7 +35,11 @@ EmptySidebar.args = {
 }
 
 const FullSidebarTemplate = (args) => {
-  const [items, setItems] = useState(['a very very very very very long title 1', 'Title number 2'])
+  const [items, setItems] = useState([
+    { iconName: 'PuzzleIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { title: 'Title number 2', subTitle: 'Subtitle 2' },
+    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'PuzzleDynamicIcon' }
+  ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)
     tmpItem.push('Title number ' + (items.length + 1))

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/forms/Input.stories.jsx

@@ -32,6 +32,7 @@ export const DefaultInvalid = Template.bind({})
 DefaultInvalid.args = {
   name: 'test',
   placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue',
   errorMessage: 'This is an error message'
 }
 

package/tailwind.config.cjs

@@ -7,11 +7,11 @@ module.exports = {
     },
     extend: {
       screens: {
-        'lg': '1440px',
+        lg: '1440px'
         // => @media (min-width: 1440px) { ... }
       },
       boxShadow: {
-        'wrap': '0px 0px 20px rgba(0, 0, 0, 0.6)'
+        wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)'
       }
     },
     colors: {
@@ -24,7 +24,7 @@ module.exports = {
       white: '#FFFFFF',
       'error-red': '#FA2121',
       'tertiary-blue': '#2588E4',
-      'transparent': 'transparent'
+      transparent: 'transparent'
     },
     fontFamily: {
       sans: ['Montserrat']
@@ -37,7 +37,7 @@ module.exports = {
       wider: '.05em',
       widest: '.1em',
       'more-widest': '.15em',
-      'super-widest': '.25em',
+      'super-widest': '.25em'
     }
   },
   safelist: [