@platformatic/ui-components 0.1.46 → 0.1.48

package/index.js

@@ -13,6 +13,7 @@ import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
 import Forms from './src/components/forms'
 import Icons from './src/components/icons'
+import InfoBox from './src/components/InfoBox'
 import Sidebar from './src/components/Sidebar'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
@@ -22,6 +23,7 @@ import Loader from './src/components/Loader'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import Modal from './src/components/Modal'
+import PlatformaticIcon from './src/components/PlatformaticIcon'
 import Playground from './src/components/Playground'
 import SearchBar from './src/components/SearchBar'
 import SimpleMetric from './src/components/SimpleMetric'
@@ -46,6 +48,7 @@ export {
   GHLoginButton,
   Forms,
   Icons,
+  InfoBox,
   Sidebar,
   Layout,
   List,
@@ -55,6 +58,7 @@ export {
   LoginButton,
   Logo,
   Modal,
+  PlatformaticIcon,
   Playground,
   SearchBar,
   SimpleMetric,

package/package.json

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

package/src/components/Button.jsx

@@ -2,10 +2,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Button.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function Button (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, ...rest } = props
+  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
   let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
@@ -22,6 +23,7 @@ function Button (props) {
   return (
     <button className={className} disabled={disabled} alt={label} {...rest}>
       {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
+      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
       <span>{label}</span>
     </button>
   )
@@ -67,10 +69,18 @@ Button.propTypes = {
   /**
    * Full Width: default false
    */
-  fullWidth: PropTypes.bool
+  fullWidth: PropTypes.bool,
+  /**
+   * platformaticIcon: should be removed once we use totally our icons
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  })
 }
 
 Button.defaultProps = {
+  label: '',
   color: 'main-dark-blue',
   backgroundColor: 'transparent',
   disabled: false,
@@ -78,7 +88,8 @@ Button.defaultProps = {
   bold: false,
   hoverEffect: 'hover',
   bordered: true,
-  fullWidth: false
+  fullWidth: false,
+  platformaticIcon: null
 }
 
 export default Button

package/src/components/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border;
+  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border flex items-center justify-center gap-x-2;
 }
 .fontBold {
   @apply font-semibold;

package/src/components/InfoBox.jsx

@@ -3,25 +3,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './InfoBox.module.css'
 import Button from './Button'
-import Icons from './icons'
-
-function renderItemIcon (iconName, color) {
-  if (iconName) {
-    return React.createElement(Icons[`${iconName}`], {
-      size: 'extra-large',
-      color
-    })
-  }
-  return (<></>)
-}
+import PlatformaticIcon from './PlatformaticIcon'
 
 function InfoBox ({ children, iconLogo, helpText, buttonProps }) {
   return (
     <div className={styles.container}>
-      {renderItemIcon(iconLogo)}
+      <PlatformaticIcon size='extra-large' iconName={iconLogo} />
       {children}
       <p className={styles.helpText}>{helpText}</p>
-      {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth />)}
+      {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth bold />)}
     </div>
   )
 }

package/src/components/InfoBox.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply bg-main-dark-blue border-0 rounded-md p-3 flex flex-col items-center gap-y-2 w-full;
+  @apply bg-main-dark-blue border-0 rounded-md p-4 flex flex-col items-center gap-y-4 w-full;
 }
 .helpText {
   @apply text-sm text-center mx-6 text-white font-normal;

package/src/components/MetricValue.module.css

@@ -2,7 +2,7 @@
   @apply flex justify-center items-center gap-x-2;
 }
 .value {
-  @apply text-[32px] font-semibold;
+  @apply text-sm lg:text-base;
 }
 .unit,
 .pre {

package/src/components/Modal.jsx

@@ -4,15 +4,12 @@ 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'
 
 export default function Modal (props) {
-  const { setIsOpen, title, layout = 'info', maxWidth = 50 } = props
+  const { setIsOpen, title, layout = 'info' } = props
   const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
   useEscapeKey(() => setIsOpen(false))
-  const styledMaxWidth = styles[`maxW${maxWidth}`]
-  const classNameFullScreen = `${styles.contentFullscreen} ${styledMaxWidth}`
   let whichModal = <></>
 
   switch (layout) {
@@ -76,12 +73,11 @@ export default function Modal (props) {
                   {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
                 </div>
               </div>
-              <div className={classNameFullScreen}>
+              <div className={styles.contentFullscreen}>
                 <div className={styles.titleFullscreen}>
                   <Logo width={100} heigth={80} color='main-dark-blue' />
                   <h3>PLATFORMATIC</h3>
                 </div>
-                <HorizontalSeparator marginTop={10} marginBottom={10} color='main-dark-blue' opacity={20} />
                 <div>{props.children}</div>
               </div>
             </div>

package/src/components/Modal.module.css

@@ -41,12 +41,6 @@
 .contentFullscreen {
   @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/PlatformaticIcon.jsx

@@ -0,0 +1,57 @@
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import Icons from './icons'
+import styles from './PlatformaticIcon.module.css'
+
+function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
+  let icon = React.createElement(Icons[`${iconName}`], {
+    color,
+    size,
+    tip
+  })
+  if (onClick) {
+    let className = styles.cursorPointer
+    if (classes) className += ` ${classes}`
+    icon = (<span className={className} onClick={onClick}>{icon}</span>)
+  }
+  return icon
+}
+
+PlatformaticIcon.propTypes = {
+  /**
+   * iconName
+   */
+  iconName: PropTypes.string.isRequired,
+  /**
+   * color
+   */
+  color: PropTypes.string,
+  /**
+   * size
+   */
+  size: PropTypes.string,
+  /**
+   * onClick
+   */
+  onClick: PropTypes.func,
+  /**
+   * classes
+   */
+  classes: PropTypes.string,
+  /**
+   * tip
+   */
+  tip: PropTypes.string
+}
+
+PlatformaticIcon.defaultProps = {
+  iconName: null,
+  color: 'green',
+  size: 'small',
+  onClick: () => {},
+  classes: null,
+  tip: null
+}
+
+export default PlatformaticIcon

package/src/components/PlatformaticIcon.module.css

@@ -0,0 +1,3 @@
+.cursorPointer {
+  @apply cursor-pointer;
+}

package/src/components/Sidebar.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
 import Icons from './icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
 import HorizontalSeparator from './HorizontalSeparator'
+import PlatformaticIcon from './PlatformaticIcon'
 import PropTypes from 'prop-types'
 
 function Sidebar (props) {
@@ -25,17 +24,6 @@ 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
@@ -61,7 +49,11 @@ function Sidebar (props) {
         : (
           <>
             <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
-              <FontAwesomeIcon icon={faChevronLeft} size='1x' color='white' />
+              <PlatformaticIcon
+                iconName='CircleBackIcon'
+                color='white'
+                size='normal'
+              />
             </button>
             <div className={styles.title} data-testid='lateral-bar-title'>
               {title}
@@ -72,7 +64,11 @@ function Sidebar (props) {
                 return (
                   <React.Fragment key={index}>
                     <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
-                      {renderItemIcon(item.iconName, item.title, isSelected)}
+                      {item.iconName && (<PlatformaticIcon
+                        iconName={item.iconName}
+                        color={isSelected ? 'green' : 'white'}
+                        tip={item.title}
+                                         />)}
                       <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
                         <span className={styles.itemSubTitle}>{item.subTitle}</span>
                         <span className={styles.itemTitle}>{item.title}</span>
@@ -84,7 +80,11 @@ function Sidebar (props) {
               })}
               {/* <Button label='Add' buttonClass='transparent' icon={faPlus} color='white' size='small' inClick={onClickAdd}/> */}
               <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} onClick={onClickAdd}>
-                <FontAwesomeIcon color='white' icon={faPlusCircle} data-tip={addTitle} />
+                <PlatformaticIcon
+                  iconName='CircleAddIcon'
+                  color='white'
+                  tip={addTitle}
+                />
                 {!collapsed && <span className={styles.item}>{addTitle}</span>}
               </button>
             </div>

package/src/components/Sidebar.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative;
+  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh];
   transition: max-width 0.2s linear;
 }
 .collapsed {
@@ -12,7 +12,7 @@
   @apply border rounded-md p-1 border-white;
 }
 .buttonCollapse {
-  @apply absolute border border-white rounded-full h-6 w-6 right-[-0.875rem]; 
+  @apply absolute border-0 rounded-full right-[-0.875rem]; 
   /* Override tailwind dist button[type='button]: background: transparent*/
   @apply bg-main-dark-blue !important;
   top: 1rem;

package/src/components/forms/Preview.jsx

@@ -2,38 +2,28 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Preview.module.css'
 import HorizontalSeparator from '../HorizontalSeparator'
-import Icons from '../icons'
-
-function renderItemIcon (iconName, color) {
-  if (iconName) {
-    return React.createElement(Icons[`${iconName}`], {
-      color,
-      size: 'small'
-    })
-  }
-  return (<></>)
-}
+import PlatformaticIcon from '../PlatformaticIcon'
 
 function renderLink (value) {
   return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
 }
 
-function renderParagraph (value, afterValueIcon, afterValueColor, onClickAfterValueIcon) {
+function renderParagraph (value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon) {
   return (
     <>
       <p className={styles.value}>
         {value}
-        {afterValueIcon && (<span className={styles.afterIcon} onClick={onClickAfterValueIcon}>{renderItemIcon(afterValueIcon, afterValueColor)}</span>)}
+        {afterValueIcon && (<PlatformaticIcon iconName={afterValueIcon} color={afterValueIconColor} classes={styles.afterIcon} onClick={() => onClickAfterValueIcon} />)}
       </p>
     </>
   )
 }
-function Preview ({ title, value, isLink, children, afterValueIcon, afterValueColor, onClickAfterValueIcon }) {
+function Preview ({ title, value, isLink, children, afterValueIcon, afterValueIconColor, onClickAfterValueIcon }) {
   return (
     <>
       <div className={styles.container}>
         <p className={styles.title}>{title}</p>
-        {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueColor, onClickAfterValueIcon)}
+        {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon)}
       </div>
       {children}
       <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
@@ -49,7 +39,10 @@ Preview.propTypes = {
   /**
    * value
    */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * isLink
    */
@@ -61,7 +54,7 @@ Preview.propTypes = {
   /**
    * afterValueIcon
    */
-  afterValueIcon: PropTypes.object,
+  afterValueIcon: PropTypes.string,
   /**
    * afterValueIconColor
    */

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

@@ -11,5 +11,5 @@
   @apply font-semibold;
 }
 .afterIcon {
-  @apply ml-3 cursor-pointer;
+  @apply ml-3;
 }

package/src/components/icons/Calendar1Icon.jsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const Calendar1Icon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path
+            d='M2 7H5M14 7H11'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M7.59712 13V6.5L8.21223 7.09L7.59712 8H7.5L6.5 9V7L7.5 6H9V13H7.59712Z'
+            fill='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default Calendar1Icon

package/src/components/icons/Calendar7Icon.jsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const Calendar7Icon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+
+          <path
+            d='M2 7H4M14 7H12'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M6.46691 13L9.65441 6.52L10.0294 7.1H5.65074L6.33456 6.47V8.29H5V6H11V6.87L8 13H6.46691Z'
+            fill='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default Calendar7Icon

package/src/components/icons/CalendarIcon.jsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CalendarIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path
+            d='M2 7H14'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CalendarIcon

package/src/components/icons/CircleAddIcon.jsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleAddIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M4 9H14'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M9 14L9 4.00002'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleAddIcon

package/src/components/icons/CircleBackIcon.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={26}
+      height={26}
+      viewBox='0 0 26 26'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
+      <path
+        d='M14.5 7L8.5 13L14.5 19'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M10 5L6 9L10 13'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleBackIcon

package/src/components/icons/LiveIcon.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const LiveIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
+          <path
+            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
+            stroke='none'
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default LiveIcon

package/src/components/icons/PlayIcon.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PlayIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <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 8L2 14V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default PlayIcon

package/src/components/icons/StopIcon.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const StopIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <path d='M3.5 12L12 3.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default StopIcon

package/src/components/icons/TerminalIcon.jsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
+          <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 11H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default TerminalIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -18,23 +18,23 @@ const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
           <path
             d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
             stroke='none'
-            stroke-width={6.5}
-            stroke-linecap='round'
-            stroke-linejoin='round'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
           />
           <path
             d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
             stroke='none'
-            stroke-width={6.5}
-            stroke-linecap='round'
-            stroke-linejoin='round'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
           />
           <path
             d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
             stroke='none'
-            stroke-width={6.5}
-            stroke-linecap='round'
-            stroke-linejoin='round'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
           />
         </svg>
       )

package/src/components/icons/index.js

@@ -4,17 +4,26 @@ import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import CalendarIcon from './CalendarIcon'
+import Calendar1Icon from './Calendar1Icon'
+import Calendar7Icon from './Calendar7Icon'
+import CircleAddIcon from './CircleAddIcon'
+import CircleBackIcon from './CircleBackIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CloseIcon from './CloseIcon'
 import CopyIcon from './CopyIcon'
 import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
+import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
 import GearIcon from './GearIcon'
+import LiveIcon from './LiveIcon'
 import MetricsIcon from './MetricsIcon'
-import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
-import StaticWorkspaceIcon from './StaticWorkspaceIcon'
+import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
+import StaticWorkspaceIcon from './StaticWorkspaceIcon'
+import StopIcon from './StopIcon'
+import TerminalIcon from './TerminalIcon'
 import TriangleExclamationIcon from './TriangleExclamationIcon'
 import UpgradeIcon from './UpgradeIcon'
 
@@ -25,17 +34,26 @@ export default {
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  CalendarIcon,
+  Calendar1Icon,
+  Calendar7Icon,
+  CircleAddIcon,
+  CircleBackIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
   CloseIcon,
   CopyIcon,
   CreatedWorkspaceIcon,
+  DynamicWorkspaceIcon,
   GearIcon,
+  LiveIcon,
   MetricsIcon,
-  DynamicWorkspaceIcon,
-  StaticWorkspaceIcon,
+  PlayIcon,
   PullRequestIcon,
+  StaticWorkspaceIcon,
+  StopIcon,
+  TerminalIcon,
   TriangleExclamationIcon,
   UpgradeIcon
 }

package/src/stories/Button.stories.jsx

@@ -100,9 +100,15 @@ DisabledGreen.args = {
 }
 
 export const DisabledRed = DisabledTemplate.bind({})
-
 DisabledRed.args = {
   label: 'A simple button',
   color: 'error-red',
   disabled: true
 }
+
+export const UsingPlatformaticIcon = Template.bind({})
+UsingPlatformaticIcon.args = {
+  label: 'White',
+  color: 'white',
+  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
+}

package/src/stories/PlatformaticIcon.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PlatformaticIcon from '../components/PlatformaticIcon'
+import Icons from '../components/icons'
+
+const divStyle = {
+  width: '100%',
+  display: 'flex',
+  flexGap: '10px'
+}
+
+export default {
+  title: 'Platformatic/PlatformaticIcon',
+  component: PlatformaticIcon
+}
+
+const Template = (args) => <PlatformaticIcon {...args} />
+export const PlatformaticIconDefault = Template.bind({})
+PlatformaticIconDefault.args = {
+  iconName: 'CopyIcon',
+  onClick: () => alert('clicked')
+}
+
+const AllIconsTemplate = (args) => {
+  const icons = Object.values(Icons)
+  return (
+    <div style={divStyle}>
+      {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
+    </div>
+  )
+}
+export const PlatformaticIconAll = AllIconsTemplate.bind({})
+PlatformaticIconAll.args = {
+  color: 'white',
+  size: 'small'
+}