@seamapi/react 1.3.0 → 1.5.0

package/src/lib/ui/Button.tsx

@@ -13,7 +13,7 @@ export function Button({
   variant = 'outline',
   children,
   size = 'medium',
-  disabled,
+  disabled = false,
   onClick,
   className,
 }: PropsWithChildren<ButtonProps>): JSX.Element {

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -7,7 +7,6 @@ import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
-import type { AlertProps } from 'lib/ui/Alert/Alert.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
@@ -57,36 +56,6 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
   const accessCodeLength =
     device.properties?.schlage_metadata?.access_code_length
 
-  function generateDeviceAlerts() {
-    if (device.errors.length === 0 && device.warnings.length === 0) {
-      return []
-    }
-
-    const alerts: AlertProps[] = []
-
-    if (device.errors.length > 0) {
-      alerts.push(
-        ...device.errors.map((error) => ({
-          variant: 'error' as const,
-          message: error.message,
-        }))
-      )
-    }
-
-    if (device.warnings.length > 0) {
-      alerts.push(
-        ...device.warnings.map((warning) => ({
-          variant: 'warning' as const,
-          message: warning.message,
-        }))
-      )
-    }
-
-    return alerts
-  }
-
-  const alerts = generateDeviceAlerts()
-
   if (accessCodes == null) {
     return null
   }
@@ -100,6 +69,17 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
     )
   }
 
