Move libs/ui to app/ui

app/ui/index.ts

@@ -0,0 +1,55 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import useInterval from './lib/use-interval'
+import useTimeout from './lib/use-timeout'
+
+import './styles/index.css'
+
+export { useInterval, useTimeout }
+
+export * from './lib/ActionMenu'
+export * from './lib/AuthCodeInput'
+export * from './lib/Badge'
+export * from './lib/Button'
+export * from './lib/Checkbox'
+export * from './lib/CopyToClipboard'
+export * from './lib/DateRangePicker'
+export * from './lib/Divider'
+export * from './lib/DropdownMenu'
+export * from './lib/FileInput'
+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 * from './lib/ModalLinks'
+export * as MiniTable from './lib/MiniTable'
+export * from './lib/NumberInput'
+export * from './lib/PageHeader'
+export * from './lib/Pagination'
+export * from './lib/Progress'
+export * from './lib/PropertiesTable'
+export * from './lib/RadioGroup'
+export * from './lib/Radio'
+export * from './lib/ResourceMeter'
+export * from './lib/SettingsGroup'
+export * from './lib/SideModal'
+export * from './lib/SkipLink'
+export * from './lib/Spinner'
+export * from './lib/Table'
+export * from './lib/Tabs'
+export * from './lib/TextInput'
+export * from './lib/Toast'
+export * from './lib/Tooltip'
+export * from './lib/Truncate'
+export * from './util/wrap'
+
+export * from '@oxide/design-system/icons/react'

libs/ui/lib/action-menu/ActionMenu.stories.tsx → app/ui/lib/ActionMenu.stories.tsx

@@ -7,8 +7,8 @@
  */
 import { useState } from 'react'
 
-import { Button } from '../button/Button'
 import { ActionMenu } from './ActionMenu'
