@seamapi/react 2.18.0 → 2.19.1

package/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { useState } from 'react'
 import type { NoiseSensorDevice } from 'seamapi'
 
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
@@ -8,7 +9,11 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { NoiseSensorActivityList } from 'lib/ui/noise-sensor/NoiseSensorActivityList.js'
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
+import { TabSet } from 'lib/ui/TabSet.js'
+
+type TabType = 'details' | 'activity'
 
 interface NoiseSensorDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
@@ -22,38 +27,63 @@ export function NoiseSensorDeviceDetails({
   onBack,
   className,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
+  const [tab, setTab] = useState<TabType>('details')
+
   return (
     <div className={classNames('seam-device-details', className)}>
-      <ContentHeader title={t.noiseSensor} onBack={onBack} />
-
-      <div className='seam-body'>
-        <div className='seam-summary'>
-          <div className='seam-content'>
-            <div className='seam-image'>
-              <DeviceImage device={device} />
-            </div>
-            <div className='seam-info'>
-              <span className='seam-label'>{t.noiseSensor}</span>
-              <h4 className='seam-device-name'>{device.properties.name}</h4>
-              <div className='seam-properties'>
-                <span className='seam-label'>{t.status}:</span>{' '}
-                <OnlineStatus device={device} />
-                <NoiseLevelStatus device={device} />
-                <DeviceModel device={device} />
+      <div className='seam-body seam-body-no-margin'>
+        <div className='seam-contained-summary'>
+          <ContentHeader
+            title={t.noiseSensor}
+            onBack={onBack}
+            className='seam-content-header-contained'
+          />
+          <div className='seam-summary'>
+            <div className='seam-content'>
+              <div className='seam-image'>
+                <DeviceImage device={device} />
+              </div>
+              <div className='seam-info'>
+                <span className='seam-label'>{t.noiseSensor}</span>
+                <h4 className='seam-device-name'>{device.properties.name}</h4>
+                <div className='seam-properties'>
+                  <span className='seam-label'>{t.status}:</span>{' '}
+                  <OnlineStatus device={device} />
+                  <NoiseLevelStatus device={device} />
+                  <DeviceModel device={device} />
+                </div>
               </div>
             </div>
           </div>
+
+          <TabSet<TabType>
+            tabs={['details', 'activity']}
+            tabTitles={{
+              details: t.details,
+              activity: t.activity,
+            }}
+            activeTab={tab}
+            onTabChange={(tab) => {
+              setTab(tab)
+            }}
+          />
         </div>
 
-        <NoiseThresholdsList device={device} />
+        {tab === 'details' && (
+          <div className='seam-padded-container'>
+            <NoiseThresholdsList device={device} />
+
+            <DeviceInfo
+              device={device}
+              disableConnectedAccountInformation={
+                disableConnectedAccountInformation
+              }
+              disableResourceIds={disableResourceIds}
+            />
+          </div>
+        )}
 
-        <DeviceInfo
-          device={device}
-          disableConnectedAccountInformation={
-            disableConnectedAccountInformation
-          }
-          disableResourceIds={disableResourceIds}
-        />
+        {tab === 'activity' && <NoiseSensorActivityList device={device} />}
       </div>
     </div>
   )
@@ -63,4 +93,6 @@ const t = {
   noiseSensor: 'Noise Sensor',
   status: 'Status',
   noiseLevel: 'Noise level',
+  details: 'Details',
+  activity: 'Activity',
 }

package/src/lib/seam/events/use-events.ts

@@ -0,0 +1,44 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  Event,
+  EventsListRequest,
+  EventsListResponse,
+  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 UseEventsParams = EventsListRequest
+export type UseEventsData = Event[]
+export interface UseEventsOptions {
+  refetchInterval?: number
+}
+
+export function useEvents(
+  params?: UseEventsParams,
+  options?: UseEventsOptions
+): UseSeamQueryResult<'events', UseEventsData> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  const { data, ...rest } = useQuery<EventsListResponse['events'], SeamError>({
+    enabled: client != null,
+    queryKey: ['events', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      return await client.events.list(params)
+    },
+    onSuccess: (events) => {
+      for (const event of events) {
+        queryClient.setQueryData(
+          ['events', 'get', { event_id: event.event_id }],
+          event
+        )
+      }
+    },
+    refetchInterval: options?.refetchInterval ?? 30_000,
+  })
+
+  return { ...rest, events: data }
+}

package/src/lib/telemetry/client.ts

@@ -29,7 +29,7 @@ export class TelemetryClient {
   }: TelemetryClientOptions = {}) {
     this.#queue = new Queue()
     this.#anonymousId = uuidv4()
-    this.#endpoint = endpoint
+    this.#endpoint = endpoint.endsWith('/') ? endpoint.slice(0, -1) : endpoint
     this.#debug = debug
     this.#disabled = disabled
   }

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -8,7 +8,7 @@ import {
 } from 'seamapi'
 
 import { getSystemTimeZone } from 'lib/dates.js'
-import { useDevice } from 'lib/index.js'
+import { useSeamClient } from 'lib/index.js'
 import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
 import { ClimateSettingScheduleFormDefaultClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'
@@ -61,6 +61,7 @@ export function ClimateSettingScheduleForm({
 function Content({
   onBack,
 }: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
+  const { client } = useSeamClient()
   const { control, watch, resetField } =
     useForm<ClimateSettingScheduleFormFields>({
       defaultValues: {
@@ -80,10 +81,6 @@ function Content({
   const deviceId = watch('deviceId')
   const timeZone = watch('timeZone')
 
-  const { device } = useDevice({
-    device_id: deviceId,
-  })
-
   const [page, setPage] = useState<
     | 'device_select'
     | 'default_setting'
@@ -98,13 +95,22 @@ function Content({
   }
 
   useEffect(() => {
-    if (page === 'device_select' && device != null) {
-      if (!isThermostatDevice(device)) return
-      const defaultSetting = device.properties.default_climate_setting
-      if (defaultSetting != null) setPage('name_and_schedule')
-      else setPage('default_setting')
+    if (page === 'device_select' && deviceId !== '' && client != null) {
+      client.devices
+        .get({ device_id: deviceId })
+        .then((device) => {
+          if (!isThermostatDevice(device)) return
+
+          if (device.properties.default_climate_setting != null) {
+            setPage('name_and_schedule')
+            return
+          }
+
+          setPage('default_setting')
+        })
+        .catch(() => {})
     }
-  }, [device, page, setPage])
+  }, [client, deviceId, page, setPage])
 
   if (page === 'device_select') {
     return (

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.1'
 
 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;
+      }
+    }
+  }
+}