+  const alerts = [
+    ...device.errors.map((error) => ({
+      variant: 'error' as const,
+      message: error.message,
+    })),
+    ...device.warnings.map((warning) => ({
+      variant: 'warning' as const,
+      message: warning.message,
+    })),
+  ]
+
   return (
     <div className='seam-device-details'>
       <ContentHeader title='Device' onBack={onBack} />

package/src/lib/ui/DeviceTable/DeviceHealthBar.tsx

@@ -32,7 +32,7 @@ export function DeviceHealthBar({
 
   if (issueCount === 0) {
     return (
-      <TableFilterBar>
+      <TableFilterBar filterCleared>
         <TableFilterItem>
           <CheckIcon />
           {t.devicesOk}
@@ -43,7 +43,7 @@ export function DeviceHealthBar({
 
   return (
     <TableFilterBar
-      isFilterCleared={filter == null}
+      filterCleared={filter == null}
       onFilterClear={() => {
         onFilterSelect(null)
       }}

package/src/lib/ui/Menu/Menu.tsx

@@ -135,10 +135,11 @@ export function Menu({
       {renderButton({ onOpen: handleOpen })}
       {createPortal(
         <div
-          className={classNames('seam-menu-bg', backgroundProps?.className)}
-          style={{
-            display: visible ? 'flex' : 'none',
-          }}
+          className={classNames(
+            'seam-menu-bg',
+            backgroundProps?.className,
+            visible ? 'seam-menu-visible' : 'seam-menu-hidden'
+          )}
           onClick={(event) => {
             event.stopPropagation()
             handleClose()

package/src/lib/ui/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -11,26 +11,26 @@ interface FilterCategoryMenuBaseProps {
 
 export type FilterCategoryMenuProps =
   | (FilterCategoryMenuBaseProps & {
-      addAllOption: true
+      hideAllOption?: false
       onAllOptionSelect: () => void
     })
   | (FilterCategoryMenuBaseProps & {
-      addAllOption?: false
+      hideAllOption: true
       onAllOptionSelect?: never
     })
 
 export function FilterCategoryMenu({
-  label,
+  label = 'Filter',
   options,
-  addAllOption,
+  hideAllOption = false,
   onSelect,
   onAllOptionSelect,
   buttonLabel,
 }: FilterCategoryMenuProps) {
-  const usableOptions = addAllOption !== null ? ['All', ...options] : options
+  const usableOptions = hideAllOption ? options : ['All', ...options]
 
   return (
-    <div className='seam-supported-devices-filter-menu-wrap'>
+    <div className='seam-supported-device-table-filter-menu-wrap'>
       <p>{label}</p>
       <Menu
         renderButton={({ onOpen }) => (
@@ -58,8 +58,3 @@ export function FilterCategoryMenu({
     </div>
   )
 }
-
-FilterCategoryMenu.defaultProps = {
-  addAllOption: true,
-  buttonLabel: 'Filter',
-}

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import axios from 'axios'
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { Button } from 'lib/ui/Button.js'
 import { SupportedDeviceFilterArea } from 'lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js'
@@ -9,8 +8,6 @@ import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
 import { SupportedDeviceHeader } from './SupportedDeviceHeader.js'
 import { SupportedDeviceRow } from './SupportedDeviceRow.js'
 
-const BASE_URL = 'https://devicedb.seam.co/api/device_models/list'
-
 export interface SupportedDeviceContentProps {
   cannotFilter?: boolean
 }
@@ -18,7 +15,6 @@ export interface SupportedDeviceContentProps {
 export function SupportedDeviceContent({
   cannotFilter = false,
 }: SupportedDeviceContentProps) {
-  const [allDeviceModels, setAllDeviceModels] = useState<DeviceModel[]>([])
   const [filterValue, setFilterValue] = useState('')
   const [filters, setFilters] = useState<Filters>({
     supportedOnly: false,
@@ -26,54 +22,46 @@ export function SupportedDeviceContent({
     brand: null,
   })
 
-  const fetchDeviceModels = useCallback(async () => {
-    const queries = []
-
-    if (filterValue.trim() !== '') {
-      queries.push(`text_search=${encodeURIComponent(filterValue.trim())}`)
-    }
-
-    if (filters.supportedOnly) {
-      queries.push('support_level=live')
-    }
-
-    if (filters.category !== null) {
-      queries.push(`main_category=${encodeURIComponent(filters.category)}`)
-    }
-
-    if (filters.brand !== null) {
-      queries.push(`brand=${encodeURIComponent(filters.brand)}`)
-    }
-
-    const url = `${BASE_URL}?${queries.join('&')}`
-    return await axios.get(url)
-  }, [filterValue, filters])
-
-  const { data, isLoading, isError, refetch } = useQuery<{
-    data: {
-      device_models?: DeviceModel[]
-    }
-  }>({
+  const {
+    data: deviceModels,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<DeviceModel[]>({
     queryKey: ['supported_devices', filterValue, filters],
-    queryFn: fetchDeviceModels,
+    queryFn: async () => {
+      const url = new URL('https://devicedb.seam.co/api/device_models/list')
+
+      if (filterValue.trim() !== '') {
+        url.searchParams.set('text_search', filterValue.trim())
+      }
+
+      if (filters.supportedOnly) {
+        url.searchParams.set('support_level', 'live')
+      }
+
+      if (filters.category !== null) {
+        url.searchParams.set('main_category', filters.category)
+      }
+
+      if (filters.brand !== null) {
+        url.searchParams.set('brand', filters.brand)
+      }
+
+      const res = await fetch(url)
+      if (!res.ok) {
+        throw new Error('Failed to load device models')
+      }
+      const data = await res.json()
+      return data?.device_models ?? []
+    },
   })
 
-  useEffect(() => {
-    if (
-      data?.data?.device_models !== undefined &&
-      allDeviceModels.length === 0
-    ) {
-      setAllDeviceModels(data.data.device_models)
-    }
-  }, [data, allDeviceModels.length])
-
-  const deviceModels = data?.data?.device_models ?? []
-
   return (
-    <div className='seam-supported-devices-table-wrap'>
+    <div className='seam-supported-device-table-content-wrap'>
       {!cannotFilter && (
         <SupportedDeviceFilterArea
-          deviceModels={allDeviceModels}
+          deviceModels={deviceModels ?? []}
           filterValue={filterValue}
           setFilterValue={setFilterValue}
           filters={filters}
@@ -82,13 +70,13 @@ export function SupportedDeviceContent({
       )}
 
       {isLoading && (
-        <div className='seam-supported-devices-table-state-block'>
+        <div className='seam-supported-device-table-content-state-block'>
           <p>Loading device models...</p>
         </div>
       )}
 
       {isError && (
-        <div className='seam-supported-devices-table-state-block'>
+        <div className='seam-supported-device-table-content-state-block'>
           <p>There was an error fetching device models.</p>
           <Button
             variant='solid'
@@ -102,8 +90,8 @@ export function SupportedDeviceContent({
         </div>
       )}
 
-      {!isLoading && !isError && data?.data?.device_models !== null && (
-        <table className='seam-supported-devices-table'>
+      {!isLoading && !isError && deviceModels !== null && (
+        <table className='seam-supported-device-table-content'>
           <SupportedDeviceHeader />
           <tbody>
             {deviceModels.length !== 0 &&
@@ -115,9 +103,9 @@ export function SupportedDeviceContent({
               ))}
 
             {deviceModels.length === 0 && (
-              <tr className='seam-supported-devices-table-message-row'>
+              <tr className='seam-supported-device-table-content-message-row'>
                 <td colSpan={6}>
-                  <div className='seam-supported-devices-table-message'>
+                  <div className='seam-supported-device-table-content-message'>
                     {filterValue.length === 0 ? (
                       <p>No device models found.</p>
                     ) : (
@@ -129,7 +117,7 @@ export function SupportedDeviceContent({
                           onClick={() => {
                             setFilterValue('')
                           }}
-                          className='seam-supported-devices-table-message-clear-search'
+                          className='seam-supported-device-table-content-message-clear-search'
                         >
                           Clear search terms
                         </Button>

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -55,7 +55,7 @@ export function SupportedDeviceFilterArea({
     : 'Filter'
 
   return (
-    <div className='seam-supported-devices-filter-area'>
+    <div className='seam-supported-device-table-filter-area'>
       <div className='seam-deliberate-block' />
       <div className='seam-filters-wrap'>
         <Menu
@@ -70,7 +70,7 @@ export function SupportedDeviceFilterArea({
           )}
         >
           <div
-            className='seam-supported-devices-filter-menu'
+            className='seam-supported-device-table-filter-menu'
             onClick={(event) => {
               event.stopPropagation()
             }}
@@ -116,13 +116,13 @@ export function SupportedDeviceFilterArea({
           </div>
         </Menu>
 
-        <div className='seam-supported-devices-filter-area-search-bar-wrap'>
+        <div className='seam-supported-device-table-filter-area-search-bar-wrap'>
           <SearchTextField
             value={filterValue}
             onChange={(value) => {
               setFilterValue(value)
             }}
-            className='seam-supported-devices-filter-area-search-bar'
+            className='seam-supported-device-table-filter-area-search-bar'
           />
         </div>
       </div>

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -11,7 +11,7 @@ export function SupportedDeviceRow({ deviceModel }: SupportedDeviceRowProps) {
   return (
     <tr>
       <td>
-        <img style={{ width: 40 }} src={deviceModel.icon_url} />
+        <img width={40} src={deviceModel.icon_url} />
       </td>
       <td>{deviceModel.main_category}</td>
       <td>{deviceModel.model_name}</td>

package/src/lib/ui/Table/TableFilterBar/TableFilterBar.tsx

@@ -3,23 +3,20 @@ import { IconButton } from 'lib/ui/IconButton.js'
 import type { ButtonProps, DivProps } from 'lib/ui/types.js'
 
 interface TableFilterBarProps extends DivProps {
-  isFilterCleared?: boolean
+  filterCleared?: boolean
   onFilterClear?: () => void
 }
 
 export function TableFilterBar({
-  isFilterCleared,
+  filterCleared = false,
   onFilterClear,
   children,
   ...props
 }: TableFilterBarProps) {
-  const showClearFilterButton = isFilterCleared === false
   return (
     <div className='seam-table-filter-bar' {...props}>
       {children}{' '}
-      {showClearFilterButton ? (
-        <ClearFiltersButton onClick={onFilterClear} />
-      ) : null}
+      {!filterCleared && <ClearFiltersButton onClick={onFilterClear} />}
     </div>
   )
 }

package/src/lib/ui/TextField/TextField.tsx

@@ -23,7 +23,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
     startAdornment,
     endAdornment,
     inputProps,
-    disabled,
+    disabled = false,
   } = props
 
   return (

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

@@ -2,6 +2,10 @@
 
 @mixin all {
   .seam-access-code-table {
+    .seam-search-text-field {
+      width: 170px;
+    }
+
     .seam-table-row {
       cursor: pointer;
 

package/src/styles/_main.scss

@@ -12,7 +12,7 @@
 @use './device-details';
 @use './device-table';
 @use './access-code-details';
-@use './supported-devices';
+@use './supported-device-table';
 
 .seam-components {
   // Reset
@@ -33,5 +33,5 @@
   @include access-code-table.all;
   @include access-code-details.all;
   @include alert.all;
-  @include supported-devices.all;
+  @include supported-device-table.all;
 }

package/src/styles/_menus.scss

@@ -9,7 +9,15 @@
     position: fixed;
     inset: 0;
     z-index: 999999;
-    display: none; // Toggled in JS (component)
+    display: none;
+  }
+
+  .seam-menu-hidden {
+    display: none;
+  }
+
+  .seam-menu-visible {
+    display: flex;
   }
 
   .seam-menu-content {

package/src/styles/{_supported-devices.scss → _supported-device-table.scss}

@@ -3,7 +3,7 @@
 $row-padding: 8px;
 
 @mixin all {
-  .seam-supported-devices-filter-area {
+  .seam-supported-device-table-filter-area {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -19,7 +19,7 @@ $row-padding: 8px;
       gap: 8px;
     }
 
-    .seam-supported-devices-filter-area-search-bar-wrap {
+    .seam-supported-device-table-filter-area-search-bar-wrap {
       position: relative;
       display: flex;
       justify-content: center;
@@ -28,7 +28,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-filter-menu {
+  .seam-supported-device-table-filter-menu {
     width: 100%;
     padding: 8px 16px;
 
@@ -56,7 +56,7 @@ $row-padding: 8px;
       }
     }
 
-    .seam-supported-devices-filter-menu-wrap {
+    .seam-supported-device-table-filter-menu-wrap {
       width: 100%;
       display: flex;
       justify-content: space-between;
@@ -92,7 +92,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-table-state-block {
+  .seam-supported-device-table-content-state-block {
     width: 100%;
     background-color: colors.$bg-a;
     padding: 32px 8px;
@@ -103,11 +103,11 @@ $row-padding: 8px;
     gap: 8px;
   }
 
-  .seam-supported-devices-table-message-row {
+  .seam-supported-device-table-content-message-row {
     height: auto !important;
   }
 
-  .seam-supported-devices-table-message {
+  .seam-supported-device-table-content-message {
     width: 100%;
     padding: 32px 0;
     display: flex;
@@ -128,7 +128,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-table {
+  .seam-supported-device-table-content {
     width: 100%;
     overflow-x: auto;
     table-layout: auto;