@platformatic/ui-components 0.1.139 → 0.1.141

package/package.json

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

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

@@ -14,7 +14,8 @@
 }
 .afterInputIcon,
 .beforeInputIcon {
-  @apply absolute top-[50%] translate-y-[-50%] z-20;
+  @apply absolute top-[50%] z-20;
+  transform: translateY(-50%);
 }
 .beforeInputIcon {
   @apply left-0 ml-2

package/src/components/forms/InputWithSeparator.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import inputStyles from './Input.module.css'
 import styles from './InputWithSeparator.module.css'
 import commonStyles from '../Common.module.css'
-import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
+import { BACKGROUND_COLOR_OPAQUE, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
 import BorderedBox from '../BorderedBox'
 import ButtonFullRounded from '../ButtonFullRounded'
 
@@ -17,19 +17,26 @@ function InputWithSeparator ({
   onChange,
   disabled,
   afterIcon,
+  defaultValue,
   value,
   separator,
   inputTextClassName
 }) {
+  const showError = errorMessage.length > 0
+  const [focus, setFocus] = useState(false)
   const baseClassName = `${styles.input} ${styles.flexNone} ${styles.smallMargin} ${inputTextClassName} ` + commonStyles[`background-color-${backgroundColor}`]
   const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
   const [chunks, setChunks] = useState([])
   const [inputClassName, setInputClassName] = useState(normalClassName())
+  const [inputContainerClassName, setInputContainerClassName] = useState(unFocusedClassName())
   const chunkClasses = styles.chunkClasses
-  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
-  const showError = errorMessage.length > 0
-  if (showError) className += ' ' + commonStyles['bordered--error-red']
-  if (disabled) className += ' ' + commonStyles['apply-opacity-30']
+
+  useEffect(() => {
+    if (defaultValue.length > 0) {
+      const elements = defaultValue.split(separator).filter(e => e !== '')
+      setChunks(prevChunks => [...prevChunks, ...elements])
+    }
+  }, [])
 
   useEffect(() => {
     if (chunks.length > 0) {
@@ -39,6 +46,18 @@ function InputWithSeparator ({
     }
   }, [chunks.length])
 
+  useEffect(() => {
+    if (disabled) {
+      setInputContainerClassName(unFocusedClassName() + ' ' + commonStyles['apply-opacity-30'])
+    } else {
+      if (focus) {
+        setInputContainerClassName(focusedClassName())
+      } else {
+        setInputContainerClassName(unFocusedClassName())
+      }
+    }
+  }, [focus, disabled])
+
   function handleRemove (chunk) {
     const index = chunks.findIndex(c => c === chunk)
     if (index > -1) {
@@ -69,6 +88,16 @@ function InputWithSeparator ({
     return baseClassName
   }
 
+  function focusedClassName () {
+    const useEffectColor = showError ? ERROR_RED : borderColor
+    return styles.inputContainer + ' ' + commonStyles[`bordered--${useEffectColor}-100`]
+  }
+
+  function unFocusedClassName () {
+    const useEffectColor = showError ? ERROR_RED : borderColor
+    return styles.inputContainer + ' ' + commonStyles[`bordered--${useEffectColor}-70`]
+  }
+
   function renderChunk (chunk, index) {
     return (
       <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index} bor>
@@ -87,12 +116,33 @@ function InputWithSeparator ({
       </BorderedBox>
     )
   }
+
+  function handleFocus () {
+    if (!disabled) {
+      setFocus(true)
+    }
+  }
+
+  function handleBlur () {
+    if (!disabled) setFocus(false)
+  }
+
   return (
     <div className={inputStyles.container}>
       <div className={styles.container}>
-        <div className={className}>
+        <div className={inputContainerClassName}>
           {chunks.map((value, index) => renderChunk(value, index))}
-          <input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
+          <input
+            type='text'
+            name={name}
+            value={value}
+            placeholder={chunks.length > 0 ? '' : placeholder}
+            className={inputClassName}
+            onChange={handleChange}
+            disabled={disabled}
+            onFocus={() => handleFocus()}
+            onBlur={() => handleBlur()}
+          />
         </div>
         {afterIcon &&
           (
@@ -126,6 +176,10 @@ InputWithSeparator.propTypes = {
    * value
    */
   value: PropTypes.string,
+  /**
+   * defaultValue
+   */
+  defaultValue: PropTypes.string,
   /**
    * separator
    */
@@ -164,6 +218,7 @@ InputWithSeparator.propTypes = {
 InputWithSeparator.defaultProps = {
   placeholder: '',
   value: '',
+  defaultValue: '',
   name: '',
   borderColor: MAIN_GREEN,
   backgroundColor: WHITE,

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

@@ -8,7 +8,8 @@
   @apply border border-solid box-border rounded-md px-2 py-2.5;
 }
 .afterInputIcon {
-  @apply absolute top-[50%] translate-y-[-50%] z-10 ;
+  @apply absolute top-[50%] z-10 ;
+  transform: translateY(-50%);
 }
 .afterInputIcon {
   @apply right-0 mr-2

package/src/components/forms/Select.jsx

@@ -112,7 +112,7 @@ function Select ({
         }}
       >
         <div className={styles.liContent}>
-          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
+          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} />}
           <span className={optionSpanClassName}>{option.label}</span>
         </div>
         {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
@@ -212,7 +212,9 @@ Select.propTypes = {
       PropTypes.string,
       PropTypes.number
     ]),
-    icon: PropTypes.string,
+    iconName: PropTypes.string,
+    iconSize: PropTypes.string,
+    iconColor: PropTypes.string,
     notSelectable: PropTypes.bool,
     notFilterable: PropTypes.bool,
     onClick: PropTypes.func,

package/src/stories/forms/InputWithSeparator.stories.jsx

@@ -56,3 +56,40 @@ Default.args = {
     handleClick: () => alert('I\'m an AddIcon')
   }
 }
+
+const TemplateDefaultWithValues = (args) => {
+  const [value, setValue] = useState(args.value)
+  const [chunks, setChunks] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  // errorMessage: 'error message displayed just for to be see',
+
+  function handleChange ({ value, chunks }) {
+    setValue(value)
+    setChunks(chunks)
+  }
+
+  return (
+    <>
+      <p>Chunks: {chunks.toString()} </p>
+      <p>Value inserted: {value} </p>
+      <label>Add Error message: <input type='checkbox' onChange={() => setErrorMessage(errorMessage === '' ? 'custom message' : '')} /></label>
+      <InputWithSeparator {...args} value={value} onChange={handleChange} errorMessage={errorMessage} />
+    </>
+  )
+}
+
+export const PredefinedValues = TemplateDefaultWithValues.bind({})
+
+PredefinedValues.args = {
+  name: 'test',
+  placeholder: 'Initial value',
+  borderColor: 'main-dark-blue',
+  separator: ',',
+  defaultValue: 'test,test-1,test-2',
+  afterIcon: {
+    iconName: 'AddIcon',
+    color: ERROR_RED,
+    handleClick: () => alert('I\'m an AddIcon')
+  }
+
+}