@seamapi/react 0.9.1 → 0.11.0

package/src/lib/icons/DotsEllipsisMore.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const DotsEllipsisMoreIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={18}
+    height={18}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='dots-ellipsis-more_svg__a'
+      width={18}
+      height={18}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#2196F3' d='M0 0h18v18H0z' />
+    </mask>
+    <g mask='url(#dots-ellipsis-more_svg__a)'>
+      <path
+        fill='#007AFC'
+        d='M4.5 10.5c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 3 9c0-.412.147-.766.44-1.06.294-.293.648-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.5 0c-.412 0-.766-.147-1.06-.44A1.444 1.444 0 0 1 7.5 9c0-.412.147-.766.44-1.06.294-.293.647-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44Zm4.5 0c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 12 9c0-.412.147-.766.44-1.06.294-.293.648-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/OnlineStatusAccountOffline.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const OnlineStatusAccountOfflineIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='online-status-account-offline_svg__a'
+      width={24}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 .733h24v24H0z' />
+    </mask>
+    <g mask='url(#online-status-account-offline_svg__a)'>
+      <path
+        fill='#E36857'
+        d='m19.8 23.333-2.65-2.6H6.5c-1.533 0-2.833-.534-3.9-1.6-1.067-1.067-1.6-2.367-1.6-3.9 0-1.284.396-2.425 1.188-3.425A5.286 5.286 0 0 1 5.25 9.883c.05-.134.1-.263.15-.388.05-.125.1-.262.15-.412L1.4 4.933l1.4-1.4 18.4 18.4-1.4 1.4Zm-13.3-4.6h8.65l-8.05-8.05a6.626 6.626 0 0 0-.075.525 5.28 5.28 0 0 0-.025.525h-.5c-.967 0-1.792.341-2.475 1.025A3.372 3.372 0 0 0 3 15.233c0 .966.342 1.791 1.025 2.475A3.372 3.372 0 0 0 6.5 18.733Zm15.1.75-1.45-1.4c.283-.234.496-.505.638-.813.141-.308.212-.654.212-1.037 0-.7-.242-1.292-.725-1.775-.483-.484-1.075-.725-1.775-.725H17v-2c0-1.384-.488-2.563-1.463-3.538-.975-.975-2.154-1.462-3.537-1.462-.45 0-.883.054-1.3.162-.417.109-.817.28-1.2.513l-1.45-1.45a7.028 7.028 0 0 1 1.862-.913A6.878 6.878 0 0 1 12 4.733c1.95 0 3.604.679 4.962 2.037C18.322 8.13 19 9.783 19 11.733c1.15.133 2.104.629 2.863 1.487A4.407 4.407 0 0 1 23 16.233a4.384 4.384 0 0 1-1.4 3.25Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/OnlineStatusDeviceOffline.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+export const OnlineStatusDeviceOfflineIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <path
+      fill='#E36857'
+      d='m1.411 4.931 1.373-1.373 18.432 18.431-1.373 1.373z'
+    />
+    <path
+      fill='#E36857'
+      fillRule='evenodd'
+      d='M12 23.362c-1.95 0-3.604-.679-4.963-2.037C5.68 19.967 5 18.312 5 16.362v-8c0-.799.114-1.548.342-2.248L7.028 7.8c-.019.184-.028.371-.028.562v8c0 1.384.487 2.563 1.463 3.538.975.975 2.154 1.462 3.537 1.462s2.563-.487 3.537-1.462c.664-.664 1.102-1.423 1.314-2.276l1.58 1.58a6.913 6.913 0 0 1-1.469 2.12c-1.358 1.36-3.012 2.038-4.962 2.038Zm6.975-6.36c.017-.21.025-.423.025-.64v-8c0-1.95-.68-3.604-2.038-4.962C15.604 2.04 13.95 1.362 12 1.362c-1.95 0-3.604.68-4.963 2.038a7.413 7.413 0 0 0-.767.897l1.452 1.451c.204-.325.45-.633.74-.923.976-.975 2.155-1.463 3.538-1.463s2.563.488 3.537 1.463C16.512 5.8 17 6.979 17 8.362v6.664l1.975 1.975ZM15 12.361c.283 0 .52-.095.713-.287a.968.968 0 0 0 .287-.713.968.968 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.968.968 0 0 0-.287.712c0 .284.096.521.287.713.192.192.43.287.713.287Zm-6 3c.283 0 .52-.095.713-.287a.968.968 0 0 0 .287-.713.968.968 0 0 0-.287-.712.967.967 0 0 0-.713-.288.967.967 0 0 0-.713.288.968.968 0 0 0-.287.712c0 .284.096.521.287.713.192.192.43.287.713.287Zm0 3c.283 0 .52-.095.713-.287a.968.968 0 0 0 .287-.713.968.968 0 0 0-.287-.712.967.967 0 0 0-.713-.288.967.967 0 0 0-.713.288.968.968 0 0 0-.287.712c0 .284.096.521.287.713.192.192.43.287.713.287Zm3 0c.283 0 .52-.095.713-.287a.968.968 0 0 0 .287-.713.968.968 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.968.968 0 0 0-.287.712c0 .284.096.521.287.713.192.192.43.287.713.287Zm3.713-9.287a.968.968 0 0 1-.713.287.968.968 0 0 1-.713-.287.967.967 0 0 1-.287-.713c0-.283.096-.52.287-.712A.968.968 0 0 1 15 7.362c.283 0 .52.096.713.288.191.191.287.429.287.712 0 .284-.096.521-.287.713Zm-3.749.287c.283 0 .52-.096.713-.287a.967.967 0 0 0 .287-.713.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.712.288.967.967 0 0 0-.288.712c0 .284.096.521.288.713.191.191.429.287.712.287Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/OnlineStatusOnline.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react'
+export const OnlineStatusOnlineIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <path
+      fill='#9DA1A9'
+      d='M6.5 20c-1.517 0-2.813-.525-3.888-1.575C1.537 17.375 1 16.092 1 14.575c0-1.3.392-2.458 1.175-3.475S3.983 9.433 5.25 9.15c.417-1.533 1.25-2.775 2.5-3.725C9 4.475 10.417 4 12 4c1.95 0 3.604.68 4.962 2.037C18.322 7.396 19 9.05 19 11c1.15.133 2.104.63 2.863 1.488A4.407 4.407 0 0 1 23 15.5c0 1.25-.438 2.313-1.313 3.188S19.75 20 18.5 20h-12Zm0-2h12c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C19.792 13.242 19.2 13 18.5 13H17v-2c0-1.383-.488-2.563-1.463-3.537C14.563 6.487 13.383 6 12 6s-2.563.487-3.537 1.463C7.488 8.437 7 9.617 7 11h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 3 14.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 6.5 18Z'
+    />
+    <path
+      fill='#27AE60'
+      d='M16 11.35 10.35 17 6.8 13.45l1.425-1.425 2.1 2.1L14.55 9.9 16 11.35Z'
+    />
+  </svg>
+)

