@seamapi/react 2.18.0 → 2.19.0

package/src/lib/ui/TabSet.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames'
+import {
+  type MouseEventHandler,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react'
+
+interface TabSetProps<TabType extends string> {
+  tabs: TabType[]
+  tabTitles: Record<TabType, string>
+  activeTab: TabType
+  onTabChange: (tab: TabType) => void
+}
+
+interface HighlightStyle {
+  left: number
+  width: number
+}
+
+export function TabSet<TabType extends string>({
+  tabs,
+  tabTitles,
+  activeTab,
+  onTabChange,
+}: TabSetProps<TabType>): JSX.Element {
+  const [highlightStyle, setHighlightStyle] = useState<HighlightStyle>({
+    left: 0,
+    width: 140,
+  })
+
+  const calculateHighlightStyle = useCallback(() => {
+    const tabButton: HTMLButtonElement | null =
+      globalThis.document?.querySelector(
+        `.seam-tab-button:nth-of-type(${tabs.indexOf(activeTab) + 1})`
+      )
+
+    setHighlightStyle({
+      left: tabButton?.offsetLeft ?? 0,
+      width: tabButton?.offsetWidth ?? 140,
+    })
+  }, [activeTab, tabs])
+
+  useLayoutEffect(() => {
+    calculateHighlightStyle()
+  }, [activeTab, calculateHighlightStyle])
+
+  useEffect(() => {
+    globalThis.addEventListener?.('resize', calculateHighlightStyle)
+    return () => {
+      globalThis.removeEventListener?.('resize', calculateHighlightStyle)
+    }
+  }, [calculateHighlightStyle])
+
+  return (
+    <div className='seam-tab-set'>
+      <div className='seam-tab-set-buttons'>
+        <div className='seam-tab-set-highlight' style={highlightStyle} />
+
+        {tabs.map((tab) => (
+          <TabButton<TabType>
+            key={tab}
+            tab={tab}
+            title={tabTitles[tab]}
+            isActive={activeTab === tab}
+            onTabChange={onTabChange}
+            setHighlightStyle={setHighlightStyle}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface TabButtonProps<TabType> {
+  tab: TabType
+  title: string
+  isActive: boolean
+  onTabChange: (tab: TabType) => void
+  setHighlightStyle: (style: HighlightStyle) => void
+}
+
+function TabButton<TabType extends string>({
+  tab,
+  title,
+  isActive,
+  onTabChange,
+  setHighlightStyle,
+}: TabButtonProps<TabType>): JSX.Element {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (ev) => {
+    onTabChange(tab)
+    setHighlightStyle({
+      left: ev.currentTarget.offsetLeft,
+      width: ev.currentTarget.offsetWidth,
+    })
+  }
+
+  return (
+    <button
+      className={classNames(
+        'seam-tab-button',
+        isActive && 'seam-tab-button-active'
+      )}
+      onClick={handleClick}
+    >
+      <p className='seam-tab-button-label'>{title}</p>
+    </button>
+  )
+}

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

@@ -1,19 +1,22 @@
+import classNames from 'classnames'
+
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 
 interface ContentHeaderProps {
   onBack: (() => void) | undefined
   title?: string
   subheading?: string
+  className?: string
 }
 
 export function ContentHeader(props: ContentHeaderProps): JSX.Element | null {
-  const { title, onBack, subheading } = props
+  const { title, onBack, subheading, className } = props
   if (title == null && onBack == null) {
     return null
   }
 
   return (
-    <div className='seam-content-header'>
+    <div className={classNames('seam-content-header', className)}>
       <BackIcon onClick={onBack} />
       <div>
         <span className='seam-title'>{title}</span>

package/src/lib/ui/noise-sensor/NoiseSensorActivityList.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import type { NoiseSensorDevice } from 'seamapi'
+
+import { useEvents } from 'lib/seam/events/use-events.js'
+import { NoiseSensorEventItem } from 'lib/ui/noise-sensor/NoiseSensorEventItem.js'
+import { useNow } from 'lib/ui/use-now.js'
+
+interface NoiseSensorActivityListProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseSensorActivityList({
+  device,
+}: NoiseSensorActivityListProps): JSX.Element {
+  const now = useNow()
+  const [mountedAt] = useState(now)
+
+  const { events } = useEvents({
+    device_id: device.device_id,
+    event_type: 'noise_sensor.noise_threshold_triggered',
+    since: mountedAt.minus({ months: 1 }).toString(),
+  })
+
+  return (
+    <div className='seam-noise-sensor-activity-list'>
+      {events?.map((event) => (
+        <NoiseSensorEventItem key={event.event_id} event={event} />
+      ))}
+    </div>
+  )
+}

package/src/lib/ui/noise-sensor/NoiseSensorEventItem.tsx

@@ -0,0 +1,67 @@
+import { DateTime } from 'luxon'
+import type { Event } from 'seamapi'
+
+import { ClockIcon } from 'lib/icons/Clock.js'
+
+interface NoiseSensorEventItemProps {
+  event: Event
+}
+
+export function NoiseSensorEventItem({
+  event,
+}: NoiseSensorEventItemProps): JSX.Element {
+  const date = formatDate(event.created_at)
+  const time = formatTime(event.created_at)
+
+  return (
+    <div className='seam-noise-sensor-event-item'>
+      <div className='seam-noise-sensor-event-item-column-wrap'>
+        <ClockIcon />
+
+        <div className='seam-noise-sensor-event-item-datetime-wrap'>
+          <p className='seam-noise-sensor-event-item-date'>{date}</p>
+          <p className='seam-noise-sensor-event-item-time'>{time}</p>
+        </div>
+      </div>
+
+      <div className='seam-noise-sensor-event-item-context-wrap'>
+        <p className='seam-noise-sensor-event-item-context-label'>
+          {t.noiseThresholdTriggered}
+        </p>
+        {getContextSublabel(event) != null && (
+          <p className='seam-noise-sensor-event-item-context-sublabel'>
+            {getContextSublabel(event)}
+          </p>
+        )}
+      </div>
+
+      <div className='seam-noise-sensor-event-item-right-block' />
+    </div>
+  )
+}
+
+function getContextSublabel(event: Event): string | null {
+  if ('noise_threshold_name' in event) {
+    // @ts-expect-error UPSTREAM: Shallow event type
+    // https://github.com/seamapi/react/issues/611
+    return event.noise_threshold_name
+  }
+
+  if ('noise_level_decibels' in event) {
+    // UPSTREAM: Shallow event types.
+    return `${event.noise_level_decibels as string} ${t.decibel}`
+  }
+
+  return null
+}
+
+const formatDate = (dateTime: string): string =>
+  DateTime.fromISO(dateTime).toLocaleString(DateTime.DATE_FULL)
+
+const formatTime = (dateTime: string): string =>
+  DateTime.fromISO(dateTime).toLocaleString(DateTime.TIME_SIMPLE)
+
+const t = {
+  decibel: 'dB',
+  noiseThresholdTriggered: 'Noise threshold triggered',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.18.0'
+const seamapiReactVersion = '2.19.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -8,6 +8,11 @@
       gap: 16px;
       margin: 0 24px 24px;
 
+      &.seam-body-no-margin {
+        margin: 0;
+        gap: 0;
+      }
+
       .seam-box {
         border: 1px solid colors.$text-gray-3;
         border-radius: 8px;
@@ -56,6 +61,13 @@
         }
       }
 
+      .seam-contained-summary {
+        padding: 0 24px;
+        box-shadow:
+          0 2px 8px 0 rgb(0 0 0 / 8%),
+          0 1px 0 0 rgb(0 0 0 / 10%);
+      }
+
       .seam-summary {
         padding: 24px 16px;
         border-radius: 16px;

package/src/styles/_layout.scss

@@ -9,6 +9,10 @@
     justify-content: center;
     margin: 0 16px;
 
+    &.seam-content-header-contained {
+      margin: 0;
+    }
+
     .seam-back-icon {
       position: absolute;
       top: 50%;
@@ -34,6 +38,10 @@
 }
 
 @mixin detail-section {
+  .seam-padded-container {
+    padding: 0 16px;
+  }
+
   .seam-detail-sections {
     display: flex;
     flex-direction: column;

package/src/styles/_main.scss

@@ -29,6 +29,8 @@
 @use './climate-setting-schedule-form';
 @use './climate-setting-schedule-details';
 @use './time-zone-picker';
+@use './tab-set';
+@use './noise-sensor';
 
 .seam-components {
   // Reset
@@ -53,6 +55,7 @@
   @include spinner.all;
   @include switch.all;
   @include time-zone-picker.all;
+  @include tab-set.all;
 
   // Components
   @include device-details.all;
@@ -66,4 +69,5 @@
   @include thermostat.all;
   @include seam-table.all;
   @include climate-setting-schedule-details.all;
+  @include noise-sensor.all;
 }

package/src/styles/_noise-sensor.scss

@@ -0,0 +1,72 @@
+@use './colors';
+
+@mixin all {
+  .seam-noise-sensor-activity-list {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .seam-noise-sensor-event-item {
+    width: 100%;
+    min-height: 64px;
+    padding: 12px 8px 12px 16px;
+    border-bottom: 1px solid colors.$divider-stroke-light;
+    display: flex;
+    gap: 40px;
+  }
+
+  .seam-noise-sensor-event-item-column-wrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 18px;
+    flex: 0.5;
+  }
+
+  .seam-noise-sensor-event-item-datetime-wrap {
+    color: colors.$text-gray-1;
+    font-size: 14px;
+    line-height: 134%;
+  }
+
+  .seam-noise-sensor-event-item-date,
+  .seam-noise-sensor-event-item-time,
+  .seam-noise-sensor-event-item-context-label,
+  .seam-noise-sensor-event-item-context-sublabel {
+    white-space: nowrap;
+  }
+
+  .seam-noise-sensor-event-item-context-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .seam-noise-sensor-event-item-context-label {
+    color: colors.$text-default;
+    font-size: 14px;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .seam-noise-sensor-event-item-context-sublabel {
+    color: colors.$text-gray-2;
+    font-size: 14px;
+  }
+
+  .seam-noise-sensor-event-item-right-block {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 18px;
+    flex: 0.5;
+  }
+}

package/src/styles/_tab-set.scss

@@ -0,0 +1,52 @@
+@use './colors';
+
+@mixin all {
+  .seam-tab-set {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+
+    .seam-tab-set-buttons {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      position: relative;
+      padding-top: 8px;
+    }
+
+    .seam-tab-set-highlight {
+      height: 4px;
+      border-radius: 6px 6px 0 0;
+      background-color: colors.$primary;
+      position: absolute;
+      bottom: 0;
+      transition: 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+    }
+
+    .seam-tab-button {
+      appearance: none;
+      width: 140px;
+      padding-top: 4px;
+      padding-bottom: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      cursor: pointer;
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+      color: colors.$text-gray-2;
+      transition: 240ms ease-in-out;
+
+      &:hover,
+      &.seam-tab-button-active {
+        color: colors.$text-default;
+      }
+    }
+  }
+}