@seamapi/react 1.28.0 → 1.29.0

package/src/lib/seam/SeamProvider.tsx

@@ -25,10 +25,11 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-export type SeamProviderProps =
+export type SeamProviderProps = PropsWithChildren<
   | SeamProviderPropsWithClient
   | SeamProviderPropsWithPublishableKey
   | SeamProviderPropsWithClientSessionToken
+>
 
 export interface SeamProviderPropsWithClient extends SeamProviderBaseProps {
   client: Seam
@@ -65,7 +66,7 @@ export function SeamProvider({
   unminifiyCss = false,
   queryClient,
   ...props
-}: PropsWithChildren<SeamProviderProps>): JSX.Element {
+}: SeamProviderProps): JSX.Element {
   useSeamStyles({ disabled: disableCssInjection, unminified: unminifiyCss })
   useSeamFont({ disabled: disableFontInjection })
 

package/src/lib/seam/access-codes/use-create-access-code.ts

@@ -0,0 +1,34 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type { AccessCode, AccessCodeCreateRequest, SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseCreateAccessCodeParams = never
+export type UseCreateAccessCodeData = AccessCode
+export type UseCreateAccessCodeMutationParams = AccessCodeCreateRequest
+
+export function useCreateAccessCode(): UseMutationResult<
+  UseCreateAccessCodeData,
+  SeamError,
+  UseCreateAccessCodeMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (mutationParams) => {
+      if (client === null) {
+        throw new Error('Missing seam client')
+      }
+
+      return await client.accessCodes.create(mutationParams)
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries(['access_codes', 'list'])
+    },
+  })
+}

package/src/lib/seam/components/AccessCodeForm/AccessCodeForm.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+import type { AccessCodeFormProps } from 'lib/seam/components/AccessCodeForm/AccessCodeForm.js'
+
+export const name = 'seam-access-code-form'
+
+export const props: ElementProps<AccessCodeFormProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+  className: 'string',
+}
+
+export { AccessCodeForm as Component } from './AccessCodeForm.js'

package/src/lib/seam/components/AccessCodeForm/AccessCodeForm.tsx