package/src/lib/icons/index.ts

@@ -1 +1,13 @@
+export { AccessCodeKeyIcon } from './AccessCodeKey.js'
+export { ArrowBackIcon } from './ArrowBack.js'
+export { BatteryLevelCriticalIcon } from './BatteryLevelCritical.js'
+export { BatteryLevelFullIcon } from './BatteryLevelFull.js'
+export { BatteryLevelHighIcon } from './BatteryLevelHigh.js'
+export { BatteryLevelLowIcon } from './BatteryLevelLow.js'
+export { BatteryLevelWiredIcon } from './BatteryLevelWired.js'
+export { ChevronRightIcon } from './ChevronRight.js'
+export { DotsEllipsisMoreIcon } from './DotsEllipsisMore.js'
+export { OnlineStatusAccountOfflineIcon } from './OnlineStatusAccountOffline.js'
+export { OnlineStatusDeviceOfflineIcon } from './OnlineStatusDeviceOffline.js'
+export { OnlineStatusOnlineIcon } from './OnlineStatusOnline.js'
 export { SeamIcon } from './Seam.js'

package/src/lib/index.ts

@@ -1,3 +1,3 @@
-export * from './components/index.js'
-export * from './hooks/index.js'
-export * from './provider.js'
+export * from './seam/index.js'
+export * from './SeamProvider.js'
+export * from './ui/index.js'

