@seamapi/react 1.48.1 → 1.50.0

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.48.1'
+const seamapiReactVersion = '1.50.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/_layout.scss

@@ -33,6 +33,167 @@
   }
 }
 
+@mixin detail-section {
+  .seam-detail-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .seam-detail-section {
+    width: 100%;
+  }
+
+  .seam-detail-label-wrap {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  .seam-detail-label {
+    color: colors.$text-gray-1;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 134%;
+  }
+
+  .seam-detail-group {
+    border-radius: 8px;
+    border: 1px solid colors.$text-gray-3;
+    overflow: hidden;
+  }
+}
+
+@mixin detail-row-common {
+  .seam-detail-row,
+  .seam-accordion-row {
+    background-color: colors.$white;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid colors.$divider-stroke-light;
+    }
+  }
+
+  .seam-detail-row,
+  .seam-accordion-row-trigger {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    min-height: 64px;
+    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 {
+  .seam-detail-row-right-area-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 8px;
+  }
+}
+
+@mixin accordion-row {
+  .seam-accordion-row {
+    overflow: hidden;
+
+    .seam-accordion-row-trigger {
+      appearance: none;
+      width: 100%;
+      background-color: colors.$white;
+      font-size: 16px;
+      border: none;
+      box-shadow: none;
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    .seam-accordion-row-content {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      max-height: 0;
+      opacity: 0;
+      transition: all 0.3s ease-in-out;
+    }
+
+    &[aria-expanded='true'] {
+      .seam-accordion-row-content {
+        max-height: 64px;
+        opacity: 1;
+      }
+
+      .seam-accordion-icon-wrap {
+        transform: rotate(180deg);
+      }
+
+      .seam-row-trigger-right-content {
+        transform: scale(0.95);
+        opacity: 0;
+      }
+    }
+
+    .seam-accordion-row-inner-content {
+      height: 64px;
+      padding: 0 16px;
+      overflow: hidden;
+    }
+
+    .seam-row-inner-wrap {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      gap: 16px;
+    }
+
+    .seam-row-trigger-right-content {
+      transition: 0.2s ease-in-out;
+    }
+
+    .seam-accordion-icon-wrap {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+}
+
 @mixin all {
   @include header;
+  @include detail-section;
+  @include detail-row-common;
+  @include detail-row;
+  @include accordion-row;
 }

package/src/styles/_main.scss

@@ -20,6 +20,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './climate-setting-schedule-details';
 @use './switch';
 
 .seam-components {
@@ -50,4 +51,5 @@
   @include supported-device-table.all;
   @include thermostat.all;
   @include seam-table.all;
+  @include climate-setting-schedule-details.all;
 }

package/src/styles/_seam-table.scss

@@ -99,6 +99,14 @@
       align-items: center;
       justify-content: space-between;
       flex: 1;
+
+      svg {
+        scale: 0.75;
+
+        * {
+          fill: colors.$primary;
+        }
+      }
     }
   }
 }

package/src/styles/_thermostat.scss

@@ -304,7 +304,6 @@
   .seam-climate-setting-schedule-card {
     background: colors.$bg-a;
     border-radius: 16px;
-    margin: 0 24px 16px;
 
     .seam-climate-setting-schedule-content {
       display: flex;
@@ -394,10 +393,174 @@
         }
       }
     }
+
+    .seam-climate-setting-schedule-device-chevron {
+      transform: rotate(270deg);
+    }
+  }
+}
+
+@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;