@seamapi/react 0.16.1 → 0.17.0

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' />
@@ -45,9 +57,11 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
               <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>
@@ -94,10 +117,13 @@ 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',
 }

package/src/lib/ui/index.ts

@@ -1 +1,3 @@
-export * from './DeviceManager/DeviceManager.js'
+export * from './AccessCodeTable/AccessCodeTable.js'
+export * from './DeviceDetails/DeviceDetails.js'
+export * from './DeviceTable/DeviceTable.js'

package/src/lib/ui/layout/ContentHeader.tsx

@@ -1,13 +1,18 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
+import { useNavigation } from 'lib/NavigationProvider.js'
+
+export function ContentHeader(props: { title?: string }): JSX.Element | null {
+  const { title } = props
+
+  const { goBack } = useNavigation()
+  if (!title && !goBack) {
+    return null
+  }
 
-export function ContentHeader(props: {
-  title?: string
-  onClickBack?: () => void
-}): JSX.Element {
   return (
     <div className='seam-content-header'>
-      <BackIcon onClick={props.onClickBack} />
-      <span className='seam-title'>{props.title}</span>
+      {goBack && <BackIcon onClick={goBack} />}
+      <span className='seam-title'>{title}</span>
     </div>
   )
 }

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

@@ -0,0 +1,121 @@
+@use './colors';
+
+@mixin all {
+  .seam-access-code-details {
+    > .seam-summary {
+      background: colors.$bg-a;
+      border-radius: 16px;
+      margin: 0 24px 16px;
+
+      > .seam-top {
+        padding: 24px 16px;
+
+        > .seam-label {
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 134%;
+          color: colors.$text-gray-1;
+          margin-bottom: 4px;
+        }
+
+        > .seam-access-code-name {
+          font-weight: 600;
+          font-size: 21px;
+          line-height: 132%;
+          margin-bottom: 8px;
+        }
+
+        > .seam-code {
+          background: #fff;
+          border: 1px solid colors.$text-gray-2;
+          border-radius: 8px;
+          padding: 10px 16px;
+          font-weight: 600;
+          font-size: 24px;
+          line-height: 134%;
+          margin-bottom: 8px;
+        }
+
+        .seam-duration {
+          color: colors.$text-gray-1;
+          font-size: 14px;
+          line-height: 134%;
+
+          .seam-label {
+            font-weight: 600;
+            color: colors.$text-default;
+          }
+        }
+      }
+
+      .seam-access-code-device {
+        border-top: 1px solid colors.$bg-c;
+        padding: 8px 16px 8px 8px;
+        display: flex;
+        align-items: center;
+
+        .seam-device-image {
+          width: 72px;
+          height: 72px;
+          margin-right: 16px;
+
+          img {
+            width: 100%;
+            max-height: 100%;
+          }
+        }
+
+        .seam-body {
+          flex: 1;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 134%;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .seam-details {
+      font-size: 16px;
+      line-height: 134%;
+      border-bottom: 1px solid rgb(0 0 0 / 12%);
+      padding: 0 24px;
+
+      .seam-row {
+        padding: 16px;
+        display: flex;
+        border-top: 1px solid rgb(0 0 0 / 12%);
+
+        .seam-heading {
+          width: 112px;
+        }
+
+        .seam-content {
+          display: flex;
+          flex: 1;
+
+          .seam-times {
+            display: flex;
+            flex: 1;
+            font-size: 16px;
+            line-height: 134%;
+
+            .seam-label {
+              color: colors.$text-gray-2;
+            }
+
+            > div {
+              div {
+                margin-bottom: 4px;
+              }
+
+              &:first-child {
+                flex: 0 1 160px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}