@seamapi/react 1.30.2 → 1.32.0

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

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+import {
+  getBrowserTimezone,
+  getTimezoneLabel,
+  getTimezoneOffset,
+  getTimezones,
+} from 'lib/dates.js'
+import { Checkbox } from 'lib/ui/Checkbox.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { handleString } from 'lib/ui/TextField/TextField.js'
+
+interface AccessCodeFormTimezonePickerProps {
+  value: string
+  onChange: (timezone: string) => void
+  onClose: () => void
+}
+
+export function AccessCodeFormTimezonePicker({
+  onChange,
+  value,
+  onClose,
+}: AccessCodeFormTimezonePickerProps): JSX.Element {
+  const [manualTimezoneEnabled, setManualTimezoneEnabled] = useState(false)
+
+  const isBrowserTimezone = value === getBrowserTimezone()
+  const isManualTimezone = !isBrowserTimezone || manualTimezoneEnabled
+
+  const handleChangeManualTimezone = (enabled: boolean): void => {
+    setManualTimezoneEnabled(enabled)
+    if (!enabled) {
+      onChange(getBrowserTimezone())
+    }
+  }
+
+  const title = isManualTimezone ? t.titleManual : t.titleAuto
+
+  return (
+    <div className='seam-timezone-picker'>
+      <ContentHeader title={title} onBack={onClose} />
+      <div className='seam-content'>
+        <Checkbox
+          label={t.setTimezoneManuallyLabel}
+          checked={isManualTimezone}
+          onChange={handleChangeManualTimezone}
+          className='seam-manual-timezone-checkbox'
+        />
+
+        <select
+          value={value}
+          onChange={handleString(onChange)}
+          className='seam-timezone-select'
+          disabled={!isManualTimezone}
+        >
+          {getTimezones().map((timezone) => (
+            <option value={timezone} key={timezone}>
+              UTC {getTimezoneOffset(timezone)} {getTimezoneLabel(timezone)}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  titleAuto: 'Time Zone (automatic)',
+  titleManual: 'Time Zone (manual)',
+  setTimezoneManuallyLabel: 'Set time zone manually',
+}

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',
+  disableSearch: 'boolean',
   accessCodeFilter: 'function',
   accessCodeComparator: 'function',
   onAccessCodeClick: 'function',

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

@@ -39,6 +39,7 @@ const disableCreateAccessCode = true
 export interface AccessCodeTableProps {
   deviceId: string
   disableLockUnlock?: boolean
+  disableSearch?: boolean
   accessCodeFilter?: (
     accessCode: AccessCode,
     searchInputValue: string
@@ -71,6 +72,7 @@ const defaultAccessCodeFilter = (
 export function AccessCodeTable({
   deviceId,
   disableLockUnlock = false,
+  disableSearch = false,
   onAccessCodeClick = () => {},
   preventDefaultOnAccessCodeClick = false,
   onBack,
@@ -150,11 +152,13 @@ export function AccessCodeTable({
             </IconButton>
           )}
         </div>
-        <SearchTextField
-          value={searchInputValue}
-          onChange={setSearchInputValue}
-          disabled={(accessCodes?.length ?? 0) === 0}
-        />
+        {!disableSearch && (
+          <SearchTextField
+            value={searchInputValue}
+            onChange={setSearchInputValue}
+            disabled={(accessCodes?.length ?? 0) === 0}
+          />
+        )}
       </TableHeader>
       <TableBody>
         <Content

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

@@ -8,6 +8,7 @@ export const props: ElementProps<DeviceTableProps> = {
   deviceIds: 'json',
   connectedAccountIds: 'json',
   disableLockUnlock: 'boolean',
+  disableSearch: 'boolean',
   deviceFilter: 'function',
   deviceComparator: 'function',
   onDeviceClick: 'function',

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

@@ -28,6 +28,7 @@ export interface DeviceTableProps {
   deviceIds?: string[]
   connectedAccountIds?: string[]
   disableLockUnlock?: boolean
+  disableSearch?: boolean
   deviceFilter?: (device: Device, searchInputValue: string) => boolean
   deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
@@ -49,6 +50,7 @@ export function DeviceTable({
   deviceIds,
   connectedAccountIds,
   disableLockUnlock = false,
+  disableSearch = false,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
   onBack,
@@ -110,11 +112,13 @@ export function DeviceTable({
         <TableTitle>
           {t.devices} <Caption>({filteredDevices.length})</Caption>
         </TableTitle>
-        <SearchTextField
-          value={searchInputValue}
-          onChange={setSearchInputValue}
-          disabled={(devices?.length ?? 0) === 0}
-        />
+        {!disableSearch && (
+          <SearchTextField
+            value={searchInputValue}
+            onChange={setSearchInputValue}
+            disabled={(devices?.length ?? 0) === 0}
+          />
+        )}
       </TableHeader>
       <TableBody>
         <Content devices={filteredDevices} onDeviceClick={handleDeviceClick} />

package/src/lib/ui/Checkbox.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames'
+import { useRef } from 'react'
+
+import { CheckboxBlankIcon } from 'lib/icons/CheckboxBlank.js'
+import { CheckboxFilledIcon } from 'lib/icons/CheckboxFilled.js'
+
+interface CheckboxProps {
+  label: string
+  checked?: boolean
+  onChange: (checked: boolean) => void
+  className?: string
+}
+
+export function Checkbox({
+  label,
+  checked,
+  onChange,
+  className,
+}: CheckboxProps): JSX.Element {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const toggle = (): void => {
+    if (inputRef.current != null) {
+      inputRef.current.click()
+    }
+  }
+
+  return (
+    <div className={classNames('seam-checkbox', className)} onClick={toggle}>
+      <span className='seam-checkbox-icon'>
+        {checked === true ? <CheckboxFilledIcon /> : <CheckboxBlankIcon />}
+      </span>
+      <input
+        type='checkbox'
+        ref={inputRef}
+        onChange={(event) => {
+          onChange(event.target.checked)
+        }}
+        checked={checked}
+      />
+      <span className=' seam-checkbox-label'>{label}</span>
+    </div>
+  )
+}

package/src/lib/ui/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import { forwardRef } from 'react'
+
+import { TextField, type TextFieldProps } from 'lib/ui/TextField/TextField.js'
+
+type DateTimePickerProps = Pick<
+  TextFieldProps,
+  'size' | 'value' | 'className'
+> & {
+  onChange: (value: string) => void
+}
+
+export const DateTimePicker = forwardRef<
+  HTMLInputElement | undefined,
+  DateTimePickerProps
+>(function DateTextField(
+  { className, value, onChange, ...props },
+  ref
+): JSX.Element {
+  return (
+    <TextField
+      type='datetime-local'
+      className={classNames('seam-date-time-picker', className)}
+      ref={ref}
+      value={value}
+      onChange={onChange}
+      {...props}
+    />
+  )
+})

package/src/lib/ui/FormField.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { cloneElement, useRef } from 'react'
 
+import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
 import { TextField } from 'lib/ui/TextField/TextField.js'
 
@@ -38,7 +39,7 @@ export function FormField({
       })
     }
 
-    if (component.type === TextField) {
+    if (component.type === TextField || component.type === DateTimePicker) {
       return cloneElement(component, {
         ...baseProps,
         ref: inputRef,

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

@@ -23,11 +23,11 @@ export interface MenuProps extends PropsWithChildren {
   }>
 }
 
-interface MenuContextValue {
+interface MenuContext {
   close: () => void
 }
 
-const menuContext = createContext<MenuContextValue>({
+const menuContext = createContext<MenuContext>({
   close: () => {},
 })
 
@@ -171,10 +171,6 @@ export function Menu({
   )
 }
 
-export function useMenu(): MenuContextValue {
-  const context = useContext(menuContext)
-  if (context == null) {
-    throw new Error('useMenu must be used within a Menu.')
-  }
-  return context
+export function useMenu(): MenuContext {
+  return useContext(menuContext)
 }

package/src/lib/ui/RadioField/Radio.tsx

@@ -0,0 +1,45 @@
+import { useRef } from 'react'
+
+import { RadioCheckedIcon } from 'lib/icons/RadioChecked.js'
+import { RadioUncheckedIcon } from 'lib/icons/RadioUnchecked.js'
+import { useRadioField } from 'lib/ui/RadioField/RadioField.js'
+
+interface RadioProps<Value extends string> {
+  value: Value
+  label: string
+}
+
+export function Radio<Value extends string>({
+  value,
+  label,
+}: RadioProps<Value>): JSX.Element {
+  const { value: fieldValue, onChange, name } = useRadioField<Value>()
+
+  const checked = fieldValue === value
+
+  const inputRef = useRef<HTMLInputElement>()
+
+  const checkRadio = (): void => {
+    if (inputRef.current != null) {
+      inputRef.current.click()
+    }
+  }
+
+  return (
+    <label className='seam-radio' onClick={checkRadio}>
+      <span className='seam-radio-icon'>
+        {checked ? <RadioCheckedIcon /> : <RadioUncheckedIcon />}
+      </span>
+      <input
+        type='radio'
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={(event) => {
+          onChange(event.target.value as Value)
+        }}
+      />
+      <span className='seam-radio-label'>{label}</span>
+    </label>
+  )
+}

package/src/lib/ui/RadioField/RadioField.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext } from 'react'
+
+import { Radio } from 'lib/ui/RadioField/Radio.js'
+
+interface RadioFieldProps<Value extends string> {
+  name: string
+  value: Value
+  onChange: (value: Value) => void
+  options: Array<RadioOption<Value>>
+}
+
+interface RadioOption<Value> {
+  label: string
+  value: Value
+}
+
+type RadioFieldContext<Value extends string> =
+  | Omit<RadioFieldProps<Value>, 'options'>
+  | undefined
+
+const radioFieldContext = createContext<RadioFieldContext<any>>(undefined)
+
+export function RadioField<Value extends string>({
+  value,
+  onChange,
+  name,
+  options,
+}: RadioFieldProps<Value>): JSX.Element {
+  const { Provider } = radioFieldContext
+  return (
+    <Provider
+      value={{
+        value,
+        onChange,
+        name,
+      }}
+    >
+      <div className='seam-radio-field'>
+        {options.map(({ value, label }, index) => (
+          <Radio value={value} label={label} key={index} />
+        ))}
+      </div>
+    </Provider>
+  )
+}
+
+export function useRadioField<Value extends string>(): NonNullable<
+  RadioFieldContext<Value>
+> {
+  const context = useContext<RadioFieldContext<Value>>(radioFieldContext)
+  if (context === undefined) {
+    throw new Error('useRadioField must be used within a <RadioField/>')
+  }
+  return context
+}

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

@@ -4,6 +4,7 @@ import {
   type FocusEventHandler,
   forwardRef,
   type InputHTMLAttributes,
+  type MouseEventHandler,
   type MutableRefObject,
   useEffect,
   useImperativeHandle,
@@ -28,8 +29,10 @@ export interface TextFieldProps {
   clearable?: boolean
   onFocus?: FocusEventHandler<HTMLInputElement>
   onBlur?: FocusEventHandler<HTMLInputElement>
+  onClick?: MouseEventHandler<HTMLInputElement>
   helperText?: string
   hasError?: boolean
+  type?: 'text' | 'datetime-local'
 }
 
 export const TextField = forwardRef<
@@ -48,8 +51,10 @@ export const TextField = forwardRef<
     clearable = false,
     onFocus,
     onBlur,
+    onClick,
     hasError = false,
     helperText,
+    type = 'text',
   },
   ref
 ): JSX.Element {
@@ -90,11 +95,12 @@ export const TextField = forwardRef<
           className='seam-text-field-input'
           value={value}
           onChange={onChange == null ? undefined : handleString(onChange)}
-          type='text'
           disabled={disabled}
           ref={setInputEl}
           onFocus={onFocus}
           onBlur={onBlur}
+          onClick={onClick}
+          type={type}
           {...inputProps}
         />
         {endAdornmentVisible && (
@@ -122,7 +128,11 @@ export const TextField = forwardRef<
 
 export const handleString =
   (setter: (v: string) => void) =>
-  (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+  (
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ): void => {
     setter(event.currentTarget.value)
   }
 

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

@@ -1,6 +1,6 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 
-export interface ContentHeaderProps {
+interface ContentHeaderProps {
   onBack?: () => void
   title?: string
   subheading?: string

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.30.2'
+const seamapiReactVersion = '1.32.0'
 
 export default seamapiReactVersion

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

@@ -3,6 +3,8 @@
 @mixin all {
   .seam-access-code-form {
     @include main;
+    @include schedule-picker;
+    @include timezone-picker;
   }
 }
 
@@ -42,6 +44,34 @@
       }
     }
 
+    .seam-selected-times {
+      margin-top: 4px;
+      margin-left: 36px;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+
+      > div {
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-template-rows: auto auto;
+        grid-column-gap: 16px;
+
+        > span {
+          font-size: 14px;
+          line-height: 134%;
+        }
+
+        > .seam-label {
+          color: colors.$text-gray-2;
+        }
+
+        > .seam-time {
+          color: colors.$text-gray-1;
+        }
+      }
+    }
+
     .seam-actions {
       display: flex;
       gap: 8px;
@@ -53,3 +83,61 @@
     }
   }
 }
+
+@mixin schedule-picker {
+  .seam-schedule-picker {
+    .seam-content {
+      padding: 0 24px;
+
+      .seam-timezone {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        margin-bottom: 24px;
+
+        .seam-label {
+          color: colors.$text-gray-2;
+          margin-right: 4px;
+        }
+
+        .seam-selected {
+          color: colors.$primary;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+
+          svg {
+            scale: 0.6667;
+            transform: translate(-6px, 2px);
+
+            * {
+              fill: colors.$primary;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin timezone-picker {
+  .seam-timezone-picker {
+    .seam-content {
+      padding: 0 24px;
+
+      .seam-manual-timezone-checkbox {
+        margin-bottom: 8px;
+      }
+
+      > .seam-timezone-select {
+        background: colors.$white;
+        padding: 0 12px;
+        width: 100%;
+        border: 1px solid colors.$text-gray-3;
+        border-radius: 8px;
+        height: 48px;
+        font-size: 16px;
+      }
+    }
+  }
+}

package/src/styles/_checkbox.scss

@@ -0,0 +1,25 @@
+@use './colors';
+
+@mixin all {
+  .seam-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 6px 0;
+
+    > .seam-checkbox-icon {
+      height: 24px;
+      width: 24px;
+    }
+
+    > input {
+      display: none;
+    }
+
+    > .seam-checkbox-label {
+      font-size: 16px;
+      line-height: 150%;
+    }
+  }
+}

package/src/styles/_inputs.scss

@@ -1,4 +1,5 @@
 @use './colors';
+@use './typography';
 
 @mixin text-field {
   .seam-text-field {
@@ -24,6 +25,8 @@
       width: 100%;
       border-radius: 8px;
 
+      @include typography.font-family;
+
       &:focus {
         outline: none;
       }

package/src/styles/_main.scss

@@ -16,6 +16,8 @@
 @use './access-code-form';
 @use './input-label';
 @use './form-field';
+@use './radio-field';
+@use './checkbox';
 
 .seam-components {
   // Reset
@@ -31,6 +33,8 @@
   @include layout.all;
   @include icons.all;
   @include menus.all;
+  @include checkbox.all;
+  @include radio-field.all;
 
   // Components
   @include device-details.all;

package/src/styles/_radio-field.scss

@@ -0,0 +1,31 @@
+@use './colors';
+
+@mixin all {
+  .seam-radio-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    > .seam-radio {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 8px;
+      cursor: pointer;
+
+      > input {
+        display: none;
+      }
+
+      > .seam-radio-icon {
+        height: 24px;
+        width: 24px;
+      }
+
+      > .seam-radio-label {
+        font-size: 16px;
+        line-height: 134%;
+      }
+    }
+  }
+}