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

Author: david-crespo

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>,