@platformatic/ui-components 0.1.46 → 0.1.47

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.47",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

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/Modal.module.css

@@ -47,6 +47,9 @@
 .maxW70 {
   @apply max-w-[70%];
 }
+.maxW100 {
+  @apply max-w-[100%];
+}
 .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/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/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,6 +4,8 @@ import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import CircleAddIcon from './CircleAddIcon'
+import CircleBackIcon from './CircleBackIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
@@ -25,6 +27,8 @@ export default {
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  CircleAddIcon,
+  CircleBackIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,

package/src/stories/PlatformaticIcon.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PlatformaticIcon from '../components/PlatformaticIcon'
+
+export default {
+  title: 'Platformatic/PlatformaticIcon',
+  component: PlatformaticIcon
+}
+
+const Template = (args) => <PlatformaticIcon {...args} />
+export const PlatformaticIconDefault = Template.bind({})
+PlatformaticIconDefault.args = {
+  iconName: 'CopyIcon',
+  onClick: () => alert('clicked')
+}