refactor: move component into a single package (#898)

packages/component/src/ui/input/Input.tsx

@@ -0,0 +1,71 @@
+import {
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+  FocusEventHandler,
+  KeyboardEventHandler,
+} from 'react';
+import { StyledInput } from './style';
+
+type inputProps = {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: number;
+  height?: number;
+  maxLength?: number;
+  minLength?: number;
+  onChange?: (value: string) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+
+export const Input = (props: inputProps) => {
+  const {
+    disabled,
+    value: valueProp,
+    placeholder,
+    maxLength,
+    minLength,
+    height,
+    width = 260,
+    onChange,
+    onBlur,
+    onKeyDown,
+  } = props;
+  const [value, setValue] = useState<string>(valueProp || '');
+  const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
+    if (
+      (maxLength && e.target.value.length > maxLength) ||
+      (minLength && e.target.value.length < minLength)
+    ) {
+      return;
+    }
+    setValue(e.target.value);
+    onChange && onChange(e.target.value);
+  };
+  const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
+    onBlur && onBlur(e);
+  };
+  const handleKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] =
+    e => {
+      onKeyDown && onKeyDown(e);
+    };
+  useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
+  return (
+    <StyledInput
+      value={value}
+      disabled={disabled}
+      placeholder={placeholder}
+      width={width}
+      maxLength={maxLength}
+      minLength={minLength}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      height={height}
+    ></StyledInput>
+  );
+};

packages/component/src/ui/input/index.ts

@@ -0,0 +1,3 @@
+export * from './Input';
+import { Input } from './Input';
+export default Input;

packages/component/src/ui/input/style.ts

@@ -0,0 +1,32 @@
+import { styled } from '../../styles';
+
+export const StyledInput = styled('input')<{
+  disabled?: boolean;
+  value?: string;
+  width: number;
+  height?: number;
+}>(({ theme, width, disabled, height }) => {
+  const fontWeight = 400;
+  const fontSize = '16px';
+  return {
+    width: `${width}px`,
+    lineHeight: '22px',
+    padding: '8px 12px',
+    fontWeight,
+    fontSize,
+    height: height ? `${height}px` : 'auto',
+    color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
+    border: `1px solid`,
+    borderColor: theme.colors.borderColor, // TODO: check out disableColor,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '10px',
+    '&::placeholder': {
+      fontWeight,
+      fontSize,
+      color: theme.colors.placeHolderColor,
+    },
+    '&:focus': {
+      borderColor: theme.colors.primaryColor,
+    },
+  };
+});