refactor: rename custom useField to useFormField

src/components/CheckboxField/index.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import { ComponentProps, ReactNode, Ref, forwardRef } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -48,7 +48,7 @@ export const CheckboxField = forwardRef(
   ): JSX.Element => {
     const { getError } = useErrors()
 
-    const { input, meta } = useField(name, {
+    const { input, meta } = useFormField(name, {
       required,
       type: 'checkbox',
       validate,

src/components/DateField/index.tsx

@@ -1,7 +1,7 @@
 import { DateInput } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import { ComponentProps, FocusEvent } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -57,7 +57,7 @@ export const DateField = ({
 }: DateFieldProps) => {
   const { getError } = useErrors()
 
-  const { input, meta } = useField<Date>(name, {
+  const { input, meta } = useFormField<Date>(name, {
     formatOnBlur,
     initialValue,
     maxDate,

src/components/RadioField/index.tsx

@@ -1,7 +1,7 @@
 import { Radio } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import { ComponentProps, ReactNode } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -38,7 +38,7 @@ export const RadioField = ({
 }: RadioFieldProps): JSX.Element => {
   const { getError } = useErrors()
 
-  const { input, meta } = useField(name, {
+  const { input, meta } = useFormField(name, {
     required,
     type: 'radio',
     validate,

src/components/RichSelectField/index.tsx

@@ -7,7 +7,7 @@ import {
   useCallback,
   useMemo,
 } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -155,7 +155,7 @@ export const RichSelectField = <
     [formatProp, multiple, name, options],
   )
 
-  const { input, meta } = useField<T, HTMLElement, RichSelectOption>(name, {
+  const { input, meta } = useFormField<T, HTMLElement, RichSelectOption>(name, {
     format,
     formatOnBlur,
     maxLength,

src/components/SelectNumberField/index.tsx

@@ -1,6 +1,6 @@
 import { SelectNumber } from '@scaleway/ui'
 import { ComponentProps, FocusEvent, FocusEventHandler } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { BaseFieldProps } from '../../types'
 
 type SelectNumberValue = NonNullable<
@@ -51,7 +51,7 @@ export const SelectNumberField = ({
   value,
   className,
 }: SelectNumberValueFieldProps) => {
-  const { input } = useField(name, {
+  const { input } = useFormField(name, {
     required,
     type: 'number',
     validate,

src/components/SelectableCardField/index.tsx

@@ -1,7 +1,7 @@
 import { SelectableCard } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import { ComponentProps } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -54,7 +54,7 @@ export const SelectableCardField = ({
 }: SelectableCardFieldProps): JSX.Element => {
   const { getError } = useErrors()
 
-  const { input, meta } = useField(name, {
+  const { input, meta } = useFormField(name, {
     required,
     type: type ?? 'radio',
     validate,

src/components/TagsField/index.tsx

@@ -1,6 +1,6 @@
 import { Tags } from '@scaleway/ui'
 import { ComponentProps } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { BaseFieldProps } from '../../types'
 
 export type TagsFieldProps<T = unknown, K = string> = BaseFieldProps<T, K> &
@@ -27,7 +27,7 @@ export const TagsField = ({
   validate,
   variant,
 }: TagsFieldProps): JSX.Element => {
-  const { input } = useField(name, {
+  const { input } = useFormField(name, {
     required,
     type: 'text',
     validate,

src/components/TextBoxField/__stories__/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from '@scaleway/ui'
 import { Meta, Story } from '@storybook/react'
-import { ComponentProps } from 'react'
+import { ComponentProps, useState } from 'react'
 import { Form, Submit, TextBoxField } from '../..'
 import { mockErrors } from '../../../mocks/mockErrors'
 
@@ -57,7 +57,7 @@ Required.args = {
 export const DynamicRequired: Story<
   ComponentProps<typeof TextBoxField>
 > = args => {
-  const [isRequired, setIsRequired] = React.useState(true)
+  const [isRequired, setIsRequired] = useState(true)
 
   return (
     <>

src/components/TextBoxField/index.tsx

@@ -1,7 +1,7 @@
 import { TextBox } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import { ComponentProps, FocusEvent, Ref, forwardRef } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers/ErrorContext'
 import { BaseFieldProps } from '../../types'
 
@@ -108,7 +108,7 @@ export const TextBoxField = forwardRef(
   ): JSX.Element => {
     const { getError } = useErrors()
 
-    const { input, meta } = useField(name, {
+    const { input, meta } = useFormField(name, {
       afterSubmit,
       allowNull,
       beforeSubmit,

src/components/TimeField/index.tsx

@@ -1,6 +1,6 @@
 import { TimeInput } from '@scaleway/ui'
 import { ComponentProps, useMemo } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { BaseFieldProps } from '../../types'
 
 const parseTime = (date?: Date | string): { label: string; value: string } => {
@@ -45,7 +45,7 @@ export const TimeField = ({
   isSearchable,
   options,
 }: TimeFieldProps) => {
-  const { input, meta } = useField<Date>(name, {
+  const { input, meta } = useFormField<Date>(name, {
     formatOnBlur,
     initialValue,
     required,

src/components/ToggleField/index.tsx

@@ -1,6 +1,6 @@
 import { Toggle } from '@scaleway/ui'
 import { ComponentProps } from 'react'
-import { useField } from '../../hooks'
+import { useFormField } from '../../hooks'
 import { BaseFieldProps } from '../../types'
 
 type ToggleFieldProps<T = unknown, K = unknown> = BaseFieldProps<T, K> &
@@ -44,7 +44,7 @@ export const ToggleField = ({
   value,
   labelPosition,
 }: ToggleFieldProps) => {
-  const { input } = useField(name, {
+  const { input } = useFormField(name, {
     afterSubmit,
     allowNull,
     beforeSubmit,

src/hooks/__tests__/useField.spec.tsx → src/hooks/__tests__/useFormField.spec.tsx

@@ -1,15 +1,17 @@
 import { renderHook } from '@testing-library/react'
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { Form } from '../../components'
 import { mockErrors } from '../../mocks'
-import { useField } from '../useField'
+import { useFormField } from '../useFormField'
 
-describe('useField', () => {
+describe('useFormField', () => {
   test('should render correctly', () => {
     const wrapper = ({ children }: { children: ReactElement }) => (
       <Form errors={mockErrors}>{children}</Form>
     )
-    const { result } = renderHook(() => useField('fieldName', {}), { wrapper })
+    const { result } = renderHook(() => useFormField('fieldName', {}), {
+      wrapper,
+    })
     expect(result.current).toBeDefined()
   })
 })

src/hooks/index.ts

@@ -1,2 +1,2 @@
 export { useValidation } from './useValidation'
-export { useField } from './useField'
+export { useFormField } from './useFormField'

src/hooks/useField.ts → src/hooks/useFormField.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react'
-import { UseFieldConfig, useField as useFinalFormField } from 'react-final-form'
+import { UseFieldConfig, useField } from 'react-final-form'
 import { pickValidators } from '../helpers'
 import { ValidatorProps } from '../types'
 import { useValidation } from './useValidation'
 
-export const useField = <
+export const useFormField = <
   FieldValue = unknown,
   T extends HTMLElement = HTMLElement,
   InputValue = FieldValue,
@@ -56,11 +56,10 @@ export const useField = <
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const data = useMemo(() => ({ key: Math.random() }), [validateFn])
 
-  return useFinalFormField<FieldValue, T, InputValue>(name, {
+  return useField<FieldValue, T, InputValue>(name, {
     afterSubmit,
     allowNull,
     beforeSubmit,
-    data,
     defaultValue,
     format,
     formatOnBlur,
@@ -73,5 +72,6 @@ export const useField = <
     validate: validateFn,
     validateFields,
     value,
+    data,
   })
 }