@seamapi/react 4.14.2 → 5.0.0

package/lib/seam/components/SupportedDeviceTable/use-manufacturer.js

@@ -1,17 +0,0 @@
-import { useSeamClient } from '@seamapi/react-query';
-import { useQuery } from '@tanstack/react-query';
-export function useManufacturer(params) {
-    const { client: seam } = useSeamClient();
-    const { data, ...rest } = useQuery({
-        enabled: seam != null,
-        queryKey: ['internal', 'manufacturers', 'get', params],
-        queryFn: async () => {
-            if (seam == null)
-                return null;
-            const { data: { manufacturer }, } = await seam.client.get('/internal/devicedb/v1/manufacturers/get', { params });
-            return manufacturer;
-        },
-    });
-    return { ...rest, manufacturer: data };
-}
-//# sourceMappingURL=use-manufacturer.js.map

package/lib/seam/components/SupportedDeviceTable/use-manufacturer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-manufacturer.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-manufacturer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAMpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQhD,MAAM,UAAU,eAAe,CAC7B,MAA6B;IAE7B,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAwC;QACxE,OAAO,EAAE,IAAI,IAAI,IAAI;QACrB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC;QACtD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,IAAI,IAAI,IAAI;gBAAE,OAAO,IAAI,CAAA;YAC7B,MAAM,EACJ,IAAI,EAAE,EAAE,YAAY,EAAE,GACvB,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CACvB,yCAAyC,EACzC,EAAE,MAAM,EAAE,CACX,CAAA;YACD,OAAO,YAAY,CAAA;QACrB,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,CAAA;AACxC,CAAC"}

package/lib/seam/components/SupportedDeviceTable/use-manufacturers.d.ts

@@ -1,7 +0,0 @@
-import type { Manufacturer, RouteRequestParams } from '@seamapi/types/devicedb';
-import type { UseSeamQueryResultLegacy } from '../../../../lib/seam/use-seam-query-result.js';
-export type UseManufacturersParams = ManufacturersListParams;
-export type UseManufacturersData = Manufacturer[];
-export declare function useManufacturers(params?: UseManufacturersParams): UseSeamQueryResultLegacy<'manufacturers', UseManufacturersData>;
-type ManufacturersListParams = RouteRequestParams<'/v1/manufacturers/list'>;
-export {};

package/lib/seam/components/SupportedDeviceTable/use-manufacturers.js

@@ -1,26 +0,0 @@
-import { useSeamClient } from '@seamapi/react-query';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-export function useManufacturers(params) {
-    const { client: seam } = useSeamClient();
-    const queryClient = useQueryClient();
-    const { data, ...rest } = useQuery({
-        enabled: seam != null,
-        queryKey: ['internal', 'manufacturers', 'list', params],
-        queryFn: async () => {
-            if (seam == null)
-                return [];
-            const { data: { manufacturers }, } = await seam.client.get('/internal/devicedb/v1/manufacturers/list', { params });
-            for (const manufacturer of manufacturers) {
-                queryClient.setQueryData([
-                    'internal',
-                    'manufacturers',
-                    'get',
-                    { manufacturer_id: manufacturer.manufacturer_id },
-                ], manufacturer);
-            }
-            return manufacturers;
-        },
-    });
-    return { ...rest, manufacturers: data };
-}
-//# sourceMappingURL=use-manufacturers.js.map

package/lib/seam/components/SupportedDeviceTable/use-manufacturers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-manufacturers.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-manufacturers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAMpD,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAQhE,MAAM,UAAU,gBAAgB,CAC9B,MAA+B;IAE/B,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IACxC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAyC;QACzE,OAAO,EAAE,IAAI,IAAI,IAAI;QACrB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,CAAC;QACvD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,IAAI,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC3B,MAAM,EACJ,IAAI,EAAE,EAAE,aAAa,EAAE,GACxB,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CACvB,0CAA0C,EAC1C,EAAE,MAAM,EAAE,CACX,CAAA;YACD,KAAK,MAAM,YAAY,IAAI,aAAa,EAAE,CAAC;gBACzC,WAAW,CAAC,YAAY,CACtB;oBACE,UAAU;oBACV,eAAe;oBACf,KAAK;oBACL,EAAE,eAAe,EAAE,YAAY,CAAC,eAAe,EAAE;iBAClD,EACD,YAAY,CACb,CAAA;YACH,CAAC;YACD,OAAO,aAAa,CAAA;QACtB,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAA;AACzC,CAAC"}

