@seamapi/react 0.23.0 → 0.25.0

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

@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import type { MouseEventHandler } from 'react'
+
+import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js'
+import { TriangleWarningIcon } from 'lib/icons/TriangleWarning.js'
+
+export interface AlertProps {
+  variant: 'warning' | 'error'
+  message: string
+  action?: {
+    label: string
+    onClick: MouseEventHandler
+  }
+  className?: string
+}
+
+export function Alert(props: AlertProps): JSX.Element {
+  const { variant, message, action, className, ...rest } = props
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (ev) => {
+    action?.onClick(ev)
+  }
+
+  return (
+    <div
+      className={classNames('seam-alert', `seam-${variant}-alert`, className)}
+      {...rest}
+    >
+      <div className='seam-alert-content'>
+        <div className='seam-alert-icon'>
+          {variant === 'warning' ? (
+            <TriangleWarningIcon />
+          ) : (
+            <ExclamationCircleIcon />
+          )}
+        </div>
+
+        <div className='seam-alert-message-wrap'>
+          <p className='seam-alert-message'>{message}</p>
+        </div>
+      </div>
+
+      {action != null && (
+        <div className='seam-alert-action-wrap'>
+          <button onClick={handleClick} className='seam-alert-action'>
+            {action.label}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import classNames from 'classnames'
+
+import { Alert, type AlertProps } from 'lib/ui/Alert/Alert.js'
+
+export interface AlertsProps {
+  alerts?: AlertProps[]
+  children?: React.ReactNode
+  className?: string
+}
+
+export function Alerts(props: AlertsProps): JSX.Element {
+  const { alerts, children, className, ...rest } = props
+
+  return (
+    <div className={classNames('seam-alerts', className)} {...rest}>
+      {alerts?.map((alert, index) => (
+        <Alert key={`${index}:${alert.message}`} {...alert} />
+      ))}
+      {children}
+    </div>
+  )
+}

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

@@ -7,6 +7,8 @@ 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'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
@@ -40,6 +42,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
 
 function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
   const { device, onBack } = props
+
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
   const { accessCodes } = useAccessCodes({
@@ -54,6 +57,36 @@ 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
   }
@@ -88,6 +121,10 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
               </div>
             </div>
           </div>
+
+          {alerts.length > 0 && (
+            <Alerts alerts={alerts} className='seam-alerts-space-top' />
+          )}
         </div>
         <div className='seam-box'>
           <div

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

@@ -0,0 +1,66 @@
+import { CheckIcon } from 'lib/icons/Check.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import type { UseDevicesData } from 'lib/seam/devices/use-devices.js'
+import { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
+import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
+
+export type DeviceFilter = 'device_issues'
+
+interface DeviceHealthBarProps {
+  devices: Array<UseDevicesData[number]>
+  filter: DeviceFilter | null
+  onFilterSelect: (filter: DeviceFilter | null) => void
+}
+
+export function DeviceHealthBar({
+  devices,
+  filter,
+  onFilterSelect,
+}: DeviceHealthBarProps) {
+  const erroredDevices = devices.filter((device) => device.errors.length > 0)
+  const issueCount = erroredDevices.length
+
+  const toggle = (target: DeviceFilter) => () => {
+    const newFilter = target === filter ? null : target
+    onFilterSelect(newFilter)
+  }
+
+  const isPlural = issueCount === 0 || issueCount > 1
+  const label = isPlural
+    ? `${issueCount} ${t.deviceIssues}`
+    : `${issueCount} ${t.deviceIssue}`
+
+  if (issueCount === 0) {
+    return (
+      <TableFilterBar>
+        <TableFilterItem>
+          <CheckIcon />
+          {t.devicesOk}
+        </TableFilterItem>
+      </TableFilterBar>
+    )
+  }
+
+  return (
+    <TableFilterBar
+      isFilterCleared={filter == null}
+      onFilterClear={() => {
+        onFilterSelect(null)
+      }}
+    >
+      <TableFilterItem
+        onClick={toggle('device_issues')}
+        selected={filter === 'device_issues'}
+      >
+        <ExclamationCircleOutlineIcon />
+        {label}
+      </TableFilterItem>
+    </TableFilterBar>
+  )
+}
+
+const t = {
+  devicesOk: 'Devices OK',
+  deviceIssue: 'device issue',
+  deviceIssues: 'device issues',
+}

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

@@ -0,0 +1,60 @@
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import {
+  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 { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { Title } from 'lib/ui/typography/Title.js'
+
+export type DeviceTableProps = Props & UseDevicesParams
+
+interface Props {
+  onBack?: () => void
+}
+
+export interface DeviceRowProps {
+  device: UseDevicesData[number]
+  onClick: () => void
+}
+
+export function DeviceRow({
+  device,
+  onClick,
+}: DeviceRowProps): JSX.Element | null {
+  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',
+  noDevicesMessage: 'Sorry, no devices were found',
+}

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

@@ -1,25 +1,22 @@
 import { useState } from 'react'
 
-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 {
+  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'
-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
 
@@ -69,53 +66,57 @@ export function DeviceTable({
         </TableTitle>
       </TableHeader>
       <TableBody>
-        {devices.map((device) => (
-          <DeviceRow
-            device={device}
-            key={device.device_id}
-            onClick={() => {
-              selectDevice(device.device_id)
-            }}
-          />
-        ))}
+        <Body devices={devices} selectDevice={selectDevice} />
       </TableBody>
     </div>
   )
 }
 
-function DeviceRow(props: {
-  device: UseDevicesData[number]
-  onClick: () => void
-}): JSX.Element | null {
-  const { device, onClick } = props
+function Body(props: {
+  devices: Array<UseDevicesData[number]>
+  selectDevice: (id: string) => void
+}) {
+  const { devices, selectDevice } = props
+  const [filter, setFilter] = useState<DeviceFilter | null>(null)
 
-  if (!isLockDevice(device)) {
-    return null
+  if (devices.length === 0) {
+    return <EmptyPlaceholder>{t.noDevicesMessage}</EmptyPlaceholder>
   }
 
-  const deviceModel = getDeviceModel(device) ?? t.unknownLock
+  const filteredDevices = devices.filter((device) => {
+    if (filter === null) {
+      return true
+    }
+
+    if (filter === 'device_issues') {
+      return device.errors.length > 0
+    }
+
+    return true
+  })
 
   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>
+    <>
+      <DeviceHealthBar
+        devices={devices}
+        filter={filter}
+        onFilterSelect={setFilter}
+      />
+      {filteredDevices.map((device) => (
+        <DeviceRow
+          device={device}
+          key={device.device_id}
+          onClick={() => {
+            selectDevice(device.device_id)
+          }}
+        />
+      ))}
+    </>
   )
 }
 
 const t = {
   devices: 'Devices',
   unknownLock: 'Unknown Lock',
+  noDevicesMessage: 'Sorry, no devices were found',
 }

package/src/lib/ui/IconButton.tsx

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

package/src/lib/ui/SupportedDevices/SupportedDevices.tsx

@@ -7,7 +7,7 @@ import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
 import SupportedDeviceRow from './SupportedDeviceRow.js'
 import SupportedDevicesHeader from './SupportedDevicesHeader.js'
 
-export default function SupportedDevices() {
+export function SupportedDevices() {
   const { data, isLoading, isError, refetch } = useQuery<{
     data: {
       device_models?: DeviceModel[]

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

@@ -0,0 +1,12 @@
+import type { DivProps } from 'lib/ui/types.js'
+
+export function EmptyPlaceholder({
+  children,
+  ...props
+}: DivProps): JSX.Element {
+  return (
+    <div className='seam-table-empty-placeholder' {...props}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { ArrowRestartIcon } from 'lib/icons/ArrowRestart.js'
+import { IconButton } from 'lib/ui/IconButton.js'
+import type { ButtonProps, DivProps } from 'lib/ui/types.js'
+
+export interface TableFiltersProps extends DivProps {
+  isFilterCleared?: boolean
+  onFilterClear?: () => void
+}
+
+export function TableFilterBar({
+  isFilterCleared,
+  onFilterClear,
+  children,
+  ...props
+}: TableFiltersProps) {
+  const showClearFilterButton = isFilterCleared === false
+  return (
+    <div className='seam-table-filter-bar' {...props}>
+      {children}{' '}
+      {showClearFilterButton && <ClearFiltersButton onClick={onFilterClear} />}
+    </div>
+  )
+}
+
+function ClearFiltersButton(props: ButtonProps) {
+  return (
+    <IconButton {...props} className='seam-clear-filters-button'>
+      <ArrowRestartIcon />
+    </IconButton>
+  )
+}

package/src/lib/ui/Table/TableFilterBar/TableFilterItem.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+
+import type { DivProps } from 'lib/ui/types.js'
+
+export interface TableFilterItemProps extends DivProps {
+  selected?: boolean
+}
+
+export function TableFilterItem({
+  onClick,
+  selected,
+  ...props
+}: TableFilterItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={classNames('seam-table-filter-item', {
+        'seam-clickable': onClick !== undefined,
+        'seam-selected': selected,
+      })}
+      {...props}
+    />
+  )
+}

package/src/lib/ui/index.ts

@@ -2,3 +2,4 @@ export * from './AccessCodeDetails/AccessCodeDetails.js'
 export * from './AccessCodeTable/AccessCodeTable.js'
 export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
+export * from './SupportedDevices/SupportedDevices.js'

package/src/styles/_alert.scss

@@ -0,0 +1,115 @@
+@use './colors';
+
+@mixin all {
+  // Alerts
+  .seam-alerts {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+
+    &.seam-alerts-space-top {
+      margin-top: 16px;
+    }
+  }
+
+  // Alert
+  .seam-alert {
+    width: 100%;
+    min-height: 70px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    gap: 16px;
+
+    .seam-alert-action {
+      appearance: none;
+      height: 32px;
+      padding: 0 10px;
+      border-radius: 6px;
+      background-color: transparent;
+      font-size: 14px;
+      line-height: 1;
+      font-weight: 600;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        background-color: colors.$item-hover-bg;
+      }
+    }
+
+    &.seam-warning-alert {
+      background-color: colors.$alert-warn-fill;
+      border: 1px solid colors.$alert-warn-line;
+
+      .seam-alert-action {
+        border: 1px solid colors.$alert-warn-dark;
+        color: colors.$alert-warn-dark;
+      }
+    }
+
+    &.seam-error-alert {
+      background-color: colors.$alert-error-fill;
+      border: 1px solid colors.$alert-error-line;
+
+      .seam-alert-action {
+        border: 1px solid colors.$alert-error-dark;
+        color: colors.$alert-error-dark;
+      }
+    }
+
+    &.seam-alert-space-top {
+      margin-top: 16px;
+    }
+
+    .seam-alert-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .seam-alert-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    .seam-alert-message-wrap {
+      .seam-alert-message {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 134%;
+        color: colors.$text-default;
+      }
+    }
+  }
+
+  @media only screen and (width <= 500px) {
+    .seam-alert {
+      justify-content: flex-start;
+      flex-direction: column;
+
+      .seam-alert-content {
+        width: 100%;
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .seam-alert-action-wrap {
+        width: 100%;
+
+        .seam-alert-action {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/src/styles/_main.scss

@@ -2,6 +2,7 @@
 @use './typography';
 @use './tables';
 @use './inputs';
+@use './alert';
 @use './buttons';
 @use './layout';
 @use './access-code-table';
@@ -31,5 +32,6 @@
   @include device-table.all;
   @include access-code-table.all;
   @include access-code-details.all;
+  @include alert.all;
   @include supported-devices.all;
 }

package/src/styles/_tables.scss

@@ -47,8 +47,73 @@
   }
 }
 
+@mixin empty-placeholder {
+  .seam-table-empty-placeholder {
+    height: 300px;
+    font-size: 18px;
+    line-height: 132%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@mixin table-filters {
+  .seam-table-filter-bar {
+    display: flex;
+    align-items: center;
+    padding: 6px 16px;
+    background: colors.$bg-a;
+
+    .seam-clear-filters-button {
+      margin-left: 6px;
+      border: 0;
+      background: transparent !important;
+      padding: 0;
+
+      svg {
+        scale: 0.8333;
+
+        * {
+          fill: colors.$text-gray-1;
+        }
+      }
+    }
+  }
+
+  .seam-table-filter-item {
+    display: flex;
+    align-items: center;
+    padding: 2px 8px 2px 5px;
+    border-radius: 5px;
+    border: 1px solid colors.$bg-a;
+    font-size: 14px;
+    line-height: 134%;
+
+    svg {
+      scale: 0.75;
+    }
+
+    &.seam-clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: rgb(255 255 255 / 65%);
+        border: 1px solid colors.$text-gray-3;
+      }
+    }
+
+    &.seam-selected {
+      background: #fff;
+      border: 1px solid colors.$text-gray-3;
+    }
+  }
+}
+
 @mixin all {
   @include header;
   @include row;
   @include cell;
+  @include empty-placeholder;
+  @include table-filters;
 }