@platformatic/ui-components 0.1.48 → 0.1.49

package/package.json

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

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

@@ -16,6 +16,7 @@ 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'
@@ -47,6 +48,7 @@ export default {
   CreatedWorkspaceIcon,
   DynamicWorkspaceIcon,
   GearIcon,
+  EditIcon,
   LiveIcon,
   MetricsIcon,
   PlayIcon,

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'
+  }
 }