package/src/lib/seam/devices/index.ts

@@ -0,0 +1 @@
+export * from './use-devices.js'

package/src/lib/{hooks → seam/devices}/use-devices.ts

@@ -5,7 +5,7 @@ import type {
   SeamError,
 } from 'seamapi'
 
-import { useSeam } from './use-seam.js'
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export type UseDevicesParams = DevicesListRequest
 export type UseDevicesData = DevicesListResponse['devices']
@@ -15,11 +15,11 @@ type Result = UseQueryResult<UseDevicesData, SeamError>
 type UseDevicesResult = Omit<Result, 'data'> & { devices: Result['data'] }
 
 export function useDevices(params: DevicesListRequest): UseDevicesResult {
-  const { client } = useSeam()
+  const { client } = useSeamClient()
   const { data, ...rest } = useQuery<DevicesListResponse['devices'], SeamError>(
     {
       enabled: client != null,
-      queryKey: ['list', 'devices', params],
+      queryKey: ['devices', 'list', params],
       queryFn: async () => {
         if (client == null) return []
         return await client?.devices.list(params)

package/src/lib/seam/index.ts

@@ -0,0 +1,2 @@
+export * from './devices/index.js'
+export * from './use-seam-client.js'

package/src/lib/{hooks/use-seam.ts → seam/use-seam-client.ts}

@@ -1,18 +1,16 @@
 import { useQuery } from '@tanstack/react-query'
-import { useContext } from 'react'
 import { type ClientSession, Seam } from 'seamapi'
 import { v4 as uuidv4 } from 'uuid'
 
-import { seamContext } from 'lib/provider.js'
+import { useSeamContext } from 'lib/SeamProvider.js'
 
-export function useSeam(): {
+export function useSeamClient(): {
   client: Seam | null
   isLoading: boolean
   isError: boolean
   error: unknown
 } {
-  const { client, clientOptions, publishableKey, ...context } =
-    useContext(seamContext)
+  const { client, clientOptions, publishableKey, ...context } = useSeamContext()
   const [clientSession, setClientSession] = useClientSession()
   const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey)
 

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -0,0 +1,57 @@
+import type { AccessCode } from 'seamapi'
+
+import {
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+  TableTitle,
+} from 'lib/ui/Table/index.js'
+
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Caption } from 'lib/ui/typography/Caption.js'
+import { Title } from 'lib/ui/typography/Title.js'
+
+export function AccessCodeTable(props: {
+  accessCodes: AccessCode[]
+  onClickBack?: () => void
+}) {
+  const { accessCodes, onClickBack } = props
+
+  return (
+    <div className='seam-access-code-table'>
+      <ContentHeader onClickBack={onClickBack} />
+      <TableHeader>
+        <TableTitle>
+          {t.accessCodes} <Caption>({accessCodes.length})</Caption>
+        </TableTitle>
+      </TableHeader>
+      <TableBody>
+        {accessCodes.map((code) => (
+          <TableRow key={code.access_code_id}>
+            <TableCell className='seam-icon-cell'>
+              <div>
+                <AccessCodeKeyIcon />
+              </div>
+            </TableCell>
+            <TableCell className='seam-name-cell'>
+              <Title>{code.name}</Title>
+              <CodeDetails accessCode={code} />
+            </TableCell>
+            <TableCell className='seam-action-cell'>
+              {/* <IconButton>
+                <DotsEllipsisMoreIcon />
+              </IconButton> */}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </div>
+  )
+}
+
+const t = {
+  accessCodes: 'Access Codes',
+}

package/src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -0,0 +1,51 @@
+import dayjs from 'dayjs'
+import type { AccessCode } from 'seamapi'
+
+import { DotDivider } from 'lib/ui/layout/DotDivider.js'
+
+export function CodeDetails(props: { accessCode: AccessCode }) {
+  const { accessCode } = props
+
+  return (
+    <div className='seam-access-code-details'>
+      Unit 110
+      <DotDivider />
+      <Duration accessCode={accessCode} />
+      <DotDivider />
+      {t.code}: {accessCode.code}
+    </div>
+  )
+}
+
+function Duration(props: { accessCode: AccessCode }) {
+  const { accessCode } = props
+  if (accessCode.type === 'ongoing') {
+    return <span>{t.ends}: Never</span>
+  }
+
+  const hasStarted = new Date(accessCode.starts_at).valueOf() < Date.now()
+  if (hasStarted) {
+    return (
+      <span>
+        {t.ends}: {formatDate(accessCode.ends_at)}{' '}
+      </span>
+    )
+  }
+
+  // is in future
+  return (
+    <span>
+      {t.starts}: {formatDate(accessCode.starts_at)}
+    </span>
+  )
+}
+
+function formatDate(date: string) {
+  return dayjs(date).format('MMM D')
+}
+
+const t = {
+  code: 'Code',
+  starts: 'Starts',
+  ends: 'Ends',
+}

package/src/lib/ui/AccessCodeTable/index.ts

@@ -0,0 +1,2 @@
+export * from './AccessCodeTable.js'
+export * from './CodeDetails.js'

package/src/lib/ui/DeviceDetails/BatteryStatus.tsx

@@ -0,0 +1,81 @@
+import type { LockDevice } from 'seamapi'
+
+import { BatteryLevelCriticalIcon } from 'lib/icons/BatteryLevelCritical.js'
+import { BatteryLevelFullIcon } from 'lib/icons/BatteryLevelFull.js'
+import { BatteryLevelHighIcon } from 'lib/icons/BatteryLevelHigh.js'
+import { BatteryLevelLowIcon } from 'lib/icons/BatteryLevelLow.js'
+
+/**
+ * Thresholds to determine the battery status
+ */
+const BATTERY_LEVEL = {
+  FULL: 0.85,
+  HIGH: 0.6,
+  LOW: 0.3,
+}
+export function BatteryStatus(props: { device: LockDevice }) {
+  const {
+    device: {
+      properties: { battery_level: batteryLevel },
+    },
+  } = props
+
+  if (batteryLevel === undefined) {
+    return null
+  }
+
+  return (
+    <>
+      <span className='seam-label'>{t.power}:</span>{' '}
+      <div className='seam-battery-status'>
+        <Status batteryLevel={batteryLevel} />
+      </div>
+    </>
+  )
+}
+
+function Status(props: { batteryLevel: number }) {
+  const { batteryLevel } = props
+
+  if (batteryLevel > BATTERY_LEVEL.FULL) {
+    return (
+      <>
+        <BatteryLevelFullIcon />
+        <span className='seam-status-text'>{t.full}</span>
+      </>
+    )
+  }
+
+  if (batteryLevel > BATTERY_LEVEL.HIGH) {
+    return (
+      <>
+        <BatteryLevelHighIcon />
+        <span className='seam-status-text'>{t.high}</span>
+      </>
+    )
+  }
+
+  if (batteryLevel > BATTERY_LEVEL.LOW) {
+    return (
+      <>
+        <BatteryLevelLowIcon />
+        <span className='seam-status-text'>{t.low}</span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <BatteryLevelCriticalIcon />
+      <span className='seam-text-danger'>{t.critical}</span>
+    </>
+  )
+}
+
+const t = {
+  power: 'Power',
+  full: 'Good',
+  high: 'Good',
+  low: 'Low',
+  critical: 'Low!',
+}

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -0,0 +1,99 @@
+import { type AccessCode, type LockDevice } from 'seamapi'
+
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
+import { BatteryStatus } from 'lib/ui/DeviceDetails/BatteryStatus.js'
+import { DeviceImage } from 'lib/ui/DeviceDetails/DeviceImage.js'
+import { ModelStatus } from 'lib/ui/DeviceDetails/ModelStatus.js'
+import { OnlineStatus } from 'lib/ui/DeviceDetails/OnlineStatus.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import useToggle from 'lib/use-toggle.js'
+
+export function DeviceDetails(props: { device: LockDevice }) {
+  const { device } = props
+
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+
+  const accessCodeLength =
+    device.properties?.schlage_metadata?.access_code_length ?? null
+
+  // TODO : Fetch access codes
+  const accessCodes: AccessCode[] = []
+
+  const [showingAccessCodes, toggleAccessCodes] = useToggle()
+
+  if (showingAccessCodes) {
+    return (
+      <AccessCodeTable
+        accessCodes={accessCodes}
+        onClickBack={toggleAccessCodes}
+      />
+    )
+  }
+
+  return (
+    <div className='seam-device-details'>
+      <ContentHeader title='Device' />
+      <div className='seam-body'>
+        <div className='seam-summary'>
+          <div className='seam-content'>
+            <div className='seam-image'>
+              <DeviceImage device={device} />
+            </div>
+
+            <div className='seam-info'>
+              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <div className='seam-properties'>
+                <OnlineStatus device={device} />
+                <BatteryStatus device={device} />
+                <ModelStatus device={device} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='seam-box'>
+          <div
+            className='seam-content seam-access-codes'
+            onClick={toggleAccessCodes}
+          >
+            <span className='seam-value'>49 {t.accessCodes}</span>
+            <ChevronRightIcon />
+          </div>
+        </div>
+
+        <div className='seam-box'>
+          <div className='seam-content'>
+            <span className='seam-label'>{t.lockStatus}</span>
+            <span className='seam-value'>{lockStatus}</span>
+          </div>
+          <AccessCodeLength accessCodeLength={accessCodeLength} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AccessCodeLength(props: { accessCodeLength: number | null }) {
+  const { accessCodeLength } = props
+  if (accessCodeLength === null) {
+    return null
+  }
+
+  return (
+    <div className='seam-content seam-access-code-length'>
+      <span className='seam-label'>{t.codeLength}</span>
+      <span className='seam-value'>
+        {accessCodeLength} {t.digits}
+      </span>
+    </div>
+  )
+}
+
+const t = {
+  locked: 'Locked',
+  unlocked: 'Unlocked',
+  accessCodes: 'access codes',
+  codeLength: 'Code length',
+  digits: 'digits',
+  lockStatus: 'lockStatus',
+}

package/src/lib/ui/DeviceDetails/DeviceImage.tsx

@@ -0,0 +1,12 @@
+import type { LockDevice } from 'seamapi'
+
+const FALLBACK_IMAGE_URL =
+  'https://connect.getseam.com/assets/images/devices/unknown-lock.png'
+
+export function DeviceImage(props: { device: LockDevice }) {
+  const { device } = props
+
+  const url = device.properties.image_url ?? FALLBACK_IMAGE_URL
+
+  return <img src={url} alt={device.properties.name} />
+}

package/src/lib/ui/DeviceDetails/ModelStatus.tsx

@@ -0,0 +1,27 @@
+import type { LockDevice } from 'seamapi'
+
+export function ModelStatus(props: { device: LockDevice }) {
+  const {
+    device: { properties },
+  } = props
+
+  const model =
+    properties?.august_metadata?.model ??
+    properties?.schlage_metadata?.model ??
+    null
+
+  if (model === null) {
+    return null
+  }
+
+  return (
+    <>
+      <span className='seam-label'>{t.model}:</span>{' '}
+      <div className='seam-device-model'>{model}</div>
+    </>
+  )
+}
+
+const t = {
+  model: 'Model',
+}

package/src/lib/ui/DeviceDetails/OnlineStatus.tsx

@@ -0,0 +1,44 @@
+import type { LockDevice } from 'seamapi'
+
+import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
+import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
+
+export function OnlineStatus(props: { device: LockDevice }) {
+  const { device } = props
+  return (
+    <>
+      <span className='seam-label'>{t.status}:</span>{' '}
+      <div className='seam-online-status'>
+        <Status isOnline={device.properties.online} />
+      </div>
+    </>
+  )
+}
+
+function Status(props: { isOnline: boolean }) {
+  const { isOnline } = props
+
+  if (isOnline) {
+    return (
+      <>
+        <OnlineStatusOnlineIcon />
+        <span className='seam-status-text'>{t.online}</span>
+      </>
+    )
+  }
+
+  // TODO: Check for Account Offline status
+
+  return (
+    <>
+      <OnlineStatusDeviceOfflineIcon />
+      <span className='seam-text-danger'>{t.deviceOffline}</span>
+    </>
+  )
+}
+
+const t = {
+  status: 'Status',
+  online: 'Online',
+  deviceOffline: 'Device Offline',
+}

package/src/lib/ui/DeviceDetails/index.ts

@@ -0,0 +1,5 @@
+export * from './BatteryStatus.js'
+export * from './DeviceDetails.js'
+export * from './DeviceImage.js'
+export * from './ModelStatus.js'
+export * from './OnlineStatus.js'

package/src/lib/{components → ui}/DeviceManager/DeviceManager.tsx

@@ -1,14 +1,16 @@
-import type { ReactElement } from 'react'
 import type { CommonDeviceProperties, Device } from 'seamapi'
 
-import { useDevices, type UseDevicesParams } from 'lib/hooks/use-devices.js'
+import {
+  useDevices,
+  type UseDevicesParams,
+} from 'lib/seam/devices/use-devices.js'
 
 export type DeviceManagerProps = UseDevicesParams
 
 /**
  * Fetch, list, and manage devices.
  */
-export const DeviceManager = (props: DeviceManagerProps): ReactElement => {
+export const DeviceManager = (props: DeviceManagerProps): JSX.Element => {
   const { devices, isLoading, isError, error } = useDevices(props)
 
   if (isLoading) return <p role='loading'>{t.loading}</p>
@@ -30,7 +32,7 @@ export const DeviceManager = (props: DeviceManagerProps): ReactElement => {
 
 const DeviceManagerItem = (
   props: Device<CommonDeviceProperties>
-): ReactElement => {
+): JSX.Element => {
   return (
     <li>
       <p>

package/src/lib/ui/DeviceManager/index.ts

@@ -0,0 +1 @@
+export * from './DeviceManager.js'

package/src/lib/ui/IconButton.tsx

@@ -0,0 +1,5 @@
+import type { ButtonProps } from 'lib/ui/types.js'
+
+export function IconButton(props: ButtonProps) {
+  return <button {...props} className='seam-button seam-icon-button' />
+}

package/src/lib/ui/Table/TableBody.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function TableBody(props: { children: ReactNode }) {
+  return <div className='seam-table-body'>{props.children}</div>
+}

package/src/lib/ui/Table/TableCell.tsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames'
+
+import type { DivProps } from 'lib/ui/types.js'
+
+export function TableCell({ className, ...otherProps }: DivProps) {
+  return (
+    <div className={classNames('seam-table-cell', className)} {...otherProps} />
+  )
+}

package/src/lib/ui/Table/TableHeader.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function TableHeader(props: { children: ReactNode }) {
+  return <div className='seam-table-header'>{props.children}</div>
+}

package/src/lib/ui/Table/TableRow.tsx

@@ -0,0 +1,5 @@
+import type { DivProps } from 'lib/ui/types.js'
+
+export function TableRow(props: DivProps) {
+  return <div className='seam-table-row'>{props.children}</div>
+}

package/src/lib/ui/Table/TableTitle.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function TableTitle(props: { children: ReactNode }) {
+  return <h5 className='seam-table-title'>{props.children}</h5>
+}

package/src/lib/ui/Table/index.ts

@@ -0,0 +1,5 @@
+export * from './TableBody.js'
+export * from './TableCell.js'
+export * from './TableHeader.js'
+export * from './TableRow.js'
+export * from './TableTitle.js'