@seamapi/react 1.2.0 → 1.4.0

package/lib/ui/device/BatteryStatus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LockDevice } from 'seamapi';
 interface BatteryStatusProps {
     device: LockDevice;

package/lib/ui/device/LockStatus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LockDevice } from 'seamapi';
 interface LockStatusProps {
     device: LockDevice;

package/lib/ui/device/OnlineStatus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LockDevice } from 'seamapi';
 interface OnlineStatusProps {
     device: LockDevice;

package/lib/ui/layout/ContentHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function ContentHeader(props: {
     title?: string;
     onBack?: () => void;

package/lib/ui/layout/DotDivider.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function DotDivider(): JSX.Element;

package/lib/ui/typography/Title.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SpanProps } from '../../../lib/ui/types.js';
 export declare function Title({ children, className, ...props }: SpanProps): JSX.Element;

package/lib/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/lib/version.js

@@ -0,0 +1 @@
+export default '1.4.0'

package/lib/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAe,IAAI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -65,6 +65,7 @@
     "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .",
     "prelint": "prettier --check --ignore-path .gitignore .",
     "postlint": "stylelint '**/*.scss'",
+    "prepack": "echo \"export default '$(jq -r .version < package.json)'\" > lib/version.js",
     "postversion": "git push --follow-tags",
     "storybook": "storybook dev --port 6006",
     "storybook:docs": "storybook dev --docs --port 6007",
@@ -94,7 +95,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^5.21.1",
+    "seamapi": "^6.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -113,7 +114,7 @@
     "@storybook/react": "^7.0.2",
     "@storybook/react-webpack5": "^7.0.2",
     "@storybook/testing-library": "^0.1.0",
-    "@svgr/cli": "^7.0.0",
+    "@svgr/cli": "^8.0.1",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
     "@types/luxon": "^3.3.0",

package/src/lib/SeamProvider.tsx

@@ -25,14 +25,12 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-type SeamProviderProps = {
-  disableCssInjection?: boolean | undefined
-  disableFontInjection?: boolean | undefined
-} & (
-  | SeamProviderPropsWithClient
-  | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
-  | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
-)
+type SeamProviderProps = SeamProviderBaseProps &
+  (
+    | SeamProviderPropsWithClient
+    | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
+    | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
+  )
 
 interface SeamProviderPropsWithClient {
   client: Seam
@@ -47,10 +45,19 @@ interface SeamProviderPropsWithClientSessionToken {
   clientSessionToken: string
 }
 
+interface SeamProviderBaseProps {
+  disableCssInjection?: boolean | undefined
+  disableFontInjection?: boolean | undefined
+  useUnminifiedCss?: boolean | undefined
+}
+
 type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>
 
 export function SeamProvider({
   children,
+  disableCssInjection = false,
+  disableFontInjection = false,
+  useUnminifiedCss = false,
   ...props
 }: PropsWithChildren<SeamProviderProps>): JSX.Element {
   const { Provider } = seamContext
@@ -76,8 +83,8 @@ export function SeamProvider({
     )
   }
 
-  useSeamStyles({ enabled: !(props.disableCssInjection ?? false) })
-  useSeamFont({ enabled: !(props.disableFontInjection ?? false) })
+  useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss })
+  useSeamFont({ disabled: disableFontInjection })
 
   return (
     <div className='seam-components'>

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

@@ -3,19 +3,18 @@ import { useEffect } from 'react'
 const fontUrl =
   'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'
 
-export const useSeamFont = ({ enabled }: { enabled: boolean }) => {
+export const useSeamFont = ({ disabled = false }: { disabled?: boolean }) => {
   useEffect(() => {
+    if (disabled) return
     if (globalThis.document == null) return
-    if (!enabled) return
-    const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
 
-    if (linkEl === null) {
-      const link = globalThis.document.createElement('link')
-      link.rel = 'stylesheet'
-      link.type = 'text/css'
-      link.href = fontUrl
+    const linkEl = globalThis.document.querySelector(`link[href="${fontUrl}"]`)
+    if (linkEl != null) return
 
-      globalThis.document.head.appendChild(link)
-    }
-  }, [enabled])
+    const link = globalThis.document.createElement('link')
+    link.rel = 'stylesheet'
+    link.type = 'text/css'
+    link.href = fontUrl
+    globalThis.document.head.appendChild(link)
+  }, [disabled])
 }

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

@@ -1,21 +1,31 @@
 import { useEffect } from 'react'
 
-// TODO figure out the version automatically
-const cssUrl = 'https://www.unpkg.com/@seamapi/react@1.1.0/index.min.css'
+import version from 'lib/version.js'
+
+const origin = 'https://react.seam.co'
+
+export const useSeamStyles = ({
+  disabled = false,
+  unminified = false,
+}: {
+  unminified?: boolean
+  disabled?: boolean
+}) => {
+  const ext = `${unminified ? '' : 'min.'}css`
+  const cssUrl = `${origin}/v/${version ?? ''}/index.${ext}`
 
-export const useSeamStyles = ({ enabled }: { enabled: boolean }) => {
   useEffect(() => {
+    if (version === null) return
+    if (disabled) return
     if (globalThis.document == null) return
-    if (!enabled) return
-    const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
 
-    if (linkEl === null) {
-      const link = globalThis.document.createElement('link')
-      link.rel = 'stylesheet'
-      link.type = 'text/css'
-      link.href = cssUrl
+    const linkEl = globalThis.document.querySelector(`link[href="${cssUrl}"]`)
+    if (linkEl != null) return
 
-      globalThis.document.head.appendChild(link)
-    }
-  }, [enabled])
+    const link = globalThis.document.createElement('link')
+    link.rel = 'stylesheet'
+    link.type = 'text/css'
+    link.href = cssUrl
+    globalThis.document.head.appendChild(link)
+  }, [disabled, cssUrl])
 }

package/src/lib/ui/Alert/Alert.tsx

@@ -35,7 +35,7 @@ export function Alert(props: AlertProps): JSX.Element {
           <p className='seam-alert-message'>{message}</p>
         </div>
       </div>
-      {props.action == null ? null : <Action {...props.action} />}
+      {props.action != null && <Action {...props.action} />}
     </div>
   )
 }

package/src/lib/ui/Alert/Alerts.tsx

@@ -1,14 +1,16 @@
 import classNames from 'classnames'
+import type { PropsWithChildren } from 'react'
 
 import { Alert, type AlertProps } from 'lib/ui/Alert/Alert.js'
 
 interface AlertsProps {
   alerts?: AlertProps[]
-  children?: JSX.Element
   className?: string
 }
 
-export function Alerts(props: AlertsProps): JSX.Element | null {
+export function Alerts(
+  props: PropsWithChildren<AlertsProps>
+): JSX.Element | null {
   const { alerts, children, className } = props
 
   if (alerts?.length === 0) return null

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/lib/version.ts

@@ -0,0 +1 @@
+export default null

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 {