Get rid of useless RHF useForm wrapper (#2426)

change all useForm imports to real RHF one

Author: david-crespo

app/components/form/fields/TlsCertsField.tsx

@@ -6,13 +6,12 @@
  * Copyright Oxide Computer Company
  */
 import { useState } from 'react'
-import { useController, type Control } from 'react-hook-form'
+import { useController, useForm, type Control } from 'react-hook-form'
 import type { Merge } from 'type-fest'
 
 import type { CertificateCreate } from '@oxide/api'
 
 import type { SiloCreateFormValues } from '~/forms/silo-create'
-import { useForm } from '~/hooks'
 import { Button } from '~/ui/lib/Button'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import * as MiniTable from '~/ui/lib/MiniTable'

app/forms/disk-attach.tsx

@@ -5,11 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useForm } from 'react-hook-form'
+
 import { useApiQuery, type ApiError } from '@oxide/api'
 
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { useForm, useProjectSelector } from '~/hooks'
+import { useProjectSelector } from '~/hooks'
 
 const defaultValues = { name: '' }
 

app/forms/disk-create.tsx

@@ -7,7 +7,7 @@
  */
 import { filesize } from 'filesize'
 import { useMemo } from 'react'
-import { useController, type Control } from 'react-hook-form'
+import { useController, useForm, type Control } from 'react-hook-form'
 import { useNavigate, type NavigateFunction } from 'react-router-dom'
 
 import {
@@ -28,7 +28,7 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { useForm, useProjectSelector } from '~/hooks'
+import { useProjectSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'

app/forms/firewall-rules-common.tsx

@@ -6,7 +6,12 @@
  * Copyright Oxide Computer Company
  */
 
-import { useController, type Control, type ControllerRenderProps } from 'react-hook-form'
+import {
+  useController,
+  useForm,
+  type Control,
+  type ControllerRenderProps,
+} from 'react-hook-form'
 
 import {
   usePrefetchedApiQuery,
@@ -27,7 +32,6 @@ import { NumberField } from '~/components/form/fields/NumberField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField, TextFieldInner } from '~/components/form/fields/TextField'
 import { useVpcSelector } from '~/hooks'
-import { useForm } from '~/hooks/use-form'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 import { FormDivider } from '~/ui/lib/Divider'

app/forms/firewall-rules-create.tsx

@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
 import { useNavigate, useParams, type LoaderFunctionArgs } from 'react-router-dom'
 import * as R from 'remeda'
 
@@ -19,7 +20,7 @@ import {
 } from '@oxide/api'
 
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { getVpcSelector, useForm, useVpcSelector } from '~/hooks'
+import { getVpcSelector, useVpcSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 

app/forms/firewall-rules-edit.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -17,12 +18,7 @@ import {
 
 import { trigger404 } from '~/components/ErrorBoundary'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import {
-  getFirewallRuleSelector,
-  useFirewallRuleSelector,
-  useForm,
-  useVpcSelector,
-} from '~/hooks'
+import { getFirewallRuleSelector, useFirewallRuleSelector, useVpcSelector } from '~/hooks'
 import { invariant } from '~/util/invariant'
 import { pb } from '~/util/path-builder'
 

app/forms/floating-ip-create.tsx

@@ -7,6 +7,7 @@
  */
 import * as Accordion from '@radix-ui/react-accordion'
 import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
 import {
@@ -22,7 +23,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { useForm, useProjectSelector } from '~/hooks'
+import { useProjectSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { Badge } from '~/ui/lib/Badge'
 import { Message } from '~/ui/lib/Message'

app/forms/floating-ip-edit.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -18,7 +19,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { addToast } from '~/stores/toast'
-import { getFloatingIpSelector, useFloatingIpSelector, useForm } from 'app/hooks'
+import { getFloatingIpSelector, useFloatingIpSelector } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {

app/forms/idp/create.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
@@ -14,7 +15,7 @@ import { FileField } from '~/components/form/fields/FileField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { useForm, useSiloSelector } from '~/hooks'
+import { useSiloSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { readBlobAsBase64 } from '~/util/file'
 import { pb } from '~/util/path-builder'

app/forms/idp/edit.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
@@ -14,7 +15,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { getIdpSelector, useForm, useIdpSelector } from '~/hooks'
+import { getIdpSelector, useIdpSelector } from '~/hooks'
 import { DateTime } from '~/ui/lib/DateTime'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'