feat: Add name property to form-related fields (#512) (#511)

### Changes made 
- All form-related fields, such as checkbox, radio button, input, and
select, have been updated with a new optional property called name to be
usable in projects that require form handling.
- The `text` property in the `Input` component has been renamed to
`value` because it is more related to its meaning (the input's value).
- Added new functions for events such as `onClick`, `onChange`, and
`onBlur` on imputable components for better extensibility.

---

### My pull request is for
- [ ] A bugfix
- [ ] A new component
- [x] An existing component update
- [ ] Dependencies version update

### Also, it complies with the following
- [x] Updated unit tests that reach at least 90% of code coverage.
- [x] Updated interfaces, types, tuples, and enums for the impacted
component/s

---

### Screenshots
N/A

eslint.config.js

@@ -6,7 +6,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist', 'storybook-static'] },
+  { ignores: ['dist', 'storybook-static', 'coverage'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

src/components/atoms/Checkbox/index.tsx

@@ -19,8 +19,11 @@ const CheckBox: React.FC<CheckBoxProps> = ({
   style = null,
   containerStyle = null,
   content = null,
+  name,
   isDisabled = null,
-  onChange = null
+  onClick,
+  onChange,
+  onBlur
 }) => {
   const checkboxContainerClasses = parseClasses([
     'checkbox',
@@ -48,10 +51,13 @@ const CheckBox: React.FC<CheckBoxProps> = ({
       <input
         data-testid={checkboxTestId}
         type='checkbox'
+        name={name}
         className={cssClasses ?? undefined}
         style={style ?? undefined}
         disabled={isDisabled ?? false}
-        onChange={onChange ?? undefined}
+        onClick={onClick}
+        onChange={onChange}
+        onBlur={onBlur}
       />
       {content}
     </label>

src/components/atoms/File/index.tsx

@@ -14,14 +14,17 @@ const File: React.FC<FileProps> = ({
   style = null,
   containerStyle = null,
   fileName = null,
+  name,
   uploadIcon = { iconLabel: 'upload' },
   uploadText = 'Choose a file…',
   buttonOnRight = false,
   isFullWidth = false,
   isBoxed = false,
   color = null,
   size = null,
-  onClick = null
+  onClick,
+  onChange,
+  onBlur
 }) => {
   const fileContainerClasses = parseClasses([
     'file',
@@ -62,10 +65,12 @@ const File: React.FC<FileProps> = ({
         <input
           data-testid={fileInputTestId}
           type='file'
-          name='resume'
+          name={name}
           className={fileInputClasses}
           style={style ?? undefined}
-          onClick={onClick ?? undefined}
+          onClick={onClick}
+          onChange={onChange}
+          onBlur={onBlur}
         />
         <span className='file-cta'>
           {uploadIcon ? <Icon {...uploadIcon} /> : null}

src/components/atoms/Input/index.mocks.json

@@ -13,7 +13,7 @@
       "placeholder": "Here the user will see this until you type something"
     },
     "withText": {
-      "text": "Welcome to reactive-bulma"
+      "value": "Welcome to reactive-bulma"
     },
     "redColored": {
       "color": "is-danger"

src/components/atoms/Input/index.test.tsx

@@ -20,7 +20,7 @@ describe('Input', () => {
 
   test('Should render with a text value', () => {
     const testValue = '150'
-    const basicProps = { ...basicExample, text: testValue } as InputProps
+    const basicProps = { ...basicExample, value: testValue } as InputProps
 
     render(<Input {...basicProps} />)
     const testInputWithText = screen.getByTestId(basicTestId)

src/components/atoms/Input/index.tsx

@@ -9,7 +9,8 @@ const Input: React.FC<InputProps> = ({
   cssClasses = null,
   style = null,
   type,
-  text = null,
+  value = null,
+  name,
   placeholder = null,
   isDisabled = false,
   isReadonly = false,
@@ -18,8 +19,9 @@ const Input: React.FC<InputProps> = ({
   isRounded = null,
   isHovered = null,
   isFocused = null,
-  onClick = null,
-  onChange = null
+  onClick,
+  onChange,
+  onBlur
 }) => {
   const inputClasses = parseClasses([
     'input',
@@ -42,13 +44,15 @@ const Input: React.FC<InputProps> = ({
       data-testid={inputTestId}
       type={type}
       placeholder={placeholder ?? undefined}
-      defaultValue={text ?? undefined}
+      defaultValue={value ?? undefined}
+      name={name}
       disabled={isDisabled}
       readOnly={isReadonly}
       className={inputClasses}
       style={style ?? undefined}
-      onClick={onClick ?? undefined}
-      onChange={onChange ?? undefined}
+      onClick={onClick}
+      onChange={onChange}
+      onBlur={onBlur}
     />
   )
 }

src/components/atoms/RadioButton/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 // TYPES & INTERFACES
 import {
   RadioButtonItemProps,
@@ -15,7 +15,9 @@ const renderRadioButton = (config: RadioButtonItemProps, index: number) => {
     isChecked = false,
     isDisabled = false,
     style = null,
-    onChange
+    onClick,
+    onChange,
+    onBlur
   } = config
   const radioButtonTestId = testId ?? `test-radio-button-item-${index}`
 
@@ -31,7 +33,9 @@ const renderRadioButton = (config: RadioButtonItemProps, index: number) => {
         name={name}
         defaultChecked={isChecked}
         disabled={isDisabled}
+        onClick={onClick}
         onChange={onChange}
+        onBlur={onBlur}
       />
       {label}
     </label>
@@ -44,7 +48,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   containerStyle = null,
   options,
   name,
-  onChange = null
+  onClick,
+  onChange,
+  onBlur
 }) => {
   const radioButtonContainerClasses = parseClasses([
     'control',
@@ -57,22 +63,30 @@ const RadioButton: React.FC<RadioButtonProps> = ({
       parsedClasses: radioButtonContainerClasses
     })
 
-  return (
-    <section
-      data-testid={radioButtonContainerTestId}
-      className={radioButtonContainerClasses}
-      style={containerStyle ?? undefined}
-    >
-      {options.map((_option, i) =>
+  const renderRadioButtons = useMemo(
+    () =>
+      options.map((_option, i) =>
         renderRadioButton(
           {
             ..._option,
             name,
-            onChange: onChange ?? undefined
+            onClick,
+            onChange,
+            onBlur
           },
           i
         )
-      )}
+      ),
+    [options, name, onClick, onChange, onBlur]
+  )
+
+  return (
+    <section
+      data-testid={radioButtonContainerTestId}
+      className={radioButtonContainerClasses}
+      style={containerStyle ?? undefined}
+    >
+      {renderRadioButtons}
     </section>
   )
 }

src/components/atoms/Select/index.tsx

@@ -12,14 +12,17 @@ const Select: React.FC<SelectProps> = ({
   style = null,
   containerStyle = null,
   options = [],
+  name,
   showOptions = 1,
   isMultiple = false,
   color = null,
   size = null,
   isRounded = null,
   isHovered = null,
   isFocused = null,
-  onClick = null
+  onClick,
+  onChange,
+  onBlur
 }) => {
   const containerSelectClasses = parseClasses([
     'select',
@@ -49,6 +52,7 @@ const Select: React.FC<SelectProps> = ({
         data-testid={selectTestId}
         className={cssClasses ?? undefined}
         style={style ?? undefined}
+        name={name}
         multiple={isMultiple}
         size={showOptions}
       >
@@ -57,7 +61,9 @@ const Select: React.FC<SelectProps> = ({
             data-testid={`${selectTestId}-option-${i}`}
             key={id.toString()}
             defaultChecked={selected ?? false}
-            onClick={onClick ?? undefined}
+            onClick={onClick}
+            onChange={onChange}
+            onBlur={onBlur}
           >
             {name}
           </option>

src/components/atoms/TextArea/index.test.tsx

@@ -19,7 +19,7 @@ describe('TextArea', () => {
 
   test('Should render with a value', () => {
     const testValue = '150'
-    const basicProps = { text: testValue } as TextAreaProps
+    const basicProps = { value: testValue } as TextAreaProps
 
     render(<TextArea {...basicProps} />)
     const testAreaWithText = screen.getByText(testValue)

src/components/atoms/TextArea/index.tsx

@@ -8,7 +8,8 @@ const TextArea: React.FC<TextAreaProps> = ({
   testId = null,
   cssClasses = null,
   style = null,
-  text = null,
+  value = null,
+  name,
   cols = null,
   rows = null,
   isDisabled = false,
@@ -50,7 +51,8 @@ const TextArea: React.FC<TextAreaProps> = ({
   return (
     <textarea
       data-testid={textAreaTestId}
-      defaultValue={text ?? undefined}
+      defaultValue={value ?? undefined}
+      name={name}
       cols={cols ?? undefined}
       rows={rows ?? undefined}
       disabled={isDisabled}

src/interfaces/atomProps.ts

@@ -3,7 +3,10 @@ import React from 'react'
 import {
   ElementProps,
   ComposedElementProps,
-  ClickeableProps
+  ClickeableProps,
+  NamedInputProps,
+  InteractiveProps,
+  InteractiveOnChangeProps
 } from './commonProps'
 // TYPES & INTERFACES
 import {
@@ -173,11 +176,14 @@ export interface IconProps extends ComposedElementProps {
   position?: RightLeftAlignType
 }
 
-export interface InputProps extends ElementProps, ClickeableProps {
+export interface InputProps
+  extends ElementProps,
+    InteractiveProps,
+    NamedInputProps {
   /** `Attribute` `Required` What type of input will be used */
   type: InputType
   /** `Attribute` The value that will be shown on the input */
-  text?: string
+  value?: string
   /** `Attribute` The text that will be shown if the user does not type any value */
   placeholder?: string
   /** `Attribute` Will disable the input */
@@ -194,8 +200,6 @@ export interface InputProps extends ElementProps, ClickeableProps {
   isHovered?: boolean
   /** `Styling` Will add a specific border when the input is focused by the user */
   isFocused?: boolean
-  /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
-  onChange?: () => void
 }
 
 export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
@@ -218,7 +222,10 @@ export interface SelectOption {
   selected?: boolean
 }
 
-export interface SelectProps extends ComposedElementProps, ClickeableProps {
+export interface SelectProps
+  extends ComposedElementProps,
+    InteractiveProps,
+    NamedInputProps {
   /** `Attribute` Indicates the options contained on the select */
   options?: SelectOption[]
   /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
@@ -237,7 +244,10 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
   isFocused?: boolean
 }
 
-export interface FileProps extends ComposedElementProps, ClickeableProps {
+export interface FileProps
+  extends ComposedElementProps,
+    InteractiveProps,
+    NamedInputProps {
   /** `Attribute` The name of the file to be uploaded */
   fileName?: string
   /** `Attribute` The icon displayed in file's button" */
@@ -256,36 +266,35 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
   size?: ElementSizeType
 }
 
-export interface CheckBoxProps extends ComposedElementProps {
+export interface CheckBoxProps
+  extends ComposedElementProps,
+    InteractiveOnChangeProps,
+    NamedInputProps {
   /** `Attribute` Sets checkbox's text that will be shown next to its control */
   content?: ChildrenType
   /** `Attribute` Will disable the checkbox */
   isDisabled?: boolean
-  /** `Function` Click function, alone does not nothing, but can be reused for other components */
-  onChange?: () => void
 }
 
 export interface RadioButtonItemProps
-  extends Pick<ElementProps, 'testId' | 'style'> {
+  extends Pick<ElementProps, 'testId' | 'style'>,
+    InteractiveOnChangeProps,
+    NamedInputProps {
   /** `Attribute` `Required` Sets checkbox's text*/
   label: string
-  /** `Attribute` Sets the name that will relate this checkbox with the others */
-  name?: string
   /** `Attribute` Shows the checkbox as checked or unchecked */
   isChecked?: boolean
   /** `Attribute` Will disable the checkbox */
   isDisabled?: boolean
-  /** `Function` Click function, alone does not nothing, but can be reused for other components */
-  onChange?: () => void
 }
 
-export interface RadioButtonProps extends ComposedElementProps {
+export interface RadioButtonProps
+  extends ComposedElementProps,
+    InteractiveOnChangeProps {
   /** `Attribute` `Required` Indicates the options contained to be selected */
   options: RadioButtonItemProps[]
   /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
   name: string
-  /** `Function` Click function, alone does not nothing, but can be reused for other components */
-  onChange?: () => void
 }
 
 export interface BreadcrumbItemProps