package/src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -1,78 +0,0 @@
-import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
-import { Menu } from 'lib/ui/Menu/Menu.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
-
-export type FilterCategoryMenuProps =
-  | FilterCategoryMenuPropsWithAllOption
-  | FilterCategoryMenuPropsWithoutAllOption
-
-interface FilterCategoryMenuPropsWithAllOption
-  extends FilterCategoryMenuBaseProps {
-  hideAllOption?: false
-  allLabel: string
-  onAllOptionSelect: () => void
-}
-
-interface FilterCategoryMenuPropsWithoutAllOption
-  extends FilterCategoryMenuBaseProps {
-  hideAllOption: true
-  allLabel: never
-  onAllOptionSelect?: never
-}
-
-interface FilterCategoryMenuBaseProps {
-  label: string
-  options: string[]
-  onSelect: (option: string) => void
-  buttonLabel?: string
-}
-
-export function FilterCategoryMenu({
-  label = t.filter,
-  allLabel,
-  options,
-  hideAllOption = false,
-  onSelect,
-  onAllOptionSelect,
-  buttonLabel,
-}: FilterCategoryMenuProps): JSX.Element {
-  const sortedOptions = [...options].sort((a, b) => a.localeCompare(b))
-  const usableOptions = hideAllOption
-    ? sortedOptions
-    : [allLabel, ...sortedOptions]
-
-  return (
-    <div className='seam-supported-device-table-filter-menu-wrap'>
-      <p>{label}</p>
-      <Menu
-        renderButton={({ onOpen }) => (
-          <button type='button' onClick={onOpen}>
-            <span>{buttonLabel}</span>
-            <ChevronDownIcon />
-          </button>
-        )}
-      >
-        <div className='seam-supported-device-table-filter-menu-content'>
-          {usableOptions.map((option, index) => (
-            <MenuItem
-              key={`${index}:${option}`}
-              onClick={() => {
-                if (option === allLabel) {
-                  onAllOptionSelect?.()
-                } else {
-                  onSelect(option)
-                }
-              }}
-            >
-              <span>{option}</span>
-            </MenuItem>
-          ))}
-        </div>
-      </Menu>
-    </div>
-  )
-}
-
-const t = {
-  filter: 'Filter',
-}

package/src/lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.tsx

@@ -1,13 +0,0 @@
-interface HiddenDevicesOverlayProps {
-  visible: boolean
-}
-
-export function HiddenDevicesOverlay({
-  visible,
-}: HiddenDevicesOverlayProps): JSX.Element | null {
-  if (!visible) {
-    return null
-  }
-
-  return <div className='hidden-devices-overlay' />
-}

package/src/lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.tsx

