@seamapi/react 1.6.0 → 1.8.0

package/src/lib/{SeamProvider.tsx → seam/SeamProvider.tsx}

@@ -1,20 +1,20 @@
-'use client'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   createContext,
   type PropsWithChildren,
   useContext,
-  useRef,
+  useMemo,
 } from 'react'
 import type { Seam, SeamClientOptions } from 'seamapi'
 
-import { useSeamFont } from './seam/use-seam-font.js'
-import { useSeamStyles } from './seam/use-seam-styles.js'
+import { useSeamFont } from 'lib/seam/use-seam-font.js'
+import { useSeamStyles } from 'lib/seam/use-seam-styles.js'
 
 declare global {
   // eslint-disable-next-line no-var
   var seam: SeamProviderProps | undefined
+  // eslint-disable-next-line no-var
+  var seamQueryClient: QueryClient | undefined
 }
 
 export interface SeamContext {
@@ -25,82 +25,90 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-type SeamProviderProps = SeamProviderBaseProps &
-  (
-    | SeamProviderPropsWithClient
-    | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
-    | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
-  )
+export type SeamProviderProps =
+  | SeamProviderPropsWithClient
+  | SeamProviderPropsWithPublishableKey
+  | SeamProviderPropsWithClientSessionToken
 
-interface SeamProviderPropsWithClient {
+export interface SeamProviderPropsWithClient extends SeamProviderBaseProps {
   client: Seam
 }
 
-interface SeamProviderPropsWithPublishableKey {
+export interface SeamProviderPropsWithPublishableKey
+  extends SeamProviderBaseProps,
+    AllowedSeamClientOptions {
   publishableKey: string
   userIdentifierKey?: string
 }
 
-interface SeamProviderPropsWithClientSessionToken {
+export interface SeamProviderPropsWithClientSessionToken
+  extends SeamProviderBaseProps,
+    AllowedSeamClientOptions {
   clientSessionToken: string
 }
 
 interface SeamProviderBaseProps {
   disableCssInjection?: boolean | undefined
   disableFontInjection?: boolean | undefined
-  useUnminifiedCss?: boolean | undefined
+  unminifiyCss?: boolean | undefined
+  queryClient?: QueryClient | undefined
 }
 
 type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>
 
+const defaultQueryClient = new QueryClient()
+
 export function SeamProvider({
   children,
   disableCssInjection = false,
   disableFontInjection = false,
-  useUnminifiedCss = false,
+  unminifiyCss = false,
+  queryClient,
   ...props
 }: PropsWithChildren<SeamProviderProps>): JSX.Element {
-  const { Provider } = seamContext
-
-  const queryClientRef = useRef(new QueryClient())
+  useSeamStyles({ disabled: disableCssInjection, unminified: unminifiyCss })
+  useSeamFont({ disabled: disableFontInjection })
 
-  const contextRef = useRef(createSeamContextValue(props))
-  if (
-    contextRef.current.client == null &&
-    contextRef.current.publishableKey == null &&
-    contextRef.current.clientSessionToken == null
-  ) {
-    contextRef.current = defaultSeamContextValue
-  }
+  const value = useMemo(() => {
+    const context = createSeamContextValue(props)
+    if (
+      context.client == null &&
+      context.publishableKey == null &&
+      context.clientSessionToken == null
+    ) {
+      return defaultSeamContextValue
+    }
+    return context
+  }, [props])
 
   if (
-    contextRef.current.client == null &&
-    contextRef.current.publishableKey == null &&
-    contextRef.current.clientSessionToken == null
+    value.client == null &&
+    value.publishableKey == null &&
+    value.clientSessionToken == null
   ) {
     throw new Error(
-      `Must provide either a Seam client, clientSessionToken or a publishableKey.`
+      `Must provide either a Seam client, clientSessionToken, or a publishableKey.`
     )
   }
 
-  useSeamStyles({ disabled: disableCssInjection, unminified: useUnminifiedCss })
-  useSeamFont({ disabled: disableFontInjection })
+  const { Provider } = seamContext
 
   return (
     <div className='seam-components'>
-      <QueryClientProvider client={queryClientRef.current}>
-        <Provider value={{ ...contextRef.current }}>{children}</Provider>
+      <QueryClientProvider
+        client={queryClient ?? globalThis.seamQueryClient ?? defaultQueryClient}
+      >
+        <Provider value={value}>{children}</Provider>
       </QueryClientProvider>
     </div>
   )
 }
 
 const createDefaultSeamContextValue = (): SeamContext => {
-  if (globalThis.seam == null) {
-    return { client: null }
-  }
-
   try {
+    if (globalThis.seam == null) {
+      return { client: null }
+    }
     return createSeamContextValue(globalThis.seam)
   } catch (err) {
     // eslint-disable-next-line no-console
@@ -133,7 +141,7 @@ const createSeamContextValue = (options: SeamProviderProps): SeamContext => {
     }
   }
 
-  throw new Error('Invalid SeamProvider options')
+  return { client: null }
 }
 
 const defaultSeamContextValue = createDefaultSeamContextValue()
@@ -199,12 +207,11 @@ const isSeamProviderPropsWithClientSessionToken = (
     throw new Error('Cannot provide a Seam client along with other options.')
   }
 
-  // No reason to ban this behavior, but it's unnecessary.
-  // if ('publishableKey' in props && props.publishableKey != null) {
-  //   throw new Error(
-  //     'Cannot provide both a clientSessionToken and a publishableKey .'
-  //   )
-  // }
+  if ('publishableKey' in props && props.publishableKey != null) {
+    throw new Error(
+      'Cannot provide both a clientSessionToken and a publishableKey.'
+    )
+  }
 
   if ('userIdentifierKey' in props && props.userIdentifierKey != null) {
     throw new Error('Cannot use a userIdentifierKey with a clientSessionToken.')

package/src/lib/seam/access-codes/use-access-codes.ts

@@ -6,9 +6,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 UseAccessCodesParams = AccessCodesListRequest | string
 export type UseAccessCodesData = AccessCode[]
@@ -29,7 +29,7 @@ export function useAccessCodes(
     queryFn: async () => {
       if (client == null) return []
       const accessCodes = await client?.accessCodes.list(normalizedParams)
-      return accessCodes.sort(byCreatedAt)
+      return accessCodes.sort(compareByCreatedAtDesc)
     },
   })
 

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

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { AccessCodeDetailsProps } from './AccessCodeDetails.js'
+
+export const name = 'seam-access-code-details'
+
+export const props: ElementProps<AccessCodeDetailsProps> = {
+  accessCodeId: 'string',
+  onBack: 'function',
+}
+
+export { AccessCodeDetails as Component } from './AccessCodeDetails.js'

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

@@ -1,22 +1,24 @@
+import classNames from 'classnames'
 import { DateTime } from 'luxon'
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
-import { useAccessCode } from 'lib/index.js'
-
-import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
-import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
+import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
+import { AccessCodeDevice } from 'lib/seam/components/AccessCodeDetails/AccessCodeDevice.js'
+import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { useIsDateInPast } from 'lib/use-is-date-in-past.js'
+import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export interface AccessCodeDetailsProps {
   accessCodeId: string
   onBack?: () => void
+  className?: string
 }
 
 export function AccessCodeDetails({
   accessCodeId,
   onBack,
+  className,
 }: AccessCodeDetailsProps): JSX.Element | null {
   const { accessCode } = useAccessCode(accessCodeId)
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
@@ -30,6 +32,7 @@ export function AccessCodeDetails({
   if (selectedDeviceId != null) {
     return (
       <DeviceDetails
+        className={className}
         deviceId={selectedDeviceId}
         onBack={() => {
           selectDevice(null)
@@ -39,7 +42,7 @@ export function AccessCodeDetails({
   }
 
   return (
-    <div className='seam-access-code-details'>
+    <div className={classNames('seam-access-code-details', className)}>
       <ContentHeader title='Access code' onBack={onBack} />
       <div className='seam-summary'>
         <div className='seam-top'>

package/src/lib/{ui → seam/components}/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,11 +1,11 @@
 import type { LockDevice } from 'seamapi'
 
+import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
-import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TextButton } from 'lib/ui/TextButton.js'
 
 export function AccessCodeDevice({
@@ -27,7 +27,7 @@ export function AccessCodeDevice({
 function LockDeviceDetails(props: {
   device: LockDevice
   onSelectDevice: (deviceId: string) => void
-}) {
+}): JSX.Element {
   const { device, onSelectDevice } = props
   const toggleLock = useToggleLock(device)
   const model = getDeviceModel(device)

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

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { AccessCodeTableProps } from './AccessCodeTable.js'
+
+export const name = 'seam-access-code-table'
+
+export const props: ElementProps<AccessCodeTableProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+}
+
+export { AccessCodeTable as Component } from './AccessCodeTable.js'

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

@@ -1,15 +1,17 @@
+import classNames from 'classnames'
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
-import { copyToClipboard } from 'lib/copy-to-clipboard.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import {
   useAccessCodes,
   type UseAccessCodesData,
 } from 'lib/seam/access-codes/use-access-codes.js'
-import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
-import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
+import { AccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
+import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
@@ -26,15 +28,17 @@ import { Title } from 'lib/ui/typography/Title.js'
 export interface AccessCodeTableProps {
   deviceId: string
   onBack?: () => void
+  className?: string
 }
 
-export function AccessCodeTable(
-  props: AccessCodeTableProps
-): JSX.Element | null {
+export function AccessCodeTable({
+  deviceId,
+  onBack,
+  className,
+}: AccessCodeTableProps): JSX.Element | null {
   const { accessCodes } = useAccessCodes({
-    device_id: props.deviceId,
+    device_id: deviceId,
   })
-  const { onBack } = props
 
   const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
     null
@@ -44,6 +48,7 @@ export function AccessCodeTable(
   if (selectedAccessCode != null) {
     return (
       <AccessCodeDetails
+        className={className}
         accessCodeId={selectedAccessCode.access_code_id}
         onBack={() => {
           selectAccessCode(null)
@@ -67,7 +72,7 @@ export function AccessCodeTable(
   const accessCodeCount = accessCodes.length
 
   return (
-    <div className='seam-access-code-table'>
+    <div className={classNames('seam-access-code-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
@@ -89,7 +94,7 @@ export function AccessCodeTable(
 function Body(props: {
   accessCodes: Array<UseAccessCodesData[number]>
   selectAccessCode: (accessCode: AccessCode) => void
-}) {
+}): JSX.Element {
   const { accessCodes, selectAccessCode } = props
 
   if (accessCodes.length === 0) {
@@ -114,8 +119,15 @@ function Body(props: {
 function AccessCodeRow(props: {
   accessCode: UseAccessCodesData[number]
   onClick: () => void
-}) {
+}): JSX.Element {
   const { onClick, accessCode } = props
+
+  const errorCount = accessCode.errors?.length ?? 0
+  const isPlural = errorCount === 0 || errorCount > 1
+  const issueIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+
   return (
     <TableRow key={accessCode.access_code_id} onClick={onClick}>
       <TableCell className='seam-icon-cell'>
@@ -128,6 +140,11 @@ function AccessCodeRow(props: {
         <CodeDetails accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-action-cell'>
+        {errorCount > 0 && (
+          <div className='seam-code-issue-icon-wrap' title={issueIconTitle}>
+            <ExclamationCircleOutlineIcon />
+          </div>
+        )}
         <MoreActionsMenu
           menuProps={{
             backgroundProps: {
@@ -157,4 +174,6 @@ const t = {
   accessCodes: 'Access Codes',
   copyCode: 'Copy code',
   noAccessCodesMessage: 'Sorry, no access codes were found',
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
 }

package/src/lib/{ui → seam/components}/AccessCodeTable/CodeDetails.tsx

@@ -1,10 +1,9 @@
 import { DateTime } from 'luxon'
 import type { AccessCode } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
+import { useDevice } from 'lib/seam/devices/use-device.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
-import { useIsDateInPast } from 'lib/use-is-date-in-past.js'
+import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props

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

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { DeviceDetailsProps } from './DeviceDetails.js'
+
+export const name = 'seam-device-details'
+
+export const props: ElementProps<DeviceDetailsProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+}
+
+export { DeviceDetails as Component } from './DeviceDetails.js'

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

@@ -1,29 +1,32 @@
+import classNames from 'classnames'
 import type { LockDevice } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
+import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
-import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
-import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { useToggle } from 'lib/use-toggle.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
   onBack?: () => void
+  className?: string
 }
 
-export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
-  const { deviceId, onBack } = props
-
+export function DeviceDetails({
+  deviceId,
+  onBack,
+  className,
+}: DeviceDetailsProps): JSX.Element | null {
   const { device } = useDevice({
     device_id: deviceId,
   })
@@ -36,11 +39,17 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
     return null
   }
 
-  return <LockDeviceDetails device={device} onBack={onBack} />
+  return (
+    <LockDeviceDetails className={className} device={device} onBack={onBack} />
+  )
 }
 
-function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
-  const { device, onBack } = props
+function LockDeviceDetails(props: {
+  device: LockDevice
+  onBack?: () => void
+  className?: string
+}): JSX.Element | null {
+  const { device, onBack, className } = props
 
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
@@ -63,6 +72,7 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
   if (accessCodesOpen) {
     return (
       <AccessCodeTable
+        className={className}
         deviceId={device.device_id}
         onBack={toggleAccessCodesOpen}
       />
@@ -81,7 +91,7 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
   ]
 
   return (
-    <div className='seam-device-details'>
+    <div className={classNames('seam-device-details', className)}>
       <ContentHeader title='Device' onBack={onBack} />
       <div className='seam-body'>
         <div className='seam-summary'>

package/src/lib/{ui → seam/components}/DeviceTable/DeviceHealthBar.tsx

@@ -16,7 +16,7 @@ export function DeviceHealthBar({
   devices,
   filter,
   onFilterSelect,
-}: DeviceHealthBarProps) {
+}: DeviceHealthBarProps): JSX.Element {
   const erroredDevices = devices.filter((device) => device.errors.length > 0)
   const issueCount = erroredDevices.length
 

package/src/lib/{ui → seam/components}/DeviceTable/DeviceRow.tsx

@@ -1,3 +1,4 @@
+import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import type {
   UseDevicesData,
@@ -7,7 +8,6 @@ import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { LockStatus } from 'lib/ui/device/LockStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
-import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'

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

@@ -0,0 +1,11 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { DeviceTableProps } from './DeviceTable.js'
+
+export const name = 'seam-device-table'
+
+export const props: ElementProps<DeviceTableProps> = {
+  onBack: 'function',
+}
+
+export { DeviceTable as Component } from './DeviceTable.js'

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

@@ -1,16 +1,17 @@
+import classNames from 'classnames'
 import { useState } from 'react'
 
+import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import {
+  type DeviceFilter,
+  DeviceHealthBar,
+} from 'lib/seam/components/DeviceTable/DeviceHealthBar.js'
+import { DeviceRow } from 'lib/seam/components/DeviceTable/DeviceRow.js'
 import {
   useDevices,
   type UseDevicesData,
   type UseDevicesParams,
 } from 'lib/seam/devices/use-devices.js'
-import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
-import {
-  type DeviceFilter,
-  DeviceHealthBar,
-} from 'lib/ui/DeviceTable/DeviceHealthBar.js'
-import { DeviceRow } from 'lib/ui/DeviceTable/DeviceRow.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -23,13 +24,14 @@ export type DeviceTableProps = Props & UseDevicesParams
 
 interface Props {
   onBack?: () => void
+  className?: string
 }
 
 export function DeviceTable({
   onBack,
-  ...props
+  className,
 }: DeviceTableProps): JSX.Element | null {
-  const { devices, isLoading, isError, error } = useDevices(props)
+  const { devices, isLoading, isError, error } = useDevices()
 
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
   const [searchTerm, setSearchTerm] = useState('')
@@ -37,6 +39,7 @@ export function DeviceTable({
   if (selectedDeviceId != null) {
     return (
       <DeviceDetails
+        className={className}
         deviceId={selectedDeviceId}
         onBack={() => {
           selectDevice(null)
@@ -46,11 +49,11 @@ export function DeviceTable({
   }
 
   if (isLoading) {
-    return <p>...</p>
+    return <p className={className}>...</p>
   }
 
   if (isError) {
-    return <p>{error?.message}</p>
+    return <p className={className}>{error?.message}</p>
   }
 
   if (devices == null) {
@@ -68,7 +71,7 @@ export function DeviceTable({
   })
 
   return (
-    <div className='seam-device-table'>
+    <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
@@ -90,7 +93,7 @@ export function DeviceTable({
 function Body(props: {
   devices: Array<UseDevicesData[number]>
   selectDevice: (id: string) => void
-}) {
+}): JSX.Element {
   const { devices, selectDevice } = props
   const [filter, setFilter] = useState<DeviceFilter | null>(null)