Merge libs/form into app/components

app/components/fields/DisksTableField.tsx → app/components/form/fields/DisksTableField.tsx

@@ -3,7 +3,7 @@ import { useField } from 'formik'
 import { CreateDiskForm } from 'app/forms/disk-create'
 import { AttachDiskForm } from 'app/forms/disk-attach'
 import { Button, Error16Icon, FieldLabel, MiniTable, SideModal } from '@oxide/ui'
-import type { FormValues } from '../../forms'
+import type { FormValues } from 'app/forms'
 
 type DiskTableItem =
   | (FormValues<'disk-create'> & { type: 'create' })

app/components/fields/NetworkInterfaceField.tsx → app/components/form/fields/NetworkInterfaceField.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useField } from 'formik'
 import { Button, Error16Icon, MiniTable, Radio, SideModal } from '@oxide/ui'
 import type { InstanceNetworkInterfaceAttachment, NetworkInterfaceCreate } from '@oxide/api'
-import { RadioField } from '@oxide/form'
+import { RadioField } from 'app/components/form'
 import CreateNetworkInterfaceForm from 'app/forms/network-interface-create'
 
 export function NetworkInterfaceField() {

libs/form/fields/TextField.tsx → app/components/form/fields/TextField.tsx

@@ -5,7 +5,7 @@ import { FieldLabel, TextField as UITextField } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 import cn from 'classnames'
 import React from 'react'
-import { useError } from '../hooks/useError'
+import { useFieldError } from '../../../hooks/useFieldError'
 
 export interface TextFieldProps extends UITextFieldProps {
   id: string
@@ -39,7 +39,7 @@ export function TextField({
   ...props
 }: TextFieldProps) {
   const { description, helpText, required } = props
-  const error = useError(name)
+  const error = useFieldError(name)
   return (
     <div className="max-w-lg">
       <FieldLabel id={`${id}-label`} tip={description} optional={!required}>

libs/form/fields/index.ts → app/components/form/fields/index.ts

@@ -3,3 +3,5 @@ export * from './TextField'
 export * from './NameField'
 export * from './TagsField'
 export * from './RadioField'
+export * from './NetworkInterfaceField'
+export * from './DisksTableField'

app/forms/disk-attach.tsx

@@ -1,4 +1,4 @@
-import { Form, NameField } from '@oxide/form'
+import { Form, NameField } from 'app/components/form'
 import React from 'react'
 import type { Disk } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'

app/forms/disk-create.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   RadioField,
   Radio,
-} from '@oxide/form'
+} from 'app/components/form'
 import { Divider } from '@oxide/ui'
 import type { Disk } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'

app/forms/index.ts

@@ -10,7 +10,7 @@ import type CreateInstanceForm from './instance-create'
 import type AttachDiskForm from './disk-attach'
 import type CreateNetworkInterfaceForm from './network-interface-create'
 
-import type { FormProps } from '@oxide/form'
+import type { FormProps } from 'app/components/form'
 import type { ErrorResponse } from '@oxide/api'
 import type { ComponentType } from 'react'
 

app/forms/instance-create.tsx

@@ -4,12 +4,14 @@ import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import type { PrebuiltFormProps } from 'app/forms'
 import {
   DescriptionField,
+  DisksTableField,
   Form,
   NameField,
+  NetworkInterfaceField,
   RadioField,
   TagsField,
   TextField,
-} from '@oxide/form'
+} from 'app/components/form'
 import {
   CentOSResponsiveIcon,
   DebianResponsiveIcon,
@@ -25,9 +27,7 @@ import {
   WindowsResponsiveIcon,
 } from '@oxide/ui'
 import { useParams, useToast } from 'app/hooks'
-import { DisksTableField } from 'app/components/fields/DisksTableField'
 import filesize from 'filesize'
-import { NetworkInterfaceField } from 'app/components/fields/NetworkInterfaceField'
 
 const values = {
   name: '',

app/forms/network-interface-create.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DescriptionField, Form, NameField, TextField } from '@oxide/form'
+import { DescriptionField, Form, NameField, TextField } from 'app/components/form'
 import { Divider } from '@oxide/ui'
 import type { NetworkInterfaceCreate, NetworkInterface } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'

app/forms/org-create.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, NameField, DescriptionField } from '@oxide/form'
+import { Form, NameField, DescriptionField } from 'app/components/form'
 import type { Organization } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useToast } from 'app/hooks'

app/forms/project-create.tsx

@@ -4,7 +4,7 @@ import { Success16Icon } from '@oxide/ui'
 import type { Project } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useParams, useToast } from '../hooks'
-import { Form, NameField, DescriptionField } from '@oxide/form'
+import { Form, NameField, DescriptionField } from 'app/components/form'
 import type { PrebuiltFormProps } from 'app/forms'
 
 const values = {

app/forms/subnet-create.tsx

@@ -1,4 +1,4 @@
-import { DescriptionField, Form, NameField, TextField } from '@oxide/form'
+import { DescriptionField, Form, NameField, TextField } from 'app/components/form'
 import { Divider } from '@oxide/ui'
 import React from 'react'
 import type { VpcSubnet } from '@oxide/api'

app/forms/vpc-create.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, NameField, DescriptionField, TextField } from '@oxide/form'
+import { Form, NameField, DescriptionField, TextField } from 'app/components/form'
 import type { Vpc } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useParams, useToast } from 'app/hooks'

libs/form/hooks/useError.tsx → app/hooks/useFieldError.tsx

@@ -1,6 +1,6 @@
 import { useFormikContext } from 'formik'
 
-export const useError = (name: string): string | undefined => {
+export const useFieldError = (name: string): string | undefined => {
   const { errors } = useFormikContext()
   return (errors as Record<string, string>)[name]
 }

app/layouts/OrgLayout.tsx

@@ -16,7 +16,7 @@ import { Sidebar, NavLinkItem } from '../components/Sidebar'
 import { PageHeader } from '../components/PageHeader'
 import { Pagination } from '@oxide/pagination'
 import { SkipLinkTarget } from '@oxide/ui'
-import { Form } from '@oxide/form'
+import { Form } from 'app/components/form'
 
 const OrgLayout = () => {
   const { orgName } = useParams('orgName')

app/layouts/ProjectLayout.tsx

@@ -22,7 +22,7 @@ import { Sidebar, NavLinkItem } from '../components/Sidebar'
 import { PageHeader } from '../components/PageHeader'
 import { useParams, useQuickActions } from 'app/hooks'
 import { Pagination } from '@oxide/pagination'
-import { Form } from '@oxide/form'
+import { Form } from 'app/components/form'
 
 const ProjectLayout = () => {
   const navigate = useNavigate()

app/layouts/RootLayout.tsx

@@ -13,7 +13,7 @@ import { Breadcrumbs } from '../components/Breadcrumbs'
 import { TopBar } from '../components/TopBar'
 import { PageHeader } from '../components/PageHeader'
 import { Pagination } from '@oxide/pagination'
-import { Form } from '@oxide/form'
+import { Form } from 'app/components/form'
 
 const RootLayout = () => {
   return (

tsconfig.json

@@ -21,7 +21,6 @@
       "@oxide/api-mocks": ["libs/api-mocks/index.ts"],
       "@oxide/ui": ["libs/ui/index.ts"],
       "@oxide/util": ["libs/util/index.ts"],
-      "@oxide/form": ["libs/form/index.ts"],
       "@oxide/table": ["libs/table/index.ts"],
       "@oxide/pagination": ["libs/pagination/index.ts"]
     },