More barrel file component extraction (#2022)

* Move Spinner

* Move TableActions and TableEmptyBox

* Move PageHeader and PageTitle

* Clean up barrel file

* Move PropertiesTable

* Move Message

* Move Tabs

* Move Listbox, type ListboxItem

* Finish moving Modal

* Finish moving EmptyMessage

* Remove two more exports that we aren't using

app/components/QueryParamTabs.tsx

@@ -7,7 +7,7 @@
  */
 import { useSearchParams } from 'react-router-dom'
 
-import { Tabs, type TabsRootProps } from '@oxide/ui'
+import { Tabs, type TabsRootProps } from '~/ui/lib/Tabs'
 
 /**
  * Use instead of `Tabs.Root` to sync current tab with arg in URL query string.

app/components/RefetchIntervalPicker.tsx

@@ -9,14 +9,10 @@ import cn from 'classnames'
 import { format } from 'date-fns'
 import { useEffect, useState } from 'react'
 
-import {
-  Listbox,
-  Refresh16Icon,
-  SpinnerLoader,
-  Time16Icon,
-  type ListboxItem,
-} from '@oxide/ui'
+import { Refresh16Icon, Time16Icon } from '@oxide/ui'
 
+import { Listbox, type ListboxItem } from '~/ui/lib/Listbox'
+import { SpinnerLoader } from '~/ui/lib/Spinner'
 import useInterval from '~/ui/lib/use-interval'
 
 const intervalPresets = {

app/components/SystemMetric.tsx

@@ -13,7 +13,8 @@ import {
   type ChartDatum,
   type SystemMetricName,
 } from '@oxide/api'
-import { Spinner } from '@oxide/ui'
+
+import { Spinner } from '~/ui/lib/Spinner'
 
 const TimeSeriesChart = React.lazy(() => import('./TimeSeriesChart'))
 

app/components/form/FullPageForm.tsx

@@ -10,10 +10,10 @@ import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { useBlocker, type Blocker } from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
-import { PageHeader, PageTitle } from '@oxide/ui'
 import { flattenChildren, pluckFirstOfType } from '@oxide/util'
 
 import { Modal } from '~/ui/lib/Modal'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { classed } from '~/util/classed'
 
 import { Form } from '../form/Form'

app/components/form/fields/DateTimeRangePicker.tsx

@@ -8,7 +8,9 @@
 import { getLocalTimeZone, now as getNow, type DateValue } from '@internationalized/date'
 import { useMemo, useState } from 'react'
 
-import { DateRangePicker, Listbox } from '@oxide/ui'
+import { DateRangePicker } from '@oxide/ui'
+
+import { Listbox } from '~/ui/lib/Listbox'
 
 const rangePresets = [
   { label: 'Last hour', value: 'lastHour' as const },

app/components/form/fields/ImageSelectField.tsx

@@ -8,9 +8,9 @@
 import { useController, type Control } from 'react-hook-form'
 
 import type { Image } from '@oxide/api'
-import type { ListboxItem } from '@oxide/ui'
 import { bytesToGiB, GiB } from '@oxide/util'
 
+import type { ListboxItem } from '~/ui/lib/Listbox'
 import type { InstanceCreateInput } from 'app/forms/instance-create'
 
 import { ListboxField } from './ListboxField'

app/components/form/fields/ListboxField.tsx

@@ -8,9 +8,10 @@
 import cn from 'classnames'
 import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form'
 
-import { Listbox, type ListboxItem } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
+import { Listbox, type ListboxItem } from '~/ui/lib/Listbox'
+
 import { ErrorMessage } from './ErrorMessage'
 
 export type ListboxFieldProps<

app/components/form/fields/SshKeysField.tsx

@@ -9,10 +9,11 @@ import { useState } from 'react'
 import { useController, type Control } from 'react-hook-form'
 
 import { usePrefetchedApiQuery } from '@oxide/api'
-import { Checkbox, Divider, FieldLabel, Key16Icon, Message } from '@oxide/ui'
+import { Checkbox, Divider, FieldLabel, Key16Icon } from '@oxide/ui'
 
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { Message } from '~/ui/lib/Message'
 import { TextInputHint } from '~/ui/lib/TextInput'
 import type { InstanceCreateInput } from 'app/forms/instance-create'
 import { CreateSSHKeySideModalForm } from 'app/forms/ssh-key-create'

app/forms/access-util.tsx

@@ -12,10 +12,10 @@ import {
   type Policy,
   type RoleKey,
 } from '@oxide/api'
-import { type ListboxItem } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 import { Badge } from '~/ui/lib/Badge'
+import { type ListboxItem } from '~/ui/lib/Listbox'
 
 type AddUserValues = {
   identityId: string

app/forms/floating-ip-create.tsx

@@ -17,7 +17,6 @@ import {
   type FloatingIpCreate,
   type SiloIpPool,
 } from '@oxide/api'
-import { Message } from '@oxide/ui'
 import { validateIp } from '@oxide/util'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
@@ -26,6 +25,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { Badge } from '~/ui/lib/Badge'
+import { Message } from '~/ui/lib/Message'
 import { AccordionItem } from 'app/components/AccordionItem'
 import { useForm, useProjectSelector, useToast } from 'app/hooks'
 import { pb } from 'app/util/path-builder'

app/forms/idp/edit.tsx

@@ -8,13 +8,14 @@
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import { Access16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui'
+import { Access16Icon, ResourceLabel, Truncate } from '@oxide/ui'
 import { formatDateTime } from '@oxide/util'
 
 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 { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { getIdpSelector, useForm, useIdpSelector } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 

app/forms/image-edit.tsx

@@ -8,13 +8,14 @@
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery, type Image } from '@oxide/api'
-import { Images16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui'
+import { Images16Icon, ResourceLabel, Truncate } from '@oxide/ui'
 import { bytesToGiB, formatDateTime } from '@oxide/util'
 
 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 { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import {
   getProjectImageSelector,
   getSiloImageSelector,

app/forms/image-from-snapshot.tsx

@@ -15,12 +15,12 @@ import {
   usePrefetchedApiQuery,
   type ImageCreate,
 } from '@oxide/api'
-import { PropertiesTable } from '@oxide/ui'
 
 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 { PropertiesTable } from '~/ui/lib/PropertiesTable'
 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

@@ -20,7 +20,7 @@ import {
   type Disk,
   type Snapshot,
 } from '@oxide/api'
-import { Error12Icon, Message, Spinner, Success12Icon, Unauthorized12Icon } from '@oxide/ui'
+import { Error12Icon, Success12Icon, Unauthorized12Icon } from '@oxide/ui'
 import { GiB, invariant, KiB } from '@oxide/util'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
@@ -29,8 +29,10 @@ 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 { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { Progress } from '~/ui/lib/Progress'
+import { Spinner } from '~/ui/lib/Spinner'
 import { useForm, useProjectSelector } from 'app/hooks'
 import { readBlobAsBase64 } from 'app/util/file'
 import { pb } from 'app/util/path-builder'

app/forms/instance-create.tsx

@@ -21,14 +21,7 @@ import {
   usePrefetchedApiQuery,
   type InstanceCreate,
 } from '@oxide/api'
-import {
-  FormDivider,
-  Images16Icon,
-  Instances24Icon,
-  Message,
-  RadioCard,
-  Tabs,
-} from '@oxide/ui'
+import { FormDivider, Images16Icon, Instances24Icon, RadioCard } from '@oxide/ui'
 import { GiB, invariant } from '@oxide/util'
 
 import { CheckboxField } from '~/components/form/fields/CheckboxField'
@@ -49,6 +42,8 @@ import { TextField } from '~/components/form/fields/TextField'
 import { Form } from '~/components/form/Form'
 import { FullPageForm } from '~/components/form/FullPageForm'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { Message } from '~/ui/lib/Message'
+import { Tabs } from '~/ui/lib/Tabs'
 import { TextInputHint } from '~/ui/lib/TextInput'
 import { AccordionItem } from 'app/components/AccordionItem'
 import { getProjectSelector, useForm, useProjectSelector, useToast } from 'app/hooks'

app/forms/ip-pool-range-add.tsx

@@ -8,11 +8,11 @@
 import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient, type IpRange } from '@oxide/api'
-import { Message } from '@oxide/ui'
 import { validateIp } from '@oxide/util'
 
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { Message } from '~/ui/lib/Message'
 import { useForm, useIpPoolSelector } from 'app/hooks'
 import { addToast } from 'app/stores/toast'
 import { pb } from 'app/util/path-builder'

app/pages/ProjectsPage.tsx

@@ -15,14 +15,16 @@ import {
   usePrefetchedApiQuery,
   type Project,
 } from '@oxide/api'
-import { Folder24Icon, PageHeader, PageTitle, TableActions } from '@oxide/ui'
+import { Folder24Icon } from '@oxide/ui'
 
 import { DateCell } from '~/table/cells/DateCell'
 import { linkCell } from '~/table/cells/LinkCell'
 import type { MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { confirmDelete } from 'app/stores/confirm-delete'
 import { pb } from 'app/util/path-builder'
 

app/pages/SiloAccessPage.tsx

@@ -20,13 +20,15 @@ import {
   type IdentityType,
   type RoleKey,
 } from '@oxide/api'
-import { Access24Icon, PageHeader, PageTitle, TableActions, TableEmptyBox } from '@oxide/ui'
+import { Access24Icon } from '@oxide/ui'
 import { groupBy, isTruthy } from '@oxide/util'
 
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
 import { AccessNameCell } from 'app/components/AccessNameCell'
 import { HL } from 'app/components/HL'
 import { RoleBadgeCell } from 'app/components/RoleBadgeCell'

app/pages/SiloUtilizationPage.tsx

@@ -10,10 +10,12 @@ import { useIsFetching } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import { Divider, Listbox, Metrics24Icon, PageHeader, PageTitle } from '@oxide/ui'
+import { Divider, Metrics24Icon } from '@oxide/ui'
 import { bytesToGiB, bytesToTiB } from '@oxide/util'
 
 import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker'
+import { Listbox } from '~/ui/lib/Listbox'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { CapacityBars } from 'app/components/CapacityBars'
 import { useIntervalPicker } from 'app/components/RefetchIntervalPicker'
 import { SiloMetric } from 'app/components/SystemMetric'

app/pages/project/access/ProjectAccessPage.tsx

@@ -23,13 +23,15 @@ import {
   type IdentityType,
   type RoleKey,
 } from '@oxide/api'
-import { Access24Icon, PageHeader, PageTitle, TableActions, TableEmptyBox } from '@oxide/ui'
+import { Access24Icon } from '@oxide/ui'
 import { groupBy, isTruthy } from '@oxide/util'
 
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
 import { AccessNameCell } from 'app/components/AccessNameCell'
 import { HL } from 'app/components/HL'
 import { RoleBadgeCell } from 'app/components/RoleBadgeCell'

app/pages/project/disks/DisksPage.tsx

@@ -15,7 +15,7 @@ import {
   useApiQueryClient,
   type Disk,
 } from '@oxide/api'
-import { PageHeader, PageTitle, Storage24Icon, TableActions } from '@oxide/ui'
+import { Storage24Icon } from '@oxide/ui'
 
 import { DateCell } from '~/table/cells/DateCell'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
@@ -24,6 +24,8 @@ import type { MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { DiskStatusBadge } from 'app/components/StatusBadge'
 import { getProjectSelector, useProjectSelector, useToast } from 'app/hooks'
 import { confirmDelete } from 'app/stores/confirm-delete'

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -17,22 +17,18 @@ import {
   type FloatingIp,
   type Instance,
 } from '@oxide/api'
-import {
-  IpGlobal24Icon,
-  Listbox,
-  Message,
-  Networking24Icon,
-  PageHeader,
-  PageTitle,
-  TableActions,
-} from '@oxide/ui'
+import { IpGlobal24Icon, Networking24Icon } from '@oxide/ui'
 
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import type { MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { Listbox } from '~/ui/lib/Listbox'
+import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { HL } from 'app/components/HL'
 import { getProjectSelector, useProjectSelector } from 'app/hooks'
 import { confirmAction } from 'app/stores/confirm-action'

app/pages/project/images/ImagesPage.tsx

@@ -9,7 +9,7 @@ import { useState } from 'react'
 import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
-import { Images24Icon, Message, PageHeader, PageTitle, TableActions } from '@oxide/ui'
+import { Images24Icon } from '@oxide/ui'
 
 import { DateCell } from '~/table/cells/DateCell'
 import { linkCell } from '~/table/cells/LinkCell'
@@ -18,7 +18,10 @@ import type { MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { getProjectSelector, useProjectSelector, useToast } from 'app/hooks'
 import { confirmDelete } from 'app/stores/confirm-delete'
 import { pb } from 'app/util/path-builder'

app/pages/project/instances/InstancesPage.tsx

@@ -9,13 +9,7 @@ import { useMemo } from 'react'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import {
-  Instances24Icon,
-  PageHeader,
-  PageTitle,
-  Refresh16Icon,
-  TableActions,
-} from '@oxide/ui'
+import { Instances24Icon, Refresh16Icon } from '@oxide/ui'
 
 import { DateCell } from '~/table/cells/DateCell'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
@@ -24,6 +18,8 @@ import { linkCell } from '~/table/cells/LinkCell'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button, buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { getProjectSelector, useProjectSelector, useQuickActions } from 'app/hooks'
 import { pb } from 'app/util/path-builder'