@seamapi/react 1.47.0 → 1.48.1

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.tsx

@@ -4,7 +4,7 @@ import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-import { ClimateSettingScheduleDetails } from './ClimateSettingScheduleDetails.js'
+import { ClimateSettingScheduleRowDetails } from './ClimateSettingScheduleRowDetails.js'
 
 interface ClimateSettingScheduleRowProps {
   climateSettingSchedule: UseClimateSettingSchedulesData[number]
@@ -26,7 +26,7 @@ export function ClimateSettingScheduleRow({
         <Title className='seam-truncated-text'>
           {climateSettingSchedule.name}
         </Title>
-        <ClimateSettingScheduleDetails
+        <ClimateSettingScheduleRowDetails
           climateSettingSchedule={climateSettingSchedule}
         />
       </TableCell>

package/src/lib/seam/components/ClimateSettingScheduleTable/{ClimateSettingScheduleDetails.tsx → ClimateSettingScheduleRowDetails.tsx}

@@ -6,7 +6,7 @@ import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
-export function ClimateSettingScheduleDetails(props: {
+export function ClimateSettingScheduleRowDetails(props: {
   climateSettingSchedule: ClimateSettingSchedule
 }): JSX.Element {
   const { climateSettingSchedule } = props

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.element.ts

@@ -6,7 +6,11 @@ export const name = 'seam-climate-setting-schedule-table'
 
 export const props: ElementProps<ClimateSettingScheduleTableProps> = {
   deviceId: 'string',
+  disableSearch: 'boolean',
+  climateSettingScheduleFilter: 'object',
+  climateSettingScheduleComparator: 'object',
   onBack: 'object',
+  heading: 'string',
   className: 'string',
 }
 

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

@@ -1,5 +1,8 @@
 import classNames from 'classnames'
+import { useMemo, useState } from 'react'
+import type { ClimateSettingSchedule } from 'seamapi'
 
+import { compareByCreatedAtDesc } from 'lib/dates.js'
 import {
   useClimateSettingSchedules,
   type UseClimateSettingSchedulesData,
@@ -9,19 +12,44 @@ import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
 import { TableTitle } from 'lib/ui/Table/TableTitle.js'
+import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 
 import { ClimateSettingScheduleRow } from './ClimateSettingScheduleRow.js'
 
 export interface ClimateSettingScheduleTableProps {
   deviceId: string
+  disableSearch?: boolean
+  climateSettingScheduleFilter?: (
+    climateSettingSchedule: ClimateSettingSchedule,
+    searchInputValue: string
+  ) => boolean
+  climateSettingScheduleComparator?: (
+    climateSettingScheduleA: ClimateSettingSchedule,
+    climateSettingScheduleB: ClimateSettingSchedule
+  ) => number
   onBack?: () => void
+  heading?: string | null
   className?: string
 }
 
+const defaultClimateSettingScheduleFilter = (
+  climateSettingSchedule: ClimateSettingSchedule,
+  searchInputValue: string
+): boolean => {
+  const value = searchInputValue.trim().toLowerCase()
+  if (value === '') return true
+  const name = climateSettingSchedule.name ?? ''
+  return name.trim().toLowerCase().includes(value)
+}
+
 export function ClimateSettingScheduleTable({
   deviceId,
+  disableSearch = false,
+  climateSettingScheduleFilter = defaultClimateSettingScheduleFilter,
+  climateSettingScheduleComparator = compareByCreatedAtDesc,
   onBack,
+  heading = t.climateSettingSchedules,
   className,
 }: ClimateSettingScheduleTableProps): JSX.Element {
   const { climateSettingSchedules, isLoading, isError, error } =
@@ -29,8 +57,22 @@ export function ClimateSettingScheduleTable({
       device_id: deviceId,
     })
 
-  // TODO filtering
-  const filteredClimateSettingSchedules = climateSettingSchedules ?? []
+  const [searchInputValue, setSearchInputValue] = useState('')
+
+  const filteredClimateSettingSchedules = useMemo(
+    () =>
+      climateSettingSchedules
+        ?.filter((schedule) =>
+          climateSettingScheduleFilter(schedule, searchInputValue)
+        )
+        ?.sort(climateSettingScheduleComparator) ?? [],
+    [
+      climateSettingSchedules,
+      searchInputValue,
+      climateSettingScheduleFilter,
+      climateSettingScheduleComparator,
+    ]
+  )
 
   if (isLoading) {
     return <p className={className}>...</p>
@@ -44,10 +86,21 @@ export function ClimateSettingScheduleTable({
     <div className={classNames('seam-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
-        <TableTitle>
-          {t.climateSettingSchedules}{' '}
-          <Caption>({filteredClimateSettingSchedules.length})</Caption>
-        </TableTitle>
+        {heading != null ? (
+          <TableTitle>
+            {heading ?? t.climateSettingSchedules}{' '}
+            <Caption>({filteredClimateSettingSchedules.length})</Caption>
+          </TableTitle>
+        ) : (
+          <div className='seam-fragment' />
+        )}
+        {!disableSearch && (
+          <SearchTextField
+            value={searchInputValue}
+            onChange={setSearchInputValue}
+            disabled={(climateSettingSchedules?.length ?? 0) === 0}
+          />
+        )}
       </TableHeader>
       <TableBody>
         <Content

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
-import { isLockDevice } from 'seamapi'
+import { isLockDevice, isThermostatDevice } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
@@ -76,7 +76,7 @@ export function DeviceTable({
   const filteredDevices = useMemo(
     () =>
       devices
-        ?.filter(isLockDevice)
+        ?.filter((device) => isLockDevice(device) || isThermostatDevice(device))
         ?.filter((device) => deviceFilter(device, searchInputValue))
         ?.sort(deviceComparator) ?? [],
     [devices, searchInputValue, deviceFilter, deviceComparator]

package/src/lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.ts

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  ClimateSettingSchedule,
+  ClimateSettingScheduleGetRequest,
+  ClimateSettingScheduleGetResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseClimateSettingScheduleParams =
+  | ClimateSettingScheduleGetRequest
+  | string
+
+export type UseClimateSettingScheduleData = ClimateSettingSchedule | null
+
+export function useClimateSettingSchedule(
+  params: UseClimateSettingScheduleParams
+): UseSeamQueryResult<'climateSettingSchedule', UseClimateSettingScheduleData> {
+  const normalizedParams =
+    typeof params === 'string'
+      ? { climate_setting_schedule_id: params }
+      : params
+  const { client } = useSeamClient()
+
+  const { data, ...rest } = useQuery<
+    ClimateSettingScheduleGetResponse['climate_setting_schedule'] | null,
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: [
+      'thermostats',
+      'climate_setting_schedules',
+      'get',
+      normalizedParams,
+    ],
+    queryFn: async () => {
+      if (client == null) return null
+      return await client.thermostats.climateSettingSchedules.get(
+        normalizedParams
+      )
+    },
+  })
+
+  return { ...rest, climateSettingSchedule: data }
+}

package/src/lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.ts

@@ -37,6 +37,7 @@ export function useClimateSettingSchedules(
       for (const schedule of schedules) {
         queryClient.setQueryData(
           [
+            'thermostats',
             'climate_setting_schedules',
             'get',
             {

package/src/lib/seam/thermostats/climate-setting-schedules/use-create-climate-setting-schedule.ts

@@ -0,0 +1,48 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  ClimateSettingSchedule,
+  ClimateSettingScheduleCreateRequest,
+  ClimateSettingScheduleCreateResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseCreateClimateSettingScheduleData = ClimateSettingSchedule
+export type UseCreateClimateSettingScheduleMutationParams =
+  ClimateSettingScheduleCreateRequest
+
+export function useCreateClimateSettingSchedule(): UseMutationResult<
+  UseCreateClimateSettingScheduleData,
+  SeamError,
+  UseCreateClimateSettingScheduleMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    ClimateSettingScheduleCreateResponse['climate_setting_schedule'],
+    SeamError,
+    ClimateSettingScheduleCreateRequest
+  >({
+    mutationFn: async (
+      mutationParams: UseCreateClimateSettingScheduleMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      return await client.thermostats.climateSettingSchedules.create(
+        mutationParams
+      )
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries([
+        'thermostats',
+        'climate_setting_schedules',
+        'list',
+      ])
+    },
+  })
+}

package/src/lib/seam/thermostats/climate-setting-schedules/use-delete-climate-setting-schedule.ts

@@ -0,0 +1,53 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  ClimateSettingScheduleDeleteRequest,
+  ClimateSettingScheduleDeleteResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseDeleteClimateSettingScheduleMutationParams =
+  ClimateSettingScheduleDeleteRequest
+
+export type UseDeleteClimateSettingScheduleData =
+  ClimateSettingScheduleDeleteResponse
+
+export function useDeleteClimateSettingSchedule(): UseMutationResult<
+  UseDeleteClimateSettingScheduleData,
+  SeamError,
+  UseDeleteClimateSettingScheduleMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseDeleteClimateSettingScheduleData,
+    SeamError,
+    ClimateSettingScheduleDeleteRequest
+  >({
+    mutationFn: async (
+      mutationParams: UseDeleteClimateSettingScheduleMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.climateSettingSchedules.delete(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries([
+        'thermostats',
+        'climate_setting_schedules',
+        'get',
+        { climate_setting_schedule_id: variables.climate_setting_schedule_id },
+      ])
+      void queryClient.invalidateQueries([
+        'thermostats',
+        'climate_setting_schedules',
+        'list',
+      ])
+    },
+  })
+}

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

@@ -102,10 +102,10 @@ This is not recommended because the client session is now bound to this machine
   }
 
   const fingerprint =
-    globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
+    globalThis.localStorage?.getItem('seam_user_fingerprint') ??
     `fingerprint_${uuidv4()}`
 
-  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprint)
+  globalThis.localStorage?.setItem('seam_user_fingerprint', fingerprint)
 
   return fingerprint
 }

package/src/lib/ui/AccessCodeForm/AccessCodeFormDatePicker.tsx

@@ -42,7 +42,7 @@ export function AccessCodeFormDatePicker({
         <FormField>
           <InputLabel>{t.startTimeLabel}</InputLabel>
           <DateTimePicker
-            value={startDate == null ? '' : startDate}
+            value={startDate ?? ''}
             onChange={setStartDate}
             size='large'
           />
@@ -50,7 +50,7 @@ export function AccessCodeFormDatePicker({
         <FormField>
           <InputLabel>{t.endTimeLabel}</InputLabel>
           <DateTimePicker
-            value={endDate == null ? '' : endDate}
+            value={endDate ?? ''}
             onChange={setEndDate}
             size='large'
           />

package/src/lib/ui/Menu/Menu.tsx

@@ -47,8 +47,7 @@ export function Menu({
   const [left, setLeft] = useState(0)
 
   useEffect(() => {
-    const containers =
-      globalThis?.document?.querySelectorAll('.seam-components')
+    const containers = globalThis.document?.querySelectorAll('.seam-components')
     if (containers == null) return
     const el = containers[containers.length - 1]
     if (el != null) {
@@ -110,11 +109,11 @@ export function Menu({
 
   useLayoutEffect(() => {
     setPositions()
-    globalThis?.addEventListener('scroll', setPositions)
-    globalThis?.addEventListener('resize', setPositions)
+    globalThis.addEventListener('scroll', setPositions)
+    globalThis.addEventListener('resize', setPositions)
     return () => {
-      globalThis?.removeEventListener('scroll', setPositions)
-      globalThis?.removeEventListener('resize', setPositions)
+      globalThis.removeEventListener('scroll', setPositions)
+      globalThis.removeEventListener('resize', setPositions)
     }
   }, [setPositions])
 

package/src/lib/ui/Switch/Switch.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+
+export interface SwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  enableLabel?: boolean
+}
+
+function Switch({
+  checked,
+  onChange,
+  enableLabel = false,
+}: SwitchProps): JSX.Element {
+  return (
+    <div className='seam-switch-container'>
+      {enableLabel && (
+        <label className='seam-switch-label'>{checked ? t.on : t.off}</label>
+      )}
+      <div
+        className={classNames('seam-switch', {
+          'seam-switch-checked': checked,
+        })}
+        onClick={() => {
+          onChange(!checked)
+        }}
+      >
+        <div className='seam-switch-slider' />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  on: 'On',
+  off: 'Off',
+}
+
+export default Switch

package/src/lib/ui/TextField/TextField.tsx

@@ -74,9 +74,7 @@ export const TextField = forwardRef<
   }
 
   // Maintain a local ref, and still forward it along
-  useImperativeHandle(ref, () => (inputEl != null ? inputEl : undefined), [
-    inputEl,
-  ])
+  useImperativeHandle(ref, () => inputEl ?? undefined, [inputEl])
 
   const endAdornmentVisible = endAdornment != null || clearable
 

package/src/lib/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,64 @@
+import {
+  type MouseEventHandler,
+  type PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react'
+
+import { InfoIcon } from 'lib/icons/Info.js'
+import { InfoDarkIcon } from 'lib/icons/InfoDark.js'
+
+export function Tooltip({ children }: PropsWithChildren): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    const handleClose = (): void => {
+      setIsOpen(false)
+    }
+
+    const handleEscape = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        handleClose()
+      }
+    }
+    if (isOpen) {
+      globalThis.document?.addEventListener('click', handleClose)
+      globalThis.addEventListener?.('keydown', handleEscape)
+    }
+
+    return () => {
+      globalThis.document?.removeEventListener('click', handleClose)
+      globalThis.removeEventListener?.('keydown', handleEscape)
+    }
+  }, [isOpen, setIsOpen])
+
+  const handleToggle: MouseEventHandler<HTMLButtonElement> = (event): void => {
+    event.stopPropagation()
+    setIsOpen((prev) => !prev)
+  }
+
+  return (
+    <div className='seam-tooltip'>
+      <div className='seam-tooltip-trigger-wrap'>
+        <button onClick={handleToggle} className='seam-tooltip-button'>
+          <div className='seam-tooltip-button-icon seam-tooltip-button-icon-default'>
+            <InfoIcon />
+          </div>
+          <div className='seam-tooltip-button-icon seam-tooltip-button-icon-hover'>
+            <InfoDarkIcon />
+          </div>
+        </button>
+      </div>
+
+      <div
+        className='seam-tooltip-popover'
+        aria-expanded={isOpen}
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+      >
+        <p className='seam-tooltip-text'>{children}</p>
+      </div>
+    </div>
+  )
+}

package/src/lib/ui/clipboard.ts

@@ -1,3 +1,3 @@
 export async function copyToClipboard(value: string): Promise<void> {
-  await globalThis?.navigator?.clipboard?.writeText(value)
+  await globalThis.navigator?.clipboard?.writeText(value)
 }

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

@@ -23,16 +23,16 @@ export function ClimateSettingStatus({
       )}
       <Content
         mode={climateSetting.hvac_mode_setting}
-        coolingSetPoint={
+        coolingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.cooling_set_point_fahrenheit
             : climateSetting.cooling_set_point_celsius
-        }
-        heatingSetPoint={
+        )}
+        heatingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.heating_set_point_fahrenheit
             : climateSetting.heating_set_point_celsius
-        }
+        )}
         temperatureUnit={temperatureUnit}
       />
       {iconPlacement === 'right' && (
@@ -59,12 +59,8 @@ function ClimateSettingIcon(props: {
 
 function Content(props: {
   mode: ClimateSetting['hvac_mode_setting']
-  coolingSetPoint:
-    | ClimateSetting['cooling_set_point_fahrenheit']
-    | ClimateSetting['cooling_set_point_celsius']
-  heatingSetPoint:
-    | ClimateSetting['heating_set_point_fahrenheit']
-    | ClimateSetting['heating_set_point_celsius']
+  coolingSetPoint: string
+  heatingSetPoint: string
   temperatureUnit: 'fahrenheit' | 'celsius'
 }): JSX.Element | null {
   const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
@@ -89,6 +85,12 @@ function Content(props: {
   return null
 }
 
+const formatTemperatureValue = (value: number | undefined): string => {
+  if (value == null) return '0'
+  if (Number.isInteger(value)) return value.toFixed()
+  return value.toFixed(1)
+}
+
 const t = {
   degreeFahrenheit: '°F',
   degreeCelsius: '°C',

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

@@ -0,0 +1,121 @@
+import { type ChangeEventHandler, useEffect, useRef } from 'react'
+
+import { TemperatureAddIcon } from 'lib/icons/TemperatureAdd.js'
+import { TemperatureSubtractIcon } from 'lib/icons/TemperatureSubtract.js'
+
+interface TemperatureControlProps {
+  variant: 'heat' | 'cool'
+  value: number
+  onChange: (temperature: number) => void
+  min?: number
+  max?: number
+  unit?: 'fahrenheit' | 'celsius'
+}
+
+export function TemperatureControl({
+  variant,
+  value,
+  onChange,
+  min = 50,
+  max = 90,
+  unit = 'fahrenheit',
+}: TemperatureControlProps): JSX.Element {
+  const increment = (): void => {
+    onChange(Math.min(value + 1, max))
+  }
+
+  const decrement = (): void => {
+    onChange(Math.max(value - 1, min))
+  }
+
+  return (
+    <div className='seam-temperature-control'>
+      <button className='seam-temperature-stepper-button' onClick={decrement}>
+        <TemperatureSubtractIcon />
+      </button>
+      <RangeSlider
+        variant={variant}
+        min={min}
+        max={max}
+        value={value}
+        onChange={(temperature) => {
+          onChange(temperature)
+        }}
+        unit={unit}
+      />
+      <button className='seam-temperature-stepper-button' onClick={increment}>
+        <TemperatureAddIcon />
+      </button>
+    </div>
+  )
+}
+
+interface RangeSliderProps {
+  variant: 'heat' | 'cool'
+  value: number
+  onChange: (temperature: number) => void
+  min: number
+  max: number
+  unit: 'fahrenheit' | 'celsius'
+}
+
+function RangeSlider({
+  variant,
+  value,
+  onChange,
+  min,
+  max,
+  unit,
+}: RangeSliderProps): JSX.Element {
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (wrapRef.current == null || inputRef.current == null) return
+
+    const wrap = wrapRef.current
+    const input = inputRef.current
+
+    wrap.style.setProperty('--temperature-current', input.value)
+    wrap.style.setProperty('--temperature-min', input.min)
+    wrap.style.setProperty('--temperature-max', input.max)
+  }, [value])
+
+  const handleRangeChange: ChangeEventHandler<HTMLInputElement> = (
+    event
+  ): void => {
+    const wrap = wrapRef.current
+
+    if (wrap == null) return
+    const temperature = event.target.value
+    wrap.style.setProperty('--temperature-current', temperature)
+    onChange(Number(temperature))
+  }
+
+  return (
+    <div ref={wrapRef} className='seam-temperature-range-wrap'>
+      <input
+        ref={inputRef}
+        type='range'
+        min={min}
+        max={max}
+        value={value}
+        onChange={handleRangeChange}
+        className='seam-temperature-range'
+        data-variant={variant}
+      />
+
+      <div className='seam-floating-temperature'>
+        <span className='seam-floating-temperature-value'>{value}</span>
+        <span className='seam-floating-temperature-unit'>
+          {unit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  degreeFahrenheit: 'ºF',
+  degreeCelsius: 'ºC',
+}