@@ -1,32 +0,0 @@
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-
-interface ShowAllDevicesButtonProps {
-  onClick: () => void
-  visible: boolean
-  expanded: boolean
-  totalDeviceCount: number
-}
-
-export function ShowAllDevicesButton({
-  onClick,
-  visible,
-  expanded,
-  totalDeviceCount,
-}: ShowAllDevicesButtonProps): JSX.Element | null {
-  if (!visible) {
-    return null
-  }
-
-  const label = expanded ? t.showLess : t.showAll(totalDeviceCount)
-
-  return (
-    <button type='button' className='show-all-devices-button' onClick={onClick}>
-      <ChevronRightIcon /> {label}
-    </button>
-  )
-}
-
-const t = {
-  showLess: 'Show less',
-  showAll: (count: number) => `See all ${count}`,
-}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,161 +0,0 @@
-import type { DeviceModel } from '@seamapi/types/devicedb'
-import { useMemo } from 'react'
-
-import { SupportedDeviceManufacturerSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js'
-import {
-  type DeviceModelFilters,
-  useFilteredDeviceModels,
-} from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import { Button } from 'lib/ui/Button.js'
-
-interface SupportedDeviceContentProps {
-  filterValue: string
-  resetFilterValue: () => void
-  filters: DeviceModelFilters
-  manufacturers: string[] | null
-  excludedManufacturers: string[]
-  includeIf: string[] | null
-  excludeIf: string[]
-}
-
-export function SupportedDeviceContent({
-  resetFilterValue,
-  filterValue,
-  filters,
-  manufacturers,
-  excludedManufacturers,
-  includeIf,
-  excludeIf,
-}: SupportedDeviceContentProps): JSX.Element | null {
-  const { deviceModels, isPending, isError, refetch } = useFilteredDeviceModels(
-    {
-      filterValue,
-      filters,
-      manufacturers,
-      excludedManufacturers,
-      includeIf,
-      excludeIf,
-    }
-  )
-
-  const groupedDeviceModels = useMemo(
-    () => groupDeviceModelsByManufacturer(deviceModels ?? []),
-    [deviceModels]
-  )
-
-  if (isPending) {
-    return (
-      <div className='seam-supported-device-table-content-state-block'>
-        <p>{t.loading}</p>
-      </div>
-    )
-  }
-
-  if (isError) {
-    return (
-      <div className='seam-supported-device-table-content-state-block'>
-        <p>{t.error}</p>
-        <Button
-          variant='solid'
-          size='small'
-          onClick={() => {
-            void refetch()
-          }}
-        >
-          {t.retry}
-        </Button>
-      </div>
-    )
-  }
-
-  if (deviceModels == null) {
-    return null
-  }
-
-  const isEmpty = deviceModels.length === 0
-  if (isEmpty) {
-    return (
-      <div className='seam-supported-device-table-content'>
-        <EmptyResult
-          filterValue={filterValue}
-          resetFilterValue={resetFilterValue}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {Object.entries(groupedDeviceModels)
-        .sort(
-          (e1, e2) =>
-            e1[1][0]?.manufacturer.display_name.localeCompare(
-              e2[1][0]?.manufacturer.display_name ?? ''
-            ) ?? 0
-        )
-        .map(([manufacturerId, models]) => {
-          return (
-            <SupportedDeviceManufacturerSection
-              key={manufacturerId}
-              manufacturerId={manufacturerId}
-              deviceModels={models}
-            />
-          )
-        })}
-    </>
-  )
-}
-
-function EmptyResult({
-  filterValue,
-  resetFilterValue,
-}: Pick<
-  SupportedDeviceContentProps,
-  'filterValue' | 'resetFilterValue'
->): JSX.Element {
-  const noMatchingRows = (
-    <>
-      <p>{t.noMatch}</p>
-      <Button
-        variant='outline'
-        size='small'
-        onClick={resetFilterValue}
-        className='seam-supported-device-table-content-message-clear-search'
-      >
-        {t.clear}
-      </Button>
-    </>
-  )
-
-  return (
-    <div className='seam-supported-device-table-content-message-row'>
-      <div>
-        <div className='seam-supported-device-table-content-message'>
-          {filterValue.length === 0 ? <p>{t.noneFound}</p> : noMatchingRows}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const groupDeviceModelsByManufacturer = (
-  deviceModels: DeviceModel[]
-): Record<string, DeviceModel[]> => {
-  const result: Record<string, DeviceModel[]> = {}
-
-  for (const model of deviceModels) {
-    const { manufacturer } = model
-    const list = result[manufacturer.manufacturer_id] ?? []
-    result[manufacturer.manufacturer_id] = [...list, model]
-  }
-  return result
-}
-
-const t = {
-  loading: 'Loading device models...',
-  retry: 'Retry',
-  error: 'There was an error fetching device models.',
-  noneFound: 'No device models found.',
-  noMatch: 'No device models matched your search.',
-  clear: 'Clear search terms',
-}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.tsx

@@ -1,22 +0,0 @@
-import type { DeviceModel } from '@seamapi/types/devicedb'
-
-import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-
-interface SupportedDeviceContentRowsProps {
-  deviceModels: DeviceModel[]
-}
-
-export function SupportedDeviceContentRows({
-  deviceModels,
-}: SupportedDeviceContentRowsProps): JSX.Element | null {
-  return (
-    <div className='seam-supported-device-table-content'>
-      {deviceModels.map((deviceModel) => (
-        <SupportedDeviceRow
-          key={deviceModel.device_model_id}
-          deviceModel={deviceModel}
-        />
-      ))}
-    </div>
-  )
-}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -1,145 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react'
-
-import { FilterCategoryMenu } from 'lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js'
-import {
-  type DeviceModelFilters,
-  supportedIntegrationSupportLevels,
-} from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import { Button } from 'lib/ui/Button.js'
-import { Menu } from 'lib/ui/Menu/Menu.js'
-import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
-
-import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
-
-interface SupportedDeviceFilterAreaProps {
-  filterValue: string
-  setFilterValue: (filter: string) => void
-  filters: DeviceModelFilters
-  setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
-  manufacturers: string[] | null
-  excludedManufacturers: string[]
-}
-
-export function SupportedDeviceFilterArea({
-  filterValue,
-  setFilterValue,
-  filters,
-  setFilters,
-  manufacturers,
-  excludedManufacturers,
-}: SupportedDeviceFilterAreaProps): JSX.Element {
-  const appliedFiltersCount = getAppliedFilterCount(filters)
-
-  const { manufacturers: manufacturersData } = useFilteredManufacturers({
-    integrationSupportLevels: filters.supportedOnly
-      ? supportedIntegrationSupportLevels
-      : null,
-    manufacturers,
-    excludedManufacturers,
-  })
-
-  const resetFilter = (filterType: keyof DeviceModelFilters): void => {
-    setFilters((filters) => ({
-      ...filters,
-      [filterType]: null,
-    }))
-  }
-
-  const filterButtonLabel =
-    appliedFiltersCount > 0 ? `${t.filters} (${appliedFiltersCount})` : t.filter
-
-  const allLabel = t.all
-
-  return (
-    <div className='seam-supported-device-table-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-device-table-filter-menu'
-            onClick={(event) => {
-              event.stopPropagation()
-            }}
-          >
-            <div className='seam-filter-menu-row'>
-              <FilterCategoryMenu
-                label={t.manufacturer}
-                allLabel={allLabel}
-                options={
-                  manufacturersData?.map(
-                    (manufacturer) => manufacturer.display_name
-                  ) ?? []
-                }
-                onSelect={(manufacturer: string) => {
-                  setFilters((filters) => ({
-                    ...filters,
-                    manufacturer,
-                  }))
-                }}
-                buttonLabel={filters.manufacturer ?? allLabel}
-                onAllOptionSelect={() => {
-                  resetFilter('manufacturer')
-                }}
-              />
-            </div>
-            <div className='seam-filter-menu-row'>
-              <label
-                htmlFor='supportedOnly'
-                className='seam-filter-checkbox-label'
-              >
-                <p>{t.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-device-table-filter-area-search-bar-wrap'>
-          <SearchTextField
-            value={filterValue}
-            onChange={(value) => {
-              setFilterValue(value)
-            }}
-            className='seam-supported-device-table-filter-area-search-bar'
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
-  let count = 0
-  if (filters.manufacturer !== null) count++
-  if (!filters.supportedOnly) count++
-  return count
-}
-
-const t = {
-  all: 'All',
-  manufacturer: 'Manufacturer',
-  supported: 'Supported',
-  filter: 'Filter',
-  filters: 'Filters',
-}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.tsx

@@ -1,109 +0,0 @@
-import type {
-  DeviceModel,
-  ManufacturerAnnotation,
-} from '@seamapi/types/devicedb'
-import classNames from 'classnames'
-
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { InfoBlueIcon } from 'lib/icons/InfoBlue.js'
-import { HiddenDevicesOverlay } from 'lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js'
-import { ShowAllDevicesButton } from 'lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js'
-import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
-import { useManufacturer } from 'lib/seam/components/SupportedDeviceTable/use-manufacturer.js'
-import { useToggle } from 'lib/ui/use-toggle.js'
-
-/**
- * How many device models required before collapsing the list,
- * and requiring the user to click to view all.
- */
-const maxDevicesBeforeCollapsing = 3
-
-interface SupportedDeviceManufacturerSectionProps {
-  manufacturerId: string
-  deviceModels: DeviceModel[]
-}
-
-export function SupportedDeviceManufacturerSection({
-  manufacturerId,
-  deviceModels,
-}: SupportedDeviceManufacturerSectionProps): JSX.Element | null {
-  const { manufacturer } = useManufacturer({ manufacturer_id: manufacturerId })
-
-  const [expanded, toggleExpand] = useToggle()
-
-  const canExpand = deviceModels.length > maxDevicesBeforeCollapsing
-
-  const visibleDevices =
-    !canExpand || expanded
-      ? deviceModels
-      : deviceModels.filter(
-          (_deviceModel, index) => index < maxDevicesBeforeCollapsing
-        )
-
-  const handleHeaderClick = (): void => {
-    if (!canExpand) {
-      return
-    }
-
-    toggleExpand()
-  }
-
-  return (
-    <div
-      className={classNames('seam-manufacturer-section', {
-        'can-expand': canExpand,
-        expanded,
-      })}
-    >
-      <div className='seam-header' onClick={handleHeaderClick}>
-        <img
-          src={manufacturer?.logo?.url}
-          alt={manufacturer?.display_name}
-          className='seam-manufacturer-image'
-        />
-        <h5 className='seam-manufacturer-name'>
-          {manufacturer?.display_name} {t.devices}
-        </h5>
-        {canExpand && <ChevronRightIcon className='chevron' />}
-      </div>
-      {manufacturer?.annotations.map((annotation, idx) => (
-        <ManufacturerAnnotationBox
-          key={[annotation.annotation_code, idx].join('_')}
-          annotation={annotation}
-        />
-      ))}
-      <div className='seam-supported-device-table-content'>
-        {visibleDevices.map((deviceModel) => (
-          <SupportedDeviceRow
-            key={deviceModel.device_model_id}
-            deviceModel={deviceModel}
-          />
-        ))}
-      </div>
-      <ShowAllDevicesButton
-        visible={canExpand}
-        onClick={toggleExpand}
-        expanded={expanded}
-        totalDeviceCount={deviceModels.length}
-      />
-      <HiddenDevicesOverlay visible={canExpand && !expanded} />
-    </div>
-  )
-}
-
-function ManufacturerAnnotationBox({
-  annotation,
-}: {
-  annotation: ManufacturerAnnotation
-}): JSX.Element {
-  return (
-    <div className='seam-manufacturer-annotation-box'>
-      <InfoBlueIcon />
-      <p className='seam-annotation'>{annotation.message}</p>
-    </div>
-  )
-}
-
-const t = {
-  devices: 'Devices',
-}