@seamapi/react 1.49.0 → 1.51.0

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

package/src/styles/_device-details.scss

@@ -151,5 +151,9 @@
         justify-content: center;
       }
     }
+
+    .seam-thermostat-device-details {
+      margin-top: 8px;
+    }
   }
 }

package/src/styles/_layout.scss

@@ -76,6 +76,15 @@
     &:not(:last-of-type) {
       border-bottom: 1px solid colors.$divider-stroke-light;
     }
+
+    &.seam-detail-row-clickable {
+      cursor: pointer;
+      transition: 0.2s ease;
+
+      &:hover {
+        background-color: colors.$bg-a;
+      }
+    }
   }
 
   .seam-detail-row,
@@ -88,11 +97,38 @@
     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%;
+  }
+
+  .seam-detail-row-hstack {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .seam-detail-row-rotated-icon {
+    transform: rotate(-90deg);
+  }
 }
 
 @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;