@platformatic/ui-components 0.2.16 → 0.2.18

package/package.json

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

package/src/components/LoginButton.jsx

@@ -3,6 +3,6 @@ import Button from './Button'
 
 export default function LoginButton ({ iconName, label, onClick, ...props }) {
   return (
-    <Button backgroundColor='main-green' alt={label} label={label} platformaticIcon={{ iconName, size: 'medium', color: 'main-dark-blue' }} data-testid='login-button' size='extra-large' onClick={onClick} {...props} bold />
+    <Button backgroundColor='main-green' alt={label} label={label} platformaticIcon={{ iconName, size: 'medium', color: 'main-dark-blue' }} data-testid='login-button' size='extra-large' onClick={onClick} {...props} />
   )
 }

package/src/components/TooltipV2.jsx

@@ -13,7 +13,6 @@ function TooltipV2 ({ tooltipClassName, text, visible, alignment, elementClassNa
     if (visible) {
       setClassName(visibleClassName())
       if (ref.current) {
-        console.log('elementClassName', elementClassName)
         const referenceBoundingClientRect = document.getElementsByClassName(elementClassName)[0]?.getBoundingClientRect()
         if (referenceBoundingClientRect) {
           const topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height)

package/src/components/forms/Select.jsx

@@ -17,12 +17,9 @@ function Select ({
   borderColor,
   borderListColor,
   errorMessage,
-  onChange,
   onSelect,
-  onClear,
   disabled,
   mainColor,
-  optionSelected,
   dataAttrName,
   dataAttrValue,
   backgroundColor,
@@ -30,6 +27,7 @@ function Select ({
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
+  // eslint-disable-next-line  no-unused-vars
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
 
@@ -41,6 +39,7 @@ function Select ({
   let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
   inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
   optionsClassName += commonStyles[`background-color-${backgroundColor}`]
+  const optionSelectedClassName = styles.optionSelected
 
   if (borderListColor) {
     optionsClassName += ' ' + styles['bordered-options']
@@ -94,20 +93,11 @@ function Select ({
   }
 
   useEffect(() => {
-    if (value.length > 0 && !showOptions && !isSelected) {
-      setShowOptions(true)
-    }
     if (value.length === 0) {
       setIsSelected(false)
     }
   }, [value])
 
-  useEffect(() => {
-    if (optionSelected) {
-      setSelected(optionSelected)
-    }
-  }, [optionSelected])
-
   useEffect(() => {
     if (disabled) {
       const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
@@ -117,10 +107,10 @@ function Select ({
     }
   }, [disabled])
 
-  function renderLi (option, index) {
+  function renderLi (option, index, isOptionSelected) {
     return (
       <li
-        key={index} className={singleOptionClassName} onClick={() => {
+        key={index} className={`${isOptionSelected ? optionSelectedClassName : singleOptionClassName}`} onClick={() => {
           if (option.notSelectable) {
             return handleNotSelectable(option.onClick && option.onClick())
           }
@@ -137,34 +127,15 @@ function Select ({
   }
 
   function renderOptions () {
-    if (value.length === 0) {
-      return (
-        <ul className={optionsClassName}>
-          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
-        </ul>
-      )
-    }
     const notFilterableOptions = options.filter(option => option.notFilterable)
-    const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
-
     return (
       <ul className={optionsClassName}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
         {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
+        {options.length > 0 ? options.map((option, index) => renderLi(option, index, option.label === value)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
       </ul>
     )
   }
 
-  // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
-  function clearValue () {
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
-    nativeInputValueSetter.call(inputRef.current, '')
-    const ev2 = new Event('input', { bubbles: true })
-    ev2.simulated = true
-    inputRef.current.dispatchEvent(ev2)
-    onClear()
-  }
-
   function handleFocus () {
     if (!isOnFocus) {
       setIsOnFocus(true)
@@ -177,7 +148,7 @@ function Select ({
     event.preventDefault()
     setTimeout(() => {
       if (showOptions) {
-        setShowOptions(false)
+        // setShowOptions(false)
         setIsOnFocus(false)
         setWrapperClassName(normalClassName())
       }
@@ -187,9 +158,8 @@ function Select ({
   return (
     <div className={containerClassName} {...dataProps}>
       <div className={styles.selectContainer}>
-        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
+        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
         <div className={styles.icons}>
-          {value?.length > 0 && !disabled && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
           <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
         </div>
       </div>
@@ -252,18 +222,10 @@ Select.propTypes = {
    * color of border UL
    */
   borderListColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
   /**
    * onSelect
    */
   onSelect: PropTypes.func,
-  /**
-   * onClear
-   */
-  onClear: PropTypes.func,
   /**
    * Disabled
    */
@@ -272,16 +234,6 @@ Select.propTypes = {
    * mainColor
    */
   mainColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * optionSelected
-   */
-  optionSelected: PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ])
-  }),
   /**
    * dataAttrName
   */
@@ -312,12 +264,9 @@ Select.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
-  onChange: () => {},
   onSelect: () => {},
-  onClear: () => {},
   disabled: false,
   mainColor: MAIN_DARK_BLUE,
-  optionSelected: null,
   dataAttrName: '',
   dataAttrValue: '',
   backgroundColor: WHITE,

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

@@ -17,7 +17,7 @@
   @apply outline-none;
 }
 .options {
-  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;
+  @apply absolute left-0 top-[42px] w-[calc(100%-1rem)] max-h-[216px] overflow-y-auto z-20 p-2;
 }
 .bordered-options {
   @apply border border-solid rounded
@@ -25,6 +25,9 @@
 .option {
   @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
 }
+.optionSelected {
+  @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 bg-white/15;
+}
 .bordered-bottom {
   @apply border-b
 }
@@ -33,7 +36,7 @@
   transform: translateY(-50%);
 }
 .liContent {
-  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
+  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-full;
 }
 .descriptionValue {
   @apply opacity-70

package/src/components/forms/SelectWithInput.jsx

@@ -0,0 +1,327 @@
+'use strict'
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import styles from './SelectWithInput.module.css'
+import commonStyles from '../Common.module.css'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constants'
+import PlatformaticIcon from '../PlatformaticIcon'
+
+function SelectWithInput ({
+  defaultContainerClassName,
+  placeholder,
+  name,
+  value,
+  options,
+  defaultOptionsClassName,
+  optionsBorderedBottom,
+  borderColor,
+  borderListColor,
+  errorMessage,
+  onChange,
+  onSelect,
+  onClear,
+  disabled,
+  mainColor,
+  optionSelected,
+  dataAttrName,
+  dataAttrValue,
+  backgroundColor,
+  inputTextClassName
+}) {
+  const inputRef = useRef()
+  const [showOptions, setShowOptions] = useState(false)
+  const [isSelected, setIsSelected] = useState(false)
+  const [isOnFocus, setIsOnFocus] = useState(false)
+
+  const showError = errorMessage.length > 0
+  const containerClassName = `${styles.container} ${defaultContainerClassName} `
+  let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
+  inputClassName += ' ' + styles[`select-${mainColor}`]
+  inputClassName += ' ' + commonStyles[`text--${borderColor}`]
+  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
+  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
+  optionsClassName += commonStyles[`background-color-${backgroundColor}`]
+
+  if (borderListColor) {
+    optionsClassName += ' ' + styles['bordered-options']
+    optionsClassName += ' ' + commonStyles[`bordered--${borderListColor}-30`]
+  }
+  let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-70`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
+  if (optionsBorderedBottom) {
+    singleOptionClassName += ` ${styles['bordered-bottom']}`
+  }
+
+  const optionSpanClassName = commonStyles[`text--${mainColor}`]
+
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+
+  function onFocusClassName () {
+    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
+  }
+
+  function normalClassName () {
+    const baseClassName = inputClassName
+    if (showError) {
+      inputClassName += ' ' + commonStyles['bordered--error-red']
+    } else {
+      inputClassName += ' ' + commonStyles[`bordered--${borderColor}-70`]
+    }
+    if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
+    return baseClassName
+  }
+
+  const dataProps = {}
+  if (dataAttrName && dataAttrValue) {
+    dataProps[`data-${dataAttrName}`] = dataAttrValue
+  }
+
+  function handleNotSelectable (callback = () => {}) {
+    setIsSelected(true)
+    setShowOptions(false)
+    callback()
+  }
+  function setSelected ({ label, value }) {
+    setIsSelected(true)
+    setShowOptions(false)
+    /* eslint-disable-next-line no-undef */
+    onSelect(new CustomEvent('valueSelected', {
+      detail: {
+        name,
+        label,
+        value
+      }
+    }))
+  }
+
+  useEffect(() => {
+    if (value.length > 0 && !showOptions && !isSelected) {
+      setShowOptions(true)
+    }
+    if (value.length === 0) {
+      setIsSelected(false)
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (optionSelected) {
+      setSelected(optionSelected)
+    }
+  }, [optionSelected])
+
+  useEffect(() => {
+    if (disabled) {
+      const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
+      setWrapperClassName(className)
+    } else {
+      setWrapperClassName(normalClassName())
+    }
+  }, [disabled])
+
+  function renderLi (option, index) {
+    return (
+      <li
+        key={index} className={singleOptionClassName} onClick={() => {
+          if (option.notSelectable) {
+            return handleNotSelectable(option.onClick && option.onClick())
+          }
+          return setSelected(option)
+        }}
+      >
+        <div className={styles.liContent}>
+          {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>}
+      </li>
+    )
+  }
+
+  function renderOptions () {
+    if (value.length === 0) {
+      return (
+        <ul className={optionsClassName}>
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
+        </ul>
+      )
+    }
+    const notFilterableOptions = options.filter(option => option.notFilterable)
+    const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
+
+    return (
+      <ul className={optionsClassName}>
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
+        {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
+      </ul>
+    )
+  }
+
+  // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
+  function clearValue () {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
+    nativeInputValueSetter.call(inputRef.current, '')
+    const ev2 = new Event('input', { bubbles: true })
+    ev2.simulated = true
+    inputRef.current.dispatchEvent(ev2)
+    onClear()
+  }
+
+  function handleFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+    setShowOptions(true)
+  }
+
+  function handleBlur (event) {
+    event.preventDefault()
+    setTimeout(() => {
+      if (showOptions) {
+        setShowOptions(false)
+        setIsOnFocus(false)
+        setWrapperClassName(normalClassName())
+      }
+    }, 250)
+  }
+
+  return (
+    <div className={containerClassName} {...dataProps}>
+      <div className={styles.selectContainer}>
+        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
+        <div className={styles.icons}>
+          {value?.length > 0 && !disabled && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
+        </div>
+      </div>
+      {showOptions && !showError && renderOptions()}
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+
+SelectWithInput.propTypes = {
+  /**
+   * defaultContainerClassName
+   */
+  defaultContainerClassName: PropTypes.string,
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * options
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    iconName: PropTypes.string,
+    iconSize: PropTypes.string,
+    iconColor: PropTypes.string,
+    notSelectable: PropTypes.bool,
+    notFilterable: PropTypes.bool,
+    onClick: PropTypes.func,
+    descriptionValue: PropTypes.string
+  })),
+  /**
+   * defaultOptionsClassName
+   */
+  defaultOptionsClassName: PropTypes.string,
+  /**
+   * optionsBorderedBottom
+   */
+  optionsBorderedBottom: PropTypes.bool,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * color of border UL
+   */
+  borderListColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * onSelect
+   */
+  onSelect: PropTypes.func,
+  /**
+   * onClear
+   */
+  onClear: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * mainColor
+   */
+  mainColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
+  /**
+   * optionSelected
+   */
+  optionSelected: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ])
+  }),
+  /**
+   * dataAttrName
+  */
+  dataAttrName: PropTypes.string,
+  /**
+   * dataAttrValue
+  */
+  dataAttrValue: PropTypes.string,
+  /**
+   * backgroundColor
+  */
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
+  /**
+   * inputTextClassName
+  */
+  inputTextClassName: PropTypes.string
+}
+
+SelectWithInput.defaultProps = {
+  defaultContainerClassName: '',
+  placeholder: 'this is the default',
+  name: '',
+  value: '',
+  id: '',
+  options: [],
+  defaultOptionsClassName: '',
+  optionsBorderedBottom: true,
+  borderColor: MAIN_GREEN,
+  borderListColor: '',
+  errorMessage: '',
+  onChange: () => {},
+  onSelect: () => {},
+  onClear: () => {},
+  disabled: false,
+  mainColor: MAIN_DARK_BLUE,
+  optionSelected: null,
+  dataAttrName: '',
+  dataAttrValue: '',
+  backgroundColor: WHITE,
+  inputTextClassName: ''
+}
+
+export default SelectWithInput

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

@@ -0,0 +1,40 @@
+.container {
+  @apply flex flex-col w-full relative
+}
+.selectContainer {
+  @apply w-full flex items-center relative z-10;
+} 
+.select {
+  @apply py-1.5 px-2 md:px-3 md:py-[10.5px] h-full border border-solid box-border rounded;
+}
+
+.select-main-dark-blue.active,
+.select-main-dark-blue:focus {
+  @apply shadow-main-dark-blue outline-none;
+}
+.select-white.active,
+.select-white:focus {
+  @apply outline-none;
+}
+.options {
+  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;
+}
+.bordered-options {
+  @apply border border-solid rounded
+}
+.option {
+  @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
+}
+.bordered-bottom {
+  @apply border-b
+}
+.icons {
+  @apply absolute top-[50%] right-[0.5rem] flex gap-x-2;
+  transform: translateY(-50%);
+}
+.liContent {
+  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
+}
+.descriptionValue {
+  @apply opacity-70
+}

package/src/components/forms/index.js

@@ -5,6 +5,7 @@ import Password from './Password'
 import Preview from './Preview'
 import RadioGroup from './RadioGroup'
 import Select from './Select'
+import SelectWithInput from './SelectWithInput'
 import TextArea from './TextArea'
 import ToggleSwitch from './ToggleSwitch'
 
@@ -16,6 +17,7 @@ export default {
   Preview,
   RadioGroup,
   Select,
+  SelectWithInput,
   TextArea,
   ToggleSwitch
 }

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

@@ -35,18 +35,13 @@ Default.args = {
 const TemplateBorderMainDarkBlue = (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} />
+      <Select {...args} value={value} onSelect={handleSelect} />
     </div>
   )
 }
@@ -54,10 +49,6 @@ const TemplateBorderMainDarkBlue = (args) => {
 const TemplateBorderMainDarkBlue2 = (args) => {
   const [value, setValue] = useState('')
 
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
   function handleSelect (event) {
     setValue(event.detail.label)
   }
@@ -66,7 +57,7 @@ const TemplateBorderMainDarkBlue2 = (args) => {
     <>
       <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
         <p>Value of the input {value}</p>
-        <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <Select {...args} value={value} onSelect={handleSelect} />
         <br />
         <Select placeholder='Disabled' disabled />
 
@@ -146,10 +137,6 @@ githubRepoExample.args = {
 const TemplateTransparent = (args) => {
   const [value, setValue] = useState('')
 
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
   function handleSelect (event) {
     setValue(event.detail.label)
   }
@@ -157,7 +144,7 @@ const TemplateTransparent = (args) => {
   return (
     <div style={{ padding: '20px 10px' }}>
       <p>Value of the input {value}</p>
-      <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+      <Select {...args} value={value} onSelect={handleSelect} />
     </div>
   )
 }

package/src/stories/forms/SelectWithInput.stories.jsx

@@ -0,0 +1,176 @@
+'use strict'
+import React, { useState } from 'react'
+import SelectWithInput from '../../components/forms/SelectWithInput'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, WHITE } from '../../components/constants'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'transparent'
+}
+
+export default {
+  title: 'Platformatic/Forms/SelectWithInput',
+  component: SelectWithInput,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <SelectWithInput {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic empty select',
+  borderColor: MAIN_GREEN
+}
+
+const TemplateBorderMainDarkBlue = (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>
+      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </div>
+  )
+}
+
+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>
+        <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <br />
+        <SelectWithInput 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}`, iconName: 'SocialGitHubIcon' })),
+  borderColor: MAIN_DARK_BLUE
+}
+
+export const DefaultInvalid = TemplateBorderMainDarkBlue.bind({})
+
+DefaultInvalid.args = {
+  name: 'test',
+  placeholder: 'Platformatic empty select',
+  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }],
+  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
+}
+
+export const githubRepoExample = TemplateBorderMainDarkBlue2.bind({})
+
+githubRepoExample.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  options: [...Array(4).keys()].map(ele => ({
+    label: `GitHub Repo ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'SocialGitHubIcon'
+  })).concat({
+    label: 'this is an option that is not selectable',
+    iconName: 'AddIcon',
+    value: 123123,
+    notSelectable: true,
+    onClick: () => alert('you clicked last but not least')
+  }).concat({
+    label: 'Add Github repo',
+    iconName: 'PlayIcon',
+    value: 123123,
+    notSelectable: true,
+    notFilterable: true
+  }),
+  borderColor: MAIN_DARK_BLUE
+}
+
+const TemplateTransparent = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <div style={{ padding: '20px 10px' }}>
+      <p>Value of the input {value}</p>
+      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </div>
+  )
+}
+
+export const TemplateBackgroundTransparent = TemplateTransparent.bind({})
+
+TemplateBackgroundTransparent.args = {
+  name: 'test',
+  placeholder: 'Defaul option',
+  optionsBorderedBottom: false,
+  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'OrganizationIcon' })),
+  borderColor: WHITE,
+  mainColor: WHITE,
+  backgroundColor: RICH_BLACK,
+  borderListColor: WHITE
+}