@platformatic/ui-components 0.1.47 → 0.1.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "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/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,15 +41,6 @@
 .contentFullscreen {
   @apply h-auto w-full pt-4;
 }
-.maxW50 {
-  @apply max-w-[50%];
-}
-.maxW70 {
-  @apply max-w-[70%];
-}
-.maxW100 {
-  @apply max-w-[100%];
-}
 .titleFullscreen {
   @apply inline-flex items-center;
 }

package/src/components/forms/Input.jsx

@@ -3,19 +3,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import PlatformaticIcon from '../PlatformaticIcon'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeInputIcon, beforeInputIconColor, afterInputIcon, afterInputIconColor, onClickBeforeIcon }) {
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon }) {
   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()} />}
+        {beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} classes={styles.beforeInputIcon} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} />}
         <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' />}
+        {afterIcon && <PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} />}
       </div>
       {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
@@ -48,40 +48,33 @@ Input.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * beforeInputIcon
-   */
-  beforeInputIcon: PropTypes.object,
-  /**
-   * beforeInputIconColor
-   */
-  beforeInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
-  /**
-   * afterInputIcon
-   */
-  afterInputIcon: PropTypes.object,
-  /**
-   * afterInputIconColor
+   * beforeIcon: PlatformaticIcon props
    */
-  afterInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
+  beforeIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  }),
   /**
-   * onClickBeforeIcon
+   * afterIcon: PlatformaticIcon props
    */
-  onClickBeforeIcon: PropTypes.func
+  afterIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  })
 }
 
 Input.defaultProps = {
   placeholder: '',
-  value: null,
+  value: '',
   name: '',
   borderColor: 'main-green',
   errorMessage: '',
   onChange: () => {},
   disabled: false,
-  beforeInputIcon: null,
-  beforeInputIconColor: 'main-dark-blue',
-  afterInputIcon: null,
-  onClickBeforeIcon: () => {},
-  afterInputIconColor: 'main-dark-blue'
+  beforeIcon: null,
+  afterIcon: null
 }
 
 export default Input

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

@@ -11,7 +11,7 @@
   @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
 }
 .beforeInputIcon {
-  @apply ml-1 mr-3 cursor-pointer;
+  @apply ml-1 mr-3;
 }
 .color-main-dark-blue {
   @apply text-main-dark-blue;

package/src/components/icons/AppIcon.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-export default function AppEmptyIcon () {
+export default function AppIcon () {
   return (
     <svg
       width={32}

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

@@ -6,6 +6,35 @@ const CopyIcon = ({ color = 'green', size = 'normal' }) => {
   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='M6 13.5V4.94496C6 4.66882 6.22386 4.44496 6.5 4.44496H10.5365C10.6594 4.44496 10.7779 4.49019 10.8696 4.57203L13.833 7.21858C13.9393 7.31345 14 7.4491 14 7.59152V13.5C14 13.7761 13.7761 14 13.5 14H6.5C6.22386 14 6 13.7761 6 13.5Z'
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M10.5 7.78923V4.44496L14 7.78923H10.5Z'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M9.5 3.96723L7.36816 2.12196C7.27729 2.0433 7.16112 2.00001 7.04093 2.00001H4.61364H2.5C2.22386 2.00001 2 2.22386 2 2.50001L2.00001 10.6335C2.00001 10.9096 2.22386 11.1335 2.50001 11.1335H5.50001'
+            stroke='none'
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    case 'normal':
       icon = (
         <svg
           width={24}

package/src/components/icons/EditIcon.jsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const EditIcon = ({ 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={10.0554}
+            y={4.50607}
+            width={2.11765}
+            height={7.76471}
+            transform='rotate(45 10.0554 4.50607)'
+            stroke='none'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M6.06234 11.4939L4.56494 9.99654L3.81624 12.2426L6.06234 11.4939Z'
+            stroke='none'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z'
+            stroke='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default EditIcon

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/index.js

@@ -4,6 +4,9 @@ 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'
@@ -12,11 +15,16 @@ import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CloseIcon from './CloseIcon'
 import CopyIcon from './CopyIcon'
 import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
+import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
+import EditIcon from './EditIcon'
 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'
 
@@ -27,6 +35,9 @@ export default {
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  CalendarIcon,
+  Calendar1Icon,
+  Calendar7Icon,
   CircleAddIcon,
   CircleBackIcon,
   CircleExclamationIcon,
@@ -35,11 +46,16 @@ export default {
   CloseIcon,
   CopyIcon,
   CreatedWorkspaceIcon,
+  DynamicWorkspaceIcon,
   GearIcon,
+  EditIcon,
+  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

@@ -1,5 +1,12 @@
 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',
@@ -12,3 +19,17 @@ 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'
+}

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

@@ -1,11 +1,24 @@
 'use strict'
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
-import { faAdd, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'white'
+}
 
 export default {
   title: 'Platformatic/Forms/Input',
-  component: Input
+  component: Input,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
 }
 
 const Template = (args) => <Input {...args} />
@@ -63,7 +76,14 @@ export const IconBeforeAndAfter = Template.bind({})
 IconBeforeAndAfter.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  beforeInputIcon: faAdd,
-  afterInputIcon: faCheckCircle,
-  afterInputIconColor: 'error-red'
+  beforeIcon: {
+    iconName: 'CopyIcon',
+    color: 'main-dark-blue',
+    size: 'small',
+    onClick: () => { alert('clicked') }
+  },
+  afterIcon: {
+    iconName: 'CircleAddIcon',
+    color: 'red'
+  }
 }