@seamapi/react 2.0.2 → 2.1.1

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import type { HvacModeSetting } from 'seamapi'
+
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { ClimateSettingControlGroup } from 'lib/ui/thermostat/ClimateSettingControlGroup.js'
+
+interface ClimateSettingScheduleFormDefaultClimateSettingProps {
+  title: string
+  deviceId: string
+  onBack: () => void
+  onCancel: (() => void) | undefined
+  onSave: () => void
+}
+
+export function ClimateSettingScheduleFormDefaultClimateSetting({
+  title,
+  deviceId,
+  onBack,
+  onCancel,
+  onSave,
+}: ClimateSettingScheduleFormDefaultClimateSettingProps): JSX.Element {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  const [mode, setMode] = useState<HvacModeSetting>('heat_cool')
+  const [heatValue, setHeatValue] = useState(70)
+  const [coolValue, setCoolValue] = useState(75)
+
+  return (
+    <>
+      <ContentHeader
+        title={title}
+        onBack={onBack}
+        subheading={device?.properties.name}
+      />
+      <div className='seam-main'>
+        <div className='seam-climate-setting-schedule-form-default-climate-setting'>
+          <div className='seam-content'>
+            <div className='seam-default-climate-setting-message'>
+              <p>{t.defaultClimateMessage}</p>
+            </div>
+            <div className='seam-control-group-title'>
+              <InputLabel>{t.defaultClimate}</InputLabel>
+              <span className='seam-label'>{t.defautClimateSubHeading}</span>
+            </div>
+            <ClimateSettingControlGroup
+              mode={mode}
+              onModeChange={setMode}
+              heatValue={heatValue}
+              onHeatValueChange={setHeatValue}
+              coolValue={coolValue}
+              onCoolValueChange={setCoolValue}
+            />
+          </div>
+        </div>
+        <div className='seam-actions'>
+          <Button onClick={onCancel}>{t.cancel}</Button>
+          <Button variant='solid' onClick={onSave}>
+            {t.save}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const t = {
+  defaultClimate: 'Default Climate',
+  defautClimateSubHeading:
+    'Choose the default mode and climate for this device',
+  defaultClimateMessage:
+    'This device doesn’t have a default climate set up yet. Choose the climate you’d like the device to fall back to after scheduled climates reach their ends.',
+  cancel: 'Cancel',
+  save: 'Save',
+}

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.tsx

@@ -7,7 +7,6 @@ import { ThermostatSelect } from 'lib/ui/thermostat/ThermostatSelect.js'
 interface ClimateSettingScheduleFormDeviceSelectProps {
   title: string
   control: Control<ClimateSettingScheduleFormFields>
-  onSelect: () => void
   onBack: (() => void) | undefined
 }
 
@@ -15,7 +14,6 @@ export function ClimateSettingScheduleFormDeviceSelect({
   title,
   control,
   onBack,
-  onSelect,
 }: ClimateSettingScheduleFormDeviceSelectProps): JSX.Element {
   return (
     <>
@@ -28,7 +26,6 @@ export function ClimateSettingScheduleFormDeviceSelect({
             <ThermostatSelect
               onSelect={(deviceId) => {
                 onChange(deviceId)
-                onSelect()
               }}
             />
           )}

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

@@ -0,0 +1,32 @@
+import type { HvacModeSetting } from 'seamapi'
+
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import {
+  TemperatureControlGroup,
+  type TemperatureControlGroupProps,
+} from 'lib/ui/thermostat/TemperatureControlGroup.js'
+
+type ClimateSettingControlGroupProps = Omit<
+  TemperatureControlGroupProps,
+  'mode'
+> & {
+  mode: HvacModeSetting
+  onModeChange: (mode: HvacModeSetting) => void
+}
+
+export function ClimateSettingControlGroup(
+  props: ClimateSettingControlGroupProps
+): JSX.Element {
+  const { mode, onModeChange, ...rest } = props
+  return (
+    <div className='seam-climate-setting-control-group'>
+      <ClimateModeMenu mode={mode} onChange={onModeChange} />
+
+      {mode !== 'off' && (
+        <div className='seam-climate-setting-slider-container'>
+          <TemperatureControlGroup mode={mode} {...rest} />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -10,17 +10,17 @@ import {
 } from 'lib/temperature-bounds.js'
 import { TemperatureControl } from 'lib/ui/thermostat/TemperatureControl.js'
 
-interface TemperatureControlGroupProps {
+export interface TemperatureControlGroupProps {
   mode: Exclude<HvacModeSetting, 'off'>
   heatValue: number
   onHeatValueChange: (temperature: number) => void
   coolValue: number
   onCoolValueChange: (temperature: number) => void
-  delta: number
-  minHeat: number
-  maxHeat: number
-  minCool: number
-  maxCool: number
+  delta?: number
+  minHeat?: number
+  maxHeat?: number
+  minCool?: number
+  maxCool?: number
 }
 
 export function TemperatureControlGroup({
@@ -29,11 +29,11 @@ export function TemperatureControlGroup({
   onHeatValueChange,
   coolValue,
   onCoolValueChange,
-  delta,
-  minHeat,
-  maxHeat,
-  minCool,
-  maxCool,
+  delta = 5,
+  minHeat = 60,
+  maxHeat = 90,
+  minCool = 60,
+  maxCool = 90,
 }: TemperatureControlGroupProps): JSX.Element {
   const showHeat = mode === 'heat' || mode === 'heat_cool'
   const showCool = mode === 'cool' || mode === 'heat_cool'

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.0.2'
+const seamapiReactVersion = '2.1.1'
 
 export default seamapiReactVersion

package/src/styles/_climate-setting-schedule-form.scss

@@ -4,6 +4,8 @@
   .seam-climate-setting-schedule-form {
     @include main;
     @include name-and-schedule;
+    @include default-climate-setting;
+    @include climate-setting;
   }
 }
 
@@ -55,3 +57,55 @@
     }
   }
 }
+
+@mixin default-climate-setting {
+  .seam-climate-setting-schedule-form-default-climate-setting {
+    .seam-control-group-title {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+
+    .seam-label {
+      color: colors.$text-gray-1;
+      font-size: 14px;
+    }
+
+    .seam-default-climate-setting-message {
+      > p {
+        color: colors.$text-gray-1;
+        font-size: 14px;
+        margin-bottom: 16px;
+      }
+
+      margin-top: 4px;
+      border-bottom: 1px solid colors.$divider-stroke-light;
+    }
+
+    .seam-climate-setting-control-group {
+      margin-bottom: 32px;
+    }
+  }
+}
+
+@mixin climate-setting {
+  .seam-climate-setting-schedule-form-climate-setting {
+    .seam-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 24px;
+
+      .seam-label {
+        color: colors.$text-gray-2;
+        font-size: 14px;
+      }
+
+      .seam-climate-setting-slider-container {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}

package/src/styles/_main.scss

@@ -13,6 +13,7 @@
 @use './device-table';
 @use './access-code-details';
 @use './supported-device-table';
+@use './supported-device-table-manufacturer-keys';
 @use './access-code-form';
 @use './input-label';
 @use './form-field';
@@ -59,6 +60,7 @@
   @include climate-setting-schedule-form.all;
   @include alert.all;
   @include supported-device-table.all;
+  @include supported-device-table-manufacturer-keys.all;
   @include thermostat.all;
   @include seam-table.all;
   @include climate-setting-schedule-details.all;

package/src/styles/_supported-device-table-manufacturer-keys.scss

@@ -0,0 +1,19 @@
+@mixin all {
+  .supported-device-table-manufacturer-keys {
+    font-size: 18px;
+
+    .seam-manufacturer-key {
+      display: table-row;
+    }
+
+    .seam-manufacturer-key-value {
+      display: table-cell;
+    }
+
+    .seam-copy-button {
+      display: table-cell;
+      cursor: pointer;
+      padding-left: 10px;
+    }
+  }
+}

package/src/styles/_thermostat.scss

@@ -1,5 +1,19 @@
 @use './colors';
 
+@mixin climate-setting-control-group {
+  .seam-climate-setting-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+
+    .seam-climate-setting-slider-container {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
 @mixin temperature-control-group {
   .seam-temperature-control-group {
     display: flex;
@@ -690,6 +704,7 @@
 }
 
 @mixin all {
+  @include climate-setting-control-group;
   @include temperature-control-group;
   @include temperature-control;
   @include climate-setting-status;