Merge pull request #533 from seamapi/ver/2

Version 2 features and breaking changes

Author: razor-x

.storybook/devicedb-seed.json

@@ -53,7 +53,9 @@ export default async (
       fakeDevicedb.database.vercel_protection_bypass_secret,
   })
 
-  await fake.startServer()
+  const { host } = req.headers
+  if (host == null) throw new Error('Missing Host header')
+  await fake.startServer({ baseUrl: `https://${host}/api` })
 
   const requestBuffer = await getRawBody(req)
 
@@ -70,6 +72,7 @@ export default async (
     timeout: 10_000,
     validateStatus: () => true,
     maxRedirects: 0,
+    responseType: 'arraybuffer',
   })
 
   res.status(status)
@@ -78,11 +81,7 @@ export default async (
     if (!unproxiedHeaders.has(key)) res.setHeader(key, value)
   }
 
-  if (typeof data === 'string') {
-    res.end(data)
-  } else {
-    res.json(data)
-  }
+  res.end(Buffer.from(data))
 
   fake.server?.close()
   fakeDevicedb.server?.close()

api/fake-seam-connect.ts

@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.13.1",
+    "seamapi": "^8.13.3",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -141,7 +141,7 @@
     "@mui/material": "^5.12.2",
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.1.0",
-    "@seamapi/fake-seam-connect": "^1.32.0",
+    "@seamapi/fake-seam-connect": "^1.37.1",
     "@seamapi/http": "^0.2.1",
     "@seamapi/types": "^1.28.0",
     "@storybook/addon-designs": "^7.0.1",

package-lock.json

@@ -49,10 +49,6 @@ export interface AccessCodeTableProps extends CommonProps {
   onAccessCodeClick?: (accessCodeId: string) => void
   preventDefaultOnAccessCodeClick?: boolean
   heading?: string | null
-  /**
-   * @deprecated Use heading.
-   */
-  title?: string | null
 }
 
 type AccessCode = UseAccessCodesData[number]
@@ -82,7 +78,6 @@ export function AccessCodeTable({
   errorFilter = () => true,
   warningFilter = () => true,
   heading = t.accessCodes,
-  title = t.accessCodes,
   className,
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
@@ -231,10 +226,9 @@ export function AccessCodeTable({
         <ContentHeader onBack={onBack} />
         <TableHeader>
           <div className='seam-left'>
-            {title != null ? (
+            {heading != null ? (
               <TableTitle>
-                {heading ?? title ?? t.accessCodes}{' '}
-                <Caption>({filteredAccessCodes.length})</Caption>
+                {heading} <Caption>({filteredAccessCodes.length})</Caption>
               </TableTitle>
             ) : (
               <div className='seam-fragment' />

package.json

@@ -133,7 +133,7 @@ export function ThermostatDeviceDetails({
             </DetailSection>
 
             <DetailSection label={t.deviceDetails}>
-              <DetailRow label={t.brand}>
+              <DetailRow label={t.manufacturer}>
                 <div className='seam-detail-row-hstack'>
                   {device.properties.model.manufacturer_display_name}
                   {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
@@ -175,7 +175,7 @@ const t = {
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
   deviceDetails: 'Device details',
-  brand: 'Brand',
+  manufacturer: 'Manufacturer',
   linkedAccount: 'Linked account',
   deviceId: 'Device ID',
   none: 'None',

src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -41,10 +41,6 @@ export interface DeviceTableProps extends CommonProps {
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
   heading?: string | null
-  /**
-   * @deprecated Use heading.
-   */
-  title?: string | null
 }
 
 export const defaultDeviceFilter = (
@@ -67,7 +63,6 @@ export function DeviceTable({
   deviceFilter = defaultDeviceFilter,
   deviceComparator = compareByCreatedAtDesc,
   heading = t.devices,
-  title = t.devices,
   errorFilter = () => true,
   warningFilter = () => true,
   disableLockUnlock = false,
@@ -129,10 +124,9 @@ export function DeviceTable({
     <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
-        {title != null ? (
+        {heading != null ? (
           <TableTitle>
-            {heading ?? title ?? t.devices}{' '}
-            <Caption>({filteredDevices.length})</Caption>
+            {heading} <Caption>({filteredDevices.length})</Caption>
           </TableTitle>
         ) : (
           <div className='seam-fragment' />

src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -1,35 +1,35 @@
-import type { DeviceModel } from 'seamapi'
+import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 
-import { SupportedDeviceBrandSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js'
 import { SupportedDeviceFilterResultRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.js'
+import { SupportedDeviceManufacturerSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js'
+import type { UseDeviceModelsData } from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
 import {
   type DeviceModelFilters,
   useFilteredDeviceModels,
 } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
 import { Button } from 'lib/ui/Button.js'
 
 interface SupportedDeviceContentProps {
   filterValue: string
   resetFilterValue: () => void
   filters: DeviceModelFilters
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }
 
 export function SupportedDeviceContent({
   resetFilterValue,
   filterValue,
   filters,
-  brands,
-  excludedBrands,
+  manufacturers,
+  excludedManufacturers,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
-      brands,
-      excludedBrands,
+      manufacturers,
+      excludedManufacturers,
     }
   )
 
@@ -74,20 +74,14 @@ export function SupportedDeviceContent({
     )
   }
 
-  const hasFilters = filterValue.trim() !== '' || filters.brand !== null
+  const hasFilters = filterValue.trim() !== '' || filters.manufacturer !== null
 
   if (hasFilters) {
     return (
       <div className='seam-supported-device-table-content'>
-        {deviceModels.map((deviceModel, index) => (
+        {deviceModels.map((deviceModel) => (
           <SupportedDeviceFilterResultRow
-            key={[
-              deviceModel.main_category,
-              deviceModel.brand,
-              deviceModel.model_name,
-              deviceModel.manufacturer_model_id,
-              index,
-            ].join(':')}
+            key={deviceModel.device_model_id}
             deviceModel={deviceModel}
           />
         ))}
@@ -97,11 +91,11 @@ export function SupportedDeviceContent({
 
   return (
     <>
-      {Object.entries(groupDeviceModelsByBrand(deviceModels)).map(
-        ([brand, models]) => (
-          <SupportedDeviceBrandSection
-            key={brand}
-            brand={brand}
+      {Object.entries(groupDeviceModelsByManufacturer(deviceModels)).map(
+        ([manufacturerId, models]) => (
+          <SupportedDeviceManufacturerSection
+            key={manufacturerId}
+            manufacturerId={manufacturerId}
             deviceModels={models}
           />
         )
@@ -142,15 +136,15 @@ function EmptyResult({
   )
 }
 
-function groupDeviceModelsByBrand(
+function groupDeviceModelsByManufacturer(
   deviceModels: UseDeviceModelsData
-): Record<string, DeviceModel[]> {
-  const result: Record<string, DeviceModel[]> = {}
+): Record<string, DeviceModelV1[]> {
+  const result: Record<string, DeviceModelV1[]> = {}
 
   for (const model of deviceModels) {
-    const { brand } = model
-    const list = result[brand] ?? []
-    result[brand] = [...list, model]
+    const { manufacturer } = model
+    const list = result[manufacturer.manufacturer_id] ?? []
+    result[manufacturer.manufacturer_id] = [...list, model]
   }
   return result
 }

src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -1,5 +1,5 @@
 import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
+import type { UseDeviceModelsData } from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
 
 interface SupportedDeviceContentRowsProps {
   deviceModels: UseDeviceModelsData
@@ -10,15 +10,9 @@ export function SupportedDeviceContentRows({
 }: SupportedDeviceContentRowsProps): JSX.Element | null {
   return (
     <div className='seam-supported-device-table-content'>
-      {deviceModels.map((deviceModel, index) => (
+      {deviceModels.map((deviceModel) => (
         <SupportedDeviceRow
-          key={[
-            deviceModel.main_category,
-            deviceModel.brand,
-            deviceModel.model_name,
-            deviceModel.manufacturer_model_id,
-            index,
-          ].join(':')}
+          key={deviceModel.device_model_id}
           deviceModel={deviceModel}
         />
       ))}