@seamapi/react 1.65.0 → 2.0.0

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

@@ -13,12 +13,8 @@ import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTabl
 
 export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean
-  /**
-   * @deprecated Use disableFilter.
-   */
-  cannotFilter?: boolean
-  brands?: string[] | null
-  excludedBrands?: string[]
+  manufacturers?: string[] | null
+  excludedManufacturers?: string[]
 }
 
 export const NestedSupportedDeviceTable =
@@ -26,9 +22,8 @@ export const NestedSupportedDeviceTable =
 
 export function SupportedDeviceTable({
   disableFilter = false,
-  cannotFilter,
-  brands = null,
-  excludedBrands = [],
+  manufacturers = null,
+  excludedManufacturers = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('SupportedDeviceTable')
@@ -36,11 +31,9 @@ export function SupportedDeviceTable({
   const [filterValue, setFilterValue] = useState('')
   const [filters, setFilters] = useState<DeviceModelFilters>({
     supportedOnly: true,
-    brand: null,
+    manufacturer: null,
   })
 
-  const hideFilter = cannotFilter ?? disableFilter
-
   return (
     <div
       className={classNames(
@@ -48,14 +41,14 @@ export function SupportedDeviceTable({
         className
       )}
     >
-      {!hideFilter && (
+      {!disableFilter && (
         <SupportedDeviceFilterArea
           filterValue={filterValue}
           setFilterValue={setFilterValue}
           filters={filters}
           setFilters={setFilters}
-          brands={brands}
-          excludedBrands={excludedBrands}
+          manufacturers={manufacturers}
+          excludedManufacturers={excludedManufacturers}
         />
       )}
       <SupportedDeviceContent
@@ -64,8 +57,8 @@ export function SupportedDeviceTable({
         }}
         filterValue={filterValue}
         filters={filters}
-        brands={brands}
-        excludedBrands={excludedBrands}
+        manufacturers={manufacturers}
+        excludedManufacturers={excludedManufacturers}
       />
     </div>
   )

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

@@ -1,24 +1,27 @@
 import {
   useDeviceModels,
   type UseDeviceModelsParams,
-} from 'lib/seam/device-models/use-device-models.js'
+} from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
+
+import { useFilteredManufacturers } from './use-filtered-manufacturers.js'
 
 export interface DeviceModelFilters {
   supportedOnly: boolean
-  brand: string | null
+  manufacturer: string | null
 }
 
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
-  brands,
-  excludedBrands,
+  ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
-  brands: string[] | null
-  excludedBrands: string[]
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
 }): ReturnType<typeof useDeviceModels> => {
+  const { manufacturers } = useFilteredManufacturers(manufacturersParams)
+
   const params: UseDeviceModelsParams = {}
 
   if (filterValue.trim() !== '') {
@@ -26,26 +29,34 @@ export const useFilteredDeviceModels = ({
   }
 
   if (filters.supportedOnly) {
-    params.support_level = 'live'
+    params.integration_status = 'stable'
+  }
+
+  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.brand !== null) {
-    params.brand = filters.brand
+  if (filters.manufacturer == null && manufacturers != null) {
+    params.manufacturer_ids = manufacturers.map((m) => m.manufacturer_id)
   }
 
-  const query = useDeviceModels(params)
+  const { deviceModels, ...query } = useDeviceModels(params)
 
-  // UPSTREAM: The API does not have a brands or excludedBrands query parameter,
-  // so selected brands are filtered here.
   return {
     ...query,
-    deviceModels: query.deviceModels
-      ?.filter(({ brand }) => {
-        if (brands === null) return true
-        return brands.includes(brand)
-      })
-      .filter(({ brand }) => {
-        return !excludedBrands.includes(brand)
-      }),
+    deviceModels: deviceModels?.filter(
+      (deviceModel) =>
+        manufacturers?.some(
+          (manufacturer) =>
+            deviceModel.manufacturer.manufacturer_id ===
+            manufacturer.manufacturer_id
+        )
+    ),
   }
 }

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

@@ -0,0 +1,54 @@
+import { useManufacturers } from 'lib/seam/components/SupportedDeviceTable/use-manufacturers.js'
+
+interface Params {
+  manufacturers: string[] | null
+  excludedManufacturers: string[]
+}
+export const useFilteredManufacturers = (
+  params: Params
+): ReturnType<typeof useManufacturers> => {
+  return useManufacturers({
+    liqe_query: createLiqeQuery(params),
+  })
+}
+
+export const createLiqeQuery = ({
+  manufacturers,
+  excludedManufacturers,
+}: Params): 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/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.65.0'
+const seamapiReactVersion = '2.0.0'
 
 export default seamapiReactVersion

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

@@ -96,7 +96,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-brand-section {
+  .seam-manufacturer-section {
     margin-bottom: 32px;
     position: relative;
 
@@ -105,7 +105,7 @@ $row-padding: 8px;
       align-items: center;
       height: 64px;
 
-      .seam-brand-image {
+      .seam-manufacturer-image {
         width: 48px;
         height: 48px;
         padding: 0 8px;
@@ -113,7 +113,7 @@ $row-padding: 8px;
         margin-right: 8px;
       }
 
-      .seam-brand-name {
+      .seam-manufacturer-name {
         font-size: 21px;
         line-height: 132%;
         flex: 1;
@@ -254,7 +254,7 @@ $row-padding: 8px;
           display: flex;
           align-items: center;
 
-          .seam-brand-image {
+          .seam-manufacturer-image {
             width: 32px;
             margin-right: 4px;
           }

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-import type { DeviceModel } from 'seamapi';
-interface SupportedDeviceBrandSectionProps {
-    brand: string;
-    deviceModels: DeviceModel[];
-}
-export declare function SupportedDeviceBrandSection({ brand, deviceModels, }: SupportedDeviceBrandSectionProps): JSX.Element | null;
-export {};

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { ChevronRightIcon } from '../../../../lib/icons/ChevronRight.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 { useDeviceProvider } from '../../../../lib/seam/components/SupportedDeviceTable/use-device-provider.js';
-import { useToggle } from '../../../../lib/ui/use-toggle.js';
-/**
- * How many device models required before we collapse
- * the list, and require the user to click to
- * view all.
- */
-const maxDevicesBeforeCollapsing = 3;
-export function SupportedDeviceBrandSection({ brand, deviceModels, }) {
-    const deviceProvider = useDeviceProvider(brand);
-    const [expanded, toggleExpand] = useToggle();
-    const canExpand = deviceModels.length > maxDevicesBeforeCollapsing;
-    const visibleDevices = !canExpand || expanded
-        ? deviceModels
-        : deviceModels.filter((_deviceModel, index) => index < maxDevicesBeforeCollapsing);
-    const handleHeaderClick = () => {
-        if (!canExpand) {
-            return;
-        }
-        toggleExpand();
-    };
-    return (_jsxs("div", { className: classNames('seam-brand-section', {
-            'can-expand': canExpand,
-            expanded,
-        }), children: [_jsxs("div", { className: 'seam-header', onClick: handleHeaderClick, children: [_jsx("img", { src: deviceProvider.image_url, alt: brand, className: 'seam-brand-image' }), _jsxs("h5", { className: 'seam-brand-name', children: [deviceProvider.display_name, " ", t.devices] }), canExpand && _jsx(ChevronRightIcon, { className: 'chevron' })] }), _jsx("div", { className: 'seam-supported-device-table-content', children: visibleDevices.map((deviceModel, index) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, [
-                    deviceModel.main_category,
-                    deviceModel.brand,
-                    deviceModel.model_name,
-                    deviceModel.manufacturer_model_id,
-                    index,
-                ].join(':')))) }), _jsx(ShowAllDevicesButton, { visible: canExpand, onClick: toggleExpand, expanded: expanded, totalDeviceCount: deviceModels.length }), _jsx(HiddenDevicesOverlay, { visible: canExpand && !expanded })] }));
-}
-const t = {
-    devices: 'Devices',
-};
-//# sourceMappingURL=SupportedDeviceBrandSection.js.map

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceBrandSection.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kEAAkE,CAAA;AACvG,OAAO,EAAE,oBAAoB,EAAE,MAAM,kEAAkE,CAAA;AACvG,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAA;AACnG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iEAAiE,CAAA;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEhD;;;;GAIG;AACH,MAAM,0BAA0B,GAAG,CAAC,CAAA;AAOpC,MAAM,UAAU,2BAA2B,CAAC,EAC1C,KAAK,EACL,YAAY,GACqB;IACjC,MAAM,cAAc,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAE/C,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,GAAG,SAAS,EAAE,CAAA;IAE5C,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,GAAG,0BAA0B,CAAA;IAElE,MAAM,cAAc,GAClB,CAAC,SAAS,IAAI,QAAQ;QACpB,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,YAAY,CAAC,MAAM,CACjB,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,0BAA0B,CAC5D,CAAA;IAEP,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,IAAI,CAAC,SAAS,EAAE;YACd,OAAM;SACP;QAED,YAAY,EAAE,CAAA;IAChB,CAAC,CAAA;IAED,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;YAC1C,YAAY,EAAE,SAAS;YACvB,QAAQ;SACT,CAAC,aAEF,eAAK,SAAS,EAAC,aAAa,EAAC,OAAO,EAAE,iBAAiB,aACrD,cACE,GAAG,EAAE,cAAc,CAAC,SAAS,EAC7B,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,kBAAkB,GAC5B,EACF,cAAI,SAAS,EAAC,iBAAiB,aAC5B,cAAc,CAAC,YAAY,OAAG,CAAC,CAAC,OAAO,IACrC,EACJ,SAAS,IAAI,KAAC,gBAAgB,IAAC,SAAS,EAAC,SAAS,GAAG,IAClD,EACN,cAAK,SAAS,EAAC,qCAAqC,YACjD,cAAc,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,IAQjB,WAAW,EAAE,WAAW,IAPnB;oBACH,WAAW,CAAC,aAAa;oBACzB,WAAW,CAAC,KAAK;oBACjB,WAAW,CAAC,UAAU;oBACtB,WAAW,CAAC,qBAAqB;oBACjC,KAAK;iBACN,CAAC,IAAI,CAAC,GAAG,CAAC,CAEX,CACH,CAAC,GACE,EACN,KAAC,oBAAoB,IACnB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,YAAY,CAAC,MAAM,GACrC,EACF,KAAC,oBAAoB,IAAC,OAAO,EAAE,SAAS,IAAI,CAAC,QAAQ,GAAI,IACrD,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,OAAO,EAAE,SAAS;CACnB,CAAA"}

package/lib/seam/components/SupportedDeviceTable/use-device-provider.d.ts

@@ -1,2 +0,0 @@
-import type { DeviceProvider } from 'seamapi';
-export declare function useDeviceProvider(name: string): DeviceProvider;

package/lib/seam/components/SupportedDeviceTable/use-device-provider.js

@@ -1,13 +0,0 @@
-import { useDeviceProviders } from '../../../../lib/seam/devices/use-device-providers.js';
-export function useDeviceProvider(name) {
-    const { deviceProviders } = useDeviceProviders();
-    const provider = deviceProviders?.find((p) => p.device_provider_name === name);
-    return provider ?? unknownProvider;
-}
-const unknownProvider = {
-    device_provider_name: 'unknown',
-    display_name: 'Unknown',
-    image_url: 'https://connect.getseam.com/assets/images/logos/seam.png',
-    provider_categories: [],
-};
-//# sourceMappingURL=use-device-provider.js.map

package/lib/seam/components/SupportedDeviceTable/use-device-provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-device-provider.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/use-device-provider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AAE7E,MAAM,UAAU,iBAAiB,CAAC,IAAY;IAC5C,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAChD,MAAM,QAAQ,GAAG,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,KAAK,IAAI,CAAC,CAAA;IAC9E,OAAO,QAAQ,IAAI,eAAe,CAAA;AACpC,CAAC;AAED,MAAM,eAAe,GAAmB;IACtC,oBAAoB,EAAE,SAAS;IAC/B,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,0DAA0D;IACrE,mBAAmB,EAAE,EAAE;CACxB,CAAA"}

package/lib/seam/device-models/use-device-models.d.ts

@@ -1,5 +0,0 @@
-import type { DeviceModel, DeviceModelsListRequest } from 'seamapi';
-import type { UseSeamQueryResult } from '../../../lib/seam/use-seam-query-result.js';
-export type UseDeviceModelsParams = DeviceModelsListRequest;
-export type UseDeviceModelsData = DeviceModel[];
-export declare function useDeviceModels(params?: Omit<UseDeviceModelsParams, 'acknowledge_intentional_use_of_internal_api'>): UseSeamQueryResult<'deviceModels', UseDeviceModelsData>;

package/lib/seam/device-models/use-device-models.js

@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
-export function useDeviceModels(params) {
-    const { client } = useSeamClient();
-    const { data, ...rest } = useQuery({
-        enabled: client != null,
-        queryKey: ['device_models', 'list', params],
-        queryFn: async () => {
-            if (client == null)
-                return [];
-            return await client.deviceModels.list({
-                ...params,
-                acknowledge_intentional_use_of_internal_api: true,
-            });
-        },
-    });
-    return { ...rest, deviceModels: data };
-}
-//# sourceMappingURL=use-device-models.js.map

package/lib/seam/device-models/use-device-models.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-device-models.js","sourceRoot":"","sources":["../../../src/lib/seam/device-models/use-device-models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,eAAe,CAC7B,MAGC;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,MAAM,CAAC;QAC3C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;gBACpC,GAAG,MAAM;gBACT,2CAA2C,EAAE,IAAI;aAClD,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,CAAA;AACxC,CAAC"}

package/lib/strings.d.ts

@@ -1 +0,0 @@
-export declare function capitalize(str: string): string;

package/lib/strings.js

@@ -1,4 +0,0 @@
-export function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-//# sourceMappingURL=strings.js.map

package/lib/strings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"strings.js","sourceRoot":"","sources":["../src/lib/strings.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,GAAW;IACpC,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACnD,CAAC"}

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

@@ -1,16 +0,0 @@
-import type { DeviceProvider } from 'seamapi'
-
-import { useDeviceProviders } from 'lib/seam/devices/use-device-providers.js'
-
-export function useDeviceProvider(name: string): DeviceProvider {
-  const { deviceProviders } = useDeviceProviders()
-  const provider = deviceProviders?.find((p) => p.device_provider_name === name)
-  return provider ?? unknownProvider
-}
-
-const unknownProvider: DeviceProvider = {
-  device_provider_name: 'unknown',
-  display_name: 'Unknown',
-  image_url: 'https://connect.getseam.com/assets/images/logos/seam.png',
-  provider_categories: [],
-}

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

@@ -1,39 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import type {
-  DeviceModel,
-  DeviceModelsListRequest,
-  DeviceModelsListResponse,
-  SeamError,
-} from 'seamapi'
-
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
-
-export type UseDeviceModelsParams = DeviceModelsListRequest
-export type UseDeviceModelsData = DeviceModel[]
-
-export function useDeviceModels(
-  params?: Omit<
-    UseDeviceModelsParams,
-    'acknowledge_intentional_use_of_internal_api'
-  >
-): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
-  const { client } = useSeamClient()
-
-  const { data, ...rest } = useQuery<
-    DeviceModelsListResponse['device_models'],
-    SeamError
-  >({
-    enabled: client != null,
-    queryKey: ['device_models', 'list', params],
-    queryFn: async () => {
-      if (client == null) return []
-      return await client.deviceModels.list({
-        ...params,
-        acknowledge_intentional_use_of_internal_api: true,
-      })
-    },
-  })
-
-  return { ...rest, deviceModels: data }
-}

package/src/lib/strings.ts

@@ -1,3 +0,0 @@
-export function capitalize(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}