@seamapi/react 4.2.0 → 4.3.0

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/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.2.0'
+const seamapiReactVersion = '4.3.0'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -29,6 +29,7 @@
 @use './time-zone-picker';
 @use './tab-set';
 @use './noise-sensor';
+@use './seam-editable-device-name';
 
 .seam-components {
   // Reset
@@ -54,6 +55,7 @@
   @include switch.all;
   @include time-zone-picker.all;
   @include tab-set.all;
+  @include seam-editable-device-name.all;
 
   // Components
   @include device-details.all;

package/src/styles/_seam-editable-device-name.scss

@@ -0,0 +1,62 @@
+@use './colors';
+
+@mixin all {
+  .seam-editable-device-name {
+    input {
+      border: none;
+      background-color: transparent;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      font-family: inherit;
+      margin: 0;
+      padding: 0;
+      border-bottom: 1px dashed currentcolor;
+      outline: none;
+    }
+
+    &-input-wrapper {
+      display: inline-flex;
+      flex-flow: column nowrap;
+    }
+
+    &-input-error {
+      color: colors.$status-red;
+      font-size: 0.8em;
+      margin-top: 5px;
+    }
+
+    &-icon-wrapper {
+      margin-left: 10px;
+      display: inline-flex;
+      flex-flow: row nowrap;
+      gap: 5px;
+    }
+
+    &-icon-button {
+      display: inline-flex;
+      padding: 0;
+      margin: 0;
+      background: none;
+      border: none;
+      width: fit-content;
+      cursor: pointer;
+      transform-origin: center;
+      border-radius: 2px;
+
+      path {
+        fill: currentcolor;
+      }
+
+      &:hover {
+        background-color: currentcolor;
+        box-shadow: 0 0 0 2px currentcolor;
+
+        path {
+          fill: white;
+        }
+      }
+    }
+  }
+}