@seamapi/react 1.48.0 → 1.49.0

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/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.element.ts

@@ -7,6 +7,8 @@ export const name = 'seam-climate-setting-schedule-table'
 export const props: ElementProps<ClimateSettingScheduleTableProps> = {
   deviceId: 'string',
   disableSearch: 'boolean',
+  onClimateSettingScheduleClick: 'object',
+  preventDefaultOnClimateSettingScheduleClick: 'boolean',
   climateSettingScheduleFilter: 'object',
   climateSettingScheduleComparator: 'object',
   onBack: 'object',

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

@@ -1,8 +1,9 @@
 import classNames from 'classnames'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import type { ClimateSettingSchedule } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
+import { ClimateSettingScheduleDetails } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js'
 import {
   useClimateSettingSchedules,
   type UseClimateSettingSchedulesData,
@@ -20,6 +21,8 @@ import { ClimateSettingScheduleRow } from './ClimateSettingScheduleRow.js'
 export interface ClimateSettingScheduleTableProps {
   deviceId: string
   disableSearch?: boolean
+  onClimateSettingScheduleClick?: (climateSettingScheduleId: string) => void
+  preventDefaultOnClimateSettingScheduleClick?: boolean
   climateSettingScheduleFilter?: (
     climateSettingSchedule: ClimateSettingSchedule,
     searchInputValue: string
@@ -46,8 +49,11 @@ const defaultClimateSettingScheduleFilter = (
 export function ClimateSettingScheduleTable({
   deviceId,
   disableSearch = false,
+  onClimateSettingScheduleClick = () => {},
+  preventDefaultOnClimateSettingScheduleClick = false,
   climateSettingScheduleFilter = defaultClimateSettingScheduleFilter,
   climateSettingScheduleComparator = compareByCreatedAtDesc,
+
   onBack,
   heading = t.climateSettingSchedules,
   className,
@@ -58,6 +64,10 @@ export function ClimateSettingScheduleTable({
     })
 
   const [searchInputValue, setSearchInputValue] = useState('')
+  const [
+    selectedViewClimateSettingScheduleId,
+    setSelectedViewClimateSettingScheduleId,
+  ] = useState<string | null>(null)
 
   const filteredClimateSettingSchedules = useMemo(
     () =>
@@ -74,6 +84,31 @@ export function ClimateSettingScheduleTable({
     ]
   )
 
+  const handleClimateSettingScheduleClick = useCallback(
+    (climateSettingScheduleId: string): void => {
+      onClimateSettingScheduleClick(climateSettingScheduleId)
+      if (preventDefaultOnClimateSettingScheduleClick) return
+      setSelectedViewClimateSettingScheduleId(climateSettingScheduleId)
+    },
+    [
+      onClimateSettingScheduleClick,
+      preventDefaultOnClimateSettingScheduleClick,
+      setSelectedViewClimateSettingScheduleId,
+    ]
+  )
+
+  if (selectedViewClimateSettingScheduleId != null) {
+    return (
+      <ClimateSettingScheduleDetails
+        className={className}
+        climateSettingScheduleId={selectedViewClimateSettingScheduleId}
+        onBack={() => {
+          setSelectedViewClimateSettingScheduleId(null)
+        }}
+      />
+    )
+  }
+
   if (isLoading) {
     return <p className={className}>...</p>
   }
@@ -105,7 +140,7 @@ export function ClimateSettingScheduleTable({
       <TableBody>
         <Content
           climateSettingSchedules={filteredClimateSettingSchedules}
-          onClimateSettingScheduleClick={() => {}}
+          onClimateSettingScheduleClick={handleClimateSettingScheduleClick}
         />
       </TableBody>
     </div>

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/layout/AccordionRow.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react'
+
+import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+
+interface AccordionRowProps extends PropsWithChildren {
+  label: string
+  rightCollapsedContent?: JSX.Element
+}
+
+export function AccordionRow({
+  label,
+  rightCollapsedContent,
+  children,
+}: AccordionRowProps): JSX.Element {
+  const [isExpanded, toggle] = useToggle()
+
+  return (
+    <div className='seam-accordion-row' aria-expanded={isExpanded}>
+      <button className='seam-accordion-row-trigger' onClick={toggle}>
+        <p className='seam-row-label'>{label}</p>
+        <div className='seam-row-inner-wrap'>
+          <div className='seam-row-trigger-right-content'>
+            {rightCollapsedContent}
+          </div>
+          <div className='seam-accordion-icon-wrap'>
+            <ChevronWideIcon />
+          </div>
+        </div>
+      </button>
+      <div className='seam-accordion-row-content'>
+        <div className='seam-accordion-row-inner-content'>{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/lib/ui/layout/DetailRow.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react'
+
+interface DetailRowProps {
+  label: string
+}
+
+export function DetailRow({
+  label,
+  children,
+}: PropsWithChildren<DetailRowProps>): JSX.Element {
+  return (
+    <div className='seam-detail-row'>
+      <p className='seam-row-label'>{label}</p>
+      <div className='seam-detail-row-right-area-content'>{children}</div>
+    </div>
+  )
+}

package/src/lib/ui/layout/DetailSection.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+
+import { Tooltip } from 'lib/ui/Tooltip/Tooltip.js'
+
+interface DetailSectionProps {
+  label?: string
+  tooltipContent?: string
+}
+
+export function DetailSection({
+  label,
+  tooltipContent,
+  children,
+}: PropsWithChildren<DetailSectionProps>): JSX.Element {
+  return (
+    <div className='seam-detail-section'>
+      <div className='seam-detail-label-wrap'>
+        {label != null && <p className='seam-detail-label'>{label}</p>}
+        {tooltipContent != null && <Tooltip>{tooltipContent}</Tooltip>}
+      </div>
+
+      <div className='seam-detail-group'>{children}</div>
+    </div>
+  )
+}

package/src/lib/ui/layout/DetailSectionGroup.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+export function DetailSectionGroup({
+  children,
+}: PropsWithChildren): JSX.Element {
+  return <div className='seam-detail-sections'>{children}</div>
+}

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.49.0'
 
 export default seamapiReactVersion

package/src/styles/_access-code-details.scss

@@ -33,11 +33,35 @@
           background: colors.$white;
           border: 1px solid colors.$text-gray-2;
           border-radius: 8px;
-          padding: 10px 16px;
           font-weight: 600;
           font-size: 24px;
           line-height: 134%;
           margin-bottom: 8px;
+          display: flex;
+          justify-content: space-between;
+
+          > span {
+            padding: 10px 16px;
+          }
+
+          > .seam-icon-btn {
+            height: auto;
+            border: 0;
+            overflow: visible;
+            padding: 0;
+            padding: 16px 10px;
+            flex: 0 0 48px;
+            border-radius: 0 8px 8px 0;
+            border-left: 1px solid colors.$divider-stroke-light;
+
+            &:hover {
+              background: colors.$item-hover-bg;
+            }
+
+            svg {
+              scale: 0.8333;
+            }
+          }
         }
 
         .seam-duration {
@@ -105,6 +129,23 @@
           display: flex;
           flex: 1;
 
+          &.seam-code-id {
+            display: flex;
+            justify-content: space-between;
+
+            .seam-icon-btn {
+              border: 0;
+
+              &:hover {
+                background: transparent;
+              }
+
+              svg {
+                scale: 0.8333;
+              }
+            }
+          }
+
           .seam-times {
             display: flex;
             flex: 1;

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

@@ -0,0 +1,44 @@
+@use './colors';
+
+@mixin all {
+  .seam-climate-setting-schedule-details {
+    .seam-climate-setting-schedule-details-content {
+      margin: 0 16px;
+    }
+
+    .seam-climate-setting-details-value {
+      font-style: normal;
+      font-weight: 400;
+      line-height: 118%;
+      font-size: 14px;
+      color: colors.$text-gray-1;
+
+      &.seam-climate-setting-details-schedule-range {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .seam-default-setting-message-container {
+      display: flex;
+      justify-content: center;
+      margin: 16px 0;
+
+      .seam-default-setting-message {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 115%;
+        color: colors.$text-gray-2;
+
+        .seam-default-setting-text {
+          color: colors.$text-gray-1;
+        }
+      }
+    }
+
+    .seam-creation-date {
+      color: colors.$text-gray-1;
+    }
+  }
+}

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;