+import { Button } from './Button'
 
 const makeItem = (value: string) => ({
   value,

libs/ui/lib/action-menu/ActionMenu.tsx → app/ui/lib/ActionMenu.tsx

@@ -13,7 +13,7 @@ import React, { useState } from 'react'
 import { Close12Icon } from '@oxide/design-system/icons/react'
 import { classed, groupBy } from '@oxide/util'
 
-import { useSteppedScroll } from '../hooks/use-stepped-scroll'
+import { useSteppedScroll } from './use-stepped-scroll'
 
 export interface QuickActionItem {
   value: string

libs/ui/lib/badge/Badge.stories.tsx → app/ui/lib/Badge.stories.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Section } from '../../util/story-section'
+import { Section } from '../util/story-section'
 import { Badge, badgeColors, type BadgeColor, type BadgeVariant } from './Badge'
 
 export const All = () => {

libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx → app/ui/lib/BulkActionMenu.tsx

@@ -7,7 +7,7 @@
  */
 import { flattenChildren } from '@oxide/util'
 
-import { Button, type ButtonProps } from '../button/Button'
+import { Button, type ButtonProps } from './Button'
 
 export interface BulkActionMenuProps {
   selectedCount: number

libs/ui/lib/button/Button.stories.tsx → app/ui/lib/Button.stories.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Section } from '../../util/story-section'
+import { Section } from '../util/story-section'
 import { Button, variants } from './Button'
 
 // TODO: sizes (I guess)

libs/ui/lib/empty-message/EmptyMessage.tsx → app/ui/lib/EmptyMessage.tsx

@@ -9,7 +9,7 @@ import cn from 'classnames'
 import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'
 
-import { Button, buttonStyle } from '../button/Button'
+import { Button, buttonStyle } from './Button'
 
 const buttonStyleProps = { variant: 'ghost', size: 'sm', color: 'secondary' } as const
 

libs/ui/lib/mini-table/MiniTable.tsx → app/ui/lib/MiniTable.tsx

@@ -7,7 +7,7 @@
  */
 import { classed } from '@oxide/util'
 
-import { Table as BigTable } from '../table/Table'
+import { Table as BigTable } from './Table'
 
 import './mini-table.css'
 

libs/ui/lib/modal/Modal.stories.tsx → app/ui/lib/Modal.stories.tsx

@@ -7,11 +7,11 @@
  */
 import { useState } from 'react'
 
-import { Button } from '../button/Button'
-import { FieldLabel } from '../field-label/FieldLabel'
-import { ModalLink, ModalLinks } from '../ModalLinks'
-import { TextInput, TextInputHint } from '../text-input/TextInput'
+import { Button } from './Button'
+import { FieldLabel } from './FieldLabel'
 import { Modal } from './Modal'
+import { ModalLink, ModalLinks } from './ModalLinks'
+import { TextInput, TextInputHint } from './TextInput'
 
 export function Default() {
   const [isOpen, setIsOpen] = useState(false)

libs/ui/lib/modal/Modal.tsx → app/ui/lib/Modal.tsx

@@ -12,7 +12,7 @@ import React, { createContext, forwardRef, useContext, useId } from 'react'
 import { Close12Icon } from '@oxide/design-system/icons/react'
 import { classed } from '@oxide/util'
 
-import { Button } from '../button/Button'
+import { Button } from './Button'
 
 const ModalContext = createContext(false)
 

libs/ui/lib/progress/Progress.tsx → app/ui/lib/Progress.tsx

@@ -7,7 +7,7 @@
  */
 import cn from 'classnames'
 
-import { ariaLabel, type AriaLabel } from '../../util/aria'
+import { ariaLabel, type AriaLabel } from '../util/aria'
 
 export type ProgressProps = {
   value: number // always out of 100

libs/ui/lib/properties-table/PropertiesTable.tsx → app/ui/lib/PropertiesTable.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from 'react'
 
 import { invariant, isOneOf } from '@oxide/util'
 
-import { Badge } from '../badge/Badge'
+import { Badge } from './Badge'
 
 import './properties-table.css'
 

libs/ui/lib/radio-group/RadioGroup.stories.tsx → app/ui/lib/RadioGroup.stories.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Radio, RadioCard } from '../radio/Radio'
+import { Radio, RadioCard } from './Radio'
 import { RadioGroup } from './RadioGroup'
 
 export const Default = () => (

libs/ui/lib/resource-meter/ResourceMeter.tsx → app/ui/lib/ResourceMeter.tsx

@@ -8,7 +8,7 @@
 
 import cn from 'classnames'
 
-import { Tooltip } from '../tooltip/Tooltip'
+import { Tooltip } from './Tooltip'
 
 type ResourceMeterProps = {
   value: number

libs/ui/lib/side-modal/SideModal.stories.tsx → app/ui/lib/SideModal.stories.tsx

@@ -7,8 +7,8 @@
  */
 import { useState } from 'react'
 
-import { Button } from '../button/Button'
-import { ModalLink, ModalLinks } from '../ModalLinks'
+import { Button } from './Button'
+import { ModalLink, ModalLinks } from './ModalLinks'
 import { SideModal } from './SideModal'
 
 // TODO: styling on modal mostly doesn't work

libs/ui/lib/tag/Tag.stories.tsx → app/ui/lib/Tag.stories.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Section } from '../../util/story-section'
+import { Section } from '../util/story-section'
 import { Tag, tagColors, type TagColor, type TagVariant } from './Tag'
 
 export const Default = () => {

libs/ui/lib/timeout-indicator/TimeoutIndicator.tsx → app/ui/lib/TimeoutIndicator.tsx

@@ -8,7 +8,7 @@
 import { animated, Globals, useTransition } from '@react-spring/web'
 import cn from 'classnames'
 
-import useTimeout from '../hooks/use-timeout'
+import useTimeout from './use-timeout'
 
 export interface TimeoutIndicatorProps {
   timeout: number

libs/ui/lib/toast/Toast.tsx → app/ui/lib/Toast.tsx

@@ -17,8 +17,8 @@ import {
   Warning12Icon,
 } from '@oxide/design-system/icons/react'
 
-import { TimeoutIndicator } from '../timeout-indicator/TimeoutIndicator'
-import { Truncate } from '../truncate/Truncate'
+import { TimeoutIndicator } from './TimeoutIndicator'
+import { Truncate } from './Truncate'
 
 type Variant = 'success' | 'error' | 'info'
 

libs/ui/lib/truncate/Truncate.tsx → app/ui/lib/Truncate.tsx

@@ -6,8 +6,8 @@
  * Copyright Oxide Computer Company
  */
 
-import { CopyToClipboard } from '../copy-to-clipboard/CopyToClipboard'
-import { Tooltip } from '../tooltip/Tooltip'
+import { CopyToClipboard } from './CopyToClipboard'
+import { Tooltip } from './Tooltip'
 
 type TruncatePosition = 'middle' | 'end'
 

libs/ui/lib/__stories__/Typography.stories.tsx → app/ui/lib/Typography.stories.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Section } from '../../util/story-section'
+import { Section } from '../util/story-section'
 
 export const Default = () => (
   <>

tsconfig.json

@@ -17,7 +17,7 @@
       "@oxide/gen/*": ["libs/api/__generated__/*"],
       "@oxide/api": ["libs/api/index.ts"],
       "@oxide/api-mocks": ["libs/api-mocks/index.ts"],
-      "@oxide/ui": ["libs/ui/index.ts"],
+      "@oxide/ui": ["app/ui/index.ts"],
       "@oxide/util": ["libs/util/index.ts"],
       "@oxide/table": ["app/table/index.ts"]
     },