From ccd7ba2bdd67a0d718626f711e44040130b9dc7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 7 Jul 2022 10:59:05 -0300 Subject: [PATCH 1/5] Transfers responsibility for callbacks to the renderer --- .../RegionalizationInput.tsx | 9 ++- .../ui/InputText/InputText.stories.tsx | 11 ++-- src/components/ui/InputText/InputText.tsx | 55 +++++++------------ 3 files changed, 34 insertions(+), 41 deletions(-) diff --git a/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx b/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx index db08ad89..1b56777e 100644 --- a/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx +++ b/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx @@ -12,6 +12,7 @@ function RegionInput({ closeModal }: Props) { const inputRef = useRef(null) const { setSession, isValidating, ...session } = useSession() const [errorMessage, setErrorMessage] = useState('') + const [input, setInput] = useState('') const handleSubmit = async () => { const value = inputRef.current?.value @@ -43,10 +44,16 @@ function RegionInput({ closeModal }: Props) { { + errorMessage !== '' && setErrorMessage('') + setInput(e.currentTarget.value) + }} onSubmit={handleSubmit} + onClear={() => setInput('')} /> ) diff --git a/src/components/ui/InputText/InputText.stories.tsx b/src/components/ui/InputText/InputText.stories.tsx index 1f844cfd..204ea23f 100644 --- a/src/components/ui/InputText/InputText.stories.tsx +++ b/src/components/ui/InputText/InputText.stories.tsx @@ -13,6 +13,9 @@ const story = { id: { type: { name: 'string', required: true }, }, + onClear: { + table: { disable: true }, + }, }, } @@ -30,7 +33,7 @@ export const Disabled = Template.bind({}) Default.args = { id: 'default-input-text', label: 'Email', - errorMessage: 'Please, add a valid email', + error: 'Please, add a valid email', disabled: false, } @@ -38,7 +41,7 @@ HasError.args = { id: 'error-input-text', label: 'Email', value: 'invalid@mail', - errorMessage: 'Please, add a valid email', + error: 'Please, add a valid email', disabled: false, } @@ -46,14 +49,14 @@ Actionable.args = { id: 'actionable-input-text', label: 'Postal Code', actionable: true, - errorMessage: 'Invalid Postal Code', + error: 'Invalid Postal Code', disabled: false, } Disabled.args = { id: 'disabled-input-text', label: 'Email', - errorMessage: 'Please, add a valid email', + error: 'Please, add a valid email', disabled: true, } diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx index 253d796b..c7b78e38 100644 --- a/src/components/ui/InputText/InputText.tsx +++ b/src/components/ui/InputText/InputText.tsx @@ -1,6 +1,5 @@ import { Input as UIInput, Label as UILabel } from '@faststore/ui' import type { MutableRefObject } from 'react' -import { useEffect, useState } from 'react' import type { InputProps } from '@faststore/ui' import Button from 'src/components/ui/Button' @@ -19,7 +18,7 @@ type DefaultProps = { /** * The error message is displayed when an error occurs. */ - errorMessage?: string + error?: string /** * Component's ref. */ @@ -39,7 +38,11 @@ type ActionableInputText = /** * Callback function when button is clicked. */ - onSubmit: (value: string) => void + onSubmit: () => void + /** + * Callback function when clear button is clicked. + */ + onClear: () => void /** * The text displayed on the Button. Suggestion: maximum 9 characters. */ @@ -48,6 +51,7 @@ type ActionableInputText = | { actionable?: false onSubmit?: never + onClear?: never buttonActionText?: string } @@ -59,71 +63,50 @@ const InputText = ({ id, label, type = 'text', - errorMessage, + error, actionable, buttonActionText = 'Apply', onSubmit, + onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown` - value, inputRef, disabled, ...otherProps }: InputTextProps) => { - const [inputValue, setInputValue] = useState((value as string) ?? '') - const [hasError, setHasError] = useState(!!errorMessage) - - useEffect(() => { - errorMessage && setHasError(true) - }, [errorMessage]) - - const onClear = () => { - setInputValue('') - inputRef?.current?.focus() - } - return (
{ - hasError && setHasError(false) - setInputValue(e.currentTarget.value) - }} + placeholder={placeholder} {...otherProps} /> {label} {actionable && !disabled && - inputValue !== '' && - (hasError ? ( + (error ? ( } - onClick={onClear} + onClick={() => { + onClear?.() + inputRef?.current?.focus() + }} /> ) : ( - ))} - {hasError && !disabled && inputValue !== '' && ( - {errorMessage} - )} + {error && !disabled && {error}}
) } From b8b296916ee2fe9421252bf4ddb63ffc60c75db8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 7 Jul 2022 11:20:13 -0300 Subject: [PATCH 2/5] Adds changelog entry --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d074d6d7..7155cc76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - priceCurrency field on SEO meta data ([#161](https://github.com/vtex-sites/nextjs.store/pull/161)) +- Transfers responsibility of `InputText`'s main attributes and callbacks to the renderer ([#163](https://github.com/vtex-sites/nextjs.store/pull/163)) + ## [22.26.0.beta] - 2022-07-01 ### Added From b77f20ed3d92ee44115368988e3c743d182115e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 7 Jul 2022 16:37:39 -0300 Subject: [PATCH 3/5] Fixes type and story for handling input errors --- .../ui/InputText/InputText.stories.tsx | 35 +++++++++++++++---- src/components/ui/InputText/InputText.tsx | 29 ++++++++------- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/components/ui/InputText/InputText.stories.tsx b/src/components/ui/InputText/InputText.stories.tsx index 204ea23f..6c7f4fe9 100644 --- a/src/components/ui/InputText/InputText.stories.tsx +++ b/src/components/ui/InputText/InputText.stories.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react' + import type { InputTextProps } from '.' import InputText from '.' @@ -13,9 +15,6 @@ const story = { id: { type: { name: 'string', required: true }, }, - onClear: { - table: { disable: true }, - }, }, } @@ -25,15 +24,39 @@ const Template = ({ ...args }: InputTextProps) => ( ) +const TemplateActionable = ({ ...args }: InputTextProps) => { + const [input, setInput] = useState('') + const [error, setError] = useState() + + return ( +
+ setError('Invalid Postal Code')} + onClear={() => { + setError(undefined) + setInput('') + }} + onChange={(e) => { + error && setError(undefined) + setInput(e.target.value) + }} + {...args} + /> +
+ ) +} + export const Default = Template.bind({}) export const HasError = Template.bind({}) -export const Actionable = Template.bind({}) +export const Actionable = TemplateActionable.bind({}) export const Disabled = Template.bind({}) Default.args = { id: 'default-input-text', label: 'Email', - error: 'Please, add a valid email', disabled: false, } @@ -48,8 +71,6 @@ HasError.args = { Actionable.args = { id: 'actionable-input-text', label: 'Postal Code', - actionable: true, - error: 'Invalid Postal Code', disabled: false, } diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx index c7b78e38..5913d8a3 100644 --- a/src/components/ui/InputText/InputText.tsx +++ b/src/components/ui/InputText/InputText.tsx @@ -30,17 +30,23 @@ type DefaultProps = { } type ActionableInputText = + | { + actionable?: never + onSubmit?: never + onClear?: never + buttonActionText?: string + } | { /** * Adds a Button to the component. */ actionable: true /** - * Callback function when button is clicked. + * Callback function when button is clicked. Required for actionable input. */ onSubmit: () => void /** - * Callback function when clear button is clicked. + * Callback function when clear button is clicked. Required for actionable input. */ onClear: () => void /** @@ -48,15 +54,9 @@ type ActionableInputText = */ buttonActionText?: string } - | { - actionable?: false - onSubmit?: never - onClear?: never - buttonActionText?: string - } export type InputTextProps = DefaultProps & - Omit & + Omit & ActionableInputText const InputText = ({ @@ -71,17 +71,19 @@ const InputText = ({ placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown` inputRef, disabled, + value, ...otherProps }: InputTextProps) => { return (
} onClick={() => { - onClear?.() + onClear() inputRef?.current?.focus() }} /> @@ -106,7 +109,9 @@ const InputText = ({ {buttonActionText} ))} - {error && !disabled && {error}} + {!disabled && error && error !== '' && ( + {error} + )}
) } From 45f6500e535639afde0338518bfbd3357708e6b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Mon, 11 Jul 2022 11:34:18 -0300 Subject: [PATCH 4/5] Creates consts for code legibility purposes --- src/components/ui/InputText/InputText.stories.tsx | 7 +++---- src/components/ui/InputText/InputText.tsx | 13 ++++++------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/ui/InputText/InputText.stories.tsx b/src/components/ui/InputText/InputText.stories.tsx index 6c7f4fe9..5bf52f63 100644 --- a/src/components/ui/InputText/InputText.stories.tsx +++ b/src/components/ui/InputText/InputText.stories.tsx @@ -15,6 +15,9 @@ const story = { id: { type: { name: 'string', required: true }, }, + actionable: { + type: { name: 'boolean' }, + }, }, } @@ -57,7 +60,6 @@ export const Disabled = Template.bind({}) Default.args = { id: 'default-input-text', label: 'Email', - disabled: false, } HasError.args = { @@ -65,19 +67,16 @@ HasError.args = { label: 'Email', value: 'invalid@mail', error: 'Please, add a valid email', - disabled: false, } Actionable.args = { id: 'actionable-input-text', label: 'Postal Code', - disabled: false, } Disabled.args = { id: 'disabled-input-text', label: 'Email', - error: 'Please, add a valid email', disabled: true, } diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx index 5913d8a3..5c91ce2f 100644 --- a/src/components/ui/InputText/InputText.tsx +++ b/src/components/ui/InputText/InputText.tsx @@ -74,6 +74,9 @@ const InputText = ({ value, ...otherProps }: InputTextProps) => { + const shouldDisplayError = !disabled && error && error !== '' + const shouldDisplayButton = actionable && !disabled && value !== '' + return (
{label} - {actionable && - !disabled && - value !== '' && + {shouldDisplayButton && (error ? ( } onClick={() => { - onClear() + onClear?.() inputRef?.current?.focus() }} /> @@ -109,9 +110,7 @@ const InputText = ({ {buttonActionText} ))} - {!disabled && error && error !== '' && ( - {error} - )} + {shouldDisplayError && {error}}
) } From e2d748d07aaf11fe731e649076a068583d166f69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Mon, 11 Jul 2022 14:04:14 -0300 Subject: [PATCH 5/5] Trigger CI with an empty commit