@seamapi/react 1.17.0 → 1.18.0

package/lib/ui/device/OnlineStatus.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { LockDevice } from 'seamapi';
+import type { CommonDevice } from 'seamapi';
 interface OnlineStatusProps {
-    device: LockDevice;
+    device: CommonDevice;
 }
 export declare function OnlineStatus(props: OnlineStatusProps): JSX.Element;
 export {};

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.17.0";
+declare const seamapiReactVersion = "1.18.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.17.0';
+const seamapiReactVersion = '1.18.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -110,7 +110,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^6.3.0",
+    "seamapi": "^6.7.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -121,7 +121,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@r2wc/react-to-web-component": "^2.0.2",
-    "@seamapi/fake-seam-connect": "^0.7.2",
+    "@seamapi/fake-seam-connect": "^0.8.0",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-interactions": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,7 +1,5 @@
-import type { LockDevice } from 'seamapi'
+import { isLockDevice, type LockDevice } from 'seamapi'
 
-import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
-import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
@@ -17,20 +15,27 @@ export function AccessCodeDevice({
 }): JSX.Element | null {
   const { isLoading, device } = useDevice({ device_id: deviceId })
 
-  if (isLoading || device == null || !isLockDevice(device)) {
+  if (isLoading) {
     return null
   }
 
-  return <LockDeviceDetails device={device} onSelectDevice={onSelectDevice} />
+  if (device == null) {
+    return null
+  }
+
+  if (!isLockDevice(device)) {
+    return null
+  }
+
+  return <Content device={device} onSelectDevice={onSelectDevice} />
 }
 
-function LockDeviceDetails(props: {
+function Content(props: {
   device: LockDevice
   onSelectDevice: (deviceId: string) => void
 }): JSX.Element {
   const { device, onSelectDevice } = props
   const toggleLock = useToggleLock(device)
-  const model = getDeviceModel(device)
 
   const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
@@ -40,7 +45,7 @@ function LockDeviceDetails(props: {
         <DeviceImage device={device} />
       </div>
       <div className='seam-body'>
-        <div className='seam-model'>{model}</div>
+        <div className='seam-model'>{device.properties.model.display_name}</div>
         <TextButton
           onClick={() => {
             onSelectDevice(device.device_id)

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -118,7 +118,7 @@ export function AccessCodeTable({
         />
       </TableHeader>
       <TableBody>
-        <Body
+        <Content
           accessCodes={filteredAccessCodes}
           onAccessCodeClick={handleAccessCodeClick}
         />
@@ -127,7 +127,7 @@ export function AccessCodeTable({
   )
 }
 
-function Body(props: {
+function Content(props: {
   accessCodes: Array<UseAccessCodesData[number]>
   onAccessCodeClick: (accessCodeId: string) => void
 }): JSX.Element {

package/src/lib/seam/components/DeviceDetails/DeviceDetails.tsx

@@ -1,20 +1,7 @@
-import classNames from 'classnames'
-import type { LockDevice } from 'seamapi'
+import { isLockDevice } from 'seamapi'
 
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
-import { AccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
-import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
-import { isLockDevice } from 'lib/seam/devices/types.js'
+import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
-import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
-import { Alerts } from 'lib/ui/Alert/Alerts.js'
-import { Button } from 'lib/ui/Button.js'
-import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
-import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
-import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
@@ -35,148 +22,15 @@ export function DeviceDetails({
     return null
   }
 
-  if (!isLockDevice(device)) {
-    return null
-  }
-
-  return (
-    <LockDeviceDetails className={className} device={device} onBack={onBack} />
-  )
-}
-
-function LockDeviceDetails(props: {
-  device: LockDevice
-  onBack?: () => void
-  className?: string
-}): JSX.Element | null {
-  const { device, onBack, className } = props
-
-  const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
-  const toggleLock = useToggleLock(device)
-  const { accessCodes } = useAccessCodes({
-    device_id: device.device_id,
-  })
-
-  const lockStatus = device.properties.locked ? t.locked : t.unlocked
-  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
-
-  const accessCodeCount = accessCodes?.length
-
-  const accessCodeLength =
-    device.properties?.schlage_metadata?.access_code_length
-
-  if (accessCodes == null) {
-    return null
-  }
-
-  if (accessCodesOpen) {
+  if (isLockDevice(device)) {
     return (
-      <AccessCodeTable
+      <LockDeviceDetails
         className={className}
-        deviceId={device.device_id}
-        onBack={toggleAccessCodesOpen}
+        device={device}
+        onBack={onBack}
       />
     )
   }
 
-  const alerts = [
-    ...device.errors.map((error) => ({
-      variant: 'error' as const,
-      message: error.message,
-    })),
-    ...device.warnings.map((warning) => ({
-      variant: 'warning' as const,
-      message: warning.message,
-    })),
-  ]
-
-  return (
-    <div className={classNames('seam-device-details', className)}>
-      <ContentHeader title='Device' onBack={onBack} />
-      <div className='seam-body'>
-        <div className='seam-summary'>
-          <div className='seam-content'>
-            <div className='seam-image'>
-              <DeviceImage device={device} />
-            </div>
-            <div className='seam-info'>
-              <span className='seam-label'>{t.device}</span>
-              <h4 className='seam-device-name'>{device.properties.name}</h4>
-              <div className='seam-properties'>
-                <span className='seam-label'>{t.status}:</span>{' '}
-                <OnlineStatus device={device} />
-                <span className='seam-label'>{t.power}:</span>{' '}
-                <BatteryStatus device={device} />
-                <DeviceModel device={device} />
-              </div>
-            </div>
-          </div>
-          <Alerts alerts={alerts} className='seam-alerts-space-top' />
-        </div>
-        <div className='seam-box'>
-          <div
-            className='seam-content seam-access-codes'
-            onClick={toggleAccessCodesOpen}
-          >
-            <span className='seam-value'>
-              {accessCodeCount} {t.accessCodes}
-            </span>
-            <ChevronRightIcon />
-          </div>
-        </div>
-
-        <div className='seam-box'>
-          <div className='seam-content seam-lock-status'>
-            <div>
-              <span className='seam-label'>{t.lockStatus}</span>
-              <span className='seam-value'>{lockStatus}</span>
-            </div>
-            <div className='seam-right'>
-              <Button
-                size='small'
-                onClick={() => {
-                  toggleLock.mutate()
-                }}
-              >
-                {toggleLockLabel}
-              </Button>
-            </div>
-          </div>
-          <AccessCodeLength accessCodeLength={accessCodeLength} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function AccessCodeLength(props: {
-  accessCodeLength: number | null | undefined
-}): JSX.Element | 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 = {
-  device: 'Device',
-  unlock: 'Unlock',
-  lock: 'Lock',
-  locked: 'Locked',
-  unlocked: 'Unlocked',
-  accessCodes: 'access codes',
-  codeLength: 'Code length',
-  digits: 'digits',
-  lockStatus: 'Lock status',
-  status: 'Status',
-  power: 'Power',
+  return null
 }

package/src/lib/seam/components/DeviceDetails/DeviceModel.tsx

@@ -1,34 +1,20 @@
-import type { LockDevice } from 'seamapi'
+import type { CommonDevice } from 'seamapi'
 
 interface DeviceModelProps {
-  device: LockDevice
+  device: CommonDevice
 }
 
 export function DeviceModel({ device }: DeviceModelProps): JSX.Element | null {
-  const model = getDeviceModel(device)
-  if (model == null) {
-    return null
-  }
-
   return (
     <>
       <span className='seam-label'>{t.model}:</span>{' '}
-      <div className='seam-device-model'>{model}</div>
+      <div className='seam-device-model'>
+        {device.properties.model.display_name}
+      </div>
     </>
   )
 }
 
-export const getDeviceModel = ({
-  properties,
-}: LockDevice): string | undefined => {
-  return (
-    properties?.august_metadata?.model ??
-    properties?.schlage_metadata?.model ??
-    t.fallbackModel
-  )
-}
-
 const t = {
   model: 'Model',
-  fallbackModel: 'Unknown Lock',
 }

package/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -0,0 +1,158 @@
+import classNames from 'classnames'
+import type { LockDevice } from 'seamapi'
+
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
+import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
+import { Alerts } from 'lib/ui/Alert/Alerts.js'
+import { Button } from 'lib/ui/Button.js'
+import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+export function LockDeviceDetails(props: {
+  device: LockDevice
+  onBack?: () => void
+  className?: string
+}): JSX.Element | null {
+  const { device, onBack, className } = props
+
+  const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
+  const toggleLock = useToggleLock(device)
+  const { accessCodes } = useAccessCodes({
+    device_id: device.device_id,
+  })
+
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
+
+  const accessCodeCount = accessCodes?.length
+
+  if (accessCodes == null) {
+    return null
+  }
+
+  if (accessCodesOpen) {
+    return (
+      <AccessCodeTable
+        className={className}
+        deviceId={device.device_id}
+        onBack={toggleAccessCodesOpen}
+      />
+    )
+  }
+
+  const alerts = [
+    ...device.errors.map((error) => ({
+      variant: 'error' as const,
+      message: error.message,
+    })),
+    ...device.warnings.map((warning) => ({
+      variant: 'warning' as const,
+      message: warning.message,
+    })),
+  ]
+
+  return (
+    <div className={classNames('seam-device-details', className)}>
+      <ContentHeader title='Device' onBack={onBack} />
+      <div className='seam-body'>
+        <div className='seam-summary'>
+          <div className='seam-content'>
+            <div className='seam-image'>
+              <DeviceImage device={device} />
+            </div>
+            <div className='seam-info'>
+              <span className='seam-label'>{t.device}</span>
+              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
+                <OnlineStatus device={device} />
+                <span className='seam-label'>{t.power}:</span>{' '}
+                <BatteryStatus device={device} />
+                <DeviceModel device={device} />
+              </div>
+            </div>
+          </div>
+          <Alerts alerts={alerts} className='seam-alerts-space-top' />
+        </div>
+        <div className='seam-box'>
+          <div
+            className='seam-content seam-access-codes'
+            onClick={toggleAccessCodesOpen}
+          >
+            <span className='seam-value'>
+              {accessCodeCount} {t.accessCodes}
+            </span>
+            <ChevronRightIcon />
+          </div>
+        </div>
+
+        <div className='seam-box'>
+          <div className='seam-content seam-lock-status'>
+            <div>
+              <span className='seam-label'>{t.lockStatus}</span>
+              <span className='seam-value'>{lockStatus}</span>
+            </div>
+            <div className='seam-right'>
+              <Button
+                size='small'
+                onClick={() => {
+                  toggleLock.mutate()
+                }}
+              >
+                {toggleLockLabel}
+              </Button>
+            </div>
+          </div>
+          <AccessCodeLength
+            supportedCodeLengths={
+              device.properties?.supported_code_lengths ?? []
+            }
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AccessCodeLength(props: {
+  supportedCodeLengths: number[]
+}): JSX.Element | null {
+  const { supportedCodeLengths } = props
+
+  if (supportedCodeLengths.length === 0) {
+    return null
+  }
+
+  const min = Math.min(...supportedCodeLengths)
+  const max = Math.max(...supportedCodeLengths)
+
+  const range = min === max ? max : `${min}–${max}`
+
+  return (
+    <div className='seam-content seam-access-code-length'>
+      <span className='seam-label'>{t.codeLength}</span>
+      <span className='seam-value'>
+        {range} {t.digits}
+      </span>
+    </div>
+  )
+}
+
+const t = {
+  device: 'Device',
+  unlock: 'Unlock',
+  lock: 'Lock',
+  locked: 'Locked',
+  unlocked: 'Unlocked',
+  accessCodes: 'access codes',
+  codeLength: 'Code length',
+  digits: 'digits',
+  lockStatus: 'Lock status',
+  status: 'Status',
+  power: 'Power',
+}

package/src/lib/seam/components/DeviceTable/DeviceRow.tsx

@@ -1,5 +1,3 @@
-import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
-import { isLockDevice } from 'lib/seam/devices/types.js'
 import type {
   UseDevicesData,
   UseDevicesParams,
@@ -27,12 +25,6 @@ export function DeviceRow({
   device,
   onClick,
 }: DeviceRowProps): JSX.Element | null {
-  if (!isLockDevice(device)) {
-    return null
-  }
-
-  const deviceModel = getDeviceModel(device) ?? t.unknownLock
-
   return (
     <TableRow key={device.device_id} onClick={onClick}>
       <TableCell className='seam-image-cell'>
@@ -41,7 +33,9 @@ export function DeviceRow({
       <TableCell className='seam-body-cell'>
         <Title className='seam-truncated-text'>{device.properties.name}</Title>
         <div className='seam-bottom'>
-          <span className='seam-device-model'>{deviceModel}</span>
+          <span className='seam-device-model'>
+            {device.properties.model.display_name}
+          </span>
           <div className='seam-device-statuses'>
             <OnlineStatus device={device} />
             <BatteryStatus device={device} />
@@ -52,9 +46,3 @@ export function DeviceRow({
     </TableRow>
   )
 }
-
-const t = {
-  devices: 'Devices',
-  unknownLock: 'Unknown Lock',
-  noDevicesMessage: 'Sorry, no devices were found',
-}

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
+import { isLockDevice } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
@@ -60,6 +61,7 @@ export function DeviceTable({
   const filteredDevices = useMemo(
     () =>
       devices
+        ?.filter(isLockDevice)
         ?.filter((device) => deviceFilter(device, searchInputValue))
         ?.sort(deviceComparator) ?? [],
     [devices, searchInputValue, deviceFilter, deviceComparator]
@@ -108,13 +110,13 @@ export function DeviceTable({
         />
       </TableHeader>
       <TableBody>
-        <Body devices={filteredDevices} onDeviceClick={handleDeviceClick} />
+        <Content devices={filteredDevices} onDeviceClick={handleDeviceClick} />
       </TableBody>
     </div>
   )
 }
 
-function Body(props: {
+function Content(props: {
   devices: Array<UseDevicesData[number]>
   onDeviceClick: (deviceId: string) => void
 }): JSX.Element {
@@ -159,6 +161,5 @@ function Body(props: {
 
 const t = {
   devices: 'Devices',
-  unknownLock: 'Unknown Lock',
   noDevicesMessage: 'Sorry, no devices were found',
 }

package/src/lib/seam/devices/use-device.ts

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import type {
-  CommonDeviceProperties,
-  Device,
+  CommonDevice,
   DeviceGetRequest,
   DeviceGetResponse,
   SeamError,
@@ -11,7 +10,7 @@ import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceParams = DeviceGetRequest | string
-export type UseDeviceData = Device<CommonDeviceProperties> | null
+export type UseDeviceData = CommonDevice | null
 
 export function useDevice(
   params: DeviceGetRequest

package/src/lib/seam/devices/use-devices.ts

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import type {
-  CommonDeviceProperties,
-  Device,
+  CommonDevice,
   DevicesListRequest,
   DevicesListResponse,
   SeamError,
@@ -11,7 +10,7 @@ import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDevicesParams = DevicesListRequest
-export type UseDevicesData = Array<Device<CommonDeviceProperties>>
+export type UseDevicesData = CommonDevice[]
 
 export function useDevices(
   params?: UseDevicesParams

package/src/lib/seam/devices/use-toggle-lock.ts

@@ -3,15 +3,14 @@ import {
   type UseMutationResult,
   useQueryClient,
 } from '@tanstack/react-query'
-import type {
-  ActionAttempt,
-  CommonDeviceProperties,
-  Device,
-  LockDevice,
-  SeamError,
+import {
+  type ActionAttempt,
+  type CommonDevice,
+  isLockDevice,
+  type LockDevice,
+  type SeamError,
 } from 'seamapi'
 
-import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export function useToggleLock({
@@ -35,7 +34,7 @@ export function useToggleLock({
       return await toggle(deviceId)
     },
     onMutate: () => {
-      queryClient.setQueryData<Array<Device<CommonDeviceProperties>>>(
+      queryClient.setQueryData<CommonDevice[]>(
         ['devices', 'list', {}],
         (devices) => {
           if (devices == null) {