@seamapi/react 1.6.0 → 1.8.0

package/src/lib/{ui → seam/components}/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -2,6 +2,24 @@ import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 
+export type FilterCategoryMenuProps =
+  | FilterCategoryMenuPropsWithAllOption
+  | FilterCategoryMenuPropsWithoutAllOption
+
+interface FilterCategoryMenuPropsWithAllOption
+  extends FilterCategoryMenuBaseProps {
+  hideAllOption?: false
+  allLabel: string
+  onAllOptionSelect: () => void
+}
+
+interface FilterCategoryMenuPropsWithoutAllOption
+  extends FilterCategoryMenuBaseProps {
+  hideAllOption: true
+  allLabel: never
+  onAllOptionSelect?: never
+}
+
 interface FilterCategoryMenuBaseProps {
   label: string
   options: string[]
@@ -9,24 +27,15 @@ interface FilterCategoryMenuBaseProps {
   buttonLabel?: string
 }
 
-export type FilterCategoryMenuProps =
-  | (FilterCategoryMenuBaseProps & {
-      hideAllOption?: false
-      onAllOptionSelect: () => void
-    })
-  | (FilterCategoryMenuBaseProps & {
-      hideAllOption: true
-      onAllOptionSelect?: never
-    })
-
 export function FilterCategoryMenu({
-  label = 'Filter',
+  label = t.filter,
+  allLabel,
   options,
   hideAllOption = false,
   onSelect,
   onAllOptionSelect,
   buttonLabel,
-}: FilterCategoryMenuProps) {
+}: FilterCategoryMenuProps): JSX.Element {
   const usableOptions = hideAllOption ? options : ['All', ...options]
 
   return (
@@ -44,7 +53,7 @@ export function FilterCategoryMenu({
           <MenuItem
             key={`${index}:${option}`}
             onClick={() => {
-              if (option === 'All') {
+              if (option === allLabel) {
                 onAllOptionSelect?.()
               } else {
                 onSelect(option)
@@ -58,3 +67,7 @@ export function FilterCategoryMenu({
     </div>
   )
 }
+
+const t = {
+  filter: 'Filter',
+}

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

@@ -0,0 +1,120 @@
+import { SupportedDeviceHeader } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js'
+import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import {
+  type DeviceModelFilters,
+  useFilteredDeviceModels,
+} from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import { Button } from 'lib/ui/Button.js'
+
+interface SupportedDeviceContentProps {
+  filterValue: string
+  resetFilterValue: () => void
+  filters: DeviceModelFilters
+}
+
+export function SupportedDeviceContent({
+  resetFilterValue,
+  filterValue,
+  filters,
+}: SupportedDeviceContentProps): JSX.Element | null {
+  const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
+    filterValue,
+    filters
+  )
+
+  if (isLoading) {
+    return (
+      <div className='seam-supported-device-table-content-state-block'>
+        <p>{t.loading}</p>
+      </div>
+    )
+  }
+
+  if (isError) {
+    return (
+      <div className='seam-supported-device-table-content-state-block'>
+        <p>{t.error}</p>
+        <Button
+          variant='solid'
+          size='small'
+          onClick={() => {
+            void refetch()
+          }}
+        >
+          {t.retry}
+        </Button>
+      </div>
+    )
+  }
+
+  if (deviceModels == null) {
+    return null
+  }
+
+  return (
+    <table className='seam-supported-device-table-content'>
+      <SupportedDeviceHeader />
+      <tbody>
+        {deviceModels.map((deviceModel, index) => (
+          <SupportedDeviceRow
+            key={[
+              deviceModel.main_category,
+              deviceModel.brand,
+              deviceModel.model_name,
+              deviceModel.manufacturer_model_id,
+              index,
+            ].join(':')}
+            deviceModel={deviceModel}
+          />
+        ))}
+        {deviceModels.length === 0 && (
+          <EmptyResult
+            filterValue={filterValue}
+            resetFilterValue={resetFilterValue}
+          />
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+function EmptyResult({
+  filterValue,
+  resetFilterValue,
+}: Pick<
+  SupportedDeviceContentProps,
+  'filterValue' | 'resetFilterValue'
+>): JSX.Element {
+  const noMatchingRows = (
+    <>
+      <p>{t.noMatch}</p>
+      <Button
+        variant='outline'
+        size='small'
+        onClick={resetFilterValue}
+        className='seam-supported-device-table-content-message-clear-search'
+      >
+        {t.clear}
+      </Button>
+    </>
+  )
+
+  return (
+    <tr className='seam-supported-device-table-content-message-row'>
+      <td colSpan={6}>
+        <div className='seam-supported-device-table-content-message'>
+          {filterValue.length === 0 ? <p>{t.noneFound}</p> : noMatchingRows}
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+const t = {
+  loading: 'Loading device models...',
+  retry: 'Retry',
+  error: 'There was an error fetching device models.',
+  noneFound: 'No device models found.',
+  noMatch: 'No device models matched your search.',
+  clear: 'Clear search terms',
+}

package/src/lib/{ui → seam/components}/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -1,58 +1,45 @@
 import type { Dispatch, SetStateAction } from 'react'
+import type { DeviceModel } from 'seamapi'
 
-import { capitalize } from 'lib/capitalize.js'
+import { FilterCategoryMenu } from 'lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js'
+import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import { useDeviceModels } from 'lib/seam/device-models/use-device-models.js'
+import { capitalize } from 'lib/strings.js'
 import { Button } from 'lib/ui/Button.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
-import { FilterCategoryMenu } from 'lib/ui/SupportedDeviceTable/FilterCategoryMenu.js'
-import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 
-interface SupportedDeviceFilterAreaProps {
-  deviceModels: DeviceModel[]
+export interface SupportedDeviceFilterAreaProps {
   filterValue: string
   setFilterValue: (filter: string) => void
-  filters: Filters
-  setFilters: Dispatch<SetStateAction<Filters>>
+  filters: DeviceModelFilters
+  setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
 }
 
 export function SupportedDeviceFilterArea({
-  deviceModels,
   filterValue,
   setFilterValue,
   filters,
   setFilters,
-}: SupportedDeviceFilterAreaProps) {
-  const appliedFilters = Object.keys(filters).filter((key) => {
-    const filterProperty = filters[key as keyof Filters]
-    return (
-      filterProperty !== undefined &&
-      filterProperty !== null &&
-      filterProperty !== false
-    )
-  })
-  const appliedFiltersCount = appliedFilters.length
+}: SupportedDeviceFilterAreaProps): JSX.Element {
+  const appliedFiltersCount = Object.values(filters).filter(
+    (v) => v != null && v !== false
+  ).length
 
-  const getAvailablePropertiesFromDeviceModels = (
-    property: keyof DeviceModel
-  ) => {
-    const properties = new Set<string>()
-    deviceModels.forEach((deviceModel) => {
-      properties.add(capitalize(deviceModel[property]))
-    })
-    return Array.from(properties)
-  }
+  const filterProperty = 'brand'
+  const availableProperties = useAvailableProperties(filterProperty)
 
-  const resetFilter = (filterType: keyof Filters) => {
+  const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
       ...filters,
       [filterType]: null,
     }))
   }
 
-  const isPlural = appliedFiltersCount > 1
-  const filterButtonLabel = isPlural
-    ? `Filters (${appliedFiltersCount})`
-    : 'Filter'
+  const filterButtonLabel =
+    appliedFiltersCount > 0 ? `${t.filters} (${appliedFiltersCount})` : t.filter
+
+  const allLabel = t.all
 
   return (
     <div className='seam-supported-device-table-filter-area'>
@@ -77,27 +64,27 @@ export function SupportedDeviceFilterArea({
           >
             <div className='seam-filter-menu-row'>
               <FilterCategoryMenu
-                label='Brand'
-                options={getAvailablePropertiesFromDeviceModels('brand')}
+                label={t.brand}
+                allLabel={allLabel}
+                options={availableProperties}
                 onSelect={(brand: string) => {
                   setFilters((filters) => ({
                     ...filters,
                     brand,
                   }))
                 }}
-                buttonLabel={filters.brand ?? 'All'}
+                buttonLabel={filters.brand ?? allLabel}
                 onAllOptionSelect={() => {
-                  resetFilter('brand')
+                  resetFilter(filterProperty)
                 }}
               />
             </div>
-
             <div className='seam-filter-menu-row'>
               <label
                 htmlFor='supportedOnly'
                 className='seam-filter-checkbox-label'
               >
-                <p>Supported</p>
+                <p>{t.supported}</p>
                 <input
                   id='supportedOnly'
                   name='supportedOnly'
@@ -115,7 +102,6 @@ export function SupportedDeviceFilterArea({
             </div>
           </div>
         </Menu>
-
         <div className='seam-supported-device-table-filter-area-search-bar-wrap'>
           <SearchTextField
             value={filterValue}
@@ -129,3 +115,21 @@ export function SupportedDeviceFilterArea({
     </div>
   )
 }
+
+const useAvailableProperties = (property: keyof DeviceModel): string[] => {
+  const { deviceModels } = useDeviceModels()
+  if (deviceModels == null) return []
+  const properties = new Set<string>()
+  for (const deviceModel of deviceModels) {
+    properties.add(capitalize(deviceModel[property]))
+  }
+  return Array.from(properties)
+}
+
+const t = {
+  all: 'All',
+  brand: 'Brand',
+  supported: 'Supported',
+  filter: 'Filter',
+  filters: 'Filters',
+}

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

@@ -0,0 +1,22 @@
+export function SupportedDeviceHeader(): JSX.Element {
+  return (
+    <thead>
+      <tr>
+        <th />
+        <th>{t.category}</th>
+        <th>{t.modelName}</th>
+        <th>{t.manufacturerModelId}</th>
+        <th>{t.connectionType}</th>
+        <th>{t.status}</th>
+      </tr>
+    </thead>
+  )
+}
+
+const t = {
+  category: 'Category',
+  modelName: 'Model Name',
+  manufacturerModelId: 'Manufacturer Model ID',
+  connectionType: 'Connection Type',
+  status: 'Status',
+}

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

@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import type { DeviceModel } from 'seamapi'
+
+import { capitalize } from 'lib/strings.js'
+
+export interface SupportedDeviceRowProps {
+  deviceModel: DeviceModel
+}
+
+export function SupportedDeviceRow({
+  deviceModel,
+}: SupportedDeviceRowProps): JSX.Element {
+  const statusColor = supportLevelColors[deviceModel.support_level] ?? 'gray'
+  return (
+    <tr>
+      <td>
+        <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>
+  )
+}
+
+const supportLevelColors: Record<
+  DeviceModel['support_level'],
+  'green' | 'blue' | 'orange'
+> = {
+  live: 'green',
+  beta: 'blue',
+  unsupported: 'orange',
+}
+
+const connectionTypeNames: Record<DeviceModel['connection_type'], string> = {
+  wifi: 'Wifi',
+  zwave: 'Z-Wave',
+  zigbee: 'Zigbee',
+  unknown: 'Unknown',
+}

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

@@ -0,0 +1,11 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { SupportedDeviceTableProps } from './SupportedDeviceTable.js'
+
+export const name = 'seam-supported-device-table'
+
+export const props: ElementProps<SupportedDeviceTableProps> = {
+  cannotFilter: 'boolean',
+}
+
+export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'

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

@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+
+import { SupportedDeviceContent } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.js'
+import { SupportedDeviceFilterArea } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js'
+import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+
+export interface SupportedDeviceTableProps {
+  cannotFilter?: boolean
+  className?: string
+}
+
+export function SupportedDeviceTable({
+  cannotFilter = false,
+  className,
+}: SupportedDeviceTableProps): JSX.Element {
+  const [filterValue, setFilterValue] = useState('')
+  const [filters, setFilters] = useState<DeviceModelFilters>({
+    supportedOnly: false,
+    category: null,
+    brand: null,
+  })
+
+  return (
+    <div
+      className={classNames(
+        'seam-supported-device-table-content-wrap',
+        className
+      )}
+    >
+      {!cannotFilter && (
+        <SupportedDeviceFilterArea
+          filterValue={filterValue}
+          setFilterValue={setFilterValue}
+          filters={filters}
+          setFilters={setFilters}
+        />
+      )}
+      <SupportedDeviceContent
+        resetFilterValue={() => {
+          setFilterValue('')
+        }}
+        filterValue={filterValue}
+        filters={filters}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,35 @@
+import {
+  useDeviceModels,
+  type UseDeviceModelsParams,
+} from 'lib/seam/device-models/use-device-models.js'
+
+export interface DeviceModelFilters {
+  supportedOnly: boolean
+  category: string | null
+  brand: string | null
+}
+
+export const useFilteredDeviceModels = (
+  filterValue: string,
+  filters: DeviceModelFilters
+): ReturnType<typeof useDeviceModels> => {
+  const params: UseDeviceModelsParams = {}
+
+  if (filterValue.trim() !== '') {
+    params.text_search = filterValue.trim()
+  }
+
+  if (filters.supportedOnly) {
+    params.support_level = 'live'
+  }
+
+  if (filters.category !== null) {
+    params.main_category = filters.category
+  }
+
+  if (filters.brand !== null) {
+    params.brand = filters.brand
+  }
+
+  return useDeviceModels(params)
+}

package/src/lib/seam/components/elements.ts

@@ -0,0 +1,5 @@
+export * as AccessCodeDetails from './AccessCodeDetails/AccessCodeDetails.element.js'
+export * as AccessCodeTable from './AccessCodeTable/AccessCodeTable.element.js'
+export * as DeviceDetails from './DeviceDetails/DeviceDetails.element.js'
+export * as DeviceTable from './DeviceTable/DeviceTable.element.js'
+export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js'

package/src/lib/seam/device-models/use-device-models.ts

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  DeviceModel,
+  DeviceModelsListRequest,
+  DeviceModelsListResponse,
+  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 UseDeviceModelsParams = DeviceModelsListRequest
+export type UseDeviceModelsData = DeviceModel[]
+
+export function useDeviceModels(
+  params?: UseDeviceModelsParams
+): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
+  const { client } = useSeamClient()
+
+  const { data, ...rest } = useQuery<
+    DeviceModelsListResponse['device_models'],
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['device_models', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      const deviceModels = await client?.deviceModels.list(params)
+      return deviceModels
+    },
+  })
+
+  return { ...rest, deviceModels: data }
+}

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

@@ -7,9 +7,9 @@ import type {
   SeamError,
 } from 'seamapi'
 
+import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
-import { byCreatedAt } from 'lib/sort-by.js'
 
 export type UseDevicesParams = DevicesListRequest
 export type UseDevicesData = Array<Device<CommonDeviceProperties>>
@@ -27,9 +27,9 @@ export function useDevices(
       queryFn: async () => {
         if (client == null) return []
         const devices = await client?.devices.list(params)
-        return devices.sort(byCreatedAt)
+        return devices.sort(compareByCreatedAtDesc)
       },
-      onSuccess(devices) {
+      onSuccess: (devices) => {
         // Prime cache for each device.
         for (const device of devices) {
           queryClient.setQueryData(

package/src/lib/seam/devices/use-toggle-lock.ts

@@ -11,9 +11,8 @@ import type {
   SeamError,
 } from 'seamapi'
 
-import { useSeamClient } from 'lib/index.js'
-
 import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export function useToggleLock({
   device_id: deviceId,

package/src/lib/seam/index.ts

@@ -1,5 +1,6 @@
 export * from './access-codes/use-access-code.js'
 export * from './access-codes/use-access-codes.js'
+export * from './device-models/use-device-models.js'
 export * from './devices/use-device.js'
 export * from './devices/use-devices.js'
 export * from './use-seam-client.js'

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

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { Seam } from 'seamapi'
 import { v4 as uuidv4 } from 'uuid'
 
-import { useSeamContext } from 'lib/SeamProvider.js'
+import { useSeamContext } from 'lib/seam/SeamProvider.js'
 
 export function useSeamClient(): {
   client: Seam | null

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

@@ -3,7 +3,11 @@ import { useEffect } from 'react'
 const fontUrl =
   'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
 
-export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => {
+export const useSeamFont = ({
+  disabled = false,
+}: {
+  disabled?: boolean
+}): void => {
   useEffect(() => {
     if (disabled) return
     if (globalThis.document == null) return

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

@@ -10,7 +10,7 @@ export const useSeamStyles = ({
 }: {
   unminified?: boolean
   disabled?: boolean
-}) => {
+}): void => {
   const ext = `${unminified ? '' : 'min.'}css`
   const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}`
 

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

@@ -38,7 +38,7 @@ export function Menu({
   children,
   renderButton,
   backgroundProps,
-}: PropsWithChildren<MenuProps>) {
+}: PropsWithChildren<MenuProps>): JSX.Element | null {
   const { Provider } = menuContext
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const [documentEl, setDocumentEl] = useState<null | Element>(null)
@@ -56,11 +56,11 @@ export function Menu({
     }
   }, [setDocumentEl])
 
-  const handleClose = () => {
+  const handleClose = (): void => {
     setAnchorEl(null)
   }
 
-  const handleOpen = (event: MouseEvent<HTMLElement>) => {
+  const handleOpen = (event: MouseEvent<HTMLElement>): void => {
     setAnchorEl(event.currentTarget)
   }
 
@@ -171,7 +171,7 @@ export function Menu({
   )
 }
 
-export function useMenu() {
+export function useMenu(): MenuContextValue {
   const context = useContext(menuContext)
   if (context == null) {
     throw new Error('useMenu must be used within a Menu.')

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

@@ -9,7 +9,7 @@ interface MenuItemProps {
 export function MenuItem({
   onClick,
   children,
-}: PropsWithChildren<MenuItemProps>) {
+}: PropsWithChildren<MenuItemProps>): JSX.Element {
   const { close: closeMenu } = useMenu()
 
   return (

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

@@ -11,7 +11,7 @@ interface MoreActionsMenuProps {
 export function MoreActionsMenu({
   children,
   menuProps,
-}: PropsWithChildren<MoreActionsMenuProps>) {
+}: PropsWithChildren<MoreActionsMenuProps>): JSX.Element {
   return (
     <Menu
       renderButton={({ onOpen }) => (