@seamapi/react 0.16.0 → 0.17.0

package/src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx

@@ -0,0 +1,43 @@
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useFakeDevice } from 'lib/seam/devices/use-device.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 default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
+  //  TODO: Replace with `useDevice()` once ready
+  const { isLoading, device } = useFakeDevice({ device_id: deviceId })
+  const { show } = useNavigation()
+
+  // TODO: Do we want to return a skeleton loader here instead?
+  if (isLoading || !device || !isLockDevice(device)) {
+    return null
+  }
+
+  const model = getDeviceModel(device)
+
+  return (
+    <div className='seam-access-code-device'>
+      <div className='seam-device-image'>
+        <DeviceImage device={device} />
+      </div>
+      <div className='seam-body'>
+        <div className='seam-model'>{model}</div>
+        <TextButton
+          onClick={() => {
+            show({ name: 'device_detail', deviceId: device.device_id })
+          }}
+        >
+          {t.deviceDetails}
+        </TextButton>
+      </div>
+      <Button>Unlock</Button>
+    </div>
+  )
+}
+
+const t = {
+  deviceDetails: 'Device details',
+}

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,32 +1,28 @@
-import {
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  TableTitle,
-} from 'lib/ui/Table/index.js'
-
-import { useAccessCodes } from 'lib/hooks/use-access-codes.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-export function AccessCodeTable(props: {
-  deviceId: string
-  onClickBack?: () => void
-}): JSX.Element {
+export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: props.deviceId,
   })
