@seamapi/react 4.5.0 → 4.7.0

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.5.0'
+const seamapiReactVersion = '4.7.0'
 
 export default seamapiReactVersion

package/src/styles/_buttons.scss

@@ -1,10 +1,11 @@
 @use './typography';
 @use './colors';
+@use 'sass:color';
 
 @mixin icon-button {
   .seam-icon-btn {
     border-radius: 6px;
-    border: 1px solid rgb(0 122 252 / 50%);
+    border: 1px solid rgba(colors.$primary, 50%);
     cursor: pointer;
     background: colors.$white;
     padding: 2px;
@@ -19,7 +20,19 @@
     }
 
     &:hover {
-      background: rgb(0 122 252 / 8%);
+      background: rgba(colors.$primary, 0.08);
+    }
+
+    &.seam-icon-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-3;
+      background: colors.$white;
+      cursor: not-allowed;
+
+      path {
+        fill: colors.$text-gray-2-5;
+      }
     }
   }
 }
@@ -101,6 +114,23 @@
     }
   }
 
+  &.seam-btn-danger {
+    color: colors.$status-red;
+    border: 1px solid colors.$status-red;
+    background: transparent;
+
+    &:hover {
+      color: color.scale(colors.$status-red, $lightness: 30%);
+      border-color: color.scale(colors.$status-red, $lightness: 30%);
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-2-5;
+    }
+  }
+
   &.seam-btn-neutral {
     color: colors.$text-gray-1;
     border: 1px solid colors.$text-gray-2-5;
@@ -125,6 +155,7 @@
     @include button-size;
     @include button-variant;
 
+    position: relative;
     font-weight: 600;
     cursor: pointer;
 
@@ -132,6 +163,29 @@
     &:disabled {
       cursor: not-allowed;
     }
+
+    .seam-btn-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      --spinner-color: currentcolor;
+    }
+
+    .seam-btn-content {
+      display: contents;
+    }
+
+    &.seam-btn-loading {
+      .seam-btn-content {
+        visibility: hidden;
+      }
+    }
   }
 }
 

package/src/styles/_main.scss

@@ -30,6 +30,7 @@
 @use './tab-set';
 @use './noise-sensor';
 @use './seam-editable-device-name';
+@use './popover';
 
 .seam-components {
   // Reset
@@ -68,4 +69,5 @@
   @include thermostat.all;
   @include seam-table.all;
   @include noise-sensor.all;
+  @include popover.all;
 }

package/src/styles/_popover.scss

