@platformatic/ui-components 0.1.127 → 0.1.129

package/package.json

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

package/src/components/SearchBarV2.jsx

@@ -1,22 +1,25 @@
 'use strict'
 import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
+import commonStyles from './Common.module.css'
 import styles from './SearchBarV2.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { MEDIUM, WHITE } from './constants'
+import { MEDIUM, RICH_BLACK, TRANSPARENT, WHITE } from './constants'
 function SearchBarV2 ({
   onSubmit,
   onChange,
   onClear,
   color,
-  onFocusColor,
+  backgroundColor,
   placeholder,
   dataAttrName,
   dataAttrValue
 }) {
   const inputRef = useRef()
+  const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
   const [isOnFocus, setIsOnFocus] = useState(false)
+  const [showClear, setShowClear] = useState(false)
   const dataProps = {}
   if (dataAttrName && dataAttrValue) {
     dataProps[`data-${dataAttrName}`] = dataAttrValue
@@ -31,12 +34,14 @@ function SearchBarV2 ({
   function handleChange () {
     if (onChange) {
       const value = inputRef.current.value
+      setShowClear(!!value)
       return onChange(value)
     }
   }
 
   function handleClear () {
     inputRef.current.value = ''
+    setShowClear(false)
     return onClear()
   }
 
@@ -53,20 +58,22 @@ function SearchBarV2 ({
   }
 
   function onFocusClassName () {
-    return `${styles.container} ${styles.wrapperPadding} ${styles.onFocus}`
+    return `${baseClassName} ${styles.onFocus}`
   }
 
   function normalClassName () {
-    return `${styles.container} ${styles.wrapperPadding} ${styles.onBlur}`
+    return `${baseClassName} ${styles.onBlur}`
   }
 
   return (
     <div className={wrapperClassName} {...dataProps}>
-      <PlatformaticIcon iconName='LensIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleSearch} />
+      <PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={MEDIUM} onClick={handleSearch} />
       <input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
-      <div className={styles.clearContainer}>
-        <PlatformaticIcon iconName='CircleCloseIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleClear} />
-      </div>
+      {showClear && (
+        <div className={styles.clearContainer}>
+          <PlatformaticIcon iconName='CircleCloseIcon' color={color} size={MEDIUM} onClick={handleClear} />
+        </div>
+      )}
     </div>
   )
 }
@@ -87,11 +94,11 @@ SearchBarV2.propTypes = {
   /**
    * color
    */
-  color: PropTypes.string,
+  color: PropTypes.oneOf([WHITE, RICH_BLACK]),
   /**
-   * onFocusColor
+   * backgroundColor
    */
-  onFocusColor: PropTypes.string,
+  backgroundColor: PropTypes.oneOf([WHITE, RICH_BLACK, TRANSPARENT]),
   /**
    * placeholder
    */
@@ -108,10 +115,10 @@ SearchBarV2.propTypes = {
 
 SearchBarV2.defaultProps = {
   color: WHITE,
-  onFocusColor: WHITE,
-  onSubmit: () => {},
-  onChange: () => {},
-  onClear: () => {},
+  backgroundColor: RICH_BLACK,
+  onSubmit: () => { },
+  onChange: () => { },
+  onClear: () => { },
   placeholder: 'Search',
   dataAttrName: '',
   dataAttrValue: ''

package/src/components/SearchBarV2.module.css

@@ -20,7 +20,7 @@
   @apply font-semibold text-white text-3xl pb-4;
 }
 .clearContainer {
-  @apply absolute right-[1rem] translate-y-[-50%];
+  @apply absolute right-[1rem];
 }
 .wrapperPadding {
   @apply px-2 py-1.5;

package/src/components/forms/Select.jsx

@@ -52,6 +52,8 @@ function Select ({
     singleOptionClassName += ` ${styles['bordered-bottom']}`
   }
 
+  const optionSpanClassName = commonStyles[`text--${mainColor}`]
+
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
   function onFocusClassName () {
     return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
@@ -111,8 +113,9 @@ function Select ({
       >
         <div className={styles.liContent}>
           {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
-          <span className={commonStyles[`text--${mainColor}`]}>{option.label}</span>
+          <span className={optionSpanClassName}>{option.label}</span>
         </div>
+        {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
       </li>
     )
   }
@@ -212,7 +215,8 @@ Select.propTypes = {
     icon: PropTypes.string,
     notSelectable: PropTypes.bool,
     notFilterable: PropTypes.bool,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    descriptionValue: PropTypes.string
   })),
   /**
    * defaultOptionsClassName

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

@@ -23,7 +23,7 @@
   @apply border border-solid rounded-md
 }
 .option {
-  @apply w-full font-light cursor-pointer z-10;
+  @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
 }
 .bordered-bottom {
   @apply border-b
@@ -33,5 +33,8 @@
   transform: translateY(-50%);
 }
 .liContent {
-  @apply px-4 py-2 inline-flex items-center gap-x-1 relative z-[-1];
+  @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
+}
+.descriptionValue {
+  @apply opacity-70
 }

package/src/stories/SearchBarV2.stories.jsx

@@ -0,0 +1,24 @@
+'use strict'
+import SearchBarV2 from '../components/SearchBarV2'
+export default {
+  title: 'Platformatic/SearchBarV2',
+  component: SearchBarV2
+}
+const Template = (args) => {
+  return (
+    <>
+      <SearchBarV2 {...args} />
+    </>
+
+  )
+}
+export const Standard = Template.bind({})
+
+Standard.args = {
+  onChange: (value) => {
+    console.log('Current search: ' + value)
+  },
+  onSubmit: (value) => {
+    alert('Query value: ' + value)
+  }
+}