@seamapi/react 4.6.0 → 4.7.0

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

@@ -0,0 +1,373 @@
+import classNames from 'classnames'
+import {
+  type HTMLAttributes,
+  type Ref,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import { Controller, useForm, type UseFormReturn } from 'react-hook-form'
+
+import type {
+  FanModeSetting,
+  HvacModeSetting,
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
+import { useCreateThermostatClimatePreset } from 'lib/seam/thermostats/use-create-thermostat-climate-preset.js'
+import { useUpdateThermostatClimatePreset } from 'lib/seam/thermostats/use-update-thermostat-climate-preset.js'
+import { Button } from 'lib/ui/Button.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TextField } from 'lib/ui/TextField/TextField.js'
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
+import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
+
+export type ClimatePresetProps = {
+  preset?: ThermostatClimatePreset
+  onBack: () => void
+  device: ThermostatDevice
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export function ClimatePreset(props: ClimatePresetProps): JSX.Element {
+  const { preset, onBack, device, ...attrs } = props
+
+  return (
+    <div
+      {...attrs}
+      className={classNames('seam-thermostat-climate-preset', attrs.className)}
+    >
+      <ContentHeader
+        title={preset == null ? t.crateNewPreset : preset.display_name}
+        onBack={onBack}
+      />
+      {preset == null ? (
+        <CreateForm device={device} onComplete={onBack} />
+      ) : (
+        <UpdateForm device={device} onComplete={onBack} preset={preset} />
+      )}
+    </div>
+  )
+}
+
+interface PresetFormProps {
+  defaultValues: {
+    key: string
+    name: string
+    hvacMode: HvacModeSetting | undefined
+    heatPoint: number | undefined
+    coolPoint: number | undefined
+    fanMode: FanModeSetting | undefined
+  }
+  onSubmit: (values: PresetFormProps['defaultValues']) => void
+  device: ThermostatDevice
+  loading: boolean
+  instanceRef?: Ref<UseFormReturn<PresetFormProps['defaultValues']> | undefined>
+  withKeyField?: boolean
+}
+
+function PresetForm(props: PresetFormProps): JSX.Element {
+  const {
+    defaultValues,
+    device,
+    instanceRef,
+    loading,
+    onSubmit,
+    withKeyField,
+  } = props
+  const form = useForm({ defaultValues })
+
+  useImperativeHandle(instanceRef, () => form)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    setValue,
+    control,
+  } = form
+
+  const state = watch()
+
+  const onHvacModeChange = (mode: HvacModeSetting): void => {
+    if (mode === 'heat_cool') {
+      setValue('heatPoint', defaultValues.heatPoint)
+      setValue('coolPoint', defaultValues.coolPoint)
+    } else if (mode === 'heat') {
+      setValue('heatPoint', defaultValues.heatPoint)
+      setValue('coolPoint', undefined)
+    } else if (mode === 'cool') {
+      setValue('heatPoint', undefined)
+      setValue('coolPoint', defaultValues.coolPoint)
+    } else {
+      setValue('heatPoint', undefined)
+      setValue('coolPoint', undefined)
+    }
+  }
+
+  const otherClimatePresets = useMemo(() => {
+    if (withKeyField !== true) return []
+
+    return (device.properties.available_climate_presets ?? []).filter(
+      (other) => other.climate_preset_key !== defaultValues.key
+    )
+  }, [defaultValues, device, withKeyField])
+
+  const onValid = useCallback(() => {
+    onSubmit(state)
+  }, [onSubmit, state])
+
+  return (
+    <div className='seam-main'>
+      <form
+        onSubmit={(e) => {
+          void handleSubmit(onValid)(e)
+        }}
+      >
+        {withKeyField === true && (
+          <FormField>
+            <InputLabel>Key</InputLabel>
+            <TextField
+              size='large'
+              clearable
+              hasError={errors.key != null}
+              helperText={errors.key?.message}
+              inputProps={{
+                ...register('key', {
+                  required: 'required',
+                  setValueAs: (value) => value.trim(),
+                  validate(value) {
+                    if (value.includes(' ')) {
+                      return t.keyCannotContainSpaces
+                    }
+
+                    const exists = otherClimatePresets.some(
+                      (other) => other.climate_preset_key === value
+                    )
+
+                    if (exists) {
+                      return t.keyAlreadyExists
+                    }
+
+                    return true
+                  },
+                }),
+              }}
+            />
+          </FormField>
+        )}
+
+        <FormField>
+          <InputLabel>{t.nameField}</InputLabel>
+          <TextField
+            size='large'
+            clearable
+            hasError={errors.name != null}
+            helperText={errors.name?.message}
+            inputProps={register('name', {
+              required: false,
+              setValueAs: (value) => value.trim(),
+            })}
+          />
+        </FormField>
+
+        {state.fanMode != null && (
+          <FormField>
+            <InputLabel>{t.fanModeField}</InputLabel>
+            <Controller
+              control={control}
+              name='fanMode'
+              render={({ field: { onChange, value } }) =>
+                value != null ? (
+                  <FanModeMenu
+                    block
+                    size='large'
+                    mode={value}
+                    onChange={onChange}
+                  />
+                ) : (
+                  <></>
+                )
+              }
+            />
+          </FormField>
+        )}
+
+        {state.hvacMode != null && (
+          <FormField>
+            <InputLabel>{t.hvacModeField}</InputLabel>
+            <Controller
+              control={control}
+              name='hvacMode'
+              render={({ field: { onChange, value } }) =>
+                value == null ? (
+                  <></>
+                ) : (
+                  <ClimateModeMenu
+                    block
+                    size='large'
+                    buttonTextVisible
+                    mode={value}
+                    onChange={(value) => {
+                      onHvacModeChange(value)
+                      onChange(value)
+                    }}
+                  />
+                )
+              }
+            />
+          </FormField>
+        )}
+
+        {state.hvacMode !== 'off' && state.hvacMode != null && (
+          <FormField>
+            <InputLabel>{t.heatCoolField}</InputLabel>
+            <TemperatureControlGroup
+              mode={state.hvacMode}
+              onHeatValueChange={(value) => {
+                setValue('heatPoint', value)
+              }}
+              onCoolValueChange={(value) => {
+                setValue('coolPoint', value)
+              }}
+              heatValue={state.heatPoint ?? 0}
+              coolValue={state.coolPoint ?? 0}
+              minHeat={device.properties.min_heating_cooling_delta_fahrenheit}
+              maxHeat={device.properties.max_heating_set_point_fahrenheit}
+              minCool={device.properties.min_cooling_set_point_fahrenheit}
+              maxCool={device.properties.max_cooling_set_point_fahrenheit}
+              delta={device.properties.min_heating_cooling_delta_fahrenheit}
+            />
+          </FormField>
+        )}
+
+        <div className='seam-climate-preset-buttons'>
+          <Button
+            type='submit'
+            variant='solid'
+            disabled={loading}
+            loading={loading}
+          >
+            {t.save}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+interface CreateFormProps {
+  device: ThermostatDevice
+  onComplete: () => void
+}
+
+function CreateForm({ device, onComplete }: CreateFormProps): JSX.Element {
+  const mutation = useCreateThermostatClimatePreset()
+
+  const onSubmit = useCallback(
+    (values: PresetFormProps['defaultValues']) => {
+      mutation.mutate(
+        {
+          climate_preset_key: values.key,
+          device_id: device.device_id,
+          name: values.name === '' ? undefined : values.name,
+          cooling_set_point_fahrenheit: values.coolPoint,
+          heating_set_point_fahrenheit: values.heatPoint,
+          fan_mode_setting: values.fanMode,
+          cooling_set_point_celsius: fahrenheitToCelsius(values.coolPoint),
+          heating_set_point_celsius: fahrenheitToCelsius(values.heatPoint),
+          hvac_mode_setting: values.hvacMode,
+        },
+        { onSuccess: onComplete }
+      )
+    },
+    [device, mutation, onComplete]
+  )
+
+  return (
+    <PresetForm
+      defaultValues={{
+        key: '',
+        coolPoint: 60,
+        heatPoint: 80,
+        name: '',
+        hvacMode: 'off',
+        fanMode: 'auto',
+      }}
+      device={device}
+      loading={mutation.isPending}
+      onSubmit={onSubmit}
+      withKeyField
+    />
+  )
+}
+
+interface UpdateFormProps {
+  device: ThermostatDevice
+  onComplete: () => void
+  preset: ThermostatClimatePreset
+}
+
+function UpdateForm({
+  device,
+  onComplete,
+  preset,
+}: UpdateFormProps): JSX.Element {
+  const mutation = useUpdateThermostatClimatePreset()
+  const defaultValues = useMemo<PresetFormProps['defaultValues']>(
+    () => ({
+      coolPoint: preset.cooling_set_point_fahrenheit ?? 60,
+      heatPoint: preset.heating_set_point_fahrenheit ?? 80,
+      name: preset.display_name,
+      hvacMode: preset.hvac_mode_setting,
+      fanMode: preset.fan_mode_setting,
+      key: preset.climate_preset_key,
+    }),
+    [preset]
+  )
+
+  const onSubmit = useCallback(
+    (values: PresetFormProps['defaultValues']) => {
+      mutation.mutate(
+        {
+          climate_preset_key: values.key,
+          device_id: device.device_id,
+          name: values.name === '' ? undefined : values.name,
+          cooling_set_point_fahrenheit: values.coolPoint,
+          heating_set_point_fahrenheit: values.heatPoint,
+          fan_mode_setting: values.fanMode,
+          cooling_set_point_celsius: fahrenheitToCelsius(values.coolPoint),
+          heating_set_point_celsius: fahrenheitToCelsius(values.heatPoint),
+          hvac_mode_setting: values.hvacMode,
+        },
+        { onSuccess: onComplete }
+      )
+    },
+    [device, mutation, onComplete]
+  )
+
+  return (
+    <PresetForm
+      defaultValues={defaultValues}
+      device={device}
+      loading={mutation.isPending}
+      onSubmit={onSubmit}
+    />
+  )
+}
+
+const t = {
+  keyAlreadyExists: 'Climate Preset with this key already exists.',
+  keyCannotContainSpaces: 'Climate Preset key cannot contain spaces.',
+  nameField: 'Display Name (Optional)',
+  fanModeField: 'Fan Mode',
+  hvacModeField: 'HVAC Mode',
+  heatCoolField: 'Heat / Cool',
+  delete: 'Delete',
+  save: 'Save',
+  crateNewPreset: 'Create New Climate Preset',
+}

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

@@ -0,0 +1,235 @@
+import classNames from 'classnames'
+import { type HTMLAttributes, type ReactNode, useState } from 'react'
+
+import { AddIcon } from 'lib/icons/Add.js'
+import { EditIcon } from 'lib/icons/Edit.js'
+import { FanIcon } from 'lib/icons/Fan.js'
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { TrashIcon } from 'lib/icons/Trash.js'
+import type {
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { getTemperatureUnitSymbol } from 'lib/seam/thermostats/unit-conversion.js'
+import { useDeleteThermostatClimatePreset } from 'lib/seam/thermostats/use-delete-thermostat-climate-preset.js'
+import { Button } from 'lib/ui/Button.js'
+import { IconButton } from 'lib/ui/IconButton.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Popover } from 'lib/ui/Popover/Popover.js'
+import { PopoverContentPrompt } from 'lib/ui/Popover/PopoverContentPrompt.js'
+import { Spinner } from 'lib/ui/Spinner/Spinner.js'
+import { ClimatePreset } from 'lib/ui/thermostat/ClimatePreset.js'
+
+interface ClimatePresetsManagement {
+  device: ThermostatDevice
+  onBack: () => void
+  temperatureUnit: 'fahrenheit' | 'celsius'
+}
+
+const CreateNewPresetSymbol = Symbol('CreateNewPreset')
+
+export function ClimatePresets(props: ClimatePresetsManagement): JSX.Element {
+  const { device, onBack } = props
+
+  const [selectedClimatePreset, setSelectedClimatePreset] = useState<
+    ThermostatClimatePreset | typeof CreateNewPresetSymbol | null
+  >(null)
+
+  const [
+    climatePresetKeySelectedForDeletion,
+    setClimatePresetKeySelectedForDeletion,
+  ] = useState<ThermostatClimatePreset['climate_preset_key'] | null>(null)
+  const deleteMutation = useDeleteThermostatClimatePreset()
+
+  if (
+    selectedClimatePreset != null ||
+    selectedClimatePreset === CreateNewPresetSymbol
+  ) {
+    return (
+      <ClimatePreset
+        onBack={() => {
+          setSelectedClimatePreset(null)
+        }}
+        device={device}
+        preset={
+          selectedClimatePreset === CreateNewPresetSymbol
+            ? undefined
+            : selectedClimatePreset
+        }
+      />
+    )
+  }
+
+  return (
+    <div className='seam-thermostat-climate-presets'>
+      <ContentHeader title={t.title} onBack={onBack} />
+      <div className='seam-thermostat-climate-presets-body'>
+        <Button
+          onClick={() => {
+            setSelectedClimatePreset(CreateNewPresetSymbol)
+          }}
+          className='seam-climate-presets-add-button'
+        >
+          <AddIcon />
+          {t.createNew}
+        </Button>
+
+        <div className='seam-thermostat-climate-presets-cards'>
+          {device.properties.available_climate_presets.map((preset) => (
+            <PresetCard
+              onClickEdit={() => {
+                setSelectedClimatePreset(preset)
+              }}
+              onClickDelete={() => {
+                setClimatePresetKeySelectedForDeletion(
+                  preset.climate_preset_key
+                )
+                deleteMutation.mutate({
+                  climate_preset_key: preset.climate_preset_key,
+                  device_id: device.device_id,
+                })
+              }}
+              temperatureUnit={props.temperatureUnit}
+              preset={preset}
+              key={preset.climate_preset_key}
+              deletionLoading={
+                deleteMutation.isPending &&
+                climatePresetKeySelectedForDeletion ===
+                  preset.climate_preset_key
+              }
+              disabled={
+                deleteMutation.isPending &&
+                climatePresetKeySelectedForDeletion !==
+                  preset.climate_preset_key
+              }
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PresetCard(
+  props: HTMLAttributes<HTMLDivElement> & {
+    preset: ThermostatClimatePreset
+    temperatureUnit: 'fahrenheit' | 'celsius'
+    onClickEdit: () => void
+    onClickDelete: () => void
+    deletionLoading?: boolean
+    disabled?: boolean
+  }
+): JSX.Element {
+  const {
+    preset,
+    temperatureUnit,
+    onClickEdit,
+    onClickDelete,
+    deletionLoading = false,
+    disabled = false,
+    ...attrs
+  } = props
+
+  const heatPoint =
+    temperatureUnit === 'fahrenheit'
+      ? preset.heating_set_point_fahrenheit
+      : (preset.heating_set_point_celsius ?? undefined)
+
+  const coolPoint =
+    temperatureUnit === 'fahrenheit'
+      ? preset.cooling_set_point_fahrenheit
+      : (preset.cooling_set_point_celsius ?? undefined)
+
+  const unitSymbol = getTemperatureUnitSymbol(temperatureUnit)
+
+  return (
+    <div
+      {...attrs}
+      className={classNames(
+        'seam-thermostat-climate-presets-card',
+        attrs.className
+      )}
+    >
+      <div className='seam-thermostat-climate-presets-card-top'>
+        <div className='seam-thermostat-climate-presets-card-name'>
+          {preset.display_name}
+
+          {preset.name != null && (
+            <div className='seam-thermostat-climate-presets-card-name-key'>
+              {preset.climate_preset_key}
+            </div>
+          )}
+        </div>
+
+        <div className='seam-thermostat-climate-presets-card-buttons'>
+          <IconButton
+            disabled={disabled || deletionLoading || !preset.can_edit}
+            onClick={onClickEdit}
+            title={t.edit}
+          >
+            <EditIcon />
+          </IconButton>
+
+          <Popover
+            content={({ hide }) => (
+              <PopoverContentPrompt
+                onCancel={hide}
+                onConfirm={() => {
+                  onClickDelete()
+                  hide()
+                }}
+              />
+            )}
+          >
+            {({ setRef }) => (
+              <IconButton
+                elRef={setRef}
+                disabled={disabled || !preset.can_delete}
+                title={t.delete}
+              >
+                {deletionLoading ? <Spinner size='small' /> : <TrashIcon />}
+              </IconButton>
+            )}
+          </Popover>
+        </div>
+      </div>
+
+      <div className='seam-thermostat-climate-presets-card-body'>
+        {heatPoint != null && (
+          <Chip
+            icon={<ThermostatHeatIcon />}
+            text={`${heatPoint} ${unitSymbol}`}
+          />
+        )}
+
+        {coolPoint != null && (
+          <Chip
+            icon={<ThermostatCoolIcon />}
+            text={`${coolPoint} ${unitSymbol}`}
+          />
+        )}
+
+        {preset.fan_mode_setting != null && (
+          <Chip icon={<FanIcon />} text={preset.fan_mode_setting} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Chip({ icon, text }: { icon: ReactNode; text: string }): JSX.Element {
+  return (
+    <div className='seam-thermostat-climate-preset-chip'>
+      <span className='seam-thermostat-climate-preset-chip-icon'>{icon}</span>
+      <span className='seam-thermostat-climate-preset-chip-value'>{text}</span>
+    </div>
+  )
+}
+
+const t = {
+  title: 'Climate Presets',
+  createNew: 'Create New',
+  delete: 'Delete',
+  edit: 'Edit',
+}

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

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
@@ -10,13 +12,29 @@ const modes: FanModeSetting[] = ['auto', 'on']
 interface FanModeMenuProps {
   mode: FanModeSetting
   onChange: (mode: FanModeSetting) => void
+  block?: boolean
+  size?: 'regular' | 'large'
 }
 
-export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
+export function FanModeMenu({
+  mode,
+  onChange,
+  block,
+  size = 'regular',
+}: FanModeMenuProps): JSX.Element {
   return (
     <Menu
       renderButton={({ onOpen }) => (
-        <button onClick={onOpen} className='seam-fan-mode-menu-button'>
+        <button
+          onClick={onOpen}
+          className={classNames(
+            'seam-fan-mode-menu-button',
+            `seam-fan-mode-menu-button-size-${size}`,
+            {
+              'seam-fan-mode-menu-button-block-sized': block,
+            }
+          )}
+        >
           <div className='seam-fan-mode-menu-button-block'>
             <FanOutlineIcon />
             <span className='seam-fan-mode-menu-button-text'>

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

@@ -12,12 +12,17 @@ import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 interface ThermostatCardProps {
   device: ThermostatDevice
   onEditName?: (newName: string) => void
+  onTemperatureUnitChange?: (temperatureUnit: 'fahrenheit' | 'celsius') => void
 }
 
 export function ThermostatCard(props: ThermostatCardProps): JSX.Element {
   return (
     <div className='seam-thermostat-card'>
-      <Content device={props.device} onEditName={props.onEditName} />
+      <Content
+        device={props.device}
+        onEditName={props.onEditName}
+        onTemperatureUnitChange={props.onTemperatureUnitChange}
+      />
     </div>
   )
 }
@@ -30,9 +35,10 @@ function Content(props: ThermostatCardProps): JSX.Element | null {
   >('fahrenheit')
 
   const toggleTemperatureUnit = (): void => {
-    setTemperatureUnit(
-      temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
-    )
+    const newUnit = temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
+
+    setTemperatureUnit(newUnit)
+    props.onTemperatureUnitChange?.(newUnit)
   }
 
   const {

package/src/lib/ui/types.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes, HtmlHTMLAttributes } from 'react'
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'
 
 export type DivProps = HTMLAttributes<HTMLDivElement>
-export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>
-export type SpanProps = HtmlHTMLAttributes<HTMLSpanElement>
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
+export type SpanProps = HTMLAttributes<HTMLSpanElement>

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.6.0'
+const seamapiReactVersion = '4.7.0'
 
 export default seamapiReactVersion