@seamapi/react 0.16.1 → 0.18.0

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

@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
+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 { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.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 [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
+
+  if (selectedDevice) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
+  }
+
+  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 onBack={onBack} />
+      <TableHeader>
+        <TableTitle>
+          {t.devices} <Caption>({deviceCount})</Caption>
+        </TableTitle>
+      </TableHeader>
+      <TableBody>
+        {devices.map((device) => (
+          <DeviceRow
+            device={device}
+            key={device.device_id}
+            onClick={() => {
+              selectDevice(device)
+            }}
+          />
+        ))}
+      </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

@@ -2,12 +2,17 @@ import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 
 export function ContentHeader(props: {
   title?: string
-  onClickBack?: () => void
-}): JSX.Element {
+  onBack?: () => void
+}): JSX.Element | null {
+  const { title, onBack } = props
+  if (!title && !onBack) {
+    return null
+  }
+
   return (
     <div className='seam-content-header'>
-      <BackIcon onClick={props.onClickBack} />
-      <span className='seam-title'>{props.title}</span>
+      <BackIcon onClick={onBack} />
+      <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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,54 +1,50 @@
+@use './colors';
+
 @mixin all {
   .seam-access-code-table {
-    .seam-content-header {
-      margin: 0 16px;
-    }
-
-    .seam-table-header {
-      margin-bottom: 16px;
-      height: 56px;
-      padding: 0 16px;
-    }
+    .seam-table-row {
+      cursor: pointer;
 
-    .seam-icon-cell {
-      flex: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > div {
-        width: 40px;
-        height: 40px;
+      .seam-icon-cell {
+        flex: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > div {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
-    }
 
-    .seam-name-cell {
-      flex: 1;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 2px;
+      .seam-name-cell {
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
 
-      .seam-access-code-details {
-        font-size: 14px;
-        line-height: 134%;
-        color: var(--text-gray-1);
+        .seam-code-details {
+          font-size: 14px;
+          line-height: 134%;
+          color: colors.$text-gray-1;
 
-        .seam-dot-divider {
-          margin: 0 4px;
-          color: var(--text-gray-3);
+          .seam-dot-divider {
+            margin: 0 4px;
+            color: colors.$text-gray-3;
+          }
         }
       }
-    }
 
-    .seam-action-cell {
-      margin-right: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .seam-action-cell {
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

package/src/styles/_buttons.scss

@@ -1,17 +1,134 @@
-@mixin all {
-  .seam-button {
+@use './typography';
+@use './colors';
+
+@mixin icon-button {
+  .seam-icon-btn {
     border-radius: 6px;
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
+    background: #fff;
+    padding: 6px;
+    line-height: 0;
+
+    &:hover {
+      background: rgb(0 122 252 / 8%);
+    }
+  }
+}
+
+@mixin text-button {
+  .seam-text-btn {
+    color: colors.$primary;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
+      text-decoration: none;
+    }
+  }
+}
+
+@mixin button-size {
+  &.seam-btn-small {
+    font-size: 14px;
+    line-height: 22px;
+    border-radius: 6px;
+    padding: 4px 10px;
+  }
+
+  &.seam-btn-medium {
+    font-size: 16px;
+    line-height: 26px;
+    border-radius: 7px;
+    padding: 6px 16px;
+  }
+
+  &.seam-btn-large {
+    font-size: 19px;
+    line-height: 30px;
+    border-radius: 8px;
+    padding: 8px 22px;
+  }
+}
+
+@mixin button-variant {
+  &.seam-btn-solid {
+    background: colors.$primary;
+    color: #fff;
+    border: 1px solid colors.$primary;
 
-    &.seam-icon-button {
+    &:hover {
+      background: colors.$primary-dark;
+      border-color: colors.$primary-dark;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: colors.$primary-dim;
+      border-color: colors.$primary-dim;
+    }
+  }
+
+  &.seam-btn-outline {
+    color: colors.$primary;
+    border: 1px solid colors.$primary-50;
+    background: transparent;
+
+    &:hover {
+      background: colors.$primary-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: transparent;
+      color: colors.$primary-50;
+    }
+  }
+
+  &.seam-btn-neutral {
+    color: colors.$text-gray-1;
+    border: 1px solid colors.$text-gray-2-5;
+
+    &:hover {
+      background: colors.$bg-a;
+      border-color: colors.$text-gray-2-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-3;
       background: #fff;
-      padding: 6px;
-      line-height: 0;
+    }
+  }
+}
+
+@mixin button {
+  .seam-btn {
+    @include typography.font-family;
+    @include button-size;
+    @include button-variant;
 
-      &:hover {
-        background: rgb(0 122 252 / 8%);
-      }
+    font-weight: 600;
+    cursor: pointer;
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }
+
+@mixin all {
+  @include button;
+  @include icon-button;
+  @include text-button;
+}