From 81868c889e494915f9dd4118f7e9de71461bfd3b Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 11:29:57 +0700 Subject: [PATCH 01/13] styles: btn common with icon as prefix and suffix --- pages/index.tsx | 4 ++-- .../common/ButtonCommon/ButtonCommon.module.scss | 9 ++++++++- src/components/common/ButtonCommon/ButtonCommon.tsx | 10 ++++++---- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 4b981486d..0005eacd0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,8 +10,8 @@ export default function Home() { {ButonType.light} - Button light {ButonType.light} - Button light {ButonType.light} - Button light - {ButtonSize.large} - Button default large - } disabled>Button with icon disabled + }>{ButtonSize.large} - Button default large + } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index eaf930670..81866b687 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -58,8 +58,15 @@ } } + &.preserve { + flex-direction: row-reverse; + .icon { + margin: 0 0 0 1.6rem; + } + } + .icon { - margin-right: 0.8rem; + margin: 0 1.6rem 0 0; svg path { fill: currentColor; } diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 27a4f3d72..6993347e6 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import React from 'react' +import React, { memo } from 'react' import { ButonType, ButtonSize } from 'src/utils/constanst.utils' import s from './ButtonCommon.module.scss' @@ -8,19 +8,21 @@ interface Props { type?: ButonType, size?: ButtonSize, icon?: any, + isIconSuffix?: boolean, loading?: boolean, disabled?: boolean, onClick?: () => void, } -const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default, - icon, loading, disabled, children, onClick }: Props) => { +const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default, + icon, loading, disabled, isIconSuffix, children, onClick }: Props) => { return ( ) -} +}) export default ButtonCommon From d5a0c35ffc117a79e583c5a05b27cfdae265cac8 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 11:41:03 +0700 Subject: [PATCH 02/13] fix: change btn common children propstype to React.ReactNode --- src/components/common/ButtonCommon/ButtonCommon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 6993347e6..2fd3cf464 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -4,7 +4,7 @@ import { ButonType, ButtonSize } from 'src/utils/constanst.utils' import s from './ButtonCommon.module.scss' interface Props { - children?: any, + children?: React.ReactNode, type?: ButonType, size?: ButtonSize, icon?: any, From 2eab1e12c7ed18a0a84c05adc8a2bc10ef5911ab Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 12:51:42 +0700 Subject: [PATCH 03/13] feat: input common --- package.json | 6 +-- pages/index.tsx | 30 +++++++---- .../InputCommon/InputCommon.module.scss | 5 ++ .../common/InputCommon/InputCommon.tsx | 52 +++++++++++++++++++ src/components/common/index.ts | 3 +- src/utils/constanst.utils.ts | 8 +++ 6 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 src/components/common/InputCommon/InputCommon.module.scss create mode 100644 src/components/common/InputCommon/InputCommon.tsx diff --git a/package.json b/package.json index 55eb91251..387ca946b 100644 --- a/package.json +++ b/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", diff --git a/pages/index.tsx b/pages/index.tsx index 0005eacd0..9c9942636 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,21 +1,31 @@ -import { ButtonCommon, Layout } from 'src/components/common' -import { IconBuy } from 'src/components/icons' -import { ButonType, ButtonSize } from 'src/utils/constanst.utils' +import { useEffect, useRef } from 'react'; +import { Inputcommon, Layout } from 'src/components/common' +import { InputType } from 'src/utils/constanst.utils' export default function Home() { + + const inputElementRef = useRef(null); + + useEffect(() => { + setTimeout(() =>{ + inputElementRef.current?.focus() + }, 1000) + }, []) + + const onEnter = (value: string | number) => { + + } + return ( <>
This is home page
- Button default - {ButonType.light} - Button light - {ButonType.light} - Button light - {ButonType.light} - Button light - }>{ButtonSize.large} - Button default large - } disabled isIconSuffix={true}>Button with icon disabled - } type={ButonType.light}>Button with icon

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

+ + + + ) } diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss new file mode 100644 index 000000000..8909a6a7f --- /dev/null +++ b/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; +} diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx new file mode 100644 index 000000000..e0ca5ff95 --- /dev/null +++ b/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(({ value, placeholder, type, onChange, onEnter }: Props, ref) => { + const inputElementRef = useRef(null); + + useImperativeHandle(ref, () => ({ + focus: () => { + inputElementRef.current?.focus(); + }, + })); + + const handleChange = (e: React.ChangeEvent) => { + onChange && onChange(e.target.value) + } + + const handleKeyDown = (e: any) => { + if (e.key === KEY.ENTER && onEnter) { + const value = inputElementRef.current?.value || '' + onEnter(value) + } + } + + return ( + + ) + +}) + +export default InputCommon diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8144b0de0..4e9637e6c 100644 --- a/src/components/common/index.ts +++ b/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' \ No newline at end of file +export { default as Logo} from './Logo/Logo' +export { default as Inputcommon} from './InputCommon/InputCommon' diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 538cfe306..110af9a7e 100644 --- a/src/utils/constanst.utils.ts +++ b/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', +} From 2d0ef885826a6cac87e44c9efc4f7c7d2b03939a Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 12:53:49 +0700 Subject: [PATCH 04/13] test commit hooks --- src/components/common/InputCommon/InputCommon.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index e0ca5ff95..3dc49129b 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -15,6 +15,7 @@ interface Props { onEnter?: (value: string | number) => void, } + const InputCommon = forwardRef(({ value, placeholder, type, onChange, onEnter }: Props, ref) => { const inputElementRef = useRef(null); From 1b55f3ca2682a849f7aa75e6af6569a3fa026451 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 12:54:34 +0700 Subject: [PATCH 05/13] enhan: test commit hooks --- src/components/common/InputCommon/InputCommon.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index 3dc49129b..e0ca5ff95 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -15,7 +15,6 @@ interface Props { onEnter?: (value: string | number) => void, } - const InputCommon = forwardRef(({ value, placeholder, type, onChange, onEnter }: Props, ref) => { const inputElementRef = useRef(null); From ec7f3b5882ffcdaf2b29e85a8e60b07925ffa0aa Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 12:56:10 +0700 Subject: [PATCH 06/13] enhan: test commit hooks --- src/components/common/InputCommon/InputCommon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index e0ca5ff95..6f36c4dce 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -1,6 +1,6 @@ -import React, { forwardRef, RefObject, useImperativeHandle, useRef } from 'react'; +import React, { forwardRef, useImperativeHandle, useRef } from 'react'; import { InputType, KEY } from 'src/utils/constanst.utils'; -import s from './InputCommon.module.scss' +import s from './InputCommon.module.scss'; type Ref = { focus: () => void From c05cca78ba42e2694957534acebf044c16f0fb8b Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 13:04:29 +0700 Subject: [PATCH 07/13] :sparkles: styles: button ghost --- pages/index.tsx | 24 +++++-------------- .../ButtonCommon/ButtonCommon.module.scss | 12 ++++++++++ .../common/ButtonCommon/ButtonCommon.tsx | 6 ++--- .../InputCommon/InputCommon.module.scss | 2 +- .../common/InputCommon/InputCommon.tsx | 4 ++-- src/utils/constanst.utils.ts | 17 ------------- 6 files changed, 24 insertions(+), 41 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 9c9942636..85b4a208e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,21 +1,7 @@ -import { useEffect, useRef } from 'react'; -import { Inputcommon, Layout } from 'src/components/common' -import { InputType } from 'src/utils/constanst.utils' +import { ButtonCommon, Inputcommon, Layout } from 'src/components/common'; +import { IconBuy } from 'src/components/icons'; export default function Home() { - - const inputElementRef = useRef(null); - - useEffect(() => { - setTimeout(() =>{ - inputElementRef.current?.focus() - }, 1000) - }, []) - - const onEnter = (value: string | number) => { - - } - return ( <>
This is home page
@@ -23,9 +9,11 @@ export default function Home() {

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

- - + + + + }>Button ) } diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index 81866b687..c9d390574 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -48,6 +48,18 @@ } } } + + &.ghost { + @apply bg-white; + color: var(--primary); + border: 1px solid var(--primary); + &.loading { + &::before { + border-top-color: var(--primary); + } + } + } + &.large { padding: 3.2rem 4.8rem; &.loading { diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 2fd3cf464..82961b43e 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -5,8 +5,8 @@ import s from './ButtonCommon.module.scss' interface Props { children?: React.ReactNode, - type?: ButonType, - size?: ButtonSize, + type?: 'primary' | 'light' | 'ghost', + size?: 'default' | 'large', icon?: any, isIconSuffix?: boolean, loading?: boolean, @@ -14,7 +14,7 @@ interface Props { onClick?: () => void, } -const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default, +const ButtonCommon = memo(({ type = 'primary', size = 'default', icon, loading, disabled, isIconSuffix, children, onClick }: Props) => { return (