@seamapi/react 1.28.1 → 1.30.0

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/seam/index.ts

@@ -1,5 +1,6 @@
 export * from './access-codes/use-access-code.js'
 export * from './access-codes/use-access-codes.js'
+export * from './access-codes/use-create-access-code.js'
 export * from './connect-webviews/use-create-connect-webview.js'
 export * from './devices/use-device.js'
 export * from './devices/use-device-providers.js'

package/src/lib/ui/Button.tsx

@@ -7,6 +7,7 @@ interface ButtonProps extends PropsWithChildren {
   disabled?: boolean
   onClick?: MouseEventHandler<HTMLButtonElement>
   className?: string
+  onMouseDown?: MouseEventHandler<HTMLButtonElement>
 }
 
 export function Button({
@@ -16,6 +17,7 @@ export function Button({
   disabled = false,
   onClick,
   className,
+  onMouseDown,
 }: ButtonProps): JSX.Element {
   return (
     <button
@@ -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/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
-}

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

@@ -1,5 +1,16 @@
 import classNames from 'classnames'
-import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react'
+import {
+  type ChangeEvent,
+  type FocusEventHandler,
+  forwardRef,
+  type InputHTMLAttributes,
+  type MutableRefObject,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react'
+
+import { CloseIcon } from 'lib/icons/Close.js'
 
 export interface TextFieldProps {
   value?: string
@@ -8,15 +19,24 @@ export interface TextFieldProps {
   endAdornment?: JSX.Element
   disabled?: boolean
   className?: string
+  size?: 'small' | 'large'
   inputProps?: {
     ref?:
       | MutableRefObject<HTMLInputElement | null>
       | ((inputEl: HTMLInputElement) => void)
   } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
+  clearable?: boolean
+  onFocus?: FocusEventHandler<HTMLInputElement>
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  helperText?: string
+  hasError?: boolean
 }
 
-export function TextField(props: TextFieldProps): JSX.Element {
-  const {
+export const TextField = forwardRef<
+  HTMLInputElement | undefined,
+  TextFieldProps
+>(function TextField(
+  {
     value,
     onChange,
     className,
@@ -24,34 +44,127 @@ export function TextField(props: TextFieldProps): JSX.Element {
     endAdornment,
     inputProps,
     disabled = false,
-  } = props
+    size = 'small',
+    clearable = false,
+    onFocus,
+    onBlur,
+    hasError = false,
+    helperText,
+  },
+  ref
+): 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 = ''
+    }
+  }
+
+  // Maintain a local ref, and still forward it along
+  useImperativeHandle(ref, () => (inputEl != null ? inputEl : undefined), [
+    inputEl,
+  ])
+
+  const endAdornmentVisible = endAdornment != null || clearable
 
   return (
     <div
-      className={classNames('seam-text-field', className, {
+      className={classNames('seam-text-field', className, `seam-${size}`, {
         'seam-disabled': disabled,
+        'seam-error': hasError,
       })}
     >
-      {startAdornment != null && (
-        <div className='seam-adornment seam-start'>{startAdornment}</div>
-      )}
-      <input
-        className='seam-text-field-input'
-        value={value}
-        onChange={onChange == null ? undefined : handleString(onChange)}
-        type='text'
-        disabled={disabled}
-        {...inputProps}
-      />
-      {endAdornment != null && (
-        <div className='seam-adornment seam-end'>{endAdornment}</div>
+      <div className='seam-main'>
+        {startAdornment != null && (
+          <div className='seam-adornment seam-start'>{startAdornment}</div>
+        )}
+        <input
+          className='seam-text-field-input'
+          value={value}
+          onChange={onChange == null ? undefined : handleString(onChange)}
+          type='text'
+          disabled={disabled}
+          ref={setInputEl}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          {...inputProps}
+        />
+        {endAdornmentVisible && (
+          <div className='seam-adornment seam-end'>
+            {clearable && (
+              <button
+                className={classNames({
+                  'seam-hidden': valueIsEmpty,
+                })}
+                onClick={clearInput}
+              >
+                <CloseIcon />
+              </button>
+            )}
+            {endAdornment}
+          </div>
+        )}
+      </div>
+      {helperText != null && (
+        <div className='seam-helper-text'>{helperText}</div>
       )}
     </div>
   )
-}
+})
 
 export const handleString =
   (setter: (v: string) => void) =>
   (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     setter(event.currentTarget.value)
   }
+
+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
+}

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

@@ -1,10 +1,13 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 
-export function ContentHeader(props: {
-  title?: string
+export interface ContentHeaderProps {
   onBack?: () => void
-}): JSX.Element | null {
-  const { title, onBack } = props
+  title?: string
+  subheading?: string
+}
+
+export function ContentHeader(props: ContentHeaderProps): JSX.Element | null {
+  const { title, onBack, subheading } = props
   if (title == null && onBack == null) {
     return null
   }
@@ -12,7 +15,12 @@ export function ContentHeader(props: {
   return (
     <div className='seam-content-header'>
       <BackIcon onClick={onBack} />
-      <span className='seam-title'>{title}</span>
+      <div>
+        <span className='seam-title'>{title}</span>
+        {subheading != null && (
+          <span className='seam-subheading'>{subheading}</span>
+        )}
+      </div>
     </div>
   )
 }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.28.1'
+const seamapiReactVersion = '1.30.0'
 
 export default seamapiReactVersion

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

@@ -0,0 +1,55 @@
+@use './colors';
+
+@mixin all {
+  .seam-access-code-form {
+    @include main;
+  }
+}
+
+@mixin main {
+  > .seam-main {
+    padding: 24px 24px 0;
+
+    .seam-code-text-field {
+      margin-bottom: 4px;
+    }
+
+    .seam-code-field {
+      > .seam-text-field {
+        margin-bottom: 4px;
+      }
+
+      > .seam-bottom {
+        align-items: center;
+        justify-content: space-between;
+        display: none;
+
+        .seam-requirements {
+          color: colors.$text-gray-2;
+          font-size: 14px;
+          line-height: 134%;
+          list-style: disc;
+          padding-left: 20px;
+
+          &.seam-error {
+            color: colors.$status-red;
+          }
+        }
+
+        &.seam-visible {
+          display: flex;
+        }
+      }
+    }
+
+    .seam-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+
+      .seam-btn {
+        width: 96px;
+      }
+    }
+  }
+}