@seamapi/react 0.26.1 → 0.28.0

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -0,0 +1,147 @@
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { useCallback, useEffect, useState } from 'react'
+
+import { Button } from 'lib/ui/Button.js'
+import { SupportedDeviceFilterArea } from 'lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js'
+import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
+
+import { SupportedDeviceHeader } from './SupportedDeviceHeader.js'
+import { SupportedDeviceRow } from './SupportedDeviceRow.js'
+
+const BASE_URL = 'https://devicedb.seam.co/api/device_models/list'
+
+export interface SupportedDeviceContentProps {
+  cannotFilter?: boolean
+}
+
+export function SupportedDeviceContent({
+  cannotFilter = false,
+}: SupportedDeviceContentProps) {
+  const [allDeviceModels, setAllDeviceModels] = useState<DeviceModel[]>([])
+  const [filterValue, setFilterValue] = useState('')
+  const [filters, setFilters] = useState<Filters>({
+    supportedOnly: false,
+    category: null,
+    brand: null,
+  })
+
+  const fetchDeviceModels = useCallback(async () => {
+    const queries = []
+
+    if (filterValue.trim() !== '') {
+      queries.push(`text_search=${encodeURIComponent(filterValue.trim())}`)
+    }
+
+    if (filters.supportedOnly) {
+      queries.push('support_level=live')
+    }
+
+    if (filters.category !== null) {
+      queries.push(`main_category=${encodeURIComponent(filters.category)}`)
+    }
+
+    if (filters.brand !== null) {
+      queries.push(`brand=${encodeURIComponent(filters.brand)}`)
+    }
+
+    const url = `${BASE_URL}?${queries.join('&')}`
+    return await axios.get(url)
+  }, [filterValue, filters])
+
+  const { data, isLoading, isError, refetch } = useQuery<{
+    data: {
+      device_models?: DeviceModel[]
+    }
+  }>({
+    queryKey: ['supported_devices', filterValue, filters],
+    queryFn: fetchDeviceModels,
+  })
+
+  useEffect(() => {
+    if (
+      data?.data?.device_models !== undefined &&
+      allDeviceModels.length === 0
+    ) {
+      setAllDeviceModels(data.data.device_models)
+    }
+  }, [data, allDeviceModels.length])
+
+  const deviceModels = data?.data?.device_models ?? []
+
+  return (
+    <div className='seam-supported-devices-table-wrap'>
+      {!cannotFilter && (
+        <SupportedDeviceFilterArea
+          deviceModels={allDeviceModels}
+          filterValue={filterValue}
+          setFilterValue={setFilterValue}
+          filters={filters}
+          setFilters={setFilters}
+        />
+      )}
+
+      {isLoading && (
+        <div className='seam-supported-devices-table-state-block'>
+          <p>Loading device models...</p>
+        </div>
+      )}
+
+      {isError && (
+        <div className='seam-supported-devices-table-state-block'>
+          <p>There was an error fetching device models.</p>
+          <Button
+            variant='solid'
+            size='small'
+            onClick={() => {
+              void refetch()
+            }}
+          >
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {!isLoading && !isError && data?.data?.device_models !== null && (
+        <table className='seam-supported-devices-table'>
+          <SupportedDeviceHeader />
+          <tbody>
+            {deviceModels.length !== 0 &&
+              deviceModels.map((deviceModel, index) => (
+                <SupportedDeviceRow
+                  key={`${index}:${deviceModel.manufacturer_model_id}`}
+                  deviceModel={deviceModel}
+                />
+              ))}
+
+            {deviceModels.length === 0 && (
+              <tr className='seam-supported-devices-table-message-row'>
+                <td colSpan={6}>
+                  <div className='seam-supported-devices-table-message'>
+                    {filterValue.length === 0 ? (
+                      <p>No device models found.</p>
+                    ) : (
+                      <>
+                        <p>No device models matched your search.</p>
+                        <Button
+                          variant='outline'
+                          size='small'
+                          onClick={() => {
+                            setFilterValue('')
+                          }}
+                          className='seam-supported-devices-table-message-clear-search'
+                        >
+                          Clear search terms
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -0,0 +1,131 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+import { capitalize } from 'lib/capitalize.js'
+import { Button } from 'lib/ui/Button.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { FilterCategoryMenu } from 'lib/ui/SupportedDeviceTable/FilterCategoryMenu.js'
+import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
+import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
+
+interface SupportedDeviceFilterAreaProps {
+  deviceModels: DeviceModel[]
+  filterValue: string
+  setFilterValue: (filter: string) => void
+  filters: Filters
+  setFilters: Dispatch<SetStateAction<Filters>>
+}
+
+export function SupportedDeviceFilterArea({
+  deviceModels,
+  filterValue,
+  setFilterValue,
+  filters,
+  setFilters,
+}: SupportedDeviceFilterAreaProps) {
+  const appliedFilters = Object.keys(filters).filter((key) => {
+    const filterProperty = filters[key as keyof Filters]
+    return (
+      filterProperty !== undefined &&
+      filterProperty !== null &&
+      filterProperty !== false
+    )
+  })
+  const appliedFiltersCount = appliedFilters.length
+
+  const getAvailablePropertiesFromDeviceModels = (
+    property: keyof DeviceModel
+  ) => {
+    const properties = new Set<string>()
+    deviceModels.forEach((deviceModel) => {
+      properties.add(capitalize(deviceModel[property]))
+    })
+    return Array.from(properties)
+  }
+
+  const resetFilter = (filterType: keyof Filters) => {
+    setFilters((filters) => ({
+      ...filters,
+      [filterType]: null,
+    }))
+  }
+
+  const isPlural = appliedFiltersCount > 1
+  const filterButtonLabel = isPlural
+    ? `Filters (${appliedFiltersCount})`
+    : 'Filter'
+
+  return (
+    <div className='seam-supported-devices-filter-area'>
+      <div className='seam-deliberate-block' />
+      <div className='seam-filters-wrap'>
+        <Menu
+          renderButton={({ onOpen }) => (
+            <Button
+              variant='outline'
+              className='seam-filters-button'
+              onClick={onOpen}
+            >
+              {filterButtonLabel}
+            </Button>
+          )}
+        >
+          <div
+            className='seam-supported-devices-filter-menu'
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+          >
+            <div className='seam-filter-menu-row'>
+              <FilterCategoryMenu
+                label='Brand'
+                options={getAvailablePropertiesFromDeviceModels('brand')}
+                onSelect={(brand: string) => {
+                  setFilters((filters) => ({
+                    ...filters,
+                    brand,
+                  }))
+                }}
+                buttonLabel={filters.brand ?? 'All'}
+                onAllOptionSelect={() => {
+                  resetFilter('brand')
+                }}
+              />
+            </div>
+
+            <div className='seam-filter-menu-row'>
+              <label
+                htmlFor='supportedOnly'
+                className='seam-filter-checkbox-label'
+              >
+                <p>Supported</p>
+                <input
+                  id='supportedOnly'
+                  name='supportedOnly'
+                  type='checkbox'
+                  className='seam-filter-checkbox'
+                  checked={filters.supportedOnly}
+                  onChange={(event) => {
+                    setFilters((filters) => ({
+                      ...filters,
+                      supportedOnly: event.target.checked,
+                    }))
+                  }}
+                />
+              </label>
+            </div>
+          </div>
+        </Menu>
+
+        <div className='seam-supported-devices-filter-area-search-bar-wrap'>
+          <SearchTextField
+            value={filterValue}
+            onChange={(value) => {
+              setFilterValue(value)
+            }}
+            className='seam-supported-devices-filter-area-search-bar'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/lib/ui/{SupportedDevices/SupportedDevicesHeader.tsx → SupportedDeviceTable/SupportedDeviceHeader.tsx}

@@ -1,4 +1,4 @@
-export function SupportedDevicesHeader() {
+export function SupportedDeviceHeader() {
   return (
     <thead>
       <tr>

package/src/lib/ui/{SupportedDevices → SupportedDeviceTable}/SupportedDeviceRow.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
+import type { DeviceModel } from 'lib/ui/SupportedDeviceTable/types.js'
 
 export interface SupportedDeviceRowProps {
   deviceModel: DeviceModel

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -0,0 +1,16 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import type { SupportedDeviceContentProps } from 'lib/ui/SupportedDeviceTable/SupportedDeviceContent.js'
+import { SupportedDeviceContent } from 'lib/ui/SupportedDeviceTable/SupportedDeviceContent.js'
+
+const client = new QueryClient()
+
+export type SupportedDeviceTableProps = SupportedDeviceContentProps
+
+export function SupportedDeviceTable(props: SupportedDeviceContentProps) {
+  return (
+    <QueryClientProvider client={client}>
+      <SupportedDeviceContent {...props} />
+    </QueryClientProvider>
+  )
+}

package/src/lib/ui/{SupportedDevices → SupportedDeviceTable}/types.ts

@@ -8,3 +8,9 @@ export interface DeviceModel {
   icon_url: string
   seam_device_model_page_url: string
 }
+
+export interface Filters {
+  supportedOnly: boolean
+  category: string | null
+  brand: string | null
+}

package/src/lib/ui/Table/TableHeader.tsx

@@ -1,5 +1,9 @@
 import type { PropsWithChildren } from 'react'
 
 export function TableHeader({ children }: PropsWithChildren): JSX.Element {
-  return <div className='seam-table-header'>{children}</div>
+  return (
+    <div className='seam-table-header'>
+      <div className='seam-body'>{children}</div>
+    </div>
+  )
 }

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

@@ -1,15 +1,94 @@
 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'
 
 export function SearchTextField({
   className,
+  value,
+  onChange,
   ...props
 }: TextFieldProps): JSX.Element {
+  const [inputEl, setInputEl] = useState<HTMLInputElement | null>(null)
+
+  const valueIsEmpty = useValueIsEmpty(value, inputEl)
+  const clearInput = () => {
+    if (onChange != null) {
+      onChange('')
+      return
+    }
+
+    if (inputEl != null) {
+      inputEl.value = ''
+    }
+  }
+
   return (
     <TextField
+      value={value}
+      onChange={onChange}
       {...props}
       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>
+      }
     />
   )
 }
+
+function useValueIsEmpty(
+  value: string | undefined,
+  inputEl: HTMLInputElement | null
+) {
+  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) => {
+      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,21 +1,52 @@
 import classNames from 'classnames'
-import type { ChangeEvent, InputHTMLAttributes } from 'react'
+import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react'
 
-export type TextFieldProps = {
+export interface TextFieldProps {
   value?: string
-  onChange: (value: string) => void
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
+  onChange?: (value: string) => void
+  startAdornment?: JSX.Element
+  endAdornment?: JSX.Element
+  disabled?: boolean
+  className?: string
+  inputProps?: {
+    ref?:
+      | MutableRefObject<HTMLInputElement | null>
+      | ((inputEl: HTMLInputElement) => void)
+  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
+}
 
 export function TextField(props: TextFieldProps): JSX.Element {
-  const { value, onChange, className, ...inputProps } = props
+  const {
+    value,
+    onChange,
+    className,
+    startAdornment,
+    endAdornment,
+    inputProps,
+    disabled,
+  } = props
+
   return (
-    <input
-      className={classNames('seam-text-field', className)}
-      value={value}
-      onChange={handleString(onChange)}
-      type='text'
-      {...inputProps}
-    />
+    <div
+      className={classNames('seam-text-field', className, {
+        'seam-disabled': disabled,
+      })}
+    >
+      {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>
   )
 }
 

package/src/lib/ui/index.ts

@@ -2,4 +2,4 @@ export * from './AccessCodeDetails/AccessCodeDetails.js'
 export * from './AccessCodeTable/AccessCodeTable.js'
 export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
-export * from './SupportedDevices/SupportedDevices.js'
+export * from './SupportedDeviceTable/SupportedDeviceTable.js'

package/src/styles/_colors.scss

@@ -18,6 +18,7 @@ $bg-d: #cbd0d3;
 $bg-c: #dde0e2;
 $bg-b: #e9edef;
 $bg-a: #f1f3f4;
+$bg-gray: #ececec;
 $status-red: #e36857;
 $status-orange: #f3980f;
 $status-green: #27ae60;

package/src/styles/_device-table.scss

@@ -2,6 +2,10 @@
 
 @mixin all {
   .seam-device-table {
+    .seam-search-text-field {
+      width: 170px;
+    }
+
     .seam-table-row {
       cursor: pointer;
 

package/src/styles/_inputs.scss

@@ -2,10 +2,82 @@
 
 @mixin text-field {
   .seam-text-field {
-    padding: 0 8px;
-    height: 40px;
     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-disabled {
+      border-color: colors.$text-gray-3;
+      background: colors.$bg-gray;
+      cursor: not-allowed;
+
+      .seam-text-field-input {
+        cursor: not-allowed;
+      }
+    }
+
+    .seam-text-field-input {
+      height: 40px;
+      border: 0;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .seam-adornment {
+      display: flex;
+      align-items: center;
+
+      svg {
+        scale: 0.8333;
+      }
+
+      &.seam-start {
+        margin-right: 4px;
+      }
+
+      button {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        appearance: none;
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: colors.$bg-b;
+        }
+
+        &.seam-hidden {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+    }
+
+    &.seam-search-text-field {
+      .seam-text-field-input {
+        width: 100%;
+      }
+    }
   }
 }