@seamapi/react 1.48.0 → 1.48.1

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.tsx

@@ -0,0 +1,58 @@
+import { isThermostatDevice, type ThermostatDevice } from 'seamapi'
+
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
+
+export function ClimateSettingScheduleDeviceBar({
+  deviceId,
+}: {
+  deviceId: string
+}): JSX.Element | null {
+  const { isLoading, device } = useDevice({
+    device_id: deviceId,
+  })
+
+  if (isLoading) {
+    return null
+  }
+
+  if (device == null) {
+    return null
+  }
+
+  if (!isThermostatDevice(device)) {
+    return null
+  }
+
+  return <Content device={device} />
+}
+
+function Content(props: { device: ThermostatDevice }): JSX.Element {
+  const { device } = props
+
+  return (
+    <div className='seam-climate-setting-schedule-device-bar'>
+      <div className='seam-climate-setting-schedule-device-content'>
+        <div className='seam-device-image'>
+          <DeviceImage device={device} />
+        </div>
+        <div className='seam-climate-setting-schedule-device-details'>
+          <div className='seam-device-name'>{device.properties.name}</div>
+          <div className='seam-device-current-climate-setting'>
+            {t.currentClimate}:
+            <ClimateSettingStatus
+              climateSetting={device.properties.current_climate_setting}
+            />
+          </div>
+        </div>
+      </div>
+      <ChevronRightIcon />
+    </div>
+  )
+}
+
+const t = {
+  currentClimate: 'Current climate',
+}

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.tsx

@@ -4,7 +4,7 @@ import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-import { ClimateSettingScheduleDetails } from './ClimateSettingScheduleDetails.js'
+import { ClimateSettingScheduleRowDetails } from './ClimateSettingScheduleRowDetails.js'
 
 interface ClimateSettingScheduleRowProps {
   climateSettingSchedule: UseClimateSettingSchedulesData[number]
@@ -26,7 +26,7 @@ export function ClimateSettingScheduleRow({
         <Title className='seam-truncated-text'>
           {climateSettingSchedule.name}
         </Title>
-        <ClimateSettingScheduleDetails
+        <ClimateSettingScheduleRowDetails
           climateSettingSchedule={climateSettingSchedule}
         />
       </TableCell>

package/src/lib/seam/components/ClimateSettingScheduleTable/{ClimateSettingScheduleDetails.tsx → ClimateSettingScheduleRowDetails.tsx}

@@ -6,7 +6,7 @@ import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
-export function ClimateSettingScheduleDetails(props: {
+export function ClimateSettingScheduleRowDetails(props: {
   climateSettingSchedule: ClimateSettingSchedule
 }): JSX.Element {
   const { climateSettingSchedule } = props

package/src/lib/seam/use-seam-client.ts

@@ -102,10 +102,10 @@ This is not recommended because the client session is now bound to this machine
   }
 
   const fingerprint =
-    globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
+    globalThis.localStorage?.getItem('seam_user_fingerprint') ??
     `fingerprint_${uuidv4()}`
 
-  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprint)
+  globalThis.localStorage?.setItem('seam_user_fingerprint', fingerprint)
 
   return fingerprint
 }

package/src/lib/ui/AccessCodeForm/AccessCodeFormDatePicker.tsx

@@ -42,7 +42,7 @@ export function AccessCodeFormDatePicker({
         <FormField>
           <InputLabel>{t.startTimeLabel}</InputLabel>
           <DateTimePicker
-            value={startDate == null ? '' : startDate}
+            value={startDate ?? ''}
             onChange={setStartDate}
             size='large'
           />
@@ -50,7 +50,7 @@ export function AccessCodeFormDatePicker({
         <FormField>
           <InputLabel>{t.endTimeLabel}</InputLabel>
           <DateTimePicker
-            value={endDate == null ? '' : endDate}
+            value={endDate ?? ''}
             onChange={setEndDate}
             size='large'
           />

package/src/lib/ui/Menu/Menu.tsx

@@ -47,8 +47,7 @@ export function Menu({
   const [left, setLeft] = useState(0)
 
   useEffect(() => {
-    const containers =
-      globalThis?.document?.querySelectorAll('.seam-components')
+    const containers = globalThis.document?.querySelectorAll('.seam-components')
     if (containers == null) return
     const el = containers[containers.length - 1]
     if (el != null) {
@@ -110,11 +109,11 @@ export function Menu({
 
   useLayoutEffect(() => {
     setPositions()
-    globalThis?.addEventListener('scroll', setPositions)
-    globalThis?.addEventListener('resize', setPositions)
+    globalThis.addEventListener('scroll', setPositions)
+    globalThis.addEventListener('resize', setPositions)
     return () => {
-      globalThis?.removeEventListener('scroll', setPositions)
-      globalThis?.removeEventListener('resize', setPositions)
+      globalThis.removeEventListener('scroll', setPositions)
+      globalThis.removeEventListener('resize', setPositions)
     }
   }, [setPositions])
 

package/src/lib/ui/Switch/Switch.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+
+export interface SwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  enableLabel?: boolean
+}
+
+function Switch({
+  checked,
+  onChange,
+  enableLabel = false,
+}: SwitchProps): JSX.Element {
+  return (
+    <div className='seam-switch-container'>
+      {enableLabel && (
+        <label className='seam-switch-label'>{checked ? t.on : t.off}</label>
+      )}
+      <div
+        className={classNames('seam-switch', {
+          'seam-switch-checked': checked,
+        })}
+        onClick={() => {
+          onChange(!checked)
+        }}
+      >
+        <div className='seam-switch-slider' />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  on: 'On',
+  off: 'Off',
+}
+
+export default Switch

package/src/lib/ui/TextField/TextField.tsx

@@ -74,9 +74,7 @@ export const TextField = forwardRef<
   }
 
   // Maintain a local ref, and still forward it along
-  useImperativeHandle(ref, () => (inputEl != null ? inputEl : undefined), [
-    inputEl,
-  ])
+  useImperativeHandle(ref, () => inputEl ?? undefined, [inputEl])
 
   const endAdornmentVisible = endAdornment != null || clearable
 

package/src/lib/ui/clipboard.ts

@@ -1,3 +1,3 @@
 export async function copyToClipboard(value: string): Promise<void> {
-  await globalThis?.navigator?.clipboard?.writeText(value)
+  await globalThis.navigator?.clipboard?.writeText(value)
 }

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

@@ -0,0 +1,121 @@
+import { type ChangeEventHandler, useEffect, useRef } from 'react'
+
+import { TemperatureAddIcon } from 'lib/icons/TemperatureAdd.js'
+import { TemperatureSubtractIcon } from 'lib/icons/TemperatureSubtract.js'
+
+interface TemperatureControlProps {
+  variant: 'heat' | 'cool'
+  value: number
+  onChange: (temperature: number) => void
+  min?: number
+  max?: number
+  unit?: 'fahrenheit' | 'celsius'
+}
+
+export function TemperatureControl({
+  variant,
+  value,
+  onChange,
+  min = 50,
+  max = 90,
+  unit = 'fahrenheit',
+}: TemperatureControlProps): JSX.Element {
+  const increment = (): void => {
+    onChange(Math.min(value + 1, max))
+  }
+
+  const decrement = (): void => {
+    onChange(Math.max(value - 1, min))
+  }
+
+  return (
+    <div className='seam-temperature-control'>
+      <button className='seam-temperature-stepper-button' onClick={decrement}>
+        <TemperatureSubtractIcon />
+      </button>
+      <RangeSlider
+        variant={variant}
+        min={min}
+        max={max}
+        value={value}
+        onChange={(temperature) => {
+          onChange(temperature)
+        }}
+        unit={unit}
+      />
+      <button className='seam-temperature-stepper-button' onClick={increment}>
+        <TemperatureAddIcon />
+      </button>
+    </div>
+  )
+}
+
+interface RangeSliderProps {
+  variant: 'heat' | 'cool'
+  value: number
+  onChange: (temperature: number) => void
+  min: number
+  max: number
+  unit: 'fahrenheit' | 'celsius'
+}
+
+function RangeSlider({
+  variant,
+  value,
+  onChange,
+  min,
+  max,
+  unit,
+}: RangeSliderProps): JSX.Element {
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (wrapRef.current == null || inputRef.current == null) return
+
+    const wrap = wrapRef.current
+    const input = inputRef.current
+
+    wrap.style.setProperty('--temperature-current', input.value)
+    wrap.style.setProperty('--temperature-min', input.min)
+    wrap.style.setProperty('--temperature-max', input.max)
+  }, [value])
+
+  const handleRangeChange: ChangeEventHandler<HTMLInputElement> = (
+    event
+  ): void => {
+    const wrap = wrapRef.current
+
+    if (wrap == null) return
+    const temperature = event.target.value
+    wrap.style.setProperty('--temperature-current', temperature)
+    onChange(Number(temperature))
+  }
+
+  return (
+    <div ref={wrapRef} className='seam-temperature-range-wrap'>
+      <input
+        ref={inputRef}
+        type='range'
+        min={min}
+        max={max}
+        value={value}
+        onChange={handleRangeChange}
+        className='seam-temperature-range'
+        data-variant={variant}
+      />
+
+      <div className='seam-floating-temperature'>
+        <span className='seam-floating-temperature-value'>{value}</span>
+        <span className='seam-floating-temperature-unit'>
+          {unit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  degreeFahrenheit: 'ºF',
+  degreeCelsius: 'ºC',
+}

package/src/lib/ui/use-current-time.ts

@@ -0,0 +1,16 @@
+import { DateTime } from 'luxon'
+import { useCallback, useState } from 'react'
+
+import { useInterval } from 'lib/ui/use-interval.js'
+
+export function useCurrentTime(): DateTime {
+  const [date, setDate] = useState<DateTime>(DateTime.now())
+
+  const update = useCallback(() => {
+    setDate(DateTime.now())
+  }, [setDate])
+
+  useInterval(update)
+
+  return date
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.48.0'
+const seamapiReactVersion = '1.48.1'
 
 export default seamapiReactVersion

package/src/styles/_colors.scss

@@ -34,3 +34,7 @@ $pill-green-bg: rgb(98 232 139 / 30%);
 $pill-green-text: #0d8841;
 $pill-blue-bg: rgb(125 192 241 / 30%);
 $pill-blue-text: #1653b8;
+$thermo-orange: #fc8e28;
+$thermo-orange-faded: #fff2e0;
+$thermo-blue: #6b95ff;
+$thermo-blue-faded: #e7f2ff;

package/src/styles/_main.scss

@@ -20,6 +20,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './switch';
 
 .seam-components {
   // Reset
@@ -38,6 +39,7 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include switch.all;
 
   // Components
   @include device-details.all;

package/src/styles/_switch.scss

@@ -0,0 +1,53 @@
+@use './colors';
+
+@mixin all {
+  .seam-switch-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .seam-switch-label {
+      font-style: normal;
+      font-weight: 400;
+      line-height: 118%;
+      font-size: 14px;
+      color: colors.$text-gray-2-5;
+    }
+
+    .seam-switch {
+      position: relative;
+      cursor: pointer;
+
+      .seam-switch-slider::before {
+        position: absolute;
+        content: '';
+        height: 20px;
+        width: 20px;
+        left: 0;
+        bottom: -3px;
+        background-color: colors.$bg-aa;
+        transition: 0.4s;
+        border-radius: 50%;
+        filter: drop-shadow(0 1px 4px rgb(0 0 0 / 25%));
+      }
+
+      .seam-switch-slider {
+        inset: 0;
+        width: 34px;
+        height: 14px;
+        background-color: #ccc;
+        transition: 0.4s;
+        border-radius: 20px;
+      }
+
+      &.seam-switch-checked .seam-switch-slider::before {
+        transform: translateX(14px);
+        background-color: colors.$primary;
+      }
+
+      &.seam-switch-checked .seam-switch-slider {
+        background-color: colors.$primary-dim;
+      }
+    }
+  }
+}