Merge pull request #340 from nginformatica/feat/add-input-characters-…

…counter

feat: add input characters counter

package.json

@@ -1,10 +1,10 @@
 {
   "name": "flipper-ui",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",
-  "author": "NG Informática",
+  "author": "NG",
   "license": "MIT",
   "repository": {
     "type": "git",

src/core/inputs/text-field/index.tsx

@@ -25,7 +25,7 @@ import { Clear, Help as ContactSupportIcon, Edit, Save } from '@/icons'
 import { IconButton } from '../icon-button'
 import { theme } from '@/theme'
 
-const { primary } = theme.colors
+const { grays, primary } = theme.colors
 
 export interface IOption {
     label: string
@@ -55,7 +55,9 @@ export interface TextFieldProps
     value?: string | number
     variant?: 'standard' | 'outlined' | 'filled'
     inputRef?: Ref<HTMLInputElement>
-    inputProps?: object
+    inputProps?: {
+        maxLength?: number
+    } & object
     InputProps?: object
     InputLabelProps?: object
     SelectProps?: object
@@ -65,6 +67,7 @@ export interface TextFieldProps
     helperIcon?: ReactNode
     showEdit?: boolean
     hasClear?: boolean
+    characters?: boolean
     onClear?: () => void
     onHelperClick?: () => void
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void
@@ -91,6 +94,17 @@ const Helper = styled.div`
     height: 38px;
 `
 
+const CharactersCount = styled.span`
+    margin-left: -35px;
+    color: ${grays.g3};
+    font-size: 14px;
+    font-family:
+        Roboto,
+        Helvetica,
+        Arial,
+        sans- serif;
+`
+
 export const TextFieldWrapper = styled.div`
     display: flex;
     flex-direction: rows;
@@ -239,6 +253,7 @@ export const TextField = ({
     fullWidth,
     hasClear,
     onClear,
+    characters,
     children,
     ...otherProps
 }: TextFieldProps) => {
@@ -311,9 +326,16 @@ export const TextField = ({
                     ...endAdornment,
                     ...SelectProps
                 }}
+                characters={characters?.toString()}
                 {...otherProps}>
                 {options ? renderOptions(options, classes) : children}
             </MuiTextField>
+            {characters && (
+                <CharactersCount>
+                    {otherProps.value?.toString().length}/
+                    {otherProps.inputProps?.maxLength}
+                </CharactersCount>
+            )}
             {onHelperClick && (
                 <HelperBox
                     helperIcon={helperIcon}

src/core/inputs/text-field/text-field.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { act } from 'react-dom/test-utils'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import TextField from '@/test/mocks/text-field-mock'
 import TextFieldOptions from '@/test/mocks/text-field-options-mock'
@@ -134,4 +134,15 @@ describe('TextField', () => {
 
         expect(textField.value).toBe('')
     })
+
+    it('should render character counter', () => {
+        render(
+            <TextField characters inputProps={{ placeholder: 'Description' }} />
+        )
+        const counter = screen.getByTestId('characters-counter')
+
+        waitFor(() => {
+            expect(counter).toBeDefined()
+        })
+    })
 })

src/core/inputs/text-field/text-field.stories.tsx

@@ -124,9 +124,37 @@ export const combobox = () => {
             <TextField
                 hasClear
                 value={value}
+                placeholder='Description'
                 onClear={onClear}
                 onChange={handleChange}
             />
         </div>
     )
 }
+
+export const withCharacterCount = () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState('')
+
+    const onClear = () => {
+        setValue('')
+    }
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value)
+    }
+
+    return (
+        <TextField
+            hasClear
+            characters
+            value={value}
+            placeholder='Description'
+            inputProps={{
+                maxLength: 6
+            }}
+            onClear={onClear}
+            onChange={handleChange}
+        />
+    )
+}

src/test/mocks/text-field-mock.tsx

@@ -6,6 +6,7 @@ import { TextField } from '@/core/inputs/text-field'
 interface IProps {
     initialOption?: string
     inputProps?: TextFieldProps
+    characters?: boolean
 }
 
 const LIST = [
@@ -16,7 +17,7 @@ const LIST = [
     { label: 'Fable', value: 'fable' }
 ]
 
-const Default = ({ inputProps, initialOption }: IProps) => {
+const Default = ({ inputProps, initialOption, characters }: IProps) => {
     const [value, setValue] = React.useState(initialOption ? initialOption : '')
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -28,19 +29,28 @@ const Default = ({ inputProps, initialOption }: IProps) => {
     }
 
     return (
-        <TextField
-            value={value}
-            onChange={handleChange}
-            onClear={handleClear}
-            {...inputProps}>
-            {inputProps?.select
-                ? LIST.map(({ label, value }) => (
-                      <ListItem key={value} value={value}>
-                          {label}
-                      </ListItem>
-                  ))
-                : undefined}
-        </TextField>
+        <>
+            <TextField
+                value={value}
+                characters={characters}
+                onChange={handleChange}
+                onClear={handleClear}
+                {...inputProps}>
+                {inputProps?.select
+                    ? LIST.map(({ label, value }) => (
+                          <ListItem key={value} value={value}>
+                              {label}
+                          </ListItem>
+                      ))
+                    : undefined}
+            </TextField>
+            {characters && (
+                <span data-testid='characters-counter'>
+                    {value.toString().length}/
+                    {inputProps?.inputProps?.maxLength}
+                </span>
+            )}
+        </>
     )
 }