@@ -0,0 +1,113 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+
+import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
+import { useDevice, type UseDeviceData } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TextField } from 'lib/ui/TextField/TextField.js'
+
+export interface AccessCodeFormProps {
+  deviceId: string
+  onBack?: () => void
+  className?: string
+}
+
+export function AccessCodeForm({
+  deviceId,
+  onBack,
+  className,
+}: AccessCodeFormProps): JSX.Element | null {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  if (device == null) {
+    return null
+  }
+
+  return (
+    <div className={classNames('seam-access-code-form', className)}>
+      <Content className={className} onBack={onBack} device={device} />
+    </div>
+  )
+}
+
+function Content({
+  onBack,
+  device,
+}: Omit<AccessCodeFormProps, 'deviceId'> & {
+  device: NonNullable<UseDeviceData>
+}): JSX.Element {
+  const [name, setName] = useState('')
+
+  const createAccessCode = useCreateAccessCode()
+
+  const save = (): void => {
+    if (name === '') {
+      return
+    }
+
+    if (createAccessCode.isLoading) {
+      return
+    }
+
+    createAccessCode.mutate(
+      {
+        name,
+        device_id: device.device_id,
+      },
+      {
+        onSuccess: () => {
+          onBack?.()
+        },
+      }
+    )
+  }
+
+  const nameError = name.length > 60 ? t.overCharacterLimitError : undefined
+
+  const isFormValid =
+    name.trim().length > 0 &&
+    nameError === undefined &&
+    !createAccessCode.isLoading
+
+  return (
+    <>
+      <ContentHeader
+        title={t.addNewAccessCode}
+        subheading={device.properties.name}
+        onBack={onBack}
+      />
+      <div className='seam-main'>
+        <FormField>
+          <InputLabel>{t.nameInputLabel}</InputLabel>
+          <TextField
+            size='large'
+            clearable
+            value={name}
+            onChange={setName}
+            hasError={nameError != null}
+            helperText={nameError}
+          />
+        </FormField>
+        <div className='seam-actions'>
+          <Button onClick={onBack}>{t.cancel}</Button>
+          <Button variant='solid' disabled={!isFormValid} onMouseDown={save}>
+            {t.save}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const t = {
+  addNewAccessCode: 'Add new access code',
+  overCharacterLimitError: '60 characters max',
+  nameInputLabel: 'Name the new code',
+  cancel: 'Cancel',
+  save: 'Save',
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts

@@ -7,6 +7,7 @@ export const name = 'seam-access-code-table'
 export const props: ElementProps<AccessCodeTableProps> = {
   deviceId: 'string',
   disableLockUnlock: 'boolean',
+  disableCreateAccessCode: 'boolean',
   accessCodeFilter: 'function',
   accessCodeComparator: 'function',
   onAccessCodeClick: 'function',

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { AddIcon } from 'lib/icons/Add.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
@@ -11,12 +12,14 @@ import {
   type UseAccessCodesData,
 } from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
+import { AccessCodeForm } from 'lib/seam/components/AccessCodeForm/AccessCodeForm.js'
 import {
   type AccessCodeFilter,
   AccessCodeHealthBar,
 } from 'lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
@@ -29,10 +32,12 @@ import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface AccessCodeTableProps {
   deviceId: string
   disableLockUnlock?: boolean
+  disableCreateAccessCode?: boolean
   accessCodeFilter?: (
     accessCode: AccessCode,
     searchInputValue: string
@@ -65,6 +70,7 @@ const defaultAccessCodeFilter = (
 export function AccessCodeTable({
   deviceId,
   disableLockUnlock = false,
+  disableCreateAccessCode = false,
   onAccessCodeClick = () => {},
   preventDefaultOnAccessCodeClick = false,
   onBack,
@@ -81,6 +87,7 @@ export function AccessCodeTable({
   >(null)
 
   const [searchInputValue, setSearchInputValue] = useState('')
+  const [accessCodeFormVisible, toggleAddAccessCodeForm] = useToggle()
 
   const filteredAccessCodes = useMemo(
     () =>
@@ -116,13 +123,33 @@ export function AccessCodeTable({
     )
   }
 
+  if (accessCodeFormVisible) {
+    return (
+      <AccessCodeForm
+        className={className}
+        onBack={toggleAddAccessCodeForm}
+        deviceId={deviceId}
+      />
+    )
+  }
+
   return (
     <div className={classNames('seam-access-code-table', className)}>
       <ContentHeader onBack={onBack} />
       <TableHeader>
-        <TableTitle>
-          {t.accessCodes} <Caption>({filteredAccessCodes.length})</Caption>
-        </TableTitle>
+        <div className='seam-left'>
+          <TableTitle>
+            {t.accessCodes} <Caption>({filteredAccessCodes.length})</Caption>{' '}
+          </TableTitle>
+          {!disableCreateAccessCode && (
+            <IconButton
+              onClick={toggleAddAccessCodeForm}
+              className='seam-add-access-code-button'
+            >
+              <AddIcon />
+            </IconButton>
+          )}
+        </div>
         <SearchTextField
           value={searchInputValue}
           onChange={setSearchInputValue}

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

@@ -3,14 +3,12 @@ import type { PropsWithChildren } from 'react'
 
 import { Alert, type AlertProps } from 'lib/ui/Alert/Alert.js'
 
-interface AlertsProps {
+interface AlertsProps extends PropsWithChildren {
   alerts?: AlertProps[]
   className?: string
 }
 
-export function Alerts(
-  props: PropsWithChildren<AlertsProps>
-): JSX.Element | null {
+export function Alerts(props: AlertsProps): JSX.Element | null {
   const { alerts, children, className } = props
 
   if (alerts?.length === 0) return null

package/src/lib/ui/Button.tsx

@@ -1,12 +1,13 @@
 import classNames from 'classnames'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
 
-interface ButtonProps {
+interface ButtonProps extends PropsWithChildren {
   variant?: 'solid' | 'outline' | 'neutral'
   size?: 'small' | 'medium' | 'large'
   disabled?: boolean
   onClick?: MouseEventHandler<HTMLButtonElement>
   className?: string
+  onMouseDown?: MouseEventHandler<HTMLButtonElement>
 }
 
 export function Button({
@@ -16,7 +17,8 @@ export function Button({
   disabled = false,
   onClick,
   className,
-}: PropsWithChildren<ButtonProps>): JSX.Element {
+  onMouseDown,
+}: ButtonProps): JSX.Element {
   return (
     <button
       className={classNames(
@@ -28,6 +30,7 @@ export function Button({
       )}
       disabled={disabled}
       onClick={onClick}
+      onMouseDown={onMouseDown}
     >
       {children}
     </button>

package/src/lib/ui/FormField.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames'
+import { cloneElement, useRef } from 'react'
+
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { TextField } from 'lib/ui/TextField/TextField.js'
+
+interface FormFieldProps {
+  children: JSX.Element | JSX.Element[]
+  className?: string
+}
+
+export function FormField({
+  children,
+  className,
+}: FormFieldProps): JSX.Element {
+  const inputRef = useRef<HTMLInputElement>()
+
+  const focusInput = (): void => {
+    if (inputRef.current != null) {
+      inputRef.current.focus()
+    }
+  }
+
+  const components = Array.isArray(children) ? children : [children]
+
+  // Map children to automatically focus on input when clicking
+  // on an InputLabel.
+  const clonedChildren = components.map((component, index) => {
+    const baseProps = {
+      ...component.props,
+      key: index,
+    }
+
+    if (component.type === InputLabel) {
+      return cloneElement(component, {
+        ...baseProps,
+        onClick: focusInput,
+      })
+    }
+
+    if (component.type === TextField) {
+      return cloneElement(component, {
+        ...baseProps,
+        ref: inputRef,
+      })
+    }
+
+    return cloneElement(component, baseProps)
+  })
+
+  return (
+    <div className={classNames('seam-form-field', className)}>
+      {clonedChildren}
+    </div>
+  )
+}

package/src/lib/ui/InputLabel.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import { forwardRef, type PropsWithChildren } from 'react'
+
+interface InputLabelProps extends PropsWithChildren {
+  className?: string
+  onClick?: () => void
+}
+
+export const InputLabel = forwardRef<HTMLDivElement, InputLabelProps>(
+  function InputLabel({ children, className, onClick }, ref) {
+    return (
+      <div
+        className={classNames('seam-input-label', className)}
+        ref={ref}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+    )
+  }
+)

package/src/lib/ui/Menu/Menu.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react'
 import { createPortal } from 'react-dom'
 
-export interface MenuProps {
+export interface MenuProps extends PropsWithChildren {
   verticalOffset?: number
   horizontalOffset?: number
   edgeOffset?: number
@@ -38,7 +38,7 @@ export function Menu({
   children,
   renderButton,
   backgroundProps,
-}: PropsWithChildren<MenuProps>): JSX.Element | null {
+}: MenuProps): JSX.Element | null {
   const { Provider } = menuContext
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const [documentEl, setDocumentEl] = useState<null | Element>(null)

package/src/lib/ui/Menu/MenuItem.tsx

@@ -2,14 +2,11 @@ import type { PropsWithChildren } from 'react'
 
 import { useMenu } from 'lib/ui/Menu/Menu.js'
 
-interface MenuItemProps {
+interface MenuItemProps extends PropsWithChildren {
   onClick: () => void
 }
 
-export function MenuItem({
-  onClick,
-  children,
-}: PropsWithChildren<MenuItemProps>): JSX.Element {
+export function MenuItem({ onClick, children }: MenuItemProps): JSX.Element {
   const { close: closeMenu } = useMenu()
 
   return (

package/src/lib/ui/Menu/MoreActionsMenu.tsx

@@ -4,14 +4,14 @@ import { DotsEllipsisMoreIcon } from 'lib/icons/DotsEllipsisMore.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 import { Menu, type MenuProps } from 'lib/ui/Menu/Menu.js'
 
-interface MoreActionsMenuProps {
+interface MoreActionsMenuProps extends PropsWithChildren {
   menuProps?: Partial<MenuProps>
 }
 
 export function MoreActionsMenu({
   children,
   menuProps,
-}: PropsWithChildren<MoreActionsMenuProps>): JSX.Element {
+}: MoreActionsMenuProps): JSX.Element {
   return (
     <Menu
       renderButton={({ onOpen }) => (

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

@@ -1,7 +1,5 @@
 import classNames from 'classnames'
-import { useEffect, useState } from 'react'
 
-import { CloseIcon } from 'lib/icons/Close.js'
 import { SearchIcon } from 'lib/icons/Search.js'
 import { TextField, type TextFieldProps } from 'lib/ui/TextField/TextField.js'
 
@@ -11,20 +9,6 @@ export function SearchTextField({
   onChange,
   ...props
 }: TextFieldProps): JSX.Element {
-  const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null)
-
-  const valueIsEmpty = useValueIsEmpty(value, inputEl)
-  const clearInput = (): void => {
-    if (onChange != null) {
-      onChange('')
-      return
-    }
-
-    if (inputEl != null) {
-      inputEl.value = ''
-    }
-  }
-
   return (
     <TextField
       value={value}
@@ -33,62 +17,9 @@ export function SearchTextField({
       className={classNames(className, 'seam-search-text-field')}
       startAdornment={<SearchIcon />}
       inputProps={{
-        ref: setInputEl,
         placeholder: 'Search',
       }}
-      endAdornment={
-        <button
-          className={classNames({
-            'seam-hidden': valueIsEmpty,
-          })}
-          onClick={clearInput}
-        >
-          <CloseIcon />
-        </button>
-      }
+      clearable
     />
   )
 }
-
-function useValueIsEmpty(
-  value: string | undefined,
-  inputEl: HTMLInputElement | null
-): boolean {
-  const [valueIsEmpty, setValueIsEmpty] = useState(true)
-
-  // If this is a controlled element, we'll just look at `value`
-  useEffect(() => {
-    setValueIsEmpty(value == null || value === '')
-  }, [value])
-
-  // If this is not a controlled element, we'll need to listen to `input`
-  // events.
-  useEffect(() => {
-    if (inputEl == null) {
-      return
-    }
-
-    const handler = (event: Event): void => {
-      if (value !== undefined) {
-        return
-      }
-
-      if (event.target == null || !('value' in event.target)) {
-        return
-      }
-
-      const inputValue = event.target.value
-      if (value === undefined) {
-        setValueIsEmpty(inputValue === '')
-      }
-    }
-
-    inputEl.addEventListener('input', handler)
-
-    return () => {
-      inputEl.removeEventListener('input', handler)
-    }
-  }, [inputEl, value])
-
-  return valueIsEmpty
-}