From 67f6d90809931cee31a6be64c7e779583936f743 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Fri, 1 Mar 2024 16:54:12 -0800 Subject: [PATCH] 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 | 2 +- app/components/RefetchIntervalPicker.tsx | 10 +++------- app/components/SystemMetric.tsx | 3 ++- app/components/form/FullPageForm.tsx | 2 +- app/components/form/fields/DateTimeRangePicker.tsx | 4 +++- app/components/form/fields/ImageSelectField.tsx | 2 +- app/components/form/fields/ListboxField.tsx | 3 ++- app/components/form/fields/SshKeysField.tsx | 3 ++- app/forms/access-util.tsx | 2 +- app/forms/floating-ip-create.tsx | 2 +- app/forms/idp/edit.tsx | 3 ++- app/forms/image-edit.tsx | 3 ++- app/forms/image-from-snapshot.tsx | 2 +- app/forms/image-upload.tsx | 4 +++- app/forms/instance-create.tsx | 11 +++-------- app/forms/ip-pool-range-add.tsx | 2 +- app/pages/ProjectsPage.tsx | 4 +++- app/pages/SiloAccessPage.tsx | 4 +++- app/pages/SiloUtilizationPage.tsx | 4 +++- app/pages/project/access/ProjectAccessPage.tsx | 4 +++- app/pages/project/disks/DisksPage.tsx | 4 +++- app/pages/project/floating-ips/FloatingIpsPage.tsx | 14 +++++--------- app/pages/project/images/ImagesPage.tsx | 5 ++++- app/pages/project/instances/InstancesPage.tsx | 10 +++------- .../project/instances/instance/InstancePage.tsx | 10 +++------- .../instances/instance/SerialConsolePage.tsx | 3 ++- .../project/instances/instance/tabs/MetricsTab.tsx | 5 ++++- app/pages/project/snapshots/SnapshotsPage.tsx | 4 +++- app/pages/project/vpcs/VpcPage/VpcPage.tsx | 5 ++++- .../vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx | 2 +- app/pages/project/vpcs/VpcsPage.tsx | 4 +++- app/pages/settings/SSHKeysPage.tsx | 4 +++- app/pages/system/SiloImagesPage.tsx | 5 ++++- app/pages/system/UtilizationPage.tsx | 6 +++++- app/pages/system/inventory/InventoryPage.tsx | 3 ++- app/pages/system/inventory/sled/SledPage.tsx | 4 +++- app/pages/system/networking/IpPoolPage.tsx | 12 ++++-------- app/pages/system/networking/NetworkingPage.tsx | 3 ++- app/pages/system/silos/SiloIpPoolsTab.tsx | 3 ++- app/pages/system/silos/SiloPage.tsx | 14 +++++--------- app/pages/system/silos/SilosPage.tsx | 4 +++- app/table/QueryTable.tsx | 2 +- app/table/Table.tsx | 2 +- app/ui/index.ts | 13 ------------- app/ui/lib/Button.tsx | 3 ++- app/ui/lib/Listbox.tsx | 3 ++- app/ui/lib/SideModal.tsx | 3 ++- 47 files changed, 117 insertions(+), 107 deletions(-) diff --git a/app/components/QueryParamTabs.tsx b/app/components/QueryParamTabs.tsx index a7d02cc60..bfcb84ab5 100644 --- a/app/components/QueryParamTabs.tsx +++ b/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. diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx index 22ef2292a..1aa7b7e9d 100644 --- a/app/components/RefetchIntervalPicker.tsx +++ b/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 = { diff --git a/app/components/SystemMetric.tsx b/app/components/SystemMetric.tsx index c4a0b894d..7d0e446ff 100644 --- a/app/components/SystemMetric.tsx +++ b/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')) diff --git a/app/components/form/FullPageForm.tsx b/app/components/form/FullPageForm.tsx index 9fa0ff571..267f8f2fe 100644 --- a/app/components/form/FullPageForm.tsx +++ b/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' diff --git a/app/components/form/fields/DateTimeRangePicker.tsx b/app/components/form/fields/DateTimeRangePicker.tsx index 38a31a1bd..6b401c59d 100644 --- a/app/components/form/fields/DateTimeRangePicker.tsx +++ b/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 }, diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx index ffe5be636..619a9a019 100644 --- a/app/components/form/fields/ImageSelectField.tsx +++ b/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' diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx index e472484a3..a580660cb 100644 --- a/app/components/form/fields/ListboxField.tsx +++ b/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< diff --git a/app/components/form/fields/SshKeysField.tsx b/app/components/form/fields/SshKeysField.tsx index fe02f0ebf..51e695570 100644 --- a/app/components/form/fields/SshKeysField.tsx +++ b/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' diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx index ab429a6f1..2144497c0 100644 --- a/app/forms/access-util.tsx +++ b/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 diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx index 8b5baa3a3..6fb7a67e2 100644 --- a/app/forms/floating-ip-create.tsx +++ b/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' diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx index f5e183526..a4aba0436 100644 --- a/app/forms/idp/edit.tsx +++ b/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' diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx index ebbcf3989..1e637b9dc 100644 --- a/app/forms/image-edit.tsx +++ b/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, diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx index d4732e0e9..2acca3949 100644 --- a/app/forms/image-from-snapshot.tsx +++ b/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' diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index bf295e4b5..39d591c44 100644 --- a/app/forms/image-upload.tsx +++ b/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' diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx index 70005f376..3f6564bfe 100644 --- a/app/forms/instance-create.tsx +++ b/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' diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx index 32c8a820b..16510120f 100644 --- a/app/forms/ip-pool-range-add.tsx +++ b/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' diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx index f9a5d63e8..d88f9a8ab 100644 --- a/app/pages/ProjectsPage.tsx +++ b/app/pages/ProjectsPage.tsx @@ -15,7 +15,7 @@ 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' @@ -23,6 +23,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 { confirmDelete } from 'app/stores/confirm-delete' import { pb } from 'app/util/path-builder' diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx index 0817cc756..91bc7d7a9 100644 --- a/app/pages/SiloAccessPage.tsx +++ b/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' diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx index ad06b3130..65ccb1da5 100644 --- a/app/pages/SiloUtilizationPage.tsx +++ b/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' diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx index f716a75f2..5650fd3ac 100644 --- a/app/pages/project/access/ProjectAccessPage.tsx +++ b/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' diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx index 7c92442b7..cbd9705e4 100644 --- a/app/pages/project/disks/DisksPage.tsx +++ b/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' diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx index e3684d9dd..003866255 100644 --- a/app/pages/project/floating-ips/FloatingIpsPage.tsx +++ b/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' diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx index 3b702d7fd..2a88d1691 100644 --- a/app/pages/project/images/ImagesPage.tsx +++ b/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' diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx index d17d2eab8..234c62237 100644 --- a/app/pages/project/instances/InstancesPage.tsx +++ b/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' diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx index c50090f08..8c5672aae 100644 --- a/app/pages/project/instances/instance/InstancePage.tsx +++ b/app/pages/project/instances/instance/InstancePage.tsx @@ -17,15 +17,11 @@ import { usePrefetchedApiQuery, type InstanceNetworkInterface, } from '@oxide/api' -import { - Instances24Icon, - PageHeader, - PageTitle, - PropertiesTable, - Truncate, -} from '@oxide/ui' +import { Instances24Icon, Truncate } from '@oxide/ui' import { EmptyCell } from '~/table/cells/EmptyCell' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' +import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { ExternalIps } from 'app/components/ExternalIps' import { MoreActionsMenu } from 'app/components/MoreActionsMenu' import { RouteTabs, Tab } from 'app/components/RouteTabs' diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx index 37705e68c..43575e7c9 100644 --- a/app/pages/project/instances/instance/SerialConsolePage.tsx +++ b/app/pages/project/instances/instance/SerialConsolePage.tsx @@ -9,9 +9,10 @@ import { lazy, Suspense, useEffect, useRef, useState } from 'react' import { Link } from 'react-router-dom' import { api } from '@oxide/api' -import { PrevArrow12Icon, Spinner } from '@oxide/ui' +import { PrevArrow12Icon } from '@oxide/ui' import { Badge, type BadgeColor } from '~/ui/lib/Badge' +import { Spinner } from '~/ui/lib/Spinner' import EquivalentCliCommand from 'app/components/EquivalentCliCommand' import { useInstanceSelector } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx index 3c56186c0..0121fe3e4 100644 --- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx +++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx @@ -15,10 +15,13 @@ import { type Cumulativeint64, type DiskMetricName, } from '@oxide/api' -import { Listbox, Spinner, Storage24Icon, TableEmptyBox } from '@oxide/ui' +import { Storage24Icon } from '@oxide/ui' import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { Listbox } from '~/ui/lib/Listbox' +import { Spinner } from '~/ui/lib/Spinner' +import { TableEmptyBox } from '~/ui/lib/Table' import { getInstanceSelector, useInstanceSelector } from 'app/hooks' const TimeSeriesChart = React.lazy(() => import('app/components/TimeSeriesChart')) diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx index 41afd4ec1..632f5e067 100644 --- a/app/pages/project/snapshots/SnapshotsPage.tsx +++ b/app/pages/project/snapshots/SnapshotsPage.tsx @@ -14,7 +14,7 @@ import { useApiQueryErrorsAllowed, type Snapshot, } from '@oxide/api' -import { PageHeader, PageTitle, Snapshots24Icon, TableActions } from '@oxide/ui' +import { Snapshots24Icon } from '@oxide/ui' import { DateCell } from '~/table/cells/DateCell' import { SkeletonCell } from '~/table/cells/EmptyCell' @@ -24,6 +24,8 @@ import { useQueryTable } from '~/table/QueryTable' import { Badge } from '~/ui/lib/Badge' 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 { SnapshotStatusBadge } from 'app/components/StatusBadge' import { getProjectSelector, useProjectSelector } from 'app/hooks' import { confirmDelete } from 'app/stores/confirm-delete' diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx index 35d713c74..2a18aea88 100644 --- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx +++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx @@ -8,10 +8,13 @@ import type { LoaderFunctionArgs } from 'react-router-dom' import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' -import { Networking24Icon, PageHeader, PageTitle, PropertiesTable, Tabs } from '@oxide/ui' +import { Networking24Icon } from '@oxide/ui' import { formatDateTime } from '@oxide/util' import { EmptyCell } from '~/table/cells/EmptyCell' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' +import { PropertiesTable } from '~/ui/lib/PropertiesTable' +import { Tabs } from '~/ui/lib/Tabs' import { QueryParamTabs } from 'app/components/QueryParamTabs' import { getVpcSelector, useVpcSelector } from 'app/hooks' diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx index 78062e1aa..13f8ad498 100644 --- a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx +++ b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx @@ -14,7 +14,6 @@ import { usePrefetchedApiQuery, type VpcFirewallRule, } from '@oxide/api' -import { TableEmptyBox } from '@oxide/ui' import { sortBy, titleCase } from '@oxide/util' import { DateCell } from '~/table/cells/DateCell' @@ -26,6 +25,7 @@ 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 { TableEmptyBox } from '~/ui/lib/Table' import { CreateFirewallRuleForm } from 'app/forms/firewall-rules-create' import { EditFirewallRuleForm } from 'app/forms/firewall-rules-edit' import { useVpcSelector } from 'app/hooks' diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx index 13d667cf7..55ca286d6 100644 --- a/app/pages/project/vpcs/VpcsPage.tsx +++ b/app/pages/project/vpcs/VpcsPage.tsx @@ -15,7 +15,7 @@ import { usePrefetchedApiQuery, type Vpc, } from '@oxide/api' -import { Networking24Icon, PageHeader, PageTitle, TableActions } from '@oxide/ui' +import { Networking24Icon } from '@oxide/ui' import { DateCell } from '~/table/cells/DateCell' import { linkCell } from '~/table/cells/LinkCell' @@ -23,6 +23,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 { getProjectSelector, useProjectSelector, useQuickActions } from 'app/hooks' import { confirmDelete } from 'app/stores/confirm-delete' import { pb } from 'app/util/path-builder' diff --git a/app/pages/settings/SSHKeysPage.tsx b/app/pages/settings/SSHKeysPage.tsx index 29c45b0be..db7ffa3ea 100644 --- a/app/pages/settings/SSHKeysPage.tsx +++ b/app/pages/settings/SSHKeysPage.tsx @@ -8,13 +8,15 @@ import { Link, Outlet, useNavigate } from 'react-router-dom' import { apiQueryClient, useApiMutation, useApiQueryClient, type SshKey } from '@oxide/api' -import { Key16Icon, Key24Icon, PageHeader, PageTitle, TableActions } from '@oxide/ui' +import { Key16Icon, Key24Icon } from '@oxide/ui' import { DateCell } from '~/table/cells/DateCell' 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' diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx index 30120a08d..a20aeeb0e 100644 --- a/app/pages/system/SiloImagesPage.tsx +++ b/app/pages/system/SiloImagesPage.tsx @@ -16,7 +16,7 @@ import { useApiQueryClient, type Image, } from '@oxide/api' -import { Images24Icon, Message, PageHeader, PageTitle, TableActions } from '@oxide/ui' +import { Images24Icon } from '@oxide/ui' import { toListboxItem } from '~/components/form/fields/ImageSelectField' import { ListboxField } from '~/components/form/fields/ListboxField' @@ -27,7 +27,10 @@ import type { MenuAction } from '~/table/columns/action-col' import { useQueryTable } from '~/table/QueryTable' import { Button } 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 { useForm, useToast } from 'app/hooks' import { confirmDelete } from 'app/stores/confirm-delete' import { addToast } from 'app/stores/toast' diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx index 82c1fc4d5..3c389f343 100644 --- a/app/pages/system/UtilizationPage.tsx +++ b/app/pages/system/UtilizationPage.tsx @@ -15,11 +15,15 @@ import { totalUtilization, usePrefetchedApiQuery, } from '@oxide/api' -import { Listbox, Metrics24Icon, PageHeader, PageTitle, Table, Tabs } from '@oxide/ui' +import { Metrics24Icon } from '@oxide/ui' import { bytesToGiB, bytesToTiB, round } from '@oxide/util' import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker' +import { Listbox } from '~/ui/lib/Listbox' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' import { ResourceMeter } from '~/ui/lib/ResourceMeter' +import { Table } from '~/ui/lib/Table' +import { Tabs } from '~/ui/lib/Tabs' import { CapacityBars } from 'app/components/CapacityBars' import { QueryParamTabs } from 'app/components/QueryParamTabs' import { useIntervalPicker } from 'app/components/RefetchIntervalPicker' diff --git a/app/pages/system/inventory/InventoryPage.tsx b/app/pages/system/inventory/InventoryPage.tsx index 47983ad7c..a980dcbc4 100644 --- a/app/pages/system/inventory/InventoryPage.tsx +++ b/app/pages/system/inventory/InventoryPage.tsx @@ -6,8 +6,9 @@ * Copyright Oxide Computer Company */ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' -import { PageHeader, PageTitle, Racks24Icon } from '@oxide/ui' +import { Racks24Icon } from '@oxide/ui' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' import { RouteTabs, Tab } from 'app/components/RouteTabs' import { pb } from 'app/util/path-builder' diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx index ed055b508..94e924e72 100644 --- a/app/pages/system/inventory/sled/SledPage.tsx +++ b/app/pages/system/inventory/sled/SledPage.tsx @@ -9,8 +9,10 @@ import { filesize } from 'filesize' import type { LoaderFunctionArgs } from 'react-router-dom' import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' -import { PageHeader, PageTitle, PropertiesTable, Racks24Icon } from '@oxide/ui' +import { Racks24Icon } from '@oxide/ui' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' +import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { RouteTabs, Tab } from 'app/components/RouteTabs' import { requireSledParams, useSledParams } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx index 05b3b7c7b..5f7134afd 100644 --- a/app/pages/system/networking/IpPoolPage.tsx +++ b/app/pages/system/networking/IpPoolPage.tsx @@ -18,14 +18,7 @@ import { type IpPoolRange, type IpPoolSiloLink, } from '@oxide/api' -import { - Message, - Networking24Icon, - PageHeader, - PageTitle, - Success12Icon, - Tabs, -} from '@oxide/ui' +import { Networking24Icon, Success12Icon } from '@oxide/ui' import { ListboxField } from '~/components/form/fields/ListboxField' import { DateCell } from '~/table/cells/DateCell' @@ -36,7 +29,10 @@ import { useQueryTable } from '~/table/QueryTable' import { Badge } from '~/ui/lib/Badge' import { Button, 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 { Tabs } from '~/ui/lib/Tabs' import { ExternalLink } from 'app/components/ExternalLink' import { HL } from 'app/components/HL' import { QueryParamTabs } from 'app/components/QueryParamTabs' diff --git a/app/pages/system/networking/NetworkingPage.tsx b/app/pages/system/networking/NetworkingPage.tsx index 3a6565cf2..b0d7cd265 100644 --- a/app/pages/system/networking/NetworkingPage.tsx +++ b/app/pages/system/networking/NetworkingPage.tsx @@ -5,8 +5,9 @@ * * Copyright Oxide Computer Company */ -import { Networking24Icon, PageHeader, PageTitle } from '@oxide/ui' +import { Networking24Icon } from '@oxide/ui' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' import { RouteTabs, Tab } from 'app/components/RouteTabs' import { pb } from 'app/util/path-builder' diff --git a/app/pages/system/silos/SiloIpPoolsTab.tsx b/app/pages/system/silos/SiloIpPoolsTab.tsx index c4fcb96fa..af7f0d7ff 100644 --- a/app/pages/system/silos/SiloIpPoolsTab.tsx +++ b/app/pages/system/silos/SiloIpPoolsTab.tsx @@ -9,7 +9,7 @@ import { useMemo, useState } from 'react' import { useApiMutation, useApiQuery, useApiQueryClient, type SiloIpPool } from '@oxide/api' -import { Message, Networking24Icon, Success12Icon } from '@oxide/ui' +import { Networking24Icon, Success12Icon } from '@oxide/ui' import { ListboxField } from '~/components/form/fields/ListboxField' import { linkCell } from '~/table/cells/LinkCell' @@ -18,6 +18,7 @@ import { useQueryTable } from '~/table/QueryTable' import { Badge } from '~/ui/lib/Badge' import { Button } from '~/ui/lib/Button' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { Message } from '~/ui/lib/Message' import { Modal } from '~/ui/lib/Modal' import { ExternalLink } from 'app/components/ExternalLink' import { HL } from 'app/components/HL' diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx index ac88b4501..3608696c3 100644 --- a/app/pages/system/silos/SiloPage.tsx +++ b/app/pages/system/silos/SiloPage.tsx @@ -8,20 +8,16 @@ import { type LoaderFunctionArgs } from 'react-router-dom' import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' -import { - Cloud24Icon, - NextArrow12Icon, - PageHeader, - PageTitle, - PropertiesTable, - TableEmptyBox, - Tabs, -} from '@oxide/ui' +import { Cloud24Icon, NextArrow12Icon } from '@oxide/ui' import { formatDateTime } from '@oxide/util' import { EmptyCell } from '~/table/cells/EmptyCell' import { Badge } from '~/ui/lib/Badge' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { PageHeader, PageTitle } from '~/ui/lib/PageHeader' +import { PropertiesTable } from '~/ui/lib/PropertiesTable' +import { TableEmptyBox } from '~/ui/lib/Table' +import { Tabs } from '~/ui/lib/Tabs' import { QueryParamTabs } from 'app/components/QueryParamTabs' import { getSiloSelector, useSiloSelector } from 'app/hooks' diff --git a/app/pages/system/silos/SilosPage.tsx b/app/pages/system/silos/SilosPage.tsx index 05c52b5df..3cfef660c 100644 --- a/app/pages/system/silos/SilosPage.tsx +++ b/app/pages/system/silos/SilosPage.tsx @@ -15,7 +15,7 @@ import { usePrefetchedApiQuery, type Silo, } from '@oxide/api' -import { Cloud24Icon, PageHeader, PageTitle, TableActions } from '@oxide/ui' +import { Cloud24Icon } from '@oxide/ui' import { BooleanCell } from '~/table/cells/BooleanCell' import { DateCell } from '~/table/cells/DateCell' @@ -25,6 +25,8 @@ import { useQueryTable } from '~/table/QueryTable' import { Badge } from '~/ui/lib/Badge' 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 { useQuickActions } from 'app/hooks/use-quick-actions' import { confirmDelete } from 'app/stores/confirm-delete' import { pb } from 'app/util/path-builder' diff --git a/app/table/QueryTable.tsx b/app/table/QueryTable.tsx index ab5ab74d7..71cef0713 100644 --- a/app/table/QueryTable.tsx +++ b/app/table/QueryTable.tsx @@ -31,12 +31,12 @@ import { type Result, type ResultItem, } from '@oxide/api' -import { TableEmptyBox } from '@oxide/ui' import { invariant, isOneOf } from '@oxide/util' import { Pagination } from '~/components/Pagination' import { usePagination } from '~/hooks/use-pagination' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { TableEmptyBox } from '~/ui/lib/Table' import { DefaultCell } from './cells/DefaultCell' import { getActionsCol, type MakeActions } from './columns/action-col' diff --git a/app/table/Table.tsx b/app/table/Table.tsx index b15b3265f..1c566b6ab 100644 --- a/app/table/Table.tsx +++ b/app/table/Table.tsx @@ -8,7 +8,7 @@ import { flexRender, type Table as TableInstance } from '@tanstack/react-table' import cn from 'classnames' -import { Table as UITable } from '@oxide/ui' +import { Table as UITable } from '~/ui/lib/Table' export type TableProps = JSX.IntrinsicElements['table'] & { rowClassName?: string diff --git a/app/ui/index.ts b/app/ui/index.ts index 7f51f176d..d46f9b007 100644 --- a/app/ui/index.ts +++ b/app/ui/index.ts @@ -6,29 +6,16 @@ * Copyright Oxide Computer Company */ -export * from './lib/Button' export * from './lib/Checkbox' export * from './lib/DateRangePicker' export * from './lib/Divider' export * from './lib/DropdownMenu' -export * from './lib/EmptyMessage' export * from './lib/FieldLabel' - export * from './lib/Identicon' -export * from './lib/Message' -export * from './lib/Listbox' -export * from './lib/Message' -export * from './lib/Modal' export * as MiniTable from './lib/MiniTable' -export * from './lib/PageHeader' -export * from './lib/PropertiesTable' export * from './lib/RadioGroup' export * from './lib/Radio' export * from './lib/SideModal' -export * from './lib/Spinner' -export * from './lib/Table' -export * from './lib/Tabs' -export * from './lib/Tooltip' export * from './lib/Truncate' export * from './util/wrap' diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx index 20a67f7a1..27103364c 100644 --- a/app/ui/lib/Button.tsx +++ b/app/ui/lib/Button.tsx @@ -8,8 +8,9 @@ import cn from 'classnames' import { forwardRef, type MouseEventHandler, type ReactNode } from 'react' -import { Spinner, Wrap } from '@oxide/ui' +import { Wrap } from '@oxide/ui' +import { Spinner } from '~/ui/lib/Spinner' import { Tooltip } from '~/ui/lib/Tooltip' import './button.css' diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx index 35f8c3712..39d4d66ac 100644 --- a/app/ui/lib/Listbox.tsx +++ b/app/ui/lib/Listbox.tsx @@ -17,8 +17,9 @@ import { Listbox as Select } from '@headlessui/react' import cn from 'classnames' import type { ReactNode } from 'react' -import { FieldLabel, SelectArrows6Icon, SpinnerLoader, usePopoverZIndex } from '@oxide/ui' +import { FieldLabel, SelectArrows6Icon, usePopoverZIndex } from '@oxide/ui' +import { SpinnerLoader } from './Spinner' import { TextInputHint } from './TextInput' export type ListboxItem = { diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx index bf220f55e..cc32e5585 100644 --- a/app/ui/lib/SideModal.tsx +++ b/app/ui/lib/SideModal.tsx @@ -11,8 +11,9 @@ import cn from 'classnames' import React, { createContext, useContext, useRef, type ReactNode } from 'react' import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react' -import { Message, useIsInModal } from '@oxide/ui' +import { Message } from '~/ui/lib/Message' +import { useIsInModal } from '~/ui/lib/Modal' import { classed } from '~/util/classed' import { useIsOverflow } from 'app/hooks'