@platformatic/ui-components 0.1.40 → 0.1.42

package/index.js

@@ -13,7 +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 SideBar from './src/components/SideBar'
+import Sidebar from './src/components/Sidebar'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
 import ListElement from './src/components/ListElement'
@@ -46,7 +46,7 @@ export {
   GHLoginButton,
   Forms,
   Icons,
-  SideBar,
+  Sidebar,
   Layout,
   List,
   ListElement,
@@ -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.40",
+  "version": "0.1.42",
   "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 mb-4 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/Button.module.css

@@ -66,7 +66,7 @@
 .color-dark-green {
   @apply text-dark-green border-dark-green;
 }
-.color-main-dark-blue{
+.color-main-dark-blue {
   @apply text-main-dark-blue border-main-dark-blue;
 }
 .color-dark-blue{

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/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

@@ -12,10 +12,10 @@
   @apply p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
 }
 .modalInfo {
-  @apply bg-light-blue;
+  @apply bg-light-blue max-w-[480px];
 }
 .modalInvite {
-  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] max-h-[300px];
+  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[480px] max-h-[300px];
 }
 .fullscreen {
   @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
@@ -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

@@ -0,0 +1,153 @@
+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 PropTypes from 'prop-types'
+
+function Sidebar (props) {
+  const {
+    title,
+    defaultSelected,
+    onClickItemSelectedParent,
+    items,
+    onClickAdd,
+    addTitle,
+    onClickSettings
+  } = props
+  const [collapsed, setCollapsed] = useState(false)
+  const [selectedItem, setSelectedItem] = useState(defaultSelected)
+
+  function onClickItemSelected (index) {
+    setSelectedItem(index)
+    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.buttonExpand} onClick={() => { setCollapsed(false) }}>
+              <Icons.PuzzleIcon color='white' />
+            </button>
+            <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>
+          </>
+          )
+        : (
+          <>
+            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
+              <FontAwesomeIcon icon={faChevronLeft} size='1x' color='white' />
+            </button>
+            <div className={styles.title} data-testid='lateral-bar-title'>
+              {title}
+            </div>
+            <div className={styles.items} data-test-id='lateral-bar-items'>
+              {items.map((item, index) => {
+                const isSelected = selectedItem === index
+                return (
+                  <React.Fragment key={index}>
+                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
+                      {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>
+                )
+              })}
+              {/* <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} />
+                {!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>
+          </>
+          )}
+    </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

@@ -0,0 +1,66 @@
+.container {
+  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative;
+  transition: max-width 0.2s linear;
+}
+.collapsed {
+  @apply max-w-[96px] text-center;
+}
+.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]; 
+  /* Override tailwind dist button[type='button]: background: transparent*/
+  @apply bg-main-dark-blue !important;
+  top: 1rem;
+}
+.title {
+  @apply text-white font-bold py-3;
+}
+.titleCollapsed {
+  @apply text-white text-[10px];
+}
+.buttonItem {
+  @apply flex items-center justify-start border-0 w-full;
+}
+.buttonItemCollapsed {
+  @apply w-auto;
+}
+.item {
+  @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;
+}
+.items {
+  @apply flex flex-col gap-y-3 py-2;
+}
+.bottom {
+  @apply absolute left-0 bottom-[1rem] w-full px-4;
+}
+.titleSettings {
+  @apply text-white font-semibold ml-3;
+}
+.buttonSettingsExpanded {
+  @apply flex items-center justify-center w-full;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/forms/Input.jsx

@@ -3,14 +3,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled }) {
-  const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+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={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>
   )
 }
@@ -39,7 +46,27 @@ Input.propTypes = {
   /**
    * Disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * beforeInputIcon
+   */
+  beforeInputIcon: PropTypes.object,
+  /**
+   * beforeInputIconColor
+   */
+  beforeInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
+  /**
+   * afterInputIcon
+   */
+  afterInputIcon: PropTypes.object,
+  /**
+   * afterInputIconColor
+   */
+  afterInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
+  /**
+   * onClickBeforeIcon
+   */
+  onClickBeforeIcon: PropTypes.func
 }
 
 Input.defaultProps = {
@@ -49,7 +76,12 @@ Input.defaultProps = {
   borderColor: 'main-green',
   errorMessage: '',
   onChange: () => {},
-  disabled: false
+  disabled: false,
+  beforeInputIcon: null,
+  beforeInputIconColor: 'main-dark-blue',
+  afterInputIcon: null,
+  onClickBeforeIcon: () => {},
+  afterInputIconColor: 'main-dark-blue'
 }
 
 export default Input

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

@@ -10,6 +10,19 @@
 .input {
   @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
 }
+.beforeInputIcon {
+  @apply ml-1 mr-3 cursor-pointer;
+}
+.color-main-dark-blue {
+  @apply text-main-dark-blue;
+}
+.color-error-red{
+  @apply text-error-red;
+}
+.color-white{
+  @apply text-white;
+}
+
 [type='text']:focus {
   outline: none;
 }

package/src/components/icons/AppEmptyIcon.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+export default function AppEmptyIcon () {
+  return (
+    <svg
+      width={81}
+      height={80}
+      viewBox='0 0 81 80'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+      />
+      <rect
+        x={34.8199}
+        y={67.3799}
+        width={11.3609}
+        height={5.45325}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <path
+        d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <path
+        d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinejoin='round'
+      />
+      <path
+        d='M19.1982 57.0413H9.25739V37.1597'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M29.139 39.9999V14.4377'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M61.8018 57.0414H71.7426V45.6804'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M49.0207 41.4201V32.8994H58.9615V17.2781'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle
+        cx={9.25738}
+        cy={31.4793}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={29.139}
+        cy={8.75738}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={58.9615}
+        cy={11.5977}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={71.7426}
+        cy={40.0001}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+    </svg>
+  )
+}

package/src/components/icons/AppIcon.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+export default function AppEmptyIcon () {
+  return (
+    <svg
+      width={32}
+      height={33}
+      viewBox='0 0 32 33'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M12 6.75317H5C4.44772 6.75317 4 7.20089 4 7.75317V21.1132C4 21.6655 4.44772 22.1132 5 22.1132H27C27.5523 22.1132 28 21.6655 28 21.1132V7.75317C28 7.20089 27.5523 6.75317 27 6.75317H20'
+        stroke='#00283D'
+        strokeWidth={2}
+        strokeLinecap='round'
+      />
+      <rect
+        x={12}
+        y={22.1133}
+        width={8}
+        height={3.84}
+        stroke='#00283D'
+        strokeWidth={2}
+      />
+      <path
+        d='M8 26.9534C8 26.4011 8.44772 25.9534 9 25.9534H23C23.5523 25.9534 24 26.4011 24 26.9534V28.8334H8V26.9534Z'
+        stroke='#00283D'
+        strokeWidth={2}
+      />
+      <path
+        d='M16 4.83325L17.7961 10.14H23.6085L18.9062 13.4198L20.7023 18.7265L16 15.4468L11.2977 18.7265L13.0938 13.4198L8.39155 10.14H14.2039L16 4.83325Z'
+        stroke='#00283D'
+        strokeWidth={2}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PuzzleDynamicIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let dimension = 33
+  switch (size) {
+    case 'small':
+      dimension = 24
+      break
+    default:
+      break
+  }
+  return (
+    <svg
+      width={dimension}
+      height={dimension}
+      viewBox='0 0 32 33'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <rect
+        x={4}
+        y={4.83325}
+        width={8}
+        height={10.0699}
+        rx={1}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M16 4.83325L22 9.83325L16 14.8333V4.83325Z'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        x={28}
+        y={28.8333}
+        width={8}
+        height={10.0699}
+        rx={1}
+        transform='rotate(-180 28 28.8333)'
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <rect
+        x={16}
+        y={28.8333}
+        width={12}
+        height={10.0699}
+        rx={1}
+        transform='rotate(-180 16 28.8333)'
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M22 12.8333V14.8333L28 9.83325L22 4.83325V6.83325'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default PuzzleDynamicIcon

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

@@ -1,10 +1,14 @@
 import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
+import AppIcon from './AppIcon'
+import AppEmptyIcon from './AppEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
+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'
 
@@ -12,10 +16,14 @@ export default {
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
+  AppIcon,
+  AppEmptyIcon,
   CloseModalIcon,
+  GearIcon,
   RoundCloseIcon,
   RoundCloseHoverIcon,
   MetricsIcon,
+  PuzzleDynamicIcon,
   PuzzleIcon,
   PullRequestIcon
 }

package/src/stories/{SideBar.stories.jsx → Sidebar.stories.jsx}

@@ -1,6 +1,6 @@
 'use strict'
 import { useState } from 'react'
-import SideBar from '../components/SideBar'
+import Sidebar from '../components/Sidebar'
 import BorderedBox from '../components/BorderedBox'
 
 const divStyle = {
@@ -11,8 +11,8 @@ const divStyle = {
 }
 
 export default {
-  title: 'Platformatic/SideBar',
-  component: SideBar,
+  title: 'Platformatic/Sidebar',
+  component: Sidebar,
   decorators: [
     (Story) => (
       <div style={divStyle}>
@@ -23,18 +23,23 @@ export default {
   ]
 }
 
-const Template = (args) => <SideBar {...args} />
+const Template = (args) => <Sidebar {...args} />
 
-export const EmptySideBar = Template.bind({})
+export const EmptySidebar = Template.bind({})
 
-EmptySideBar.args = {
-  title: 'SideBar bar empty',
+EmptySidebar.args = {
+  title: 'Sidebar bar empty',
   addTitle: 'Create',
-  onClickAdd: () => alert('clicked on add EmptySideBar')
+  onClickAdd: () => alert('clicked on add EmptySidebar'),
+  onClickSettings: () => alert('settings')
 }
 
-const FullSideBarTemplate = (args) => {
-  const [items, setItems] = useState(['a very very very very very long title 1', 'Title number 2'])
+const FullSidebarTemplate = (args) => {
+  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))
@@ -42,14 +47,15 @@ const FullSideBarTemplate = (args) => {
   }
 
   return (
-    <SideBar items={items} onClickAdd={() => onClickAdd()} {...args} />
+    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
   )
 }
 
-export const FullSideBar = FullSideBarTemplate.bind({})
+export const FullSidebar = FullSidebarTemplate.bind({})
 
-FullSideBar.args = {
-  title: 'SideBar bar Full',
+FullSidebar.args = {
+  title: 'Sidebar bar Full',
   addTitle: 'Create',
-  onClickItemSelected: (index) => alert('selected: ' + index)
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
 }

package/src/stories/forms/Input.stories.jsx

@@ -1,6 +1,8 @@
 'use strict'
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
+import { faAdd, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+
 export default {
   title: 'Platformatic/Forms/Input',
   component: Input
@@ -30,6 +32,7 @@ export const DefaultInvalid = Template.bind({})
 DefaultInvalid.args = {
   name: 'test',
   placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue',
   errorMessage: 'This is an error message'
 }
 
@@ -54,3 +57,13 @@ ValuedAndAlertChange.args = {
   name: 'test',
   placeholder: 'Platformatic'
 }
+
+export const IconBeforeAndAfter = Template.bind({})
+
+IconBeforeAndAfter.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  beforeInputIcon: faAdd,
+  afterInputIcon: faCheckCircle,
+  afterInputIconColor: 'error-red'
+}

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: [

package/src/components/SideBar.jsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react'
-import PuzzleIcon from './icons/PuzzleIcon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faPlus } from '@fortawesome/free-solid-svg-icons'
-import styles from './SideBar.module.css'
-import ReactTooltip from 'react-tooltip'
-import HorizontalSeparator from './HorizontalSeparator'
-export default function SideBar (props) {
-  const { title, defaultSelected = 0, onClickItemSelectedParent = () => {}, items = [], onClickAdd = () => {}, addTitle = 'Add' } = props
-  const [collapsed, setCollapsed] = useState(false)
-  const [selectedItem, setSelectedItem] = useState(defaultSelected)
-
-  function onClickItemSelected (index) {
-    setSelectedItem(index)
-    onClickItemSelectedParent(index)
-  }
-
-  return (
-    <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
-      {collapsed
-        ? (
-          <>
-            <button type='button' className={styles.buttonPuzzle} onClick={() => { setCollapsed(false) }}>
-              <PuzzleIcon tip='expand' />
-            </button>
-            <ReactTooltip />
-          </>
-          )
-        : (
-          <>
-            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
-              <FontAwesomeIcon icon={faChevronLeft} size='1x' color='white' />
-            </button>
-            <div className={styles.title} data-testid='lateral-bar-title'>
-              {title}
-            </div>
-            <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === index
-                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>
-                    </button>
-                    <ReactTooltip />
-                  </React.Fragment>
-                )
-              })}
-              {/* <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={faPlus} data-tip={addTitle} />
-                {!collapsed && <span className={styles.item}>{addTitle}</span>}
-              </button>
-            </div>
-          </>
-          )}
-      <HorizontalSeparator marginBottom={2} marginTop={2} />
-    </div>
-  )
-}

package/src/components/SideBar.module.css

@@ -1,43 +0,0 @@
-.container {
-  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative;
-  transition: max-width 0.2s linear;
-}
-.collapsed {
-  @apply max-w-[96px] text-center;
-}
-.buttonPuzzle {
-  @apply border-0;
-}
-.buttonCollapse {
-  @apply absolute border border-white rounded-full h-6 w-6 right-[-0.875rem]; 
-  /* Override tailwind dist button[type='button]: background: transparent*/
-  @apply bg-main-dark-blue !important;
-  top: 1rem;
-}
-.title {
-  @apply text-white font-bold py-3;
-}
-.buttonItem {
-  @apply flex items-center border-0 w-full mx-auto;
-}
-.buttonItemCollapsed {
-  @apply w-auto
-}
-.item {
-  @apply text-sm text-white ml-2 grow-0;
-}
-.itemSelected {
-  @apply text-light-green;
-}
-.items {
-  @apply flex flex-col gap-y-3 py-2;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}