@seamapi/react 3.1.1 → 4.0.0-beta.1

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

@@ -1,79 +0,0 @@
-import { useState } from 'react'
-
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import type { HvacModeSetting } from 'lib/seam/thermostats/thermostat-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

@@ -1,36 +0,0 @@
-import { type Control, Controller } from 'react-hook-form'
-
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { ThermostatSelect } from 'lib/ui/thermostat/ThermostatSelect.js'
-
-interface ClimateSettingScheduleFormDeviceSelectProps {
-  title: string
-  control: Control<ClimateSettingScheduleFormFields>
-  onBack: (() => void) | undefined
-}
-
-export function ClimateSettingScheduleFormDeviceSelect({
-  title,
-  control,
-  onBack,
-}: ClimateSettingScheduleFormDeviceSelectProps): JSX.Element {
-  return (
-    <>
-      <ContentHeader title={title} onBack={onBack} />
-      <div className='seam-main'>
-        <Controller
-          name='deviceId'
-          control={control}
-          render={({ field: { onChange } }) => (
-            <ThermostatSelect
-              onSelect={(deviceId) => {
-                onChange(deviceId)
-              }}
-            />
-          )}
-        />
-      </div>
-    </>
-  )
-}

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

@@ -1,120 +0,0 @@
-import { type Control, Controller } from 'react-hook-form'
-
-import { formatTimeZone } from 'lib/dates.js'
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import { Button } from 'lib/ui/Button.js'
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.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'
-
-interface ClimateSettingScheduleFormNameAndScheduleProps {
-  title: string
-  control: Control<ClimateSettingScheduleFormFields>
-  deviceId: string
-  timeZone: string
-  onBack: () => void
-  onCancel: (() => void) | undefined
-  onNext: () => void
-  onChangeTimeZone: () => void
-}
-
-export function ClimateSettingScheduleFormNameAndSchedule({
-  title,
-  control,
-  deviceId,
-  timeZone,
-  onBack,
-  onCancel,
-  onNext,
-  onChangeTimeZone,
-}: ClimateSettingScheduleFormNameAndScheduleProps): JSX.Element {
-  const { device } = useDevice({
-    device_id: deviceId,
-  })
-
-  return (
-    <>
-      <ContentHeader
-        title={title}
-        onBack={onBack}
-        subheading={device?.properties.name}
-      />
-      <div className='seam-main'>
-        <div className='seam-climate-setting-schedule-form-name-and-schedule'>
-          <div className='seam-content'>
-            <FormField>
-              <InputLabel>{t.nameInputLabel}</InputLabel>
-              <Controller
-                name='name'
-                control={control}
-                defaultValue=''
-                render={({ field, fieldState: { invalid, error } }) => {
-                  return (
-                    <TextField
-                      {...field}
-                      size='large'
-                      clearable
-                      hasError={invalid}
-                      helperText={error?.message}
-                    />
-                  )
-                }}
-              />
-            </FormField>
-
-            <FormField>
-              <InputLabel>{t.startTimeLabel}</InputLabel>
-              <div className='seam-time-zone'>
-                <span className='seam-label'>{t.selectedTimeZoneLabel}</span>
-                <span className='seam-selected' onClick={onChangeTimeZone}>
-                  {formatTimeZone(timeZone)}
-                  <ChevronRightIcon />
-                </span>
-              </div>
-              <Controller
-                name='startDate'
-                control={control}
-                defaultValue=''
-                render={({ field }) => (
-                  <DateTimePicker {...field} size='large' />
-                )}
-              />
-            </FormField>
-            <FormField>
-              <InputLabel>{t.endTimeLabel}</InputLabel>
-              <Controller
-                name='endDate'
-                control={control}
-                defaultValue=''
-                render={({ field }) => (
-                  <DateTimePicker {...field} size='large' />
-                )}
-              />
-            </FormField>
-          </div>
-        </div>
-        <div className='seam-actions'>
-          <Button onClick={onCancel}>{t.cancel}</Button>
-          <Button variant='solid' onClick={onNext}>
-            {t.next}
-          </Button>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const t = {
-  nameInputLabel: 'Name the climate setting schedule',
-  startTimeLabel: 'Start time',
-  endTimeLabel: 'End time',
-  addNewClimateSettingSchedule: 'Add a climate setting schedule',
-  cancel: 'Cancel',
-  save: 'Save',
-  next: 'Next',
-  selectedTimeZoneLabel: 'All times in',
-}

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

@@ -1,43 +0,0 @@
-import { useState } from 'react'
-import { type Control, Controller } from 'react-hook-form'
-
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { TimeZonePicker } from 'lib/ui/TimeZonePicker/TimeZonePicker.js'
-
-interface ClimateSettingScheduleFormTimeZonePickerProps {
-  control: Control<ClimateSettingScheduleFormFields>
-  onClose: () => void
-}
-
-export function ClimateSettingScheduleFormTimeZonePicker({
-  control,
-  onClose,
-}: ClimateSettingScheduleFormTimeZonePickerProps): JSX.Element {
-  const [title, setTitle] = useState(t.titleAuto)
-
-  return (
-    <>
-      <ContentHeader title={title} onBack={onClose} />
-      <div className='seam-main'>
-        <Controller
-          name='timeZone'
-          control={control}
-          render={({ field }) => (
-            <TimeZonePicker
-              {...field}
-              onManualTimeZoneSelected={(manualTimeZoneSelected) => {
-                setTitle(manualTimeZoneSelected ? t.titleManual : t.titleAuto)
-              }}
-            />
-          )}
-        />
-      </div>
-    </>
-  )
-}
-
-const t = {
-  titleAuto: 'Time Zone (automatic)',
-  titleManual: 'Time Zone (manual)',
-}

package/src/lib/ui/ClimateSettingForm/set-point-bounds.ts

@@ -1,31 +0,0 @@
-import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
-import type { TemperatureControlGroupProps } from 'lib/ui/thermostat/TemperatureControlGroup.js'
-
-export type SetPointBounds = Partial<
-  Pick<
-    TemperatureControlGroupProps,
-    'minCool' | 'maxCool' | 'minHeat' | 'maxHeat' | 'delta'
-  >
->
-
-export const getSetPointBounds = (device: ThermostatDevice): SetPointBounds => {
-  const { properties } = device
-
-  const setPointBounds: SetPointBounds = {}
-
-  if (properties.available_hvac_mode_settings.includes('cool')) {
-    setPointBounds.minCool = properties.min_cooling_set_point_fahrenheit
-    setPointBounds.maxCool = properties.max_cooling_set_point_fahrenheit
-  }
-
-  if (properties.available_hvac_mode_settings.includes('heat')) {
-    setPointBounds.minHeat = properties.min_heating_set_point_fahrenheit
-    setPointBounds.maxHeat = properties.max_heating_set_point_fahrenheit
-  }
-
-  if (properties.available_hvac_mode_settings.includes('heat_cool')) {
-    setPointBounds.delta = properties.min_heating_cooling_delta_fahrenheit
-  }
-
-  return setPointBounds
-}