@seamapi/react 1.28.0 → 1.29.0

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.0'
+const seamapiReactVersion = '1.29.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;
+      }
+    }
+  }
+}

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

@@ -6,6 +6,17 @@
       width: 170px;
     }
 
+    .seam-table-header {
+      .seam-left {
+        display: flex;
+        align-items: center;
+
+        .seam-add-access-code-button {
+          margin-left: 8px;
+        }
+      }
+    }
+
     .seam-table-row {
       cursor: pointer;
 

package/src/styles/_buttons.scss

@@ -7,12 +7,22 @@
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
     background: colors.$white;
-    padding: 6px;
+    padding: 2px;
     line-height: 0;
+    width: 30px;
+    height: 30px;
 
     &:hover {
       background: rgb(0 122 252 / 8%);
     }
+
+    svg {
+      scale: 0.75;
+
+      * {
+        fill: colors.$primary;
+      }
+    }
   }
 }
 

package/src/styles/_colors.scss

@@ -22,6 +22,7 @@ $bg-aa: #fafafa;
 $bg-gray: #ececec;
 $status-red: #e36857;
 $white: #fff;
+$black: #000;
 $alert-error-dark: #cb7d7d;
 $alert-error-line: #f1d4d4;
 $alert-error-fill: #ffefef;

package/src/styles/_form-field.scss

@@ -0,0 +1,15 @@
+@use './colors';
+
+@mixin all {
+  .seam-form-field {
+    margin-bottom: 24px;
+
+    > .seam-input-label {
+      user-select: none;
+    }
+
+    > .seam-radio-field {
+      margin-top: 4px;
+    }
+  }
+}

package/src/styles/_input-label.scss

@@ -0,0 +1,11 @@
+@use './colors';
+
+@mixin all {
+  .seam-input-label {
+    cursor: default;
+    margin-bottom: 4px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 134%;
+  }
+}

package/src/styles/_inputs.scss

@@ -2,33 +2,27 @@
 
 @mixin text-field {
   .seam-text-field {
-    border: 1px solid colors.$text-gray-3;
-    border-radius: 8px;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      border-color: colors.$text-default;
-    }
-
-    &:focus-within {
-      border-color: colors.$primary;
-    }
+    > .seam-main {
+      border: 1px solid colors.$text-gray-3;
+      border-radius: 8px;
+      display: flex;
+      padding: 0 8px;
+      align-items: center;
 
-    &.seam-disabled {
-      border-color: colors.$text-gray-3;
-      background: colors.$bg-gray;
-      cursor: not-allowed;
+      &:hover {
+        border-color: colors.$text-default;
+      }
 
-      .seam-text-field-input {
-        cursor: not-allowed;
+      &:focus-within {
+        border-color: colors.$primary;
       }
     }
 
     .seam-text-field-input {
       height: 40px;
       border: 0;
+      width: 100%;
+      border-radius: 8px;
 
       &:focus {
         outline: none;
@@ -73,9 +67,40 @@
       }
     }
 
-    &.seam-search-text-field {
-      .seam-text-field-input {
-        width: 100%;
+    > .seam-helper-text {
+      margin-top: 4px;
+    }
+
+    &.seam-disabled {
+      > .seam-main {
+        border-color: colors.$text-gray-3;
+        background: colors.$bg-gray;
+        cursor: not-allowed;
+
+        > .seam-text-field-input {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &.seam-large {
+      > .seam-main {
+        padding: 0 12px;
+
+        > .seam-text-field-input {
+          height: 48px;
+          font-size: 16px;
+        }
+      }
+    }
+
+    &.seam-error {
+      > .seam-main {
+        border: 1px solid colors.$status-red;
+      }
+
+      > .seam-helper-text {
+        color: colors.$status-red;
       }
     }
   }

package/src/styles/_layout.scss

@@ -12,7 +12,7 @@
     .seam-back-icon {
       position: absolute;
       top: 50%;
-      transform: translate(4px, -25%);
+      transform: translate(4px, -50%);
       left: 0;
       cursor: pointer;
     }
@@ -22,6 +22,14 @@
       line-height: 134%;
       color: colors.$text-gray-1;
     }
+
+    .seam-subheading {
+      display: block;
+      font-size: 12px;
+      line-height: 140%;
+      text-align: center;
+      color: colors.$text-gray-1;
+    }
   }
 }
 

package/src/styles/_main.scss

@@ -13,6 +13,9 @@
 @use './device-table';
 @use './access-code-details';
 @use './supported-device-table';
+@use './access-code-form';
+@use './input-label';
+@use './form-field';
 
 .seam-components {
   // Reset
@@ -22,6 +25,8 @@
   @include typography.all;
   @include tables.all;
   @include inputs.all;
+  @include input-label.all;
+  @include form-field.all;
   @include buttons.all;
   @include layout.all;
   @include icons.all;
@@ -32,6 +37,7 @@
   @include device-table.all;
   @include access-code-table.all;
   @include access-code-details.all;
+  @include access-code-form.all;
   @include alert.all;
   @include supported-device-table.all;
 }

package/src/styles/_tables.scss

@@ -4,7 +4,7 @@
   .seam-table-header {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     height: 56px;
     padding: 0 16px;