From 6a5a4e2f163a5e72b601743133b9682ec54b59c0 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Thu, 14 Dec 2023 18:46:23 +0100
Subject: [PATCH] fix: updating search bar and adding story

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 src/components/SearchBarV2.jsx        | 37 ++++++++++++++++-----------
 src/components/SearchBarV2.module.css |  2 +-
 src/stories/SearchBarV2.stories.jsx   | 24 +++++++++++++++++
 3 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 src/stories/SearchBarV2.stories.jsx

diff --git a/src/components/SearchBarV2.jsx b/src/components/SearchBarV2.jsx
index 46ee96a2..bd54e677 100644
--- a/src/components/SearchBarV2.jsx
+++ b/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: ''
diff --git a/src/components/SearchBarV2.module.css b/src/components/SearchBarV2.module.css
index 46be9d16..152c3053 100644
--- a/src/components/SearchBarV2.module.css
+++ b/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;
diff --git a/src/stories/SearchBarV2.stories.jsx b/src/stories/SearchBarV2.stories.jsx
new file mode 100644
index 00000000..ff2f3457
--- /dev/null
+++ b/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)
+  }
+}