@seamapi/react 4.1.0 → 4.3.0

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

@@ -6,6 +6,7 @@ import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceD
 import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useUpdateDeviceName } from 'lib/seam/devices/use-update-device-name.js'
 import { isLockDevice } from 'lib/seam/locks/lock-device.js'
 import { isNoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { isThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
@@ -16,7 +17,6 @@ export interface DeviceDetailsProps extends CommonProps {
 }
 
 export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
-
 export interface NestedSpecificDeviceDetailsProps
   extends Required<Omit<CommonProps, 'onBack' | 'className'>> {
   onBack: (() => void) | undefined
@@ -42,6 +42,19 @@ export function DeviceDetails({
     device_id: deviceId,
   })
 
+  const { mutate: setDeviceName } = useUpdateDeviceName({
+    device_id: deviceId,
+  })
+
+  const updateDeviceName = (newName: string): void => {
+    if (device != null) {
+      setDeviceName({
+        device_id: device.device_id,
+        name: newName,
+      })
+    }
+  }
+
   if (device == null) {
     return null
   }
@@ -60,15 +73,33 @@ export function DeviceDetails({
   }
 
   if (isLockDevice(device)) {
-    return <LockDeviceDetails device={device} {...props} />
+    return (
+      <LockDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   if (isThermostatDevice(device)) {
-    return <ThermostatDeviceDetails device={device} {...props} />
+    return (
+      <ThermostatDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   if (isNoiseSensorDevice(device)) {
-    return <NoiseSensorDeviceDetails device={device} {...props} />
+    return (
+      <NoiseSensorDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   return null

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

@@ -32,7 +32,9 @@ export function DeviceInfo({
       <DetailRow label={t.manufacturer}>
         <div className='seam-detail-row-hstack'>
           {device.properties.model.manufacturer_display_name}
-          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+          {device.properties.manufacturer === 'ecobee' && (
+            <BeeIcon style={{ fontSize: '33px' }} />
+          )}
         </div>
       </DetailRow>
       {!disableConnectedAccountInformation && (

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

@@ -6,6 +6,7 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import type { LockDevice } from 'lib/seam/locks/lock-device.js'
 import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
@@ -19,6 +20,7 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
   device: LockDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function LockDeviceDetails({
@@ -33,6 +35,7 @@ export function LockDeviceDetails({
   disableConnectedAccountInformation,
   onBack,
   className,
+  onEditName,
 }: LockDeviceDetailsProps): JSX.Element | null {
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock()
@@ -95,7 +98,12 @@ export function LockDeviceDetails({
             </div>
             <div className='seam-info'>
               <span className='seam-label'>{t.device}</span>
-              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <SeamEditableDeviceName
+                tagName='h4'
+                value={device.properties.name}
+                className='seam-device-name'
+                onEdit={onEditName}
+              />
               <div className='seam-properties'>
                 <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />

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

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import type { NoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
@@ -18,6 +19,7 @@ type TabType = 'details' | 'activity'
 interface NoiseSensorDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
   device: NoiseSensorDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function NoiseSensorDeviceDetails({
@@ -26,6 +28,7 @@ export function NoiseSensorDeviceDetails({
   disableResourceIds,
   onBack,
   className,
+  onEditName,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
   const [tab, setTab] = useState<TabType>('details')
 
@@ -45,7 +48,11 @@ export function NoiseSensorDeviceDetails({
               </div>
               <div className='seam-info'>
                 <span className='seam-label'>{t.noiseSensor}</span>
-                <h4 className='seam-device-name'>{device.properties.name}</h4>
+                <SeamEditableDeviceName
+                  onEdit={onEditName}
+                  tagName='h4'
+                  value={device.properties.name}
+                />
                 <div className='seam-properties'>
                   <span className='seam-label'>{t.status}:</span>{' '}
                   <OnlineStatus device={device} />

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

@@ -29,6 +29,7 @@ import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 interface ThermostatDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
   device: ThermostatDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function ThermostatDeviceDetails({
@@ -37,6 +38,7 @@ export function ThermostatDeviceDetails({
   disableConnectedAccountInformation,
   onBack,
   className,
+  onEditName,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   if (device == null) {
     return null
@@ -47,7 +49,7 @@ export function ThermostatDeviceDetails({
       <ContentHeader title={t.thermostat} onBack={onBack} />
 
       <div className='seam-body'>
-        <ThermostatCard device={device} />
+        <ThermostatCard device={device} onEditName={onEditName} />
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>

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

@@ -0,0 +1,208 @@
+import classNames from 'classnames'
+import {
+  type ChangeEvent,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  useCallback,
+  useState,
+} from 'react'
+
+import { CheckIcon } from 'lib/icons/Check.js'
+import { CloseIcon } from 'lib/icons/Close.js'
+import { EditIcon } from 'lib/icons/Edit.js'
+
+export type SeamDeviceNameProps = {
+  onEdit?: (newName: string) => void
+  editable?: boolean
+  tagName?: string
+  value: string
+} & HTMLAttributes<HTMLElement>
+
+function IconButton(
+  props: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>
+): JSX.Element {
+  return (
+    <button
+      {...props}
+      className={classNames(
+        'seam-editable-device-name-icon-button',
+        props.className
+      )}
+    >
+      {props.children}
+    </button>
+  )
+}
+
+const fixName = (name: string): string => {
+  return name.replace(/\s+/g, ' ').trim()
+}
+
+type Result = { type: 'success' } | { type: 'error'; message: string }
+
+const isValidName = (name: string): Result => {
+  if (name.length < 2) {
+    return {
+      type: 'error',
+      message: 'Name must be at least 2 characters long',
+    }
+  }
+
+  if (name.length > 64) {
+    return {
+      type: 'error',
+      message: 'Name must be at most 64 characters long',
+    }
+  }
+
+  return {
+    type: 'success',
+  } as const
+}
+
+export function SeamEditableDeviceName({
+  onEdit,
+  editable = true,
+  tagName,
+  value,
+  ...props
+}: SeamDeviceNameProps): JSX.Element {
+  const [editing, setEditing] = useState(false)
+  const [errorText, setErrorText] = useState<null | string>(null)
+  const [currentValue, setCurrentValue] = useState(value)
+  const Tag = (tagName ?? 'span') as 'div'
+
+  const handleCheck = useCallback(() => {
+    const fixedName = fixName(currentValue)
+    const valid = isValidName(fixedName)
+
+    if (valid.type === 'error') {
+      setErrorText(valid.message)
+      return
+    }
+
+    setEditing(false)
+    setCurrentValue(fixedName)
+    onEdit?.(fixedName)
+  }, [currentValue, onEdit])
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>): void => {
+      setCurrentValue(event.target.value)
+      setErrorText(null)
+    },
+    []
+  )
+
+  const handleCancel = useCallback(() => {
+    setEditing(false)
+    setCurrentValue(value)
+    setErrorText(null)
+  }, [value])
+
+  const handleInputKeydown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>): void => {
+      if (e.repeat) return
+
+      if (e.key === 'Enter') {
+        handleCheck()
+      } else if (e.key === 'Escape') {
+        handleCancel()
+      }
+    },
+    [handleCheck, handleCancel]
+  )
+
+  return (
+    <Tag
+      {...props}
+      className={classNames('seam-editable-device-name', props.className)}
+    >
+      <NameView
+        editing={editing}
+        value={currentValue}
+        onChange={handleChange}
+        onKeyDown={handleInputKeydown}
+        errorText={errorText}
+      />
+
+      {editable && (
+        <span className='seam-editable-device-name-icon-wrapper'>
+          <ActionButtons
+            editing={editing}
+            onEdit={() => {
+              setEditing(true)
+            }}
+            onCancel={handleCancel}
+            onCheck={handleCheck}
+          />
+        </span>
+      )}
+    </Tag>
+  )
+}
+
+interface NameViewProps {
+  editing: boolean
+  value: string
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void
+  errorText?: string | null
+}
+
+function NameView(props: NameViewProps): JSX.Element {
+  if (!props.editing) {
+    return <span>{props.value}</span>
+  }
+
+  return (
+    <span className='seam-editable-device-name-input-wrapper'>
+      <input
+        type='text'
+        defaultValue={props.value}
+        onChange={props.onChange}
+        onKeyDown={props.onKeyDown}
+        ref={(el) => {
+          setTimeout(() => {
+            el?.focus()
+          }, 0)
+        }}
+      />
+
+      {props.errorText != null && (
+        <span className='seam-editable-device-name-input-error'>
+          {props.errorText}
+        </span>
+      )}
+    </span>
+  )
+}
+
+interface ActionButtonsProps {
+  onEdit: () => void
+  onCancel: () => void
+  onCheck: () => void
+  editing: boolean
+}
+
+function ActionButtons(props: ActionButtonsProps): JSX.Element {
+  if (props.editing) {
+    return (
+      <>
+        <IconButton onClick={props.onCheck}>
+          <CheckIcon width='1em' height='1em' viewBox='0 0 24 24' />
+        </IconButton>
+        <IconButton onClick={props.onCancel}>
+          <CloseIcon width='1em' height='1em' viewBox='0 0 24 24' />
+        </IconButton>
+      </>
+    )
+  }
+
+  return (
+    <IconButton onClick={props.onEdit}>
+      <EditIcon width='1em' height='1em' viewBox='0 0 24 24' />
+    </IconButton>
+  )
+}

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

@@ -0,0 +1,93 @@
+import type {
+  DevicesGetParams,
+  DevicesUpdateBody,
+  SeamHttpApiError,
+} from '@seamapi/http/connect'
+import type { Device } from '@seamapi/types/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseUpdateDeviceNameParams = never
+
+export type UseUpdateDeviceNameData = undefined
+
+export type UseUpdateDeviceNameMutationVariables = Pick<
+  DevicesUpdateBody,
+  'device_id' | 'name'
+>
+
+type MutationError = SeamHttpApiError
+
+export function useUpdateDeviceName(
+  params: DevicesGetParams
+): UseMutationResult<
+  UseUpdateDeviceNameData,
+  MutationError,
+  UseUpdateDeviceNameMutationVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateDeviceNameData,
+    MutationError,
+    UseUpdateDeviceNameMutationVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.devices.update(variables)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<Device | null>(
+        ['devices', 'get', params],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(
+            device,
+            variables.name ?? device.properties.name
+          )
+        }
+      )
+
+      queryClient.setQueryData<Device[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): Device[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(
+                device,
+                variables.name ?? device.properties.name
+              )
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+const getUpdatedDevice = (device: Device, name: string): Device => {
+  const { properties } = device
+
+  return {
+    ...device,
+    properties: {
+      ...properties,
+      name,
+    },
+  }
+}

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -67,7 +67,10 @@ export function Snackbar({
           'seam-snackbar-visible': automaticVisibility ? !hidden : visible,
         })}
       >
-        <SnackbarIcon variant={variant} />
+        <span className='seam-snackbar-icon-wrap'>
+          <SnackbarIcon variant={variant} />
+        </span>
+
         <div className='seam-snackbar-message-wrap'>
           <p className='seam-snackbar-message'>{message}</p>
         </div>

package/src/lib/ui/device/BatteryStatusIndicator.tsx

@@ -34,7 +34,7 @@ function Content(props: {
   if (status === 'full') {
     return (
       <>
-        <BatteryLevelFullIcon />
+        <BatteryLevelFullIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.full}
           <Percentage level={level} />
@@ -46,7 +46,7 @@ function Content(props: {
   if (status === 'good') {
     return (
       <>
-        <BatteryLevelHighIcon />
+        <BatteryLevelHighIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.high}
           <Percentage level={level} />
@@ -58,7 +58,7 @@ function Content(props: {
   if (status === 'low') {
     return (
       <>
-        <BatteryLevelLowIcon />
+        <BatteryLevelLowIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.low}
           <Percentage level={level} />
@@ -70,7 +70,7 @@ function Content(props: {
   if (status === 'critical') {
     return (
       <>
-        <BatteryLevelCriticalIcon />
+        <BatteryLevelCriticalIcon style={{ fontSize: '24px' }} />
         <span className='seam-text-danger'>
           {t.critical}
           <Percentage level={level} />

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

@@ -25,7 +25,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
 function AccountOfflineContent(): JSX.Element {
   return (
     <>
-      <OnlineStatusAccountOfflineIcon />
+      <OnlineStatusAccountOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.accountOffline}</span>
     </>
   )
@@ -36,7 +36,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
   if (isOnline) {
     return (
       <>
-        <OnlineStatusOnlineIcon />
+        <OnlineStatusOnlineIcon className='seam-font-24' />
         <span className='seam-status-text'>{t.online}</span>
       </>
     )
@@ -44,7 +44,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
 
   return (
     <>
-      <OnlineStatusDeviceOfflineIcon />
+      <OnlineStatusDeviceOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.deviceOffline}</span>
     </>
   )

package/src/lib/ui/thermostat/ClimateModeMenu.tsx

@@ -25,7 +25,7 @@ export function ClimateModeMenu({
           <div className='seam-climate-mode-menu-button-icon'>
             <ModeIcon mode={mode} />
           </div>
-          <ChevronDownIcon />
+          <ChevronDownIcon className='seam-climate-mode-menu-button-chevron' />
         </button>
       )}
       verticalOffset={-180}

package/src/lib/ui/thermostat/ClimateSettingStatus.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
@@ -46,7 +48,14 @@ function ClimateSettingIcon(props: {
   const { mode } = props
 
   return (
-    <div className='seam-climate-setting-status-icon'>
+    <div
+      className={classNames('seam-climate-setting-status-icon', {
+        'seam-climate-setting-status-icon-cool': mode === 'cool',
+        'seam-climate-setting-status-icon-heat': mode === 'heat',
+        'seam-climate-setting-status-icon-heat-cool': mode === 'heat_cool',
+        'seam-climate-setting-status-icon-off': mode === 'off',
+      })}
+    >
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
       {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}

package/src/lib/ui/thermostat/TemperatureControlGroup.tsx

@@ -138,7 +138,7 @@ export function TemperatureControlGroup({
     <div className='seam-temperature-control-group'>
       {showHeat && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatHeatLargeIcon />
+          <ThermostatHeatLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='heat'
             value={heatValue}
@@ -151,7 +151,7 @@ export function TemperatureControlGroup({
 
       {showCool && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatCoolLargeIcon />
+          <ThermostatCoolLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='cool'
             value={coolValue}

package/src/lib/ui/thermostat/ThermostatCard.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 
 import { FanIcon } from 'lib/icons/Fan.js'
 import { OffIcon } from 'lib/icons/Off.js'
+import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
@@ -10,17 +11,18 @@ import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 
 interface ThermostatCardProps {
   device: ThermostatDevice
+  onEditName?: (newName: string) => void
 }
 
-export function ThermostatCard({ device }: ThermostatCardProps): JSX.Element {
+export function ThermostatCard(props: ThermostatCardProps): JSX.Element {
   return (
     <div className='seam-thermostat-card'>
-      <Content device={device} />
+      <Content device={props.device} onEditName={props.onEditName} />
     </div>
   )
 }
 
-function Content(props: { device: ThermostatDevice }): JSX.Element | null {
+function Content(props: ThermostatCardProps): JSX.Element | null {
   const { device } = props
 
   const [temperatureUnit, setTemperatureUnit] = useState<
@@ -50,9 +52,12 @@ function Content(props: { device: ThermostatDevice }): JSX.Element | null {
       </div>
       <div className='seam-thermostat-card-details'>
         <div className='seam-thermostat-heading-wrap'>
-          <h4 className='seam-thermostat-card-heading'>
-            {device.properties.name}
-          </h4>
+          <SeamEditableDeviceName
+            value={device.properties.name}
+            tagName='h4'
+            className='seam-thermostat-card-heading'
+            onEdit={props.onEditName}
+          />
           <button
             onClick={toggleTemperatureUnit}
             className='seam-thermostat-temperature-toggle'

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.1.0'
+const seamapiReactVersion = '4.3.0'
 
 export default seamapiReactVersion

package/src/styles/_access-code-details.scss

@@ -59,7 +59,7 @@
             }
 
             svg {
-              scale: 0.8333;
+              font-size: 20px;
             }
           }
         }
@@ -141,7 +141,7 @@
               }
 
               svg {
-                scale: 0.8333;
+                font-size: 20px;
               }
             }
           }