@seamapi/react 4.5.0 → 4.7.0

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

@@ -14,6 +14,7 @@ import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermo
 import { useHeatThermostat } from 'lib/seam/thermostats/use-heat-thermostat.js'
 import { useSetThermostatFanMode } from 'lib/seam/thermostats/use-set-thermostat-fan-mode.js'
 import { useSetThermostatOff } from 'lib/seam/thermostats/use-set-thermostat-off.js'
+import { Button } from 'lib/ui/Button.js'
 import { AccordionRow } from 'lib/ui/layout/AccordionRow.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { DetailRow } from 'lib/ui/layout/DetailRow.js'
@@ -21,6 +22,7 @@ import { DetailSection } from 'lib/ui/layout/DetailSection.js'
 import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
 import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import { ClimatePresets } from 'lib/ui/thermostat/ClimatePresets.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
@@ -40,16 +42,37 @@ export function ThermostatDeviceDetails({
   className,
   onEditName,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
+  const [temperatureUnit, setTemperatureUnit] = useState<
+    'fahrenheit' | 'celsius'
+  >('fahrenheit')
+  const [climateSettingsVisible, setClimateSettingsVisible] = useState(false)
+
   if (device == null) {
     return null
   }
 
+  if (climateSettingsVisible) {
+    return (
+      <ClimatePresets
+        device={device}
+        temperatureUnit={temperatureUnit}
+        onBack={() => {
+          setClimateSettingsVisible(false)
+        }}
+      />
+    )
+  }
+
   return (
     <div className={classNames('seam-device-details', className)}>
       <ContentHeader title={t.thermostat} onBack={onBack} />
 
       <div className='seam-body'>
-        <ThermostatCard device={device} onEditName={onEditName} />
+        <ThermostatCard
+          onTemperatureUnitChange={setTemperatureUnit}
+          device={device}
+          onEditName={onEditName}
+        />
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>
@@ -58,6 +81,12 @@ export function ThermostatDeviceDetails({
               tooltipContent={t.currentSettingsTooltip}
             >
               <ClimateSettingRow device={device} />
+              <ClimatePresetRow
+                onClickManage={() => {
+                  setClimateSettingsVisible(true)
+                }}
+                device={device}
+              />
               <FanModeRow device={device} />
             </DetailSection>
 
@@ -299,16 +328,38 @@ function ClimateSettingRow({
   )
 }
 
+interface ClimatePresetRowProps {
+  device: ThermostatDevice
+  onClickManage: () => void
+}
+
+function ClimatePresetRow({
+  device,
+  onClickManage,
+}: ClimatePresetRowProps): JSX.Element {
+  return (
+    <DetailRow label={t.climatePresets}>
+      <Button onClick={onClickManage}>
+        {t.manageNPresets(
+          (device.properties.available_climate_presets ?? []).length
+        )}
+      </Button>
+    </DetailRow>
+  )
+}
+
 const t = {
   thermostat: 'Thermostat',
   currentSettings: 'Current settings',
   currentSettingsTooltip:
     'These are the settings currently on the device. If you change them here, they change on the device.',
   climate: 'Climate',
+  climatePresets: 'Climate presets',
   fanMode: 'Fan mode',
   none: 'None',
   fanModeSuccess: 'Successfully updated fan mode!',
   fanModeError: 'Error updating fan mode. Please try again.',
   climateSettingError: 'Error updating climate setting. Please try again.',
   saved: 'Saved',
+  manageNPresets: (n: number) => `Manage (${n} Preset${n <= 1 ? '' : 's'})`,
 }

package/src/lib/seam/thermostats/thermostat-device.ts

@@ -13,6 +13,7 @@ export type ThermostatDevice = Omit<Device, 'properties'> & {
         | 'available_hvac_mode_settings'
         | 'fan_mode_setting'
         | 'current_climate_setting'
+        | 'available_climate_presets'
       >
     >
 }
@@ -36,3 +37,6 @@ export interface ClimateSetting {
 export const isThermostatDevice = (
   device: Device
 ): device is ThermostatDevice => 'is_fan_running' in device.properties
+
+export type ThermostatClimatePreset =
+  ThermostatDevice['properties']['available_climate_presets'][number]

package/src/lib/seam/thermostats/unit-conversion.ts

@@ -1,8 +1,12 @@
 import type { Device } from '@seamapi/types/connect'
 
-export const celsiusToFahrenheit = (t: number): number => (t * 9) / 5 + 32
+type ConversionReturn<T> = T extends NonNullable<number> ? number : T
 
-export const fahrenheitToCelsius = (t: number): number => (t - 32) * (5 / 9)
+export const celsiusToFahrenheit = <T>(t: T): ConversionReturn<T> =>
+  (typeof t === 'number' ? (t * 9) / 5 + 32 : t) as ConversionReturn<T>
+
+export const fahrenheitToCelsius = <T>(t: T): ConversionReturn<T> =>
+  (typeof t === 'number' ? (t - 32) * (5 / 9) : t) as ConversionReturn<T>
 
 export const getCoolingSetPointCelsius = (
   variables: {
@@ -87,3 +91,9 @@ export const getHeatingSetPointFahrenheit = (
     undefined
   )
 }
+
+export function getTemperatureUnitSymbol(
+  type: 'fahrenheit' | 'celsius'
+): string {
+  return type === 'fahrenheit' ? '°F' : '°C'
+}

package/src/lib/seam/thermostats/use-create-thermostat-climate-preset.ts

@@ -0,0 +1,101 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsCreateClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type {
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseCreateThermostatClimatePresetParams = never
+export type UseCreateThermostatClimatePresetData = undefined
+
+export type UseCreateThermostatClimatePresetVariables =
+  ThermostatsCreateClimatePresetBody
+
+export function useCreateThermostatClimatePreset(): UseMutationResult<
+  UseCreateThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseCreateThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseCreateThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseCreateThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.createClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(device, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatDevice[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): ThermostatDevice[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, variables)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+const getUpdatedDevice = (
+  device: ThermostatDevice,
+  variables: UseCreateThermostatClimatePresetVariables
+): ThermostatDevice => {
+  const preset: ThermostatClimatePreset = {
+    ...variables,
+    cooling_set_point_celsius: fahrenheitToCelsius(
+      variables.cooling_set_point_fahrenheit
+    ),
+    heating_set_point_celsius: fahrenheitToCelsius(
+      variables.heating_set_point_fahrenheit
+    ),
+    display_name: variables.name ?? variables.climate_preset_key,
+    can_delete: true,
+    can_edit: true,
+    manual_override_allowed: false,
+  }
+
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets: [
+        preset,
+        ...(device.properties.available_climate_presets ?? []),
+      ],
+    },
+  }
+}

package/src/lib/seam/thermostats/use-delete-thermostat-climate-preset.ts

@@ -0,0 +1,84 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsDeleteClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseDeleteThermostatClimatePresetParams = never
+
+export type UseDeleteThermostatClimatePresetData = undefined
+
+export type UseDeleteThermostatClimatePresetVariables =
+  ThermostatsDeleteClimatePresetBody
+
+export function useDeleteThermostatClimatePreset(): UseMutationResult<
+  UseDeleteThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseDeleteThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseDeleteThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseDeleteThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.deleteClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(device, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatDevice[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): ThermostatDevice[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, variables)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedDevice(
+  device: ThermostatDevice,
+  variables: UseDeleteThermostatClimatePresetVariables
+): ThermostatDevice {
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets:
+        device.properties.available_climate_presets.filter((preset) => {
+          return preset.climate_preset_key !== variables.climate_preset_key
+        }),
+    },
+  }
+}

package/src/lib/seam/thermostats/use-update-thermostat-climate-preset.ts

@@ -0,0 +1,103 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsUpdateClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type {
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseUpdateThermostatClimatePresetParams = never
+export type UseUpdateThermostatClimatePresetData = undefined
+
+export type UseUpdateThermostatClimatePresetVariables = Omit<
+  ThermostatsUpdateClimatePresetBody,
+  'manual_override_allowed'
+>
+
+export function useUpdateThermostatClimatePreset(): UseMutationResult<
+  UseUpdateThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseUpdateThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseUpdateThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.createClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(device, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatDevice[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): ThermostatDevice[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, variables)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedDevice(
+  device: ThermostatDevice,
+  variables: UseUpdateThermostatClimatePresetVariables
+): ThermostatDevice {
+  const preset: ThermostatClimatePreset = {
+    ...variables,
+    cooling_set_point_celsius: fahrenheitToCelsius(
+      variables.cooling_set_point_fahrenheit
+    ),
+    heating_set_point_celsius: fahrenheitToCelsius(
+      variables.heating_set_point_fahrenheit
+    ),
+    display_name: variables.name ?? variables.climate_preset_key,
+    can_delete: true,
+    can_edit: true,
+    manual_override_allowed: true,
+  }
+
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets: [
+        preset,
+        ...(device.properties.available_climate_presets ?? []),
+      ],
+    },
+  }
+}

package/src/lib/ui/Button.tsx

@@ -1,14 +1,17 @@
 import classNames from 'classnames'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
 
+import { Spinner } from 'lib/ui/Spinner/Spinner.js'
+
 interface ButtonProps extends PropsWithChildren {
-  variant?: 'solid' | 'outline' | 'neutral'
+  variant?: 'solid' | 'outline' | 'neutral' | 'danger'
   size?: 'small' | 'medium' | 'large'
   type?: 'button' | 'submit'
   disabled?: boolean
   onClick?: MouseEventHandler<HTMLButtonElement>
   className?: string
   onMouseDown?: MouseEventHandler<HTMLButtonElement>
+  loading?: boolean
 }
 
 export function Button({
@@ -20,6 +23,7 @@ export function Button({
   className,
   onMouseDown,
   type = 'button',
+  loading = false,
 }: ButtonProps): JSX.Element {
   return (
     <button
@@ -27,15 +31,28 @@ export function Button({
         `seam-btn seam-btn-${variant} seam-btn-${size}`,
         {
           'seam-btn-disabled': disabled,
+          'seam-btn-loading': loading,
         },
         className
       )}
       disabled={disabled}
-      onClick={onClick}
+      onClick={(e) => {
+        if (loading || disabled) {
+          e.preventDefault()
+          return
+        }
+
+        onClick?.(e)
+      }}
       onMouseDown={onMouseDown}
       type={type}
     >
-      {children}
+      <span className='seam-btn-content'>{children}</span>
+      {loading && (
+        <div className='seam-btn-loading'>
+          <Spinner size='small' />
+        </div>
+      )}
     </button>
   )
 }

package/src/lib/ui/IconButton.tsx

@@ -1,9 +1,26 @@
 import classNames from 'classnames'
+import type { Ref } from 'react'
 
 import type { ButtonProps } from 'lib/ui/types.js'
 
-export function IconButton({ className, ...props }: ButtonProps): JSX.Element {
+export type IconProps = ButtonProps & {
+  elRef?: Ref<HTMLButtonElement>
+}
+
+export function IconButton({
+  className,
+  elRef,
+  ...props
+}: IconProps): JSX.Element {
   return (
-    <button {...props} className={classNames('seam-icon-btn', className)} />
+    <button
+      {...props}
+      ref={elRef}
+      className={classNames(
+        'seam-icon-btn',
+        props.disabled === true && 'seam-icon-btn-disabled',
+        className
+      )}
+    />
   )
 }

package/src/lib/ui/Popover/Popover.tsx

@@ -0,0 +1,168 @@
+import {
+  autoUpdate,
+  flip,
+  limitShift,
+  offset,
+  type ReferenceElement,
+  shift,
+  useFloating,
+} from '@floating-ui/react'
+import {
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+import { seamComponentsClassName } from 'lib/seam/SeamProvider.js'
+
+export interface PopoverInstance {
+  show: () => void
+  hide: () => void
+  toggle: () => void
+}
+
+type PopoverChildren = (
+  params: {
+    setRef: (ref: HTMLElement | undefined | null) => void
+  } & PopoverInstance
+) => ReactNode
+
+export interface PopoverProps {
+  children: PopoverChildren
+  content: ReactNode | ((instance: PopoverInstance) => ReactNode)
+  instanceRef?: Ref<PopoverInstance>
+  preventCloseOnClickOutside?: boolean
+}
+
+export function Popover(props: PopoverProps): JSX.Element {
+  const { children, content, instanceRef, preventCloseOnClickOutside } = props
+
+  const [open, setOpen] = useState(false)
+
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    transform: false,
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom',
+    middleware: [
+      shift({
+        crossAxis: true,
+        limiter: limitShift(),
+      }),
+      flip(),
+      offset(5),
+    ],
+  })
+
+  const referenceEl = useRef<HTMLElement | null>()
+  const floatingEl = useRef<HTMLElement | null>()
+
+  const setFLoating = useCallback(
+    (ref: HTMLElement | null): void => {
+      refs.setFloating(ref)
+      floatingEl.current = ref
+    },
+    [refs, floatingEl]
+  )
+
+  const toggle = useCallback(() => {
+    setOpen((value) => !value)
+  }, [])
+
+  const instance = useMemo(
+    () => ({
+      show: () => {
+        setOpen(true)
+      },
+      hide: () => {
+        setOpen(false)
+      },
+      toggle,
+    }),
+    [toggle]
+  )
+
+  const setReference = useCallback(
+    (ref: ReferenceElement | undefined | null): void => {
+      if (!(ref instanceof HTMLElement) || referenceEl.current === ref) return
+
+      if (referenceEl.current != null) {
+        referenceEl.current.removeEventListener('click', toggle)
+      }
+
+      refs.setReference(ref)
+      ref.addEventListener('click', toggle)
+      referenceEl.current = ref
+    },
+    [toggle, refs]
+  )
+
+  useImperativeHandle(instanceRef, () => instance)
+
+  /**
+   * Closes the popover when the user clicks outside of it.
+   */
+  const windowClickHandler = useCallback((e: MouseEvent): void => {
+    const target = e.target as HTMLElement
+
+    // If the target is the reference element, do nothing.
+    if (
+      referenceEl.current === target ||
+      referenceEl.current?.contains(target) === true
+    ) {
+      return
+    }
+
+    const closest = target.closest('[data-seam-popover]')
+
+    // Prevents closing if target is floating element, also adds support for nested popovers somehow :)
+    if (
+      closest != null &&
+      referenceEl.current != null &&
+      !closest.contains(referenceEl.current)
+    ) {
+      return
+    }
+
+    setOpen(false)
+  }, [])
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (preventCloseOnClickOutside === false) return
+
+      globalThis.addEventListener('click', windowClickHandler)
+    }, 0)
+
+    return () => {
+      globalThis.removeEventListener('click', windowClickHandler)
+    }
+  }, [windowClickHandler, preventCloseOnClickOutside])
+
+  return (
+    <>
+      {children({ setRef: setReference, ...instance })}
+      {open &&
+        createPortal(
+          <div
+            className={seamComponentsClassName}
+            data-seam-popover=''
+            ref={setFLoating}
+            style={floatingStyles}
+          >
+            <div className='seam-popover'>
+              {typeof content === 'function' ? content(instance) : content}
+            </div>
+          </div>,
+          globalThis.document.body
+        )}
+    </>
+  )
+}