@seamapi/react 4.14.0 → 5.0.0

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

@@ -1,93 +0,0 @@
-import type { DeviceModel } from '@seamapi/types/devicedb'
-import classNames from 'classnames'
-
-import { DotDivider } from 'lib/ui/layout/DotDivider.js'
-
-interface SupportedDeviceRowProps {
-  deviceModel: DeviceModel
-}
-
-export function SupportedDeviceRow({
-  deviceModel,
-}: SupportedDeviceRowProps): JSX.Element {
-  return (
-    <div className='seam-row'>
-      <ImageColumn deviceModel={deviceModel} />
-      <ModelColumn deviceModel={deviceModel} />
-      <StatusColumn deviceModel={deviceModel} />
-    </div>
-  )
-}
-
-export function ImageColumn({
-  deviceModel,
-}: SupportedDeviceRowProps): JSX.Element {
-  return (
-    <div className='seam-col seam-device-image-col'>
-      <div className='seam-image-box'>
-        <img
-          width={40}
-          src={deviceModel.aesthetic_variants[0]?.images[0]?.url}
-        />
-      </div>
-    </div>
-  )
-}
-
-export function ModelColumn({
-  deviceModel,
-}: SupportedDeviceRowProps): JSX.Element {
-  const sku = deviceModel.aesthetic_variants[0]?.manufacturer_sku
-  const connection =
-    deviceModel.main_connection_type === 'unknown'
-      ? null
-      : deviceModel.main_connection_type
-  return (
-    <div className='seam-col seam-model-col'>
-      <div className='seam-model-name'>
-        <div className='seam-truncated-text'>{deviceModel.display_name}</div>
-      </div>
-      <div className='seam-model-id'>
-        <div className='seam-truncated-text'>
-          {sku}
-          {sku != null && connection != null && <DotDivider />}
-          {connection}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function StatusColumn({
-  deviceModel,
-}: SupportedDeviceRowProps): JSX.Element {
-  const statusColor =
-    supportLevelColors[deviceModel.manufacturer.integration] ?? 'unknown'
-
-  return (
-    <div className='seam-col seam-status-col'>
-      <div className={classNames('seam-status-pill', `status-${statusColor}`)}>
-        <span>{status[deviceModel.manufacturer.integration]}</span>
-      </div>
-    </div>
-  )
-}
-
-const supportLevelColors: Record<
-  DeviceModel['manufacturer']['integration'],
-  'green' | 'blue' | 'unknown'
-> = {
-  stable: 'green',
-  beta: 'blue',
-  planned: 'unknown',
-  unsupported: 'unknown',
-  inquire: 'unknown',
-}
-
-const status: Record<DeviceModel['manufacturer']['integration'], string> = {
-  stable: 'LIVE',
-  beta: 'BETA',
-  unsupported: 'Inquire',
-  planned: 'Inquire',
-  inquire: 'Inquire',
-}

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

@@ -1,15 +0,0 @@
-import type { ElementProps } from 'lib/element.js'
-
-import type { SupportedDeviceTableProps } from './SupportedDeviceTable.js'
-
-export const name = 'seam-supported-device-table'
-
-export const props: ElementProps<SupportedDeviceTableProps> = {
-  disableFilter: 'boolean',
-  manufacturers: 'array',
-  excludedManufacturers: 'array',
-  includeIf: 'array',
-  excludeIf: 'array',
-}
-
-export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'

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

@@ -1,70 +0,0 @@
-import classNames from 'classnames'
-import { useState } from 'react'
-
-import {
-  type CommonProps,
-  withRequiredCommonProps,
-} from 'lib/seam/components/common-props.js'
-import { SupportedDeviceContent } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.js'
-import { SupportedDeviceFilterArea } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js'
-import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
-export interface SupportedDeviceTableProps extends CommonProps {
-  disableFilter?: boolean
-  manufacturers?: string[] | null
-  excludedManufacturers?: string[]
-  includeIf?: string[] | null
-  excludeIf?: string[]
-}
-
-export const NestedSupportedDeviceTable =
-  withRequiredCommonProps(SupportedDeviceTable)
-
-export function SupportedDeviceTable({
-  disableFilter = false,
-  manufacturers = null,
-  excludedManufacturers = [],
-  includeIf = null,
-  excludeIf = [],
-  className,
-}: SupportedDeviceTableProps = {}): JSX.Element {
-  useComponentTelemetry('SupportedDeviceTable')
-
-  const [filterValue, setFilterValue] = useState('')
-  const [filters, setFilters] = useState<DeviceModelFilters>({
-    supportedOnly: true,
-    manufacturer: null,
-  })
-
-  return (
-    <div
-      className={classNames(
-        'seam-supported-device-table-content-wrap',
-        className
-      )}
-    >
-      {!disableFilter && (
-        <SupportedDeviceFilterArea
-          filterValue={filterValue}
-          setFilterValue={setFilterValue}
-          filters={filters}
-          setFilters={setFilters}
-          manufacturers={manufacturers}
-          excludedManufacturers={excludedManufacturers}
-        />
-      )}
-      <SupportedDeviceContent
-        resetFilterValue={() => {
-          setFilterValue('')
-        }}
-        filterValue={filterValue}
-        filters={filters}
-        manufacturers={manufacturers}
-        excludedManufacturers={excludedManufacturers}
-        includeIf={includeIf}
-        excludeIf={excludeIf}
-      />
-    </div>
-  )
-}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts

@@ -1,9 +0,0 @@
-import type { ElementProps } from 'lib/element.js'
-
-import type { SupportedDeviceTableManufacturerKeysProps } from './SupportedDeviceTableManufacturerKeys.js'
-
-export const name = 'seam-supported-device-table-manufacturer-keys'
-
-export const props: ElementProps<SupportedDeviceTableManufacturerKeysProps> = {}
-
-export { SupportedDeviceTableManufacturerKeys as Component } from './SupportedDeviceTableManufacturerKeys.js'

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

@@ -1,64 +0,0 @@
-import type { Manufacturer } from '@seamapi/types/devicedb'
-import classNames from 'classnames'
-
-import { CopyIcon } from 'lib/icons/Copy.js'
-import {
-  type CommonProps,
-  withRequiredCommonProps,
-} from 'lib/seam/components/common-props.js'
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-import { copyToClipboard } from 'lib/ui/clipboard.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
-
-import { useManufacturers } from './use-manufacturers.js'
-
-export interface SupportedDeviceTableManufacturerKeysProps
-  extends CommonProps {}
-
-export const NestedSupportedDeviceTableManufacturerKeys =
-  withRequiredCommonProps(SupportedDeviceTableManufacturerKeys)
-
-export function SupportedDeviceTableManufacturerKeys({
-  className,
-}: SupportedDeviceTableManufacturerKeysProps = {}): JSX.Element {
-  useComponentTelemetry('SupportedDeviceTableManufacturerKeys')
-
-  const { manufacturers } = useManufacturers()
-
-  return (
-    <div
-      className={classNames(
-        'supported-device-table-manufacturer-keys',
-        className
-      )}
-    >
-      {manufacturers?.map((manufacturer) => (
-        <ManufacturerKey
-          key={manufacturer.manufacturer_id}
-          manufacturer={manufacturer}
-        />
-      ))}
-    </div>
-  )
-}
-
-function ManufacturerKey({
-  manufacturer,
-}: {
-  manufacturer: Manufacturer
-}): JSX.Element {
-  const key = manufacturer.display_name
-  return (
-    <div className='seam-manufacturer-key'>
-      <div className='seam-manufacturer-key-value'>{key}</div>
-      <MenuItem
-        className='seam-copy-button'
-        onClick={() => {
-          void copyToClipboard(key)
-        }}
-      >
-        <CopyIcon />
-      </MenuItem>
-    </div>
-  )
-}

package/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts

@@ -1,44 +0,0 @@
-import type { SeamHttpApiError } from '@seamapi/http/connect'
-import { useSeamClient } from '@seamapi/react-query'
-import type {
-  DeviceModel,
-  RouteRequestParams,
-  RouteResponse,
-} from '@seamapi/types/devicedb'
-import { useQuery } from '@tanstack/react-query'
-
-import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
-
-export type UseDeviceModelParams = DeviceModelsGetParams
-
-export type UseDeviceModelData = DeviceModel | null
-
-export function useDeviceModel(
-  params: UseDeviceModelParams
-): UseSeamQueryResultLegacy<'deviceModel', UseDeviceModelData> {
-  const { client: seam } = useSeamClient()
-  const { data, ...rest } = useQuery<UseDeviceModelData, SeamHttpApiError>({
-    enabled: seam != null,
-    queryKey: ['internal', 'device_models', 'get', params],
-    queryFn: async () => {
-      if (seam == null) return null
-      const {
-        data: { device_model: deviceModel },
-      } = await seam.client.get<DeviceModelsGetResponse>(
-        '/internal/devicedb/v1/device_models/get',
-        { params }
-      )
-      // UPSTREAM: Response type does not match DeviceModel.
-      return deviceModel as DeviceModel
-    },
-  })
-
-  return {
-    ...rest,
-    deviceModel: data,
-  }
-}
-
-type DeviceModelsGetParams = RouteRequestParams<'/v1/device_models/get'>
-
-type DeviceModelsGetResponse = RouteResponse<'/v1/device_models/get'>

package/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts

@@ -1,57 +0,0 @@
-import type { SeamHttpApiError } from '@seamapi/http/connect'
-import { useSeamClient } from '@seamapi/react-query'
-import type {
-  DeviceModel,
-  RouteRequestParams,
-  RouteResponse,
-} from '@seamapi/types/devicedb'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-
-import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
-
-export type UseDeviceModelsParams = DeviceModelsListParams
-
-export type UseDeviceModelsData = DeviceModel[]
-
-export function useDeviceModels(
-  params?: UseDeviceModelsParams
-): UseSeamQueryResultLegacy<'deviceModels', UseDeviceModelsData> {
-  const { client: seam } = useSeamClient()
-  const queryClient = useQueryClient()
-
-  const { data, ...rest } = useQuery<UseDeviceModelsData, SeamHttpApiError>({
-    enabled: seam != null,
-    queryKey: ['internal', 'device_models', 'list', params],
-    queryFn: async () => {
-      if (seam == null) return []
-      const {
-        data: { device_models: deviceModels },
-      } = await seam.client.get<DeviceModelsListResponse>(
-        '/internal/devicedb/v1/device_models/list',
-        { params }
-      )
-      for (const deviceModel of deviceModels) {
-        queryClient.setQueryData(
-          [
-            'internal',
-            'device_models',
-            'get',
-            { device_model_id: deviceModel.device_model_id },
-          ],
-          deviceModel
-        )
-      }
-      // UPSTREAM: Response type does not match DeviceModel[].
-      return deviceModels as DeviceModel[]
-    },
-  })
-
-  return {
-    ...rest,
-    deviceModels: data,
-  }
-}
-
-type DeviceModelsListParams = RouteRequestParams<'/v1/device_models/list'>
-
-type DeviceModelsListResponse = RouteResponse<'/v1/device_models/list'>

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -1,88 +0,0 @@
-import type { ManufacturerIntegrationSupportLevel } from '@seamapi/types/devicedb'
-
-import {
-  useDeviceModels,
-  type UseDeviceModelsParams,
-} from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
-
-import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
-
-export interface DeviceModelFilters {
-  supportedOnly: boolean
-  manufacturer: string | null
-}
-
-export const supportedIntegrationSupportLevels: ManufacturerIntegrationSupportLevel[] =
-  ['stable', 'beta']
-
-export const useFilteredDeviceModels = ({
-  filterValue,
-  filters,
-  includeIf,
-  excludeIf,
-  ...manufacturersParams
-}: {
-  filterValue: string
-  filters: DeviceModelFilters
-  manufacturers: string[] | null
-  excludedManufacturers: string[]
-  includeIf: string[] | null
-  excludeIf: string[]
-}): ReturnType<typeof useDeviceModels> => {
-  const { manufacturers } = useFilteredManufacturers({
-    ...manufacturersParams,
-    integrationSupportLevels: filters.supportedOnly
-      ? supportedIntegrationSupportLevels
-      : null,
-  })
-
-  const params: UseDeviceModelsParams = {}
-
-  if (excludeIf.length > 0) {
-    params.exclude_if = excludeIf
-  }
-
-  // UPSTREAM: API does not parse zero-length arrays correctly.
-  if (includeIf != null && includeIf.length > 0) {
-    params.include_if = includeIf
-  }
-
-  if (filterValue.trim() !== '') {
-    params.text_search = filterValue.trim()
-  }
-
-  if (filters.supportedOnly) {
-    params.integration_support_levels = supportedIntegrationSupportLevels
-  }
-
-  if (filters.manufacturer !== null) {
-    const manufacturer = manufacturers?.find(
-      (manufacturer) => manufacturer.display_name === filters.manufacturer
-    )
-
-    if (manufacturer != null) {
-      params.manufacturer_id = manufacturer.manufacturer_id
-    }
-  }
-
-  if (filters.manufacturer == null && manufacturers != null) {
-    params.manufacturer_ids = manufacturers.map((m) => m.manufacturer_id)
-  }
-
-  const { deviceModels, ...rest } = useDeviceModels(params)
-
-  return {
-    ...rest,
-    deviceModels:
-      // UPSTREAM: API does not parse zero-length arrays correctly.
-      includeIf?.length === 0
-        ? []
-        : deviceModels?.filter((deviceModel) =>
-            manufacturers?.some(
-              (manufacturer) =>
-                deviceModel.manufacturer.manufacturer_id ===
-                manufacturer.manufacturer_id
-            )
-          ),
-  }
-}

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-manufacturers.ts

@@ -1,69 +0,0 @@
-import type { ManufacturerIntegrationSupportLevel } from '@seamapi/types/devicedb'
-
-import { useManufacturers } from 'lib/seam/components/SupportedDeviceTable/use-manufacturers.js'
-
-interface Params {
-  manufacturers: string[] | null
-  excludedManufacturers: string[]
-  integrationSupportLevels: ManufacturerIntegrationSupportLevel[] | null
-}
-
-export const useFilteredManufacturers = ({
-  integrationSupportLevels,
-  ...params
-}: Params): ReturnType<typeof useManufacturers> => {
-  const { manufacturers, ...rest } = useManufacturers({
-    integration_support_levels: integrationSupportLevels ?? undefined,
-    liqe_query: createLiqeQuery(params),
-  })
-
-  return {
-    ...rest,
-    manufacturers: manufacturers?.filter(
-      (manufacturer) => manufacturer.device_model_count > 0
-    ),
-  }
-}
-
-export const createLiqeQuery = ({
-  manufacturers,
-  excludedManufacturers,
-}: Pick<Params, 'manufacturers' | 'excludedManufacturers'>):
-  | string
-  | undefined => {
-  if (
-    (manufacturers?.some(isInvalidInput) ?? false) ||
-    excludedManufacturers.some(isInvalidInput)
-  ) {
-    return undefined
-  }
-
-  const excludedManufacturersClause = `NOT (${excludedManufacturers
-    .map(manufacturerToMatcher)
-    .join(' OR ')})`
-
-  if (manufacturers == null) {
-    if (excludedManufacturers.length === 0) return undefined
-    return excludedManufacturersClause
-  }
-
-  if (manufacturers.length === 0) {
-    return 'manufacturer_id:none'
-  }
-
-  const includedManufacturersClause = `(${manufacturers
-    .map(manufacturerToMatcher)
-    .join(' OR ')})`
-
-  if (excludedManufacturers.length === 0) return includedManufacturersClause
-
-  return `${includedManufacturersClause} AND ${excludedManufacturersClause}`
-}
-
-const manufacturerToMatcher = (value: string): string => {
-  const [manufacturer, uuid] = value.split('=')
-  if (uuid != null) return `manufacturer_id:"${uuid}"`
-  return `display_name:"${manufacturer}"`
-}
-
-const isInvalidInput = (value: string): boolean => value.includes('"')

package/src/lib/seam/components/SupportedDeviceTable/use-manufacturer.ts

@@ -1,40 +0,0 @@
-import type { SeamHttpApiError } from '@seamapi/http/connect'
-import { useSeamClient } from '@seamapi/react-query'
-import type {
-  Manufacturer,
-  RouteRequestParams,
-  RouteResponse,
-} from '@seamapi/types/devicedb'
-import { useQuery } from '@tanstack/react-query'
-
-import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
-
-export type UseManufacturerParams = ManufacturersGetParams
-
-export type UseManufacturerData = Manufacturer | null
-
-export function useManufacturer(
-  params: UseManufacturerParams
-): UseSeamQueryResultLegacy<'manufacturer', UseManufacturerData> {
-  const { client: seam } = useSeamClient()
-  const { data, ...rest } = useQuery<UseManufacturerData, SeamHttpApiError>({
-    enabled: seam != null,
-    queryKey: ['internal', 'manufacturers', 'get', params],
-    queryFn: async () => {
-      if (seam == null) return null
-      const {
-        data: { manufacturer },
-      } = await seam.client.get<ManufacturersGetResponse>(
-        '/internal/devicedb/v1/manufacturers/get',
-        { params }
-      )
-      return manufacturer
-    },
-  })
-
-  return { ...rest, manufacturer: data }
-}
-
-type ManufacturersGetParams = RouteRequestParams<'/v1/manufacturers/get'>
-
-type ManufacturersGetResponse = RouteResponse<'/v1/manufacturers/get'>

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

@@ -1,53 +0,0 @@
-import type { SeamHttpApiError } from '@seamapi/http/connect'
-import { useSeamClient } from '@seamapi/react-query'
-import type {
-  Manufacturer,
-  RouteRequestParams,
-  RouteResponse,
-} from '@seamapi/types/devicedb'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-
-import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
-
-export type UseManufacturersParams = ManufacturersListParams
-
-export type UseManufacturersData = Manufacturer[]
-
-export function useManufacturers(
-  params?: UseManufacturersParams
-): UseSeamQueryResultLegacy<'manufacturers', UseManufacturersData> {
-  const { client: seam } = useSeamClient()
-  const queryClient = useQueryClient()
-
-  const { data, ...rest } = useQuery<UseManufacturersData, SeamHttpApiError>({
-    enabled: seam != null,
-    queryKey: ['internal', 'manufacturers', 'list', params],
-    queryFn: async () => {
-      if (seam == null) return []
-      const {
-        data: { manufacturers },
-      } = await seam.client.get<ManufacturersListResponse>(
-        '/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 }
-}
-
-type ManufacturersListParams = RouteRequestParams<'/v1/manufacturers/list'>
-
-type ManufacturersListResponse = RouteResponse<'/v1/manufacturers/list'>

package/src/styles/_supported-device-table-manufacturer-keys.scss

@@ -1,20 +0,0 @@
-@mixin all {
-  .supported-device-table-manufacturer-keys {
-    font-size: 18px;
-
-    .seam-manufacturer-key {
-      display: table-row;
-    }
-
-    .seam-manufacturer-key-value {
-      display: table-cell;
-    }
-
-    .seam-copy-button {
-      display: table-cell;
-      cursor: pointer;
-      padding-left: 10px;
-      font-size: 25px;
-    }
-  }
-}