@@ -0,0 +1,46 @@
+@use './colors';
+
+@mixin popover {
+  .seam-popover {
+    display: inline-block;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px -2px rgb(0 0 0 / 20%);
+    background-color: colors.$bg-a;
+    border: 1px solid colors.$bg-c;
+  }
+}
+
+@mixin popover-content-prompt {
+  .seam-popover-content-prompt {
+    display: inline-flex;
+    flex-flow: column nowrap;
+    padding: 12px;
+    gap: 12px;
+    background-color: colors.$bg-a;
+  }
+
+  .seam-popover-content-prompt-text {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .seam-popover-content-prompt-description {
+    font-weight: 400;
+    text-align: center;
+    color: colors.$text-gray-2;
+    font-size: 12px;
+  }
+
+  .seam-popover-content-prompt-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+}
+
+@mixin all {
+  @include popover;
+  @include popover-content-prompt;
+}

package/src/styles/_spinner.scss

@@ -17,7 +17,7 @@
   .seam-spinner {
     width: $default-size;
     height: $default-size;
-    border: $default-border-width solid colors.$primary;
+    border: $default-border-width solid var(--spinner-color, colors.$primary);
     border-top: $default-border-width solid transparent;
     display: inline-block;
     border-radius: 50%;

package/src/styles/_thermostat.scss

@@ -1,4 +1,6 @@
 @use './colors';
+@use 'sass:color';
+@use './access-code-form' as acf;
 
 @mixin climate-setting-control-group {
   .seam-climate-setting-control-group {
@@ -542,7 +544,6 @@
 @mixin fan-mode-menu {
   .seam-fan-mode-menu-button {
     width: 130px;
-    height: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -554,6 +555,14 @@
     cursor: pointer;
     transition: 0.2s ease;
 
+    &.seam-fan-mode-menu-button-size-regular {
+      height: 32px;
+    }
+
+    &.seam-fan-mode-menu-button-size-large {
+      height: 48px;
+    }
+
     svg {
       font-size: 20px;
     }
@@ -579,6 +588,10 @@
       }
     }
 
+    &.seam-fan-mode-menu-button-block-sized {
+      width: 100%;
+    }
+
     .seam-fan-mode-menu-button-text {
       color: colors.$text-gray-1;
       font-size: 16px;
@@ -597,12 +610,23 @@
     border: 1px solid colors.$text-gray-3;
     background: colors.$white;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     flex-direction: row;
     cursor: pointer;
     transition: 0.2s ease;
 
+    &.seam-climate-mode-menu-button-regular {
+      height: 32px;
+    }
+
+    &.seam-climate-mode-menu-button-large {
+      height: 48px;
+    }
+
+    &.seam-climate-mode-menu-button-block {
+      width: 100%;
+    }
+
     &:hover {
       border-color: colors.$text-gray-2;
     }
@@ -618,6 +642,12 @@
 
     .seam-climate-mode-menu-button-chevron {
       font-size: 20px;
+      margin-left: auto;
+    }
+
+    .seam-climate-mode-menu-button-text {
+      font-size: 14px;
+      margin-left: 6px;
     }
   }
 
@@ -656,6 +686,126 @@
   }
 }
 
+@mixin climate-presets {
+  .seam-thermostat-climate-presets-body {
+    margin: 0 24px 24px;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 10px;
+    justify-content: center;
+  }
+
+  .seam-thermostat-climate-presets-cards {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+
+  .seam-climate-presets-add-button {
+    margin: 0 auto;
+    display: inline-flex !important;
+    align-items: center;
+    gap: 6px;
+
+    svg {
+      font-size: 20px;
+    }
+
+    svg,
+    path {
+      fill: currentcolor;
+    }
+  }
+
+  .seam-thermostat-climate-presets-card {
+    border-radius: 12px;
+    background-color: colors.$bg-a;
+    width: 100%;
+    max-width: 250px;
+    overflow: hidden;
+
+    .seam-thermostat-climate-presets-card-top {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      justify-content: space-between;
+      border-bottom: 1px solid color.scale(colors.$bg-a, $lightness: -5%);
+      padding: 8px;
+      background-color: colors.$bg-b;
+
+      .seam-thermostat-climate-presets-card-name {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 118%;
+        white-space: nowrap;
+      }
+
+      .seam-thermostat-climate-presets-card-name-key {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 118%;
+        white-space: nowrap;
+        color: colors.$text-gray-2;
+      }
+
+      .seam-thermostat-climate-presets-card-buttons {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: 4px;
+        justify-content: flex-end;
+      }
+    }
+
+    .seam-thermostat-climate-presets-card-body {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 8px;
+      justify-content: space-around;
+    }
+
+    .seam-thermostat-climate-preset-chip {
+      display: inline-flex;
+      flex-flow: row nowrap;
+      gap: 4px;
+      align-items: center;
+      justify-content: space-between;
+      width: max-content;
+
+      .seam-thermostat-climate-preset-chip-icon {
+        color: colors.$text-gray-1;
+        font-weight: 600;
+
+        svg {
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      .seam-thermostat-climate-preset-chip-value {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@mixin climate-preset {
+  .seam-thermostat-climate-preset {
+    @include acf.main;
+
+    .seam-climate-preset-buttons {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 8px;
+    }
+  }
+}
+
 @mixin all {
   @include climate-setting-control-group;
   @include temperature-control-group;
@@ -666,4 +816,6 @@
   @include fan-mode-menu;
   @include climate-mode-menu;
   @include status;
+  @include climate-presets;
+  @include climate-preset;
 }