-  const { onClickBack } = props
+
+  const { show } = useNavigation()
 
   if (!accessCodes) return <>{null}</>
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader onClickBack={onClickBack} />
+      <ContentHeader />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -34,7 +30,15 @@ export function AccessCodeTable(props: {
       </TableHeader>
       <TableBody>
         {accessCodes.map((code) => (
-          <TableRow key={code.access_code_id}>
+          <TableRow
+            key={code.access_code_id}
+            onClick={() => {
+              show({
+                name: 'access_code_detail',
+                accessCodeId: code.access_code_id,
+              })
+            }}
+          >
             <TableCell className='seam-icon-cell'>
               <div>
                 <AccessCodeKeyIcon />

package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx

@@ -0,0 +1,57 @@
+import type { AccessCode } from 'seamapi'
+
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
+import { Caption } from 'lib/ui/typography/Caption.js'
+import { Title } from 'lib/ui/typography/Title.js'
+
+export interface AccessCodeTableContentProps {
+  accessCodes: AccessCode[]
+}
+
+export function AccessCodeTableContent(
+  props: AccessCodeTableContentProps
+): JSX.Element {
+  const { accessCodes } = props
+
+  return (
+    <div className='seam-access-code-table'>
+      <ContentHeader />
+      <TableHeader>
+        <TableTitle>
+          {t.accessCodes} <Caption>({accessCodes.length})</Caption>
+        </TableTitle>
+      </TableHeader>
+      <TableBody>
+        {accessCodes.map((code) => (
+          <TableRow key={code.access_code_id}>
+            <TableCell className='seam-icon-cell'>
+              <div>
+                <AccessCodeKeyIcon />
+              </div>
+            </TableCell>
+            <TableCell className='seam-name-cell'>
+              <Title>{code.name}</Title>
+              <CodeDetails accessCode={code} />
+            </TableCell>
+            <TableCell className='seam-action-cell'>
+              {/* <IconButton>
+                <DotsEllipsisMoreIcon />
+              </IconButton> */}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </div>
+  )
+}
+
+const t = {
+  accessCodes: 'Access Codes',
+}

package/src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -7,7 +7,7 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props
 
   return (
-    <div className='seam-access-code-details'>
+    <div className='seam-code-details'>
       Unit 110
       <DotDivider />
       <Duration accessCode={accessCode} />

package/src/lib/ui/Button.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames'
+
+interface ButtonProps {
+  children?: string
+  variant?: 'solid' | 'outline' | 'neutral'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+}
+
+export function Button({
+  variant = 'outline',
+  children,
+  size = 'medium',
+  disabled,
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
+        'seam-btn-disabled': disabled,
+      })}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
+}

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

@@ -1,37 +1,49 @@
-import { type LockDevice } from 'seamapi'
-
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
-import { BatteryStatus } from 'lib/ui/DeviceDetails/BatteryStatus.js'
-import { DeviceImage } from 'lib/ui/DeviceDetails/DeviceImage.js'
-import { ModelStatus } from 'lib/ui/DeviceDetails/ModelStatus.js'
-import { OnlineStatus } from 'lib/ui/DeviceDetails/OnlineStatus.js'
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useFakeDevice } from 'lib/seam/devices/use-device.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'
 
 export interface DeviceDetailsProps {
-  device: LockDevice
+  deviceId: string
 }
 
-export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
-  const { device } = props
+export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
+  const { deviceId } = props
 
-  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const { isLoading: isLoadingDevice, device } = useFakeDevice({
+    device_id: deviceId,
+  })
 
-  const accessCodeLength =
-    device.properties?.schlage_metadata?.access_code_length
+  const { isLoading: isLoadingAccessCodes, accessCodes } = useAccessCodes({
+    device_id: deviceId,
+  })
+
+  const isLoading = isLoadingDevice || isLoadingAccessCodes
 
-  const [showingAccessCodes, toggleAccessCodes] = useToggle()
+  const { show } = useNavigation()
 
-  if (showingAccessCodes) {
-    return (
-      <AccessCodeTable
-        deviceId={device.device_id}
-        onClickBack={toggleAccessCodes}
-      />
-    )
+  if (isLoading || !device) {
+    return null
   }
 
+  if (!isLockDevice(device)) {
+    return null
+  }
+
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+
+  const accessCodeCount = accessCodes?.length
+
+  const accessCodeLength =
+    device.properties?.schlage_metadata?.access_code_length
+
   return (
     <div className='seam-device-details'>
       <ContentHeader title='Device' />
@@ -41,13 +53,15 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
             <div className='seam-image'>
               <DeviceImage device={device} />
             </div>
-
             <div className='seam-info'>
+              <span className='seam-label'>{t.device}</span>
               <h4 className='seam-device-name'>{device.properties.name}</h4>
               <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />
+                <span className='seam-label'>{t.power}:</span>{' '}
                 <BatteryStatus device={device} />
-                <ModelStatus device={device} />
+                <DeviceModel device={device} />
               </div>
             </div>
           </div>
@@ -55,17 +69,26 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
         <div className='seam-box'>
           <div
             className='seam-content seam-access-codes'
-            onClick={toggleAccessCodes}
+            onClick={() => {
+              show({ name: 'access_code_table', deviceId: device.device_id })
+            }}
           >
-            <span className='seam-value'>49 {t.accessCodes}</span>
+            <span className='seam-value'>
+              {accessCodeCount} {t.accessCodes}
+            </span>
             <ChevronRightIcon />
           </div>
         </div>
 
         <div className='seam-box'>
-          <div className='seam-content'>
-            <span className='seam-label'>{t.lockStatus}</span>
-            <span className='seam-value'>{lockStatus}</span>
+          <div className='seam-content seam-lock-status'>
+            <div>
+              <span className='seam-label'>{t.lockStatus}</span>
+              <span className='seam-value'>{lockStatus}</span>
+            </div>
+            <div className='seam-right'>
+              <Button size='small'>{t.unlock}</Button>
+            </div>
           </div>
           <AccessCodeLength accessCodeLength={accessCodeLength} />
         </div>
@@ -93,10 +116,14 @@ function AccessCodeLength(props: {
 }
 
 const t = {
+  device: 'Device',
+  unlock: 'Unlock',
   locked: 'Locked',
   unlocked: 'Unlocked',
   accessCodes: 'access codes',
   codeLength: 'Code length',
   digits: 'digits',
   lockStatus: 'Lock status',
+  status: 'Status',
+  power: 'Power',
 }

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

@@ -0,0 +1,34 @@
+import type { LockDevice } from 'seamapi'
+
+interface DeviceModelProps {
+  device: LockDevice
+}
+
+export function DeviceModel({ device }: DeviceModelProps): JSX.Element | null {
+  const model = getDeviceModel(device)
+  if (!model) {
+    return null
+  }
+
+  return (
+    <>
+      <span className='seam-label'>{t.model}:</span>{' '}
+      <div className='seam-device-model'>{model}</div>
+    </>
+  )
+}
+
+export const getDeviceModel = ({
+  properties,
+}: LockDevice): string | undefined => {
+  return (
+    properties?.august_metadata?.model ??
+    properties?.schlage_metadata?.model ??
+    t.fallbackModel
+  )
+}
+
+const t = {
+  model: 'Model',
+  fallbackModel: 'Unknown Lock',
+}

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

@@ -0,0 +1,94 @@
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import {
+  useDevices,
+  type UseDevicesData,
+  type UseDevicesParams,
+} from 'lib/seam/devices/use-devices.js'
+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 { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
+import { Caption } from 'lib/ui/typography/Caption.js'
+import { Title } from 'lib/ui/typography/Title.js'
+
+export type DeviceTableProps = Props & UseDevicesParams
+
+interface Props {
+  onBack?: () => void
+}
+
+export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
+  const { devices, isLoading, isError, error } = useDevices(props)
+  const { show } = useNavigation()
+
+  if (isLoading) return <p>...</p>
+  if (isError) return <p>{error?.message}</p>
+  if (devices == null) return null
+
+  const deviceCount = devices.length
+
+  return (
+    <div className='seam-device-table'>
+      <ContentHeader />
+      <TableHeader>
+        <TableTitle>
+          {t.devices} <Caption>({deviceCount})</Caption>
+        </TableTitle>
+      </TableHeader>
+      <TableBody>
+        {devices.map((device) => (
+          <DeviceRow
+            device={device}
+            key={device.device_id}
+            onClick={() => {
+              show({ name: 'device_detail', deviceId: device.device_id })
+            }}
+          />
+        ))}
+      </TableBody>
+    </div>
+  )
+}
+
+function DeviceRow(props: {
+  device: UseDevicesData[number]
+  onClick: () => void
+}) {
+  const { device, onClick } = props
+
+  if (!isLockDevice(device)) return null
+
+  const deviceModel = getDeviceModel(device) ?? t.unknownLock
+
+  return (
+    <TableRow key={device.device_id} onClick={onClick}>
+      <TableCell className='seam-image-cell'>
+        <DeviceImage device={device} />
+      </TableCell>
+      <TableCell className='seam-body-cell'>
+        <Title>{device.properties.name}</Title>
+        <div className='seam-bottom'>
+          <span className='seam-device-model'>{deviceModel}</span>
+          <div className='seam-device-statuses'>
+            <OnlineStatus device={device} />
+            <BatteryStatus device={device} />
+            <LockStatus device={device} />
+          </div>
+        </div>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+const t = {
+  devices: 'Devices',
+  unknownLock: 'Unknown Lock',
+}

package/src/lib/ui/IconButton.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps } from 'lib/ui/types.js'
 
 export function IconButton(props: ButtonProps): JSX.Element {
-  return <button {...props} className='seam-button seam-icon-button' />
+  return <button {...props} className='seam-icon-btn' />
 }

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

@@ -1,5 +1,11 @@
 import type { DivProps } from 'lib/ui/types.js'
 
-export function TableRow(props: DivProps): JSX.Element {
-  return <div className='seam-table-row'>{props.children}</div>
+export function TableRow(
+  props: DivProps & { onClick?: () => void }
+): JSX.Element {
+  return (
+    <div className='seam-table-row' {...props}>
+      {props.children}
+    </div>
+  )
 }

package/src/lib/ui/TextButton.tsx

@@ -0,0 +1,15 @@
+import type { ButtonProps } from 'lib/ui/types.js'
+
+interface TextButtonProps extends ButtonProps {
+  color?: 'primary' | 'inherit'
+  disabled?: boolean
+}
+
+export function TextButton({
+  color = 'primary',
+  ...buttonProps
+}: TextButtonProps): JSX.Element {
+  return (
+    <button className={`seam-text-btn seam-color-${color}`} {...buttonProps} />
+  )
+}

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import { TextField, type TextFieldProps } from 'lib/ui/TextField/index.js'
+import { TextField, type TextFieldProps } from 'lib/ui/TextField/TextField.js'
 
 export function SearchTextField({
   className,

package/src/lib/ui/{DeviceDetails → device}/BatteryStatus.tsx

@@ -5,32 +5,31 @@ import { BatteryLevelFullIcon } from 'lib/icons/BatteryLevelFull.js'
 import { BatteryLevelHighIcon } from 'lib/icons/BatteryLevelHigh.js'
 import { BatteryLevelLowIcon } from 'lib/icons/BatteryLevelLow.js'
 
-export function BatteryStatus(props: {
+export interface BatteryStatusProps {
   device: LockDevice
-}): JSX.Element | null {
+}
+
+export function BatteryStatus(props: BatteryStatusProps) {
   const {
     device: {
       properties: { battery_level: batteryLevel },
     },
   } = props
 
-  if (batteryLevel == null) {
-    return null
-  }
-
   return (
-    <>
-      <span className='seam-label'>{t.power}:</span>{' '}
-      <div className='seam-battery-status'>
-        <Status batteryLevel={batteryLevel} />
-      </div>
-    </>
+    <div className='seam-battery-status'>
+      <Content batteryLevel={batteryLevel} />
+    </div>
   )
 }
 
-function Status(props: { batteryLevel: number }): JSX.Element {
+function Content(props: { batteryLevel?: number }) {
   const { batteryLevel } = props
 
+  if (batteryLevel == null) {
+    return null
+  }
+
   if (batteryLevel > batteryThreshold.full) {
     return (
       <>
@@ -73,7 +72,6 @@ const batteryThreshold = {
 }
 
 const t = {
-  power: 'Power',
   full: 'Good',
   high: 'Good',
   low: 'Low',

package/src/lib/ui/device/DeviceImage.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react'
+import type { LockDevice } from 'seamapi'
+
+export function DeviceImage(
+  props: { device: LockDevice } & HTMLAttributes<HTMLImageElement>
+): JSX.Element {
+  const { device, ...imageProps } = props
+
+  const url = device.properties.image_url ?? fallbackImageUrl
+
+  return <img src={url} alt={device.properties.name} {...imageProps} />
+}
+
+const fallbackImageUrl =
+  'https://connect.getseam.com/assets/images/devices/unknown-lock.png'

package/src/lib/ui/device/LockStatus.tsx

@@ -0,0 +1,46 @@
+import type { LockDevice } from 'seamapi'
+
+import { LockLockedIcon } from 'lib/icons/LockLocked.js'
+import { LockUnlockedIcon } from 'lib/icons/LockUnlocked.js'
+
+export interface LockStatusProps {
+  device: LockDevice
+}
+
+export function LockStatus(props: LockStatusProps): JSX.Element {
+  const {
+    device: {
+      properties: { locked },
+    },
+  } = props
+
+  return (
+    <div className='seam-lock-status'>
+      <Content isLocked={locked} />
+    </div>
+  )
+}
+
+function Content(props: { isLocked: boolean }) {
+  const { isLocked } = props
+  if (isLocked) {
+    return (
+      <>
+        <LockLockedIcon className='seam-lock-icon' />
+        <span className='seam-status-text'>{t.locked}</span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <LockUnlockedIcon className='seam-lock-icon' />
+      <span className='seam-status-text'>{t.unlocked}</span>
+    </>
+  )
+}
+
+const t = {
+  locked: 'Locked',
+  unlocked: 'Unlocked',
+}

package/src/lib/ui/{DeviceDetails → device}/OnlineStatus.tsx

@@ -3,21 +3,26 @@ import type { LockDevice } from 'seamapi'
 import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
 import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
 
-export function OnlineStatus(props: { device: LockDevice }): JSX.Element {
-  const { device } = props
+export interface OnlineStatusProps {
+  device: LockDevice
+}
+
+export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
+  const {
+    device: {
+      properties: { online },
+    },
+  } = props
+
   return (
-    <>
-      <span className='seam-label'>{t.status}:</span>{' '}
-      <div className='seam-online-status'>
-        <Status isOnline={device.properties.online} />
-      </div>
-    </>
+    <div className='seam-online-status'>
+      <Content isOnline={online} />
+    </div>
   )
 }
 
-function Status(props: { isOnline: boolean }): JSX.Element {
+function Content(props: { isOnline: boolean }) {
   const { isOnline } = props
-
   if (isOnline) {
     return (
       <>
@@ -38,7 +43,6 @@ function Status(props: { isOnline: boolean }): JSX.Element {
 }
 
 const t = {
-  status: 'Status',
   online: 'Online',
   deviceOffline: 'Device Offline',
 }