@platformatic/ui-components 0.1.110 → 0.1.112

package/package.json

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

package/src/components/ModalStepsForward.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply z-20 flex;
+  @apply z-10 flex;
 }
 .fullscreen {
   @apply fixed top-0 left-0 min-h-screen w-full min-w-full overflow-y-auto;

package/src/components/forms/Select.jsx

@@ -3,10 +3,10 @@ import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Select.module.css'
 import commonStyles from '../Common.module.css'
-import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, SMALL } from '../constants'
 import PlatformaticIcon from '../PlatformaticIcon'
 
-function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, disabled }) {
+function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, onClear, disabled, optionsIconColor }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
@@ -16,6 +16,11 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
   if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
 
+  function handleNotSelectable (callback = () => {}) {
+    setIsSelected(true)
+    setShowOptions(false)
+    callback()
+  }
   function setSelected ({ label, value }) {
     setIsSelected(true)
     setShowOptions(false)
@@ -38,14 +43,34 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
     }
   }, [value])
 
+  function renderLi (option, index) {
+    return (
+      <li
+        key={index} className={styles.option} onClick={() => {
+          if (option.notSelectable) {
+            return handleNotSelectable(option.onClick && option.onClick())
+          }
+          return setSelected(option)
+        }}
+      >
+        {option.iconName && <PlatformaticIcon iconName={option.iconName} color={optionsIconColor} size={SMALL} onClick={null} />}
+        <span>{option.label}</span>
+      </li>
+    )
+  }
+
   function renderOptions () {
     if (value.length === 0) {
-      return <></>
+      return (
+        <ul className={styles.options}>
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
+        </ul>
+      )
     }
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
     return (
       <ul className={styles.options}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => <li key={index} className={styles.option} onClick={() => setSelected(option)}>{option.label}</li>) : <li className={styles.option}>No data found</li>}
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
       </ul>
     )
   }
@@ -57,6 +82,7 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
     const ev2 = new Event('input', { bubbles: true })
     ev2.simulated = true
     inputRef.current.dispatchEvent(ev2)
+    onClear()
   }
 
   return (
@@ -65,7 +91,7 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
         <input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} />
         <div className={styles.icons}>
           {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
-          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => setShowOptions(!showOptions)} />
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} />
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
@@ -82,7 +108,10 @@ Select.propTypes = {
   /**
    * name
    */
-  name: PropTypes.string,
+  name: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * value
    */
@@ -91,8 +120,14 @@ Select.propTypes = {
    * options
    */
   options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    icon: PropTypes.string,
+    notSelectable: PropTypes.bool,
+    onClick: PropTypes.func
   })),
   /**
    * color of border
@@ -106,10 +141,18 @@ Select.propTypes = {
    * onSelect
    */
   onSelect: PropTypes.func,
+  /**
+   * onClear
+   */
+  onClear: PropTypes.func,
   /**
    * Disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * optionsIconColor
+   */
+  optionsIconColor: PropTypes.string
 }
 
 Select.defaultProps = {
@@ -122,7 +165,9 @@ Select.defaultProps = {
   errorMessage: '',
   onChange: () => {},
   onSelect: () => {},
-  disabled: false
+  onClear: () => {},
+  disabled: false,
+  optionsIconColor: MAIN_DARK_BLUE
 }
 
 export default Select

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

@@ -1,9 +1,9 @@
 .container {
-  @apply flex flex-col w-full relative z-10;
+  @apply flex flex-col w-full relative;
 }
 .selectContainer {
-  @apply w-full flex items-center h-10 relative;
-}
+  @apply w-full flex items-center h-10 relative z-10;
+} 
 .select {
   @apply px-2 h-full border border-solid box-border rounded-md ;
 }
@@ -12,11 +12,11 @@
   @apply shadow-main-dark-blue outline-none;
 }
 .options {
-  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll;
+  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll z-20;
   box-shadow: 0px 0px 10px rgb(0 40 61 / 25%);
 }
 .option {
-  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10
+  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10 inline-flex items-center gap-x-1
 }
 .icons {
   @apply absolute top-[50%] right-[0.5rem] translate-y-[-50%] flex gap-x-2;

package/src/stories/forms/Select.stories.jsx

@@ -51,12 +51,36 @@ const TemplateBorderMainDarkBlue = (args) => {
   )
 }
 
+const TemplateBorderMainDarkBlue2 = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <>
+      <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
+        <p>Value of the input {value}</p>
+        <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <br />
+        <Select placeholder='Disabled' disabled />
+
+      </div>
+    </>
+  )
+}
+
 export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 
 BorderMainDarkBlue.args = {
   name: 'test',
   placeholder: 'Defaul option',
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}` })),
+  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'SocialGitHubIcon' })),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -69,3 +93,27 @@ DefaultInvalid.args = {
   borderColor: MAIN_GREEN,
   errorMessage: 'This is an error message'
 }
+
+export const withDifferentOptions = TemplateBorderMainDarkBlue2.bind({})
+
+withDifferentOptions.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  options: [...Array(20).keys()].map(ele => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'SocialGitHubIcon'
+  })).concat({
+    label: 'Last but not least',
+    iconName: 'AddIcon',
+    value: 123123,
+    notSelectable: true,
+    onClick: () => alert('you clicked last but not least')
+  }).concat({
+    label: 'Play',
+    iconName: 'PlayIcon',
+    value: 123123,
+    notSelectable: true
+  }),
+  borderColor: MAIN_DARK_BLUE
+}