feat: input common

package.json

@@ -74,11 +74,7 @@
     "prettier": "^2.3.0",
     "typescript": "4.3.4"
   },
-  "husky": {
+
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write",

pages/index.tsx

@@ -1,21 +1,31 @@
 
-import { ButtonCommon, Layout } from 'src/components/common'
+import { useEffect, useRef } from 'react';
-import { IconBuy } from 'src/components/icons'
+import { Inputcommon, Layout } from 'src/components/common'
-import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
+import { InputType } from 'src/utils/constanst.utils'
 export default function Home() {
+
+  const inputElementRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() =>{
+      inputElementRef.current?.focus()
+    }, 1000)
+  }, [])
+  
+  const onEnter = (value: string | number) => {
+
+  }
+
   return (
     <>
       <div>This is home page</div>
-      <ButtonCommon loading={true}>Button default</ButtonCommon>
-      <ButtonCommon type={ButonType.light} >{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon type={ButonType.light} disabled>{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
-      <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
-      <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
       <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
+
+      <Inputcommon placeholder="Enter here" onEnter={onEnter} ref={inputElementRef}/>
+      <Inputcommon placeholder="Enter here" onEnter={onEnter} type={InputType.number}/>
+      <Inputcommon placeholder="Enter here" value="23434" />
     </>
   )
 }

src/components/common/InputCommon/InputCommon.module.scss

@@ -0,0 +1,5 @@
+@import "../../../styles/utilities";
+
+.inputCommon {
+  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+}

src/components/common/InputCommon/InputCommon.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, RefObject, useImperativeHandle, useRef } from 'react';
+import { InputType, KEY } from 'src/utils/constanst.utils';
+import s from './InputCommon.module.scss'
+
+type Ref = {
+    focus: () => void
+} | null;
+
+interface Props {
+    children?: React.ReactNode,
+    value?: string | number,
+    placeholder?: string,
+    type?: InputType,
+    onChange?: (value: string | number) => void,
+    onEnter?: (value: string | number) => void,
+}
+
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
+    const inputElementRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputElementRef.current?.focus();
+        },
+    }));
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange && onChange(e.target.value)
+    }
+
+    const handleKeyDown = (e: any) => {
+        if (e.key === KEY.ENTER && onEnter) {
+            const value = inputElementRef.current?.value || ''
+            onEnter(value)
+        }
+    }
+
+    return (
+        <input
+            ref={inputElementRef}
+            value={value}
+            type={type}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            className={s.inputCommon}
+        />
+    )
+
+})
+
+export default InputCommon

src/components/common/index.ts

@@ -3,4 +3,5 @@ export { default as Layout } from './Layout/Layout'
 export { default as Head } from './Head/Head'
 export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
-export { default as Logo} from './Logo/Logo'
+export { default as Logo} from './Logo/Logo'
+export { default as Inputcommon} from './InputCommon/InputCommon'

src/utils/constanst.utils.ts

@@ -10,3 +10,11 @@ export enum ButtonSize {
     large = 'large',
 }
 
+export enum InputType {
+    text = 'text',
+    number = 'number',
+}
+
+export const KEY = {
+    ENTER: 'Enter',
+}