@seamapi/react 1.24.0 → 1.25.0

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -14,6 +14,7 @@ export interface SupportedDeviceFilterAreaProps {
   setFilterValue: (filter: string) => void
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
+  brands: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -21,13 +22,14 @@ export function SupportedDeviceFilterArea({
   setFilterValue,
   filters,
   setFilters,
+  brands,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = Object.values(filters).filter(
     (v) => v != null && v !== false
   ).length
 
   const filterProperty = 'brand'
-  const availableProperties = useAvailableProperties(filterProperty)
+  const availableProperties = useAvailableProperties(filterProperty, { brands })
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -116,12 +118,29 @@ export function SupportedDeviceFilterArea({
   )
 }
 
-const useAvailableProperties = (property: keyof DeviceModel): string[] => {
+const useAvailableProperties = (
+  property: keyof DeviceModel,
+  options: {
+    brands: string[]
+  }
+): string[] => {
   const { deviceModels } = useDeviceModels()
   if (deviceModels == null) return []
   const properties = new Set<string>()
   for (const deviceModel of deviceModels) {
-    properties.add(capitalize(deviceModel[property]))
+    const value = deviceModel[property]
+
+    // If we're only looking at a subset of brands, such as ["yale", "august"], then we
+    // don't want to show other brands in the filter.
+    if (
+      property === 'brand' &&
+      options.brands.length > 0 &&
+      !options.brands.includes(value)
+    ) {
+      continue
+    }
+
+    properties.add(capitalize(value))
   }
   return Array.from(properties)
 }

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.tsx

@@ -0,0 +1,49 @@
+import type { DeviceModel } from 'seamapi'
+
+import {
+  connectionTypeNames,
+  ImageColumn,
+  StatusColumn,
+} from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
+import { DotDivider } from 'lib/ui/layout/DotDivider.js'
+
+export interface SupportedDeviceFilterResultRowProps {
+  deviceModel: DeviceModel
+}
+
+export function SupportedDeviceFilterResultRow({
+  deviceModel,
+}: SupportedDeviceFilterResultRowProps): JSX.Element {
+  return (
+    <div className='seam-row filter-result-row'>
+      <ImageColumn deviceModel={deviceModel} />
+      <ModelColumn deviceModel={deviceModel} />
+      <StatusColumn deviceModel={deviceModel} />
+    </div>
+  )
+}
+
+export function ModelColumn({
+  deviceModel,
+}: SupportedDeviceFilterResultRowProps) {
+  const deviceProvider = useDeviceProvider(deviceModel.brand)
+
+  return (
+    <div className='seam-col seam-model-col'>
+      <div className='seam-model-name'>
+        <img
+          src={deviceProvider.image_url}
+          alt={deviceModel.brand}
+          className='seam-brand-image'
+        />{' '}
+        {deviceModel.model_name}
+      </div>
+      <div className='seam-model-id'>
+        {deviceModel.manufacturer_model_id}
+        <DotDivider />
+        {connectionTypeNames[deviceModel.connection_type]}
+      </div>
+    </div>
+  )
+}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import type { DeviceModel } from 'seamapi'
 
-import { capitalize } from 'lib/strings.js'
+import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 export interface SupportedDeviceRowProps {
   deviceModel: DeviceModel
@@ -10,37 +10,69 @@ export interface SupportedDeviceRowProps {
 export function SupportedDeviceRow({
   deviceModel,
 }: SupportedDeviceRowProps): JSX.Element {
-  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'gray'
   return (
-    <tr>
-      <td>
+    <div className='seam-row'>
+      <ImageColumn deviceModel={deviceModel} />
+      <ModelColumn deviceModel={deviceModel} />
+      <StatusColumn deviceModel={deviceModel} />
+    </div>
+  )
+}
+
+export function ImageColumn({ deviceModel }: SupportedDeviceRowProps) {
+  return (
+    <div className='seam-col seam-device-image-col'>
+      <div className='seam-image-box'>
         <img width={40} src={deviceModel.icon_url} />
-      </td>
-      <td>{deviceModel.main_category}</td>
-      <td>{deviceModel.model_name}</td>
-      <td>{deviceModel.manufacturer_model_id}</td>
-      <td>{connectionTypeNames[deviceModel.connection_type]}</td>
-      <td>
-        <div
-          className={classNames('seam-status-pill', `status-${statusColor}`)}
-        >
-          <span>{capitalize(deviceModel.support_level)}</span>
-        </div>
-      </td>
-    </tr>
+      </div>
+    </div>
+  )
+}
+
+export function ModelColumn({ deviceModel }: SupportedDeviceRowProps) {
+  return (
+    <div className='seam-col seam-model-col'>
+      <div className='seam-model-name'>{deviceModel.model_name}</div>
+      <div className='seam-model-id'>
+        {deviceModel.manufacturer_model_id}
+        <DotDivider />
+        {connectionTypeNames[deviceModel.connection_type]}
+      </div>
+    </div>
+  )
+}
+
+export function StatusColumn({ deviceModel }: SupportedDeviceRowProps) {
+  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'unknown'
+
+  return (
+    <div className='seam-col seam-status-col'>
+      <div className={classNames('seam-status-pill', `status-${statusColor}`)}>
+        <span>{status[deviceModel.support_level]}</span>
+      </div>
+    </div>
   )
 }
 
 const supportLevelColors: Record<
   DeviceModel['support_level'],
-  'green' | 'blue' | 'orange'
+  'green' | 'blue' | 'unknown'
 > = {
   live: 'green',
   beta: 'blue',
-  unsupported: 'orange',
+  unsupported: 'unknown',
+}
+
+const status: Record<DeviceModel['support_level'], string> = {
+  live: 'LIVE',
+  beta: 'BETA',
+  unsupported: 'Inquire',
 }
 
-const connectionTypeNames: Record<DeviceModel['connection_type'], string> = {
+export const connectionTypeNames: Record<
+  DeviceModel['connection_type'],
+  string
+> = {
   wifi: 'Wifi',
   zwave: 'Z-Wave',
   zigbee: 'Zigbee',

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts

@@ -7,6 +7,7 @@ export const name = 'seam-supported-device-table'
 export const props: ElementProps<SupportedDeviceTableProps> = {
   cannotFilter: 'boolean',
   disableFilter: 'boolean',
+  brands: 'json',
   className: 'string',
 }
 

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -11,12 +11,14 @@ export interface SupportedDeviceTableProps {
    * @deprecated Use disableFilter.
    */
   cannotFilter?: boolean
+  brands?: string[]
   className?: string
 }
 
 export function SupportedDeviceTable({
   disableFilter = false,
   cannotFilter,
+  brands = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   const [filterValue, setFilterValue] = useState('')
@@ -41,6 +43,7 @@ export function SupportedDeviceTable({
           setFilterValue={setFilterValue}
           filters={filters}
           setFilters={setFilters}
+          brands={brands}
         />
       )}
       <SupportedDeviceContent
@@ -49,6 +52,7 @@ export function SupportedDeviceTable({
         }}
         filterValue={filterValue}
         filters={filters}
+        brands={brands}
       />
     </div>
   )

package/src/lib/seam/components/SupportedDeviceTable/use-device-provider.ts

@@ -0,0 +1,22 @@
+import type { DeviceProvider } from 'seamapi'
+
+import { useDeviceProviders } from 'lib/seam/devices/use-device-providers.js'
+
+export function useDeviceProvider(brand: string): DeviceProvider {
+  const { deviceProviders } = useDeviceProviders()
+
+  const definedProvider = deviceProviders?.find(
+    (provider) => provider.device_provider_name === brand
+  )
+
+  if (definedProvider != null) {
+    return definedProvider
+  }
+
+  return {
+    device_provider_name: 'unknown',
+    display_name: 'Unknown',
+    image_url: `https://connect.getseam.com/assets/images/logos/seam.png`,
+    provider_categories: [],
+  }
+}

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -9,10 +9,15 @@ export interface DeviceModelFilters {
   brand: string | null
 }
 
-export const useFilteredDeviceModels = (
-  filterValue: string,
+export const useFilteredDeviceModels = ({
+  filterValue,
+  filters,
+  brands,
+}: {
+  filterValue: string
   filters: DeviceModelFilters
-): ReturnType<typeof useDeviceModels> => {
+  brands: string[]
+}): ReturnType<typeof useDeviceModels> => {
   const params: UseDeviceModelsParams = {}
 
   if (filterValue.trim() !== '') {
@@ -31,5 +36,17 @@ export const useFilteredDeviceModels = (
     params.brand = filters.brand
   }
 
-  return useDeviceModels(params)
+  const query = useDeviceModels(params)
+
+  if (brands.length === 0) {
+    return query
+  }
+
+  // If the user only wants models for a collection of brands, such as ["yale", "august"], then
+  // we'll filter everything else out here.
+  const onlySpecificBrands = query.deviceModels?.filter((deviceModel) =>
+    brands.includes(deviceModel.brand)
+  )
+
+  return { ...query, deviceModels: onlySpecificBrands }
 }

package/src/lib/seam/devices/use-device-providers.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query'
+import type { DeviceProvider } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export function useDeviceProviders(): {
+  deviceProviders: DeviceProvider[] | undefined
+  isLoading: boolean
+} {
+  const { client } = useSeamClient()
+
+  const { data, isLoading } = useQuery({
+    queryFn: async () => {
+      if (client == null) {
+        return []
+      }
+
+      return await client?.devices.listDeviceProviders({})
+    },
+    queryKey: ['devices', 'list_device_providers'],
+    enabled: client != null,
+  })
+
+  return { deviceProviders: data, isLoading }
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.24.0'
+const seamapiReactVersion = '1.25.0'
 
 export default seamapiReactVersion

package/src/styles/_access-code-details.scss

@@ -30,7 +30,7 @@
         }
 
         > .seam-code {
-          background: #fff;
+          background: colors.$white;
           border: 1px solid colors.$text-gray-2;
           border-radius: 8px;
           padding: 10px 16px;

package/src/styles/_buttons.scss

@@ -6,7 +6,7 @@
     border-radius: 6px;
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
-    background: #fff;
+    background: colors.$white;
     padding: 6px;
     line-height: 0;
 
@@ -62,7 +62,7 @@
 @mixin button-variant {
   &.seam-btn-solid {
     background: colors.$primary;
-    color: #fff;
+    color: colors.$white;
     border: 1px solid colors.$primary;
 
     &:hover {
@@ -106,7 +106,7 @@
     &:disabled {
       color: colors.$text-gray-2-5;
       border-color: colors.$text-gray-3;
-      background: #fff;
+      background: colors.$white;
     }
   }
 }

package/src/styles/_colors.scss

@@ -18,10 +18,10 @@ $bg-d: #cbd0d3;
 $bg-c: #dde0e2;
 $bg-b: #e9edef;
 $bg-a: #f1f3f4;
+$bg-aa: #fafafa;
 $bg-gray: #ececec;
 $status-red: #e36857;
-$status-orange: #f3980f;
-$status-green: #27ae60;
+$white: #fff;
 $alert-error-dark: #cb7d7d;
 $alert-error-line: #f1d4d4;
 $alert-error-fill: #ffefef;
@@ -29,3 +29,7 @@ $alert-warn-dark: #ca8852;
 $alert-warn-line: #f8d8be;
 $alert-warn-fill: #fff2e0;
 $item-hover-bg: #f4f6f8;
+$pill-green-bg: rgb(98 232 139 / 30%);
+$pill-green-text: #0d8841;
+$pill-blue-bg: rgb(125 192 241 / 30%);
+$pill-blue-text: #1653b8;

package/src/styles/_menus.scss

@@ -24,7 +24,7 @@
     width: 250px;
     position: absolute;
     padding: 8px 0;
-    background: #fff;
+    background: colors.$white;
     box-shadow: 0 0 1px rgb(0 0 0 / 30%), 0 2px 16px 2px rgb(15 22 28 / 15%);
     border-radius: 8px;
 

package/src/styles/_supported-device-table.scss

@@ -92,6 +92,102 @@ $row-padding: 8px;
     }
   }
 
+  .seam-brand-section {
+    margin-bottom: 32px;
+    position: relative;
+
+    .seam-header {
+      display: flex;
+      align-items: center;
+      height: 64px;
+
+      .seam-brand-image {
+        width: 48px;
+        height: 48px;
+        padding: 0 8px;
+        box-sizing: content-box;
+        margin-right: 8px;
+      }
+
+      .seam-brand-name {
+        font-size: 21px;
+        line-height: 132%;
+        flex: 1;
+      }
+
+      .chevron {
+        transform: rotate(90deg);
+        margin-right: 24px;
+      }
+    }
+
+    .show-all-devices-button {
+      cursor: pointer;
+      background: colors.$white;
+      display: flex;
+      height: 30px;
+      padding: 4px 24px;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      line-height: 115%;
+      color: colors.$text-gray-1;
+      border-radius: 30px;
+      border: 0;
+      box-shadow: 0 1px 1px 0 rgb(16 27 37 / 10%),
+        0 1px 8px 0 rgb(46 69 82 / 12%);
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -47px);
+      z-index: 3;
+
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    .hidden-devices-overlay {
+      background: linear-gradient(
+        180deg,
+        rgb(255 255 255 / 0%) 10.17%,
+        #fff 86.98%
+      );
+      position: absolute;
+      height: 64px;
+      width: 100%;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    &.can-expand {
+      .seam-header {
+        cursor: pointer;
+
+        &:hover {
+          background: colors.$bg-aa;
+        }
+      }
+    }
+
+    &.expanded {
+      margin-bottom: 96px; // 32px  (usual margin) + 64px (empty row)
+
+      .seam-header {
+        .chevron {
+          transform: rotate(270deg);
+        }
+      }
+
+      .show-all-devices-button {
+        transform: translate(-50%, 16px);
+
+        svg {
+          transform: rotate(270deg);
+        }
+      }
+    }
+  }
+
   .seam-supported-device-table-content-state-block {
     width: 100%;
     background-color: colors.$bg-a;
@@ -134,85 +230,129 @@ $row-padding: 8px;
     table-layout: auto;
     border-collapse: collapse;
 
-    th,
-    td {
-      white-space: nowrap;
-      padding: 0 8px;
-    }
+    .seam-row {
+      height: 64px;
+      border-bottom: 1px solid colors.$bg-b;
+      display: flex;
 
-    thead {
-      width: 100%;
-      height: 50px;
-      background: colors.$bg-a;
-      overflow: hidden;
+      &:first-child {
+        border-top: 1px solid colors.$bg-b;
+      }
 
-      tr {
-        border-radius: 8px;
+      .seam-col {
+        display: flex;
+        padding: 8px;
       }
 
-      th {
-        vertical-align: middle;
-        text-align: left;
-        font-size: 16px;
-        font-weight: 600;
+      &.filter-result-row {
+        .seam-model-name {
+          display: flex;
+          align-items: center;
+
+          .seam-brand-image {
+            width: 32px;
+            margin-right: 4px;
+          }
+        }
       }
     }
 
-    tbody {
-      tr {
-        height: 60px;
-        border-bottom: 1px solid colors.$bg-b;
-      }
+    .seam-status-pill {
+      display: inline-flex;
+      padding: 4px 8px;
+      border-radius: 16px;
 
-      td {
-        vertical-align: middle;
+      & span {
+        font-size: 11px;
+        line-height: 134%;
+        letter-spacing: 0.55px;
       }
-    }
 
-    tr {
-      th:first-of-type,
-      td:first-of-type {
-        padding-left: $row-padding;
+      &.status-green {
+        background-color: colors.$pill-green-bg;
+        color: colors.$pill-green-text;
       }
 
-      th:last-of-type,
-      td:last-of-type {
-        padding-right: $row-padding;
+      &.status-blue {
+        background-color: colors.$pill-blue-bg;
+        color: colors.$pill-blue-text;
       }
-    }
 
-    .seam-status-pill {
-      display: inline-flex;
-      padding: 4px 8px;
-      border-radius: 90px;
-      background-color: colors.$status-green;
+      &.status-unknown {
+        color: colors.$text-gray-1;
+        font-size: 12px;
+        line-height: 118%;
+      }
 
-      & span {
-        color: white;
-        font-size: 14px;
+      &:not(.status-unknown) {
         font-weight: 600;
-        line-height: 1;
       }
+    }
 
-      &.status-green {
-        background-color: colors.$status-green;
+    .seam-device-image-col {
+      align-items: center;
+
+      .seam-image-box {
+        width: 48px;
+        height: 48px;
+
+        img {
+          width: 100%;
+        }
       }
+    }
+
+    .seam-model-col {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: 2px;
 
-      &.status-orange {
-        background-color: colors.$status-orange;
+      .seam-model-name {
+        font-size: 14px;
       }
 
-      &.status-red {
-        background-color: colors.$status-red;
+      .seam-model-id {
+        color: colors.$text-gray-2;
+        font-size: 12px;
+
+        .seam-dot-divider {
+          margin: 0 4px;
+          color: colors.$text-gray-3;
+        }
       }
 
-      &.status-blue {
-        background-color: colors.$primary;
+      @media only screen and (width >= 450px) {
+        .seam-model-name {
+          font-size: 16px;
+        }
+
+        .seam-model-id {
+          font-size: 14px;
+        }
       }
 
-      &.status-gray {
-        background-color: colors.$bg-d;
+      @media only screen and (width >= 700px) {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+
+        .seam-model-name {
+          flex: 0 0 75%;
+        }
+
+        .seam-model-id {
+          font-size: 16px;
+        }
       }
     }
+
+    .seam-status-col {
+      width: 70px;
+      text-align: center;
+      align-items: center;
+    }
   }
 }