@seamapi/react 1.49.0 → 1.50.0

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

@@ -7,8 +7,10 @@ import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 
 export function ClimateSettingScheduleDeviceBar({
   deviceId,
+  onSelectDevice,
 }: {
   deviceId: string
+  onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
   const { isLoading, device } = useDevice({
     device_id: deviceId,
@@ -26,14 +28,22 @@ export function ClimateSettingScheduleDeviceBar({
     return null
   }
 
-  return <Content device={device} />
+  return <Content device={device} onSelectDevice={onSelectDevice} />
 }
 
-function Content(props: { device: ThermostatDevice }): JSX.Element {
-  const { device } = props
+function Content(props: {
+  device: ThermostatDevice
+  onSelectDevice: (deviceId: string) => void
+}): JSX.Element {
+  const { device, onSelectDevice } = props
 
   return (
-    <div className='seam-climate-setting-schedule-device-bar'>
+    <div
+      className='seam-climate-setting-schedule-device-bar'
+      onClick={() => {
+        onSelectDevice(device.device_id)
+      }}
+    >
       <div className='seam-climate-setting-schedule-device-content'>
         <div className='seam-device-image'>
           <DeviceImage device={device} />

package/src/lib/seam/connected-accounts/use-connected-account.ts

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  ConnectedAccount,
+  ConnectedAccountsGetRequest,
+  ConnectedAccountsGetResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseConnectedAccountData = ConnectedAccount | null
+
+export function useConnectedAccount(
+  params: ConnectedAccountsGetRequest
+): UseSeamQueryResult<'connectedAccount', UseConnectedAccountData> {
+  const normalizedParams =
+    typeof params === 'string' ? { connected_account_id: params } : params
+
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    ConnectedAccountsGetResponse['connected_account'] | null,
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['connected_accounts', 'get', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return null
+      return await client.connectedAccounts.get(normalizedParams)
+    },
+  })
+
+  return { ...rest, connectedAccount: data }
+}

package/src/lib/seam/index.ts

@@ -1,7 +1,9 @@
 export * from './access-codes/use-access-code.js'
 export * from './access-codes/use-access-codes.js'
 export * from './access-codes/use-create-access-code.js'
+export * from './access-codes/use-generate-access-code-code.js'
 export * from './connect-webviews/use-create-connect-webview.js'
+export * from './connected-accounts/use-connected-account.js'
 export * from './devices/use-device.js'
 export * from './devices/use-device-providers.js'
 export * from './devices/use-devices.js'

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

@@ -2,15 +2,20 @@ import type { PropsWithChildren } from 'react'
 
 interface DetailRowProps {
   label: string
+  sublabel?: string
 }
 
 export function DetailRow({
   label,
+  sublabel,
   children,
 }: PropsWithChildren<DetailRowProps>): JSX.Element {
   return (
     <div className='seam-detail-row'>
-      <p className='seam-row-label'>{label}</p>
+      <div className='seam-detail-row-label-wrap'>
+        <p className='seam-row-label'>{label}</p>
+        {sublabel != null && <p className='seam-row-sublabel'>{sublabel}</p>}
+      </div>
       <div className='seam-detail-row-right-area-content'>{children}</div>
     </div>
   )

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

@@ -4,9 +4,10 @@ import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
+import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 
 interface ClimateSettingStatusProps {
-  climateSetting: Partial<ClimateSetting>
+  climateSetting: ClimateSetting
   temperatureUnit?: 'fahrenheit' | 'celsius'
   iconPlacement?: 'left' | 'right'
 }
@@ -23,16 +24,14 @@ export function ClimateSettingStatus({
       )}
       <Content
         mode={climateSetting.hvac_mode_setting}
-        coolingSetPoint={formatTemperatureValue(
-          temperatureUnit === 'fahrenheit'
-            ? climateSetting.cooling_set_point_fahrenheit
-            : climateSetting.cooling_set_point_celsius
-        )}
-        heatingSetPoint={formatTemperatureValue(
-          temperatureUnit === 'fahrenheit'
-            ? climateSetting.heating_set_point_fahrenheit
-            : climateSetting.heating_set_point_celsius
-        )}
+        coolingSetPoint={{
+          fahrenheit: climateSetting.cooling_set_point_fahrenheit,
+          celsius: climateSetting.cooling_set_point_celsius,
+        }}
+        heatingSetPoint={{
+          fahrenheit: climateSetting.heating_set_point_fahrenheit,
+          celsius: climateSetting.heating_set_point_celsius,
+        }}
         temperatureUnit={temperatureUnit}
       />
       {iconPlacement === 'right' && (
@@ -51,33 +50,42 @@ function ClimateSettingIcon(props: {
     <div className='seam-climate-setting-status-icon'>
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
-      {mode === 'heatcool' && <ThermostatHeatCoolIcon />}
+      {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}
       {mode === 'off' && <ThermostatOffIcon />}
     </div>
   )
 }
 
+interface SetPoint {
+  fahrenheit: number
+  celsius: number
+}
+
 function Content(props: {
   mode: ClimateSetting['hvac_mode_setting']
-  coolingSetPoint: string
-  heatingSetPoint: string
+  coolingSetPoint: Partial<SetPoint>
+  heatingSetPoint: Partial<SetPoint>
   temperatureUnit: 'fahrenheit' | 'celsius'
 }): JSX.Element | null {
   const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
-  const hasCoolingSetPoint = coolingSetPoint !== undefined
-  const hasHeatingSetPoint = heatingSetPoint !== undefined
-  const unit =
-    temperatureUnit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
 
-  if (mode === 'cool' && hasCoolingSetPoint)
-    return <span>{`${coolingSetPoint}${unit}`}</span>
+  if (mode === 'cool' && isSetPoint(coolingSetPoint))
+    return <Temperature {...coolingSetPoint} unit={temperatureUnit} />
 
-  if (mode === 'heat' && hasHeatingSetPoint)
-    return <span>{`${heatingSetPoint}${unit}`}</span>
+  if (mode === 'heat' && isSetPoint(heatingSetPoint))
+    return <Temperature {...heatingSetPoint} unit={temperatureUnit} />
 
-  if (mode === 'heatcool' && hasHeatingSetPoint && hasCoolingSetPoint)
+  if (
+    mode === 'heat_cool' &&
+    isSetPoint(heatingSetPoint) &&
+    isSetPoint(coolingSetPoint)
+  )
     return (
-      <span>{`${heatingSetPoint}${unit} - ${coolingSetPoint}${unit}`}</span>
+      <span>
+        <Temperature {...heatingSetPoint} unit={temperatureUnit} />
+        {' - '}
+        <Temperature {...coolingSetPoint} unit={temperatureUnit} />
+      </span>
     )
 
   if (mode === 'off') return <span>{t.off}</span>
@@ -85,14 +93,10 @@ function Content(props: {
   return null
 }
 
-const formatTemperatureValue = (value: number | undefined): string => {
-  if (value == null) return '0'
-  if (Number.isInteger(value)) return value.toFixed()
-  return value.toFixed(1)
+function isSetPoint(setPoint: Partial<SetPoint>): setPoint is SetPoint {
+  return setPoint.fahrenheit != null && setPoint.celsius != null
 }
 
 const t = {
-  degreeFahrenheit: '°F',
-  degreeCelsius: '°C',
   off: 'Off',
 }

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

@@ -0,0 +1,26 @@
+interface TemperatureProps {
+  fahrenheit: number
+  celsius: number
+  unit?: 'fahrenheit' | 'celsius'
+}
+
+export function Temperature({
+  fahrenheit,
+  celsius,
+  unit = 'fahrenheit',
+}: TemperatureProps): JSX.Element {
+  const temperature = unit === 'fahrenheit' ? fahrenheit : celsius
+  const degree = unit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
+
+  return (
+    <span>
+      {Math.trunc(temperature)}
+      {degree}
+    </span>
+  )
+}
+
+const t = {
+  degreeFahrenheit: '°F',
+  degreeCelsius: '°C',
+}

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

@@ -0,0 +1,160 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+import type { ThermostatDevice, ThermostatDeviceProperties } from 'seamapi'
+
+import { FanIcon } from 'lib/icons/Fan.js'
+import { OffIcon } from 'lib/icons/Off.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
+import { Temperature } from 'lib/ui/thermostat/Temperature.js'
+
+interface ThermostatCardProps {
+  device: ThermostatDevice
+}
+
+export function ThermostatCard({ device }: ThermostatCardProps): JSX.Element {
+  return (
+    <div className='seam-thermostat-card'>
+      <Content device={device} />
+    </div>
+  )
+}
+
+function Content(props: { device: ThermostatDevice }): JSX.Element | null {
+  const { device } = props
+
+  const [temperatureUnit, setTemperatureUnit] = useState<
+    'fahrenheit' | 'celsius'
+  >('fahrenheit')
+
+  const toggleTemperatureUnit = (): void => {
+    setTemperatureUnit(
+      temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
+    )
+  }
+
+  const {
+    temperature_fahrenheit: temperatureFahrenheit,
+    temperature_celsius: temperatureCelsius,
+    current_climate_setting: currentClimateSetting,
+    is_fan_running: isFanRunning,
+    relative_humidity: relativeHumidity,
+  } = device.properties
+
+  const systemStatus = getSystemStatus(device.properties)
+
+  return (
+    <div className='seam-thermostat-card-content'>
+      <div className='seam-thermostat-card-image-wrap'>
+        <DeviceImage device={device} />
+      </div>
+      <div className='seam-thermostat-card-details'>
+        <div className='seam-thermostat-heading-wrap'>
+          <h4 className='seam-thermostat-card-heading'>
+            {device.properties.name}
+          </h4>
+          <button
+            onClick={toggleTemperatureUnit}
+            className='seam-thermostat-temperature-toggle'
+          >
+            <span className='seam-thermostat-temperature-toggle-label'>
+              {temperatureUnit === 'fahrenheit' ? t.fahrenheit : t.celsius}
+            </span>
+          </button>
+        </div>
+
+        <div className='seam-thermostat-properties-wrap'>
+          <div className='seam-thermostat-properties'>
+            <div className='seam-thermostat-property-block'>
+              <p className='seam-thermostat-property-label'>{t.temperature}:</p>
+            </div>
+            <div className='seam-thermostat-property-block'>
+              <p className='seam-thermostat-property-value'>
+                <Temperature
+                  fahrenheit={temperatureFahrenheit}
+                  celsius={temperatureCelsius}
+                  unit={temperatureUnit}
+                />
+              </p>
+
+              <p className='seam-thermostat-property-value'>|</p>
+              <p className='seam-thermostat-property-label'>{t.humidity}:</p>
+              <p className='seam-thermostat-property-value'>
+                {relativeHumidity * 100}%
+              </p>
+            </div>
+
+            <div className='seam-thermostat-property-block'>
+              <p className='seam-thermostat-property-label'>{t.setting}:</p>
+            </div>
+            <div className='seam-thermostat-property-block'>
+              <ClimateSettingStatus
+                climateSetting={currentClimateSetting}
+                temperatureUnit={temperatureUnit}
+              />
+            </div>
+
+            <div className='seam-thermostat-property-block'>
+              <p className='seam-thermostat-property-label'>{t.fanMode}:</p>
+            </div>
+            <div className='seam-thermostat-property-block seam-thermostat-property-icon-block'>
+              <div className='seam-thermostat-property-icon'>
+                {isFanRunning ? <FanIcon /> : <OffIcon />}
+              </div>
+              <p className='seam-thermostat-property-value'>
+                {isFanRunning ? t.auto : t.off}
+              </p>
+            </div>
+
+            <div className='seam-thermostat-property-block'>
+              <p className='seam-thermostat-property-label'>
+                {t.systemStatus}:
+              </p>
+            </div>
+            <div className='seam-thermostat-property-block'>
+              <div
+                className={classNames(
+                  'seam-thermostat-property-tag',
+                  `seam-thermostat-property-tag-${systemStatus}`
+                )}
+              >
+                <p className='seam-thermostat-property-tag-label'>
+                  {systemStatus === 'off' ? '--' : t[systemStatus]}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getSystemStatus(
+  properties: ThermostatDeviceProperties
+): 'heating' | 'cooling' | 'fan' | 'off' {
+  const {
+    is_heating: isHeating,
+    is_cooling: isCooling,
+    is_fan_running: isFanRunning,
+  } = properties
+  if (isHeating) return 'heating'
+  if (isCooling) return 'cooling'
+  if (isFanRunning) return 'fan'
+  return 'off'
+}
+
+const t = {
+  fahrenheit: '˚F',
+  celsius: '˚C',
+  auto: 'Auto',
+  off: 'Off',
+  temperature: 'Temperature',
+  humidity: 'Humidity',
+  setting: 'Setting',
+  fanMode: 'Fan mode',
+  systemStatus: 'System status',
+  cooling: 'Cooling',
+  heating: 'Heating',
+  fan: 'Fan only',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.49.0'
+const seamapiReactVersion = '1.50.0'
 
 export default seamapiReactVersion

package/src/styles/_layout.scss

@@ -88,11 +88,26 @@
     padding: 8px 16px;
   }
 
+  .seam-detail-row-label-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
   .seam-row-label {
     font-size: 16px;
     font-weight: 600;
     line-height: 118%;
   }
+
+  .seam-row-sublabel {
+    color: colors.$text-gray-1;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 118%;
+  }
 }
 
 @mixin detail-row {

package/src/styles/_thermostat.scss

@@ -400,7 +400,167 @@
   }
 }
 
+@mixin thermostat-card {
+  .seam-thermostat-card {
+    width: 100%;
+    background-color: colors.$bg-a;
+    border-radius: 16px;
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    .seam-thermostat-card-content {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: row;
+      gap: 8px;
+      align-self: stretch;
+    }
+
+    .seam-thermostat-card-image-wrap {
+      padding: 24px;
+
+      img {
+        width: 80px;
+        height: 80px;
+        object-fit: contain;
+      }
+    }
+
+    .seam-thermostat-heading-wrap {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+      gap: 16px;
+    }
+
+    .seam-thermostat-card-heading {
+      font-size: 21px;
+      font-weight: 600;
+      line-height: 132%;
+      white-space: nowrap;
+    }
+
+    .seam-thermostat-temperature-toggle {
+      appearance: none;
+      width: 32px;
+      height: 22px;
+      box-shadow: none;
+      border-radius: 5px;
+      border: 1px solid colors.$text-gray-3;
+      background-color: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: colors.$text-gray-1;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1;
+      cursor: pointer;
+    }
+
+    .seam-thermostat-card-details {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .seam-thermostat-properties-wrap {
+      display: flex;
+    }
+
+    .seam-thermostat-properties {
+      width: auto;
+      display: grid;
+      grid-template-columns: auto auto;
+      column-gap: 16px;
+      row-gap: 8px;
+    }
+
+    .seam-thermostat-property-block {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+
+      &.seam-thermostat-property-icon-block {
+        gap: 4px;
+      }
+    }
+
+    .seam-thermostat-property-label {
+      color: colors.$text-gray-2;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 118%;
+      white-space: nowrap;
+    }
+
+    .seam-thermostat-property-value {
+      color: colors.$text-gray-1;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 118%;
+      white-space: nowrap;
+    }
+
+    .seam-thermostat-property-icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    .seam-thermostat-property-tag {
+      height: 18px;
+      padding: 0 8px;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.seam-thermostat-property-tag-cooling {
+        background-color: colors.$thermo-blue;
+      }
+
+      &.seam-thermostat-property-tag-heating {
+        background-color: colors.$thermo-orange;
+      }
+
+      &.seam-thermostat-property-tag-fan {
+        border: 1px solid colors.$text-gray-2-5;
+        background-color: transparent;
+
+        .seam-thermostat-property-tag-label {
+          color: colors.$text-gray-1;
+        }
+      }
+
+      &.seam-thermostat-property-tag-off {
+        background-color: transparent;
+
+        .seam-thermostat-property-tag-label {
+          color: colors.$text-gray-1;
+        }
+      }
+
+      .seam-thermostat-property-tag-label {
+        color: colors.$white;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1;
+      }
+    }
+  }
+}
+
 @mixin all {
   @include temperature-control;
   @include climate-setting-status;
+  @include thermostat-card;
 }

package/src/styles/_tooltip.scss

@@ -60,6 +60,7 @@
       box-shadow:
         0 2px 16px 2px rgb(15 22 28 / 15%),
         0 0 1px 0 rgb(0 0 0 / 30%);
+      will-change: transform, opacity, visibility;
       transform-origin: bottom left;
       transition: 0.1s ease-in-out;
       opacity: 0;