Merge pull request #178 from seamapi/pr-followups-2

Followups to pull requests

Author: mikewuu

examples/basic/src/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 
 import { App } from './App.js'
 
-const rootElement = document.getElementById('root')
+const rootElement = globalThis.document.getElementById('root')
 
 if (rootElement == null) throw new Error('Root element not found')
 

src/lib/copy-to-clipboard.ts

@@ -0,0 +1,3 @@
+export async function copyToClipboard(value: string) {
+  await globalThis?.navigator?.clipboard?.writeText(value)
+}

src/lib/copy.ts

@@ -2,7 +2,7 @@ import { Button, Dialog } from '@mui/material'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
-import useToggle from 'lib/use-toggle.js'
+import { useToggle } from 'lib/use-toggle.js'
 
 /**
  * These stories showcase access code details.

src/lib/ui/AccessCodeDetails/AccessCodeDetails.stories.tsx

@@ -2,7 +2,7 @@ import { Button, Dialog } from '@mui/material'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
-import useToggle from 'lib/use-toggle.js'
+import { useToggle } from 'lib/use-toggle.js'
 
 /**
  * These stories showcase the access code table.

src/lib/ui/AccessCodeTable/AccessCodeTable.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
-import { copy } from 'lib/copy.js'
+import { copyToClipboard } from 'lib/copy-to-clipboard.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
 import {
@@ -112,15 +112,15 @@ function AccessCodeRow(props: {
       </TableCell>
       <TableCell className='seam-action-cell'>
         <MoreActionsMenu
-          MenuProps={{
-            BackgroundProps: {
+          menuProps={{
+            backgroundProps: {
               className: 'seam-access-code-table-action-menu',
             },
           }}
         >
           <MenuItem
             onClick={() => {
-              void copy(accessCode.code ?? '')
+              void copyToClipboard(accessCode.code ?? '')
             }}
           >
             <div className='menu-item-copy'>

src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -7,24 +7,21 @@ import { TriangleWarningIcon } from 'lib/icons/TriangleWarning.js'
 export interface AlertProps {
   variant: 'warning' | 'error'
   message: string
-  action?: {
-    label: string
-    onClick: MouseEventHandler
-  }
+  action?: ActionProps
   className?: string
 }
 
-export function Alert(props: AlertProps): JSX.Element {
-  const { variant, message, action, className, ...rest } = props
+interface ActionProps {
+  label: string
+  onClick: MouseEventHandler
+}
 
-  const handleClick: MouseEventHandler<HTMLButtonElement> = (ev) => {
-    action?.onClick(ev)
-  }
+export function Alert(props: AlertProps): JSX.Element {
+  const { variant, message, className } = props
 
   return (
     <div
       className={classNames('seam-alert', `seam-${variant}-alert`, className)}
-      {...rest}
     >
       <div className='seam-alert-content'>
         <div className='seam-alert-icon'>
@@ -34,19 +31,25 @@ export function Alert(props: AlertProps): JSX.Element {
             <ExclamationCircleIcon />
           )}
         </div>
-
         <div className='seam-alert-message-wrap'>
           <p className='seam-alert-message'>{message}</p>
         </div>
       </div>
+      {props.action == null ? null : <Action {...props.action} />}
+    </div>
+  )
+}
 
-      {action != null && (
-        <div className='seam-alert-action-wrap'>
-          <button onClick={handleClick} className='seam-alert-action'>
-            {action.label}
-          </button>
-        </div>
-      )}
+function Action(props: ActionProps): JSX.Element | null {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    props.onClick(event)
+  }
+
+  return (
+    <div className='seam-alert-action-wrap'>
+      <button onClick={handleClick} className='seam-alert-action'>
+        {props.label}
+      </button>
     </div>
   )
 }

src/lib/ui/Alert/Alert.tsx

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

src/lib/ui/Alert/Alerts.tsx

@@ -3,7 +3,7 @@ import { Button, Dialog, DialogActions, IconButton } from '@mui/material'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
-import useToggle from 'lib/use-toggle.js'
+import { useToggle } from 'lib/use-toggle.js'
 
 /**
  * These stories showcase the device details.

src/lib/ui/DeviceDetails/DeviceDetails.stories.tsx

@@ -7,15 +7,15 @@ 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 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'
 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/use-toggle.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
@@ -121,10 +121,7 @@ function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
               </div>
             </div>
           </div>
-
-          {alerts.length > 0 && (
-            <Alerts alerts={alerts} className='seam-alerts-space-top' />
-          )}
+          <Alerts alerts={alerts} className='seam-alerts-space-top' />
         </div>
         <div className='seam-box'>
           <div