feat: add SearchTextField component

Author: steven11329

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/SearchTextField/SearchTextField.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { SearchTextFieldProps } from './SearchTextField.type';
+import SearchTextField from './SearchTextField';
+
+export default {
+  title: 'Components/TextField/SearchTextField',
+  component: SearchTextField,
+  argTypes: {
+    onChange: { action: 'onChange' },
+  },
+} as Meta;
+
+const Template: Story<SearchTextFieldProps> = (args) => (
+  <SearchTextField {...args} />
+);
+
+export const Default: Story<SearchTextFieldProps> = Template.bind({});
+
+Default.args = {
+  inputProps: {
+    placeholder: 'Distributor',
+  },
+};

src/components/SearchTextField/SearchTextField.tsx

@@ -0,0 +1,47 @@
+import { Box, styled } from '@mui/material';
+import React from 'react';
+
+import { SearchTextFieldProps } from './SearchTextField.type';
+import SearchSvgIcon from '../../svg/SearchSvgIcon';
+
+const Container = styled(Box)`
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  min-width: 220px;
+  min-height: 40px;
+  color: ${({ theme }) => theme.color.secondary.$80};
+  background: #ffffff;
+  border-radius: 4px;
+
+  & > input {
+    display: inline-block;
+    font: inherit;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    border: none;
+    outline: none;
+    margin-left: 16px;
+
+    &::placeholder {
+      color: ${({ theme }) => theme.color.secondary.$60};
+    }
+  }
+`;
+
+const SearchTextField: React.FC<SearchTextFieldProps> = ({
+  inputProps,
+  onChange,
+  ...otherProps
+}) => {
+  return (
+    <Container {...otherProps}>
+      <input type="text" onChange={onChange} {...inputProps} />
+      <SearchSvgIcon />
+    </Container>
+  );
+};
+
+export default SearchTextField;

src/components/SearchTextField/SearchTextField.type.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '@mui/material';
+import { InputHTMLAttributes } from 'react';
+
+export interface SearchTextFieldProps extends BoxProps {
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+}

src/components/SearchTextField/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchTextField';

src/components/index.ts

@@ -9,3 +9,4 @@ export { default as DropdownV2 } from './Dropdown/DropdownV2';
 export { default as DropdownColor } from './Dropdown/DropdownColor';
 export { default as DatePicker } from './DatePicker';
 export { default as Step } from './Step';
+export { default as SearchTextField } from './SearchTextField';

src/svg/SearchSvgIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SearchSvgIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={40}
+    height={40}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M24 19a5 5 0 1 1-10 0 5 5 0 0 1 10 0Zm-.808 5.606a7 7 0 1 1 1.414-1.414l.101.1 3 3a1 1 0 0 1-1.414 1.415l-3-3-.1-.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SearchSvgIcon;

tsconfig.json

@@ -16,11 +16,7 @@
     "esModuleInterop": true,
     "emitDeclarationOnly": false,
     "baseUrl": "src/",
-    "paths": {
-      "components": ["src/components/*"]
-    }
   },
   "include": ["src/**/*.tsx", "src/**/*.ts"],
   "exclude": ["lib", "node_modules"],
-  "types": ["typePatches"]
 }