@seamapi/react 1.24.0 → 1.26.0

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

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

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.26.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;