feat(search-bar): add custom search bar component

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

packages/components/src/custom/Toolbar/index.ts

@@ -0,0 +1 @@
+export * from './viewColumn';

packages/components/src/custom/Toolbar/viewColumn.tsx

@@ -0,0 +1,108 @@
+import { IconButton, TextField, Tooltip } from '@layer5/sistent-components';
+import React, { useRef, useState } from 'react';
+import {
+  default as CloseIcon,
+  default as SearchIcon
+} from '../../../../svg/src/icons/Search/searchIcon';
+
+interface SearchBarProps {
+  onSearch: (searchText: string) => void;
+  style?: React.CSSProperties;
+  placeholder?: string;
+  onClear?: () => void;
+  expanded: boolean;
+  setExpanded: (expanded: boolean) => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ placeholder, onClear, expanded, setExpanded }) => {
+  const [searchText, setSearchText] = useState('');
+  const searchRef = useRef<HTMLInputElement | null>(null);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setSearchText(event.target.value);
+  };
+
+  const handleClearIconClick = (): void => {
+    setSearchText('');
+    setExpanded(false);
+    if (onClear) {
+      onClear();
+    }
+  };
+
+  const handleSearchIconClick = (): void => {
+    if (expanded) {
+      setSearchText('');
+      setExpanded(false);
+    } else {
+      setExpanded(true);
+      setTimeout(() => {
+        if (searchRef.current) {
+          searchRef.current.focus();
+        }
+      }, 300);
+    }
+  };
+
+  //Todo: Need a width utility function
+  //  const width = window.innerWidth;
+  //   let searchWidth = "200px";
+  //   if (width <= 360) {
+  //     searchWidth = "100px";
+  //   }
+
+  return (
+    <div>
+      <TextField
+        variant="standard"
+        value={searchText}
+        onChange={handleSearchChange}
+        inputRef={searchRef}
+        placeholder={placeholder}
+        style={{
+          width: '150px',
+          opacity: expanded ? 1 : 0,
+          transition: 'width 0.3s ease, opacity 0.3s ease'
+        }}
+      />
+
+      {expanded ? (
+        <Tooltip title="Close">
+          <IconButton
+            onClick={handleClearIconClick}
+            sx={{
+              '&:hover': {
+                '& svg': {
+                  fill: '#00D3A9'
+                },
+                borderRadius: '4px'
+              }
+            }}
+            disableRipple
+          >
+            <CloseIcon fill="#00D3A9" />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Search" arrow>
+          <IconButton
+            onClick={handleSearchIconClick}
+            sx={{
+              '&:hover': {
+                '& svg': {
+                  fill: '#00D3A9'
+                },
+                borderRadius: '4px'
+              }
+            }}
+            disableRipple
+          >
+            <SearchIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export default SearchBar;

packages/svg/src/icons/Close/closeIcon.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+
+export const CloseIcon: FC<IconProps> = ({ width, height, ...props }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
+  );
+};
+
+export default CloseIcon;

packages/svg/src/icons/Close/index.ts

@@ -0,0 +1 @@
+export { default as CloseIcon } from './closeIcon';

packages/svg/src/icons/Search/intex.ts

@@ -0,0 +1 @@
+export { default as SearchIcon } from './seacrhIcon';

packages/svg/src/icons/Search/seacrhIcon.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+
+export const SearchIcon: FC<IconProps> = ({ width, height, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      viewBox="0 -960 960 960"
+      width={width}
+      {...props}
+    >
+      <path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z" />
+    </svg>
+  );
+};
+
+export default SearchIcon;