Reduce barrel file usage (#1978)

* move hooks out of ui/index.ts

* get a bunch of less used components out of the UI barrel file

* get rid of the app/forms barrel

* add app/ui readme

app/components/EquivalentCliCommand.tsx

@@ -7,7 +7,9 @@
  */
 import { useState } from 'react'
 
-import { Button, Modal, Success12Icon, useTimeout } from '@oxide/ui'
+import { Button, Modal, Success12Icon } from '@oxide/ui'
+
+import useTimeout from '~/ui/lib/use-timeout'
 
 export default function EquivalentCliCommand({ command }: { command: string }) {
   const [isOpen, setIsOpen] = useState(false)

app/components/ExternalIps.tsx

@@ -8,9 +8,10 @@
 
 import { useApiQuery } from '@oxide/api'
 import { EmptyCell, SkeletonCell } from '@oxide/table'
-import { CopyToClipboard } from '@oxide/ui'
 import { intersperse } from '@oxide/util'
 
+import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
+
 type InstanceSelector = { project: string; instance: string }
 
 export function ExternalIps({ project, instance }: InstanceSelector) {

app/components/MswBanner.tsx

@@ -7,14 +7,9 @@
  */
 import { useState, type ReactNode } from 'react'
 
-import {
-  Button,
-  Info16Icon,
-  Modal,
-  ModalLink,
-  ModalLinks,
-  NextArrow12Icon,
-} from '@oxide/ui'
+import { Button, Info16Icon, Modal, NextArrow12Icon } from '@oxide/ui'
+
+import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
 
 function ExternalLink({ href, children }: { href: string; children: ReactNode }) {
   return (

app/components/Pagination.tsx

@@ -10,7 +10,7 @@ import tunnel from 'tunnel-rat'
 import {
   Pagination as UIPagination,
   type PaginationProps as UIPaginationProps,
-} from '@oxide/ui'
+} from '~/ui/lib/Pagination'
 
 const Tunnel = tunnel('pagination')
 

app/components/RefetchIntervalPicker.tsx

@@ -14,10 +14,11 @@ import {
   Refresh16Icon,
   SpinnerLoader,
   Time16Icon,
-  useInterval,
   type ListboxItem,
 } from '@oxide/ui'
 
+import useInterval from '~/ui/lib/use-interval'
+
 const intervalPresets = {
   Off: undefined,
   '10s': 10 * 1000,

app/components/ToastStack.tsx

@@ -7,8 +7,7 @@
  */
 import { animated, useTransition } from '@react-spring/web'
 
-import { Toast } from '@oxide/ui'
-
+import { Toast } from '~/ui/lib/Toast'
 import { useToastStore } from 'app/stores/toast'
 
 export function ToastStack() {

app/components/form/fields/ErrorMessage.tsx

@@ -7,7 +7,7 @@
  */
 import type { FieldError } from 'react-hook-form'
 
-import { TextInputError } from '@oxide/ui'
+import { TextInputError } from '~/ui/lib/TextInput'
 
 type ErrorMessageProps = {
   error: FieldError | undefined

app/components/form/fields/FileField.tsx

@@ -7,7 +7,10 @@
  */
 import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form'
 
-import { FieldLabel, FileInput, TextInputHint } from '@oxide/ui'
+import { FieldLabel } from '@oxide/ui'
+
+import { FileInput } from '~/ui/lib/FileInput'
+import { TextInputHint } from '~/ui/lib/TextInput'
 
 import { ErrorMessage } from './ErrorMessage'
 

app/components/form/fields/NumberField.tsx

@@ -9,9 +9,12 @@ import cn from 'classnames'
 import { useId } from 'react'
 import { Controller, type FieldPathByValue, type FieldValues } from 'react-hook-form'
 
-import { FieldLabel, TextInputHint, NumberInput as UINumberField } from '@oxide/ui'
+import { FieldLabel } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
+import { NumberInput } from '~/ui/lib/NumberInput'
+import { TextInputHint } from '~/ui/lib/TextInput'
+
 import { ErrorMessage } from './ErrorMessage'
 import type { TextFieldProps } from './TextField'
 
@@ -83,7 +86,7 @@ export const NumberFieldInner = <
       render={({ field, fieldState: { error } }) => {
         return (
           <>
-            <UINumberField
+            <NumberInput
               id={id}
               error={!!error}
               aria-labelledby={cn(`${id}-label`, {

app/components/form/fields/RadioField.tsx

@@ -15,15 +15,11 @@ import {
   type PathValue,
 } from 'react-hook-form'
 
-import {
-  FieldLabel,
-  Radio,
-  RadioGroup,
-  TextInputHint,
-  type RadioGroupProps,
-} from '@oxide/ui'
+import { FieldLabel, Radio, RadioGroup, type RadioGroupProps } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
+import { TextInputHint } from '~/ui/lib/TextInput'
+
 export type RadioFieldProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,

app/components/form/fields/SshKeysField.tsx

@@ -17,9 +17,9 @@ import {
   FieldLabel,
   Key16Icon,
   Message,
-  TextInputHint,
 } from '@oxide/ui'
 
+import { TextInputHint } from '~/ui/lib/TextInput'
 import type { InstanceCreateInput } from 'app/forms/instance-create'
 import { CreateSSHKeySideModalForm } from 'app/forms/ssh-key-create'
 

app/components/form/fields/TextField.tsx

@@ -16,14 +16,15 @@ import {
   type Validate,
 } from 'react-hook-form'
 
+import { FieldLabel } from '@oxide/ui'
+import { capitalize } from '@oxide/util'
+
 import {
-  FieldLabel,
   TextInputHint,
   TextInput as UITextField,
   type TextAreaProps as UITextAreaProps,
   type TextInputBaseProps as UITextFieldProps,
-} from '@oxide/ui'
-import { capitalize } from '@oxide/util'
+} from '~/ui/lib/TextInput'
 
 import { ErrorMessage } from './ErrorMessage'
 

app/components/form/fields/TlsCertsField.tsx

@@ -12,10 +12,14 @@ import type { Merge } from 'type-fest'
 import type { CertificateCreate } from '@oxide/api'
 import { Button, Error16Icon, FieldLabel, MiniTable, Modal } from '@oxide/ui'
 
-import { DescriptionField, FileField, TextField, validateName } from 'app/components/form'
 import type { SiloCreateFormValues } from 'app/forms/silo-create'
 import { useForm } from 'app/hooks'
 
+import { DescriptionField } from './DescriptionField'
+import { FileField } from './FileField'
+import { validateName } from './NameField'
+import { TextField } from './TextField'
+
 export function TlsCertsField({ control }: { control: Control<SiloCreateFormValues> }) {
   const [showAddCert, setShowAddCert] = useState(false)
 

app/forms/disk-attach.tsx

@@ -7,7 +7,8 @@
  */
 import { useApiQuery, type ApiError } from '@oxide/api'
 
-import { ListboxField, SideModalForm } from 'app/components/form'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useProjectSelector } from 'app/hooks'
 
 const defaultValues = { name: '' }

app/forms/disk-create.tsx

@@ -23,15 +23,13 @@ import {
 import { FieldLabel, FormDivider, Radio, RadioGroup } from '@oxide/ui'
 import { bytesToGiB, GiB } from '@oxide/util'
 
-import {
-  DescriptionField,
-  DiskSizeField,
-  ListboxField,
-  NameField,
-  RadioField,
-  SideModalForm,
-  toListboxItem,
-} from 'app/components/form'
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { DiskSizeField } from '~/components/form/fields/DiskSizeField'
+import { toListboxItem } from '~/components/form/fields/ImageSelectField'
+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, useToast } from 'app/hooks'
 
 const blankDiskSource: DiskSource = {

app/forms/firewall-rules-create.tsx

@@ -20,16 +20,14 @@ import {
 } from '@oxide/api'
 import { Badge, Button, Error16Icon, FormDivider, MiniTable } from '@oxide/ui'
 
-import {
-  CheckboxField,
-  DescriptionField,
-  ListboxField,
-  NameField,
-  NumberField,
-  RadioField,
-  SideModalForm,
-  TextField,
-} from 'app/components/form'
+import { CheckboxField } from '~/components/form/fields/CheckboxField'
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { NameField } from '~/components/form/fields/NameField'
+import { NumberField } from '~/components/form/fields/NumberField'
+import { RadioField } from '~/components/form/fields/RadioField'
+import { TextField } from '~/components/form/fields/TextField'
+import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useVpcSelector } from 'app/hooks'
 
 export type FirewallRuleValues = {

app/forms/firewall-rules-edit.tsx

@@ -12,7 +12,7 @@ import {
   type VpcFirewallRule,
 } from '@oxide/api'
 
-import { SideModalForm } from 'app/components/form'
+import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useVpcSelector } from 'app/hooks'
 
 import {

app/forms/floating-ip-create.tsx

@@ -20,14 +20,12 @@ import {
 import { Badge, Message } from '@oxide/ui'
 import { validateIp } from '@oxide/util'
 
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { NameField } from '~/components/form/fields/NameField'
+import { TextField } from '~/components/form/fields/TextField'
+import { SideModalForm } from '~/components/form/SideModalForm'
 import { AccordionItem } from 'app/components/AccordionItem'
-import {
-  DescriptionField,
-  ListboxField,
-  NameField,
-  SideModalForm,
-  TextField,
-} from 'app/components/form'
 import { useForm, useProjectSelector, useToast } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 

app/forms/idp/create.tsx

@@ -9,13 +9,11 @@ import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
-import {
-  DescriptionField,
-  FileField,
-  NameField,
-  SideModalForm,
-  TextField,
-} from 'app/components/form'
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+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, useToast } from 'app/hooks'
 import { readBlobAsBase64 } from 'app/util/file'
 import { pb } from 'app/util/path-builder'

app/forms/idp/edit.tsx

@@ -11,7 +11,10 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Access16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui'
 import { formatDateTime } from '@oxide/util'
 
-import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
+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 'app/hooks'
 import { pb } from 'app/util/path-builder'
 

app/forms/idp/shared.tsx

@@ -11,7 +11,8 @@ import type { Merge } from 'type-fest'
 import type { IdpMetadataSource, SamlIdentityProviderCreate } from '@oxide/api'
 import { Radio, RadioGroup } from '@oxide/ui'
 
-import { FileField, TextField } from 'app/components/form'
+import { FileField } from '~/components/form/fields/FileField'
+import { TextField } from '~/components/form/fields/TextField'
 
 export type IdpCreateFormValues = { type: 'saml' } & Merge<
   SamlIdentityProviderCreate,

app/forms/image-edit.tsx

@@ -11,7 +11,10 @@ import { apiQueryClient, usePrefetchedApiQuery, type Image } from '@oxide/api'
 import { Images16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui'
 import { bytesToGiB, formatDateTime } from '@oxide/util'
 
-import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
+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 {
   getProjectImageSelector,
   getSiloImageSelector,

app/forms/image-from-snapshot.tsx

@@ -17,7 +17,10 @@ import {
 } from '@oxide/api'
 import { PropertiesTable } from '@oxide/ui'
 
-import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
+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 { getProjectSnapshotSelector, useForm, useProjectSnapshotSelector } from 'app/hooks'
 import { addToast } from 'app/stores/toast'
 import { pb } from 'app/util/path-builder'

app/forms/image-upload.tsx

@@ -24,21 +24,19 @@ import {
   Error12Icon,
   Message,
   Modal,
-  Progress,
   Spinner,
   Success12Icon,
   Unauthorized12Icon,
 } from '@oxide/ui'
 import { GiB, invariant, KiB } from '@oxide/util'
 
-import {
-  DescriptionField,
-  FileField,
-  NameField,
-  RadioField,
-  SideModalForm,
-  TextField,
-} from 'app/components/form'
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { FileField } from '~/components/form/fields/FileField'
+import { NameField } from '~/components/form/fields/NameField'
+import { RadioField } from '~/components/form/fields/RadioField'
+import { TextField } from '~/components/form/fields/TextField'
+import { SideModalForm } from '~/components/form/SideModalForm'
+import { Progress } from '~/ui/lib/Progress'
 import { useForm, useProjectSelector } from 'app/hooks'
 import { readBlobAsBase64 } from 'app/util/file'
 import { pb } from 'app/util/path-builder'