@seamapi/react 5.0.0 → 5.1.0

package/lib/ui/ecosystem/StateMessage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StateMessage({ children, actionLabel, onAction, role = 'status', }) {
+    return (_jsxs("div", { className: 'seam-ecosystem-message', role: role, children: [_jsx("p", { children: children }), actionLabel != null && onAction != null && (_jsx("button", { type: 'button', className: 'seam-ecosystem-button', onClick: onAction, children: actionLabel }))] }));
+}
+//# sourceMappingURL=StateMessage.js.map

package/lib/ui/ecosystem/StateMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateMessage.js","sourceRoot":"","sources":["../../../src/lib/ui/ecosystem/StateMessage.tsx"],"names":[],"mappings":";AAQA,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,IAAI,GAAG,QAAQ,GACG;IAClB,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,aAChD,sBAAI,QAAQ,GAAK,EAChB,WAAW,IAAI,IAAI,IAAI,QAAQ,IAAI,IAAI,IAAI,CAC1C,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,QAAQ,YAEhB,WAAW,GACL,CACV,IACG,CACP,CAAA;AACH,CAAC"}

package/lib/ui/ecosystem/errors.d.ts

@@ -0,0 +1,5 @@
+/** A message for an Ecosystem error, and whether retrying could help. */
+export declare const getEcosystemErrorMessage: (error: unknown, fallback: string) => {
+    message: string;
+    canRetry: boolean;
+};

package/lib/ui/ecosystem/errors.js

@@ -0,0 +1,25 @@
+import { EcosystemApiError } from '../../../lib/seam/ecosystem/client.js';
+/** A message for an Ecosystem error, and whether retrying could help. */
+export const getEcosystemErrorMessage = (error, fallback) => {
+    if (error instanceof EcosystemApiError) {
+        if (error.type === 'embed_key_required') {
+            return { message: t.embedKeyRequired, canRetry: false };
+        }
+        if (error.type === 'origin_not_allowed') {
+            return { message: t.originNotAllowed, canRetry: false };
+        }
+        if (error.status === 401) {
+            return { message: t.invalidEmbedKey, canRetry: false };
+        }
+        if (error.status === 403) {
+            return { message: t.originNotAllowed, canRetry: false };
+        }
+    }
+    return { message: fallback, canRetry: true };
+};
+const t = {
+    embedKeyRequired: 'An embed key is required to show this list on this website.',
+    invalidEmbedKey: 'The embed key is invalid or has been revoked.',
+    originNotAllowed: 'The embed key is not allowed on this website.',
+};
+//# sourceMappingURL=errors.js.map

package/lib/ui/ecosystem/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../../../src/lib/ui/ecosystem/errors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAEhE,yEAAyE;AACzE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,KAAc,EACd,QAAgB,EACwB,EAAE;IAC1C,IAAI,KAAK,YAAY,iBAAiB,EAAE,CAAC;QACvC,IAAI,KAAK,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;YACxC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;QACzD,CAAC;QACD,IAAI,KAAK,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;YACxC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;QACzD,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;YACzB,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;QACxD,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;YACzB,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;QACzD,CAAC;IACH,CAAC;IACD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;AAC9C,CAAC,CAAA;AAED,MAAM,CAAC,GAAG;IACR,gBAAgB,EACd,6DAA6D;IAC/D,eAAe,EAAE,+CAA+C;IAChE,gBAAgB,EAAE,+CAA+C;CAClE,CAAA"}

package/lib/ui/ecosystem/storybook.d.ts

@@ -0,0 +1,15 @@
+import type { Decorator } from '@storybook/react';
+export declare const storybookEmbedKeys: {
+    readonly seam: "eco_live_storybook";
+    readonly partner: "eco_live_storybook_partner";
+    readonly manufacturer: "eco_live_storybook_schlage";
+    readonly wrongOrigin: "eco_live_storybook_wrong_origin";
+    readonly invalid: "eco_live_invalid";
+};
+export declare const storybookEcosystemEndpoint = "/api/ecosystem/v1/";
+export interface EcosystemStoryArgs {
+    embedKey?: string | undefined;
+}
+/** Wraps a story in an EcosystemProvider pointed at the fake Ecosystem API. */
+export declare const withFakeEcosystem: Decorator<EcosystemStoryArgs>;
+export declare const withDarkBackground: Decorator;

package/lib/ui/ecosystem/storybook.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EcosystemProvider } from '../../../lib/seam/ecosystem/EcosystemProvider.js';
+// Embed keys accepted by the fake Ecosystem API served at /api/ecosystem
+// (.storybook/fake-ecosystem.js). The Storybook never uses a real key or production data.
+export const storybookEmbedKeys = {
+    seam: 'eco_live_storybook',
+    partner: 'eco_live_storybook_partner',
+    manufacturer: 'eco_live_storybook_schlage',
+    wrongOrigin: 'eco_live_storybook_wrong_origin',
+    invalid: 'eco_live_invalid',
+};
+export const storybookEcosystemEndpoint = '/api/ecosystem/v1/';
+/** Wraps a story in an EcosystemProvider pointed at the fake Ecosystem API. */
+export const withFakeEcosystem = (Story, context) => (_jsx(EcosystemProvider, { embedKey: context.args.embedKey, ecosystemEndpoint: storybookEcosystemEndpoint, disableCssInjection: true, disableFontInjection: true, children: _jsx(Story, {}) }));
+export const withDarkBackground = (Story) => (_jsx("div", { style: { background: '#0b0d10', padding: 24, borderRadius: 12 }, children: _jsx(Story, {}) }));
+//# sourceMappingURL=storybook.js.map

package/lib/ui/ecosystem/storybook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook.js","sourceRoot":"","sources":["../../../src/lib/ui/ecosystem/storybook.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAE3E,yEAAyE;AACzE,0FAA0F;AAC1F,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,4BAA4B;IACrC,YAAY,EAAE,4BAA4B;IAC1C,WAAW,EAAE,iCAAiC;IAC9C,OAAO,EAAE,kBAAkB;CACnB,CAAA;AAEV,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAAoB,CAAA;AAM9D,+EAA+E;AAC/E,MAAM,CAAC,MAAM,iBAAiB,GAAkC,CAC9D,KAAK,EACL,OAAO,EACP,EAAE,CAAC,CACH,KAAC,iBAAiB,IAChB,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC/B,iBAAiB,EAAE,0BAA0B,EAC7C,mBAAmB,QACnB,oBAAoB,kBAEpB,KAAC,KAAK,KAAG,GACS,CACrB,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAc,CAAC,KAAK,EAAE,EAAE,CAAC,CACtD,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,YAClE,KAAC,KAAK,KAAG,GACL,CACP,CAAA"}

package/lib/ui/ecosystem/theme.d.ts

@@ -0,0 +1,6 @@
+export type EcosystemTheme = 'light' | 'dark' | 'auto';
+/**
+ * The class name for an Ecosystem component theme.
+ * `auto` follows the visitor's `prefers-color-scheme`.
+ */
+export declare const getEcosystemThemeClassName: (theme: string | undefined) => string;

package/lib/ui/ecosystem/theme.js

@@ -0,0 +1,11 @@
+/**
+ * The class name for an Ecosystem component theme.
+ * `auto` follows the visitor's `prefers-color-scheme`.
+ */
+export const getEcosystemThemeClassName = (theme) => {
+    if (theme === 'dark' || theme === 'auto') {
+        return `seam-ecosystem-theme-${theme}`;
+    }
+    return 'seam-ecosystem-theme-light';
+};
+//# sourceMappingURL=theme.js.map

package/lib/ui/ecosystem/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/lib/ui/ecosystem/theme.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,KAAyB,EACjB,EAAE;IACV,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACzC,OAAO,wBAAwB,KAAK,EAAE,CAAA;IACxC,CAAC;IACD,OAAO,4BAA4B,CAAA;AACrC,CAAC,CAAA"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "5.0.0";
+declare const seamapiReactVersion = "5.1.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '5.0.0';
+const seamapiReactVersion = '5.1.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -18,6 +18,10 @@
       "import": "./dist/elements.js",
       "types": "./src/elements.d.ts"
     },
+    "./ecosystem.js": {
+      "import": "./dist/ecosystem.js",
+      "types": "./src/ecosystem.d.ts"
+    },
     "./index.css": {
       "import": "./dist/index.css"
     }
@@ -26,7 +30,8 @@
   "sideEffects": [
     "**/*.css",
     "./elements.js",
-    "./dist/elements.js"
+    "./dist/elements.js",
+    "./dist/ecosystem.js"
   ],
   "keywords": [
     "node"
@@ -64,7 +69,10 @@
     "postbuild": "concurrently --raw --group 'node ./index.js' 'node ./hooks.js'",
     "build:entrypoints": "npm run build:js",
     "prebuild:entrypoints": "npm run build:css",
-    "postbuild:entrypoints": "vite build",
+    "postbuild:entrypoints": "npm run build:elements && npm run build:ecosystem",
+    "build:elements": "vite build",
+    "build:ecosystem": "vite build --mode ecosystem",
+    "size": "tsx ./size.ts",
     "build:js": "tsc --project tsconfig.build.json",
     "postbuild:js": "tsc-alias --project tsconfig.build.json",
     "build:css": "sass --load-path=node_modules src/index.scss:dist/index.css",

package/src/ecosystem.d.ts

@@ -0,0 +1,2 @@
+export const elementNames: string[]
+export default elementNames

package/src/ecosystem.ts

@@ -0,0 +1,12 @@
+import { defineEcosystemElements } from 'lib/ecosystem-element.js'
+import * as components from 'lib/seam/components/ecosystem-elements.js'
+
+/**
+ * The lightweight Seam Ecosystem web components bundle:
+ * only <seam-compatible-apps> and <seam-supported-devices>,
+ * without the Seam API client used by the other Seam Components.
+ * These elements are also defined by elements.js.
+ */
+export const elementNames: string[] = defineEcosystemElements(components)
+
+export default elementNames

package/src/elements.ts

@@ -1,4 +1,6 @@
+import { defineEcosystemElements } from 'lib/ecosystem-element.js'
 import { defineCustomElement, type ElementDefinition } from 'lib/element.js'
+import * as ecosystemComponents from 'lib/seam/components/ecosystem-elements.js'
 import * as components from 'lib/seam/components/elements.js'
 
 const elementDefinitions = components as unknown as Record<
@@ -30,3 +32,5 @@ for (const key of Object.keys(elementDefinitions)) {
   elementNames.push(name)
   defineCustomElement({ name, Component, props })
 }
+
+elementNames.push(...defineEcosystemElements(ecosystemComponents))

package/src/lib/ecosystem-element.tsx

@@ -0,0 +1,154 @@
+import r2wc from '@rxfork/r2wc-react-to-web-component'
+import type { ComponentType } from 'react'
+
+import {
+  EcosystemProvider,
+  type EcosystemProviderProps,
+} from 'lib/seam/ecosystem/EcosystemProvider.js'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var disableSeamCssInjection: boolean | undefined
+  // eslint-disable-next-line no-var
+  var disableSeamFontInjection: boolean | undefined
+  // eslint-disable-next-line no-var
+  var unminifiySeamCss: boolean | undefined
+}
+
+type PropType = 'string' | 'number' | 'boolean' | 'array' | 'object'
+
+export type EcosystemElementProps<T> = Record<
+  Exclude<keyof T, 'className'>,
+  PropType
+>
+
+export interface EcosystemElementDefinition {
+  name: string
+  Component: ComponentType<any>
+  props?: Record<string, PropType>
+}
+
+type ProviderProps = Omit<EcosystemProviderProps, 'children'>
+
+const providerProps: Record<keyof ProviderProps, PropType> = {
+  embedKey: 'string',
+  ecosystemEndpoint: 'string',
+  queryClient: 'object',
+  disableCssInjection: 'boolean',
+  disableFontInjection: 'boolean',
+  unminifiyCss: 'boolean',
+}
+
+const commonProps: Record<string, PropType> = {
+  className: 'string',
+}
+
+/**
+ * Defines the custom elements for the Seam Ecosystem components.
+ * Each element is wrapped in an `<EcosystemProvider />`, not a `<SeamProvider />`,
+ * so it needs no publishable key and does not load the Seam API client.
+ * Elements that are already defined are skipped,
+ * so `elements.js` and `ecosystem.js` may both be loaded on one page.
+ */
+export const defineEcosystemElements = (
+  definitions: Record<string, Partial<EcosystemElementDefinition>>
+): string[] => {
+  const names: string[] = []
+  for (const [key, definition] of Object.entries(definitions)) {
+    const { name, Component, props } = definition
+    if (name == null) throw new Error(`Missing element name for ${key}`)
+    if (Component == null) {
+      throw new Error(`Missing element Component for ${key}`)
+    }
+    names.push(name)
+    defineEcosystemElement({ name, Component, props })
+  }
+  return names
+}
+
+export const defineEcosystemElement = ({
+  name,
+  Component,
+  props = {},
+}: EcosystemElementDefinition): void => {
+  const registry = globalThis.customElements
+  if (registry == null || registry.get(name) != null) return
+
+  const allProps = { ...props, ...providerProps, ...commonProps }
+
+  // UPSTREAM: r2wc parses boolean attributes as false when present without a value,
+  // e.g., <seam-compatible-apps hide-search>, so they are parsed here instead.
+  const booleanProps = Object.entries(allProps)
+    .filter(([, type]) => type === 'boolean')
+    .map(([prop]) => prop)
+
+  const element = r2wc(withEcosystemProvider(Component, booleanProps), {
+    props: Object.fromEntries(
+      Object.entries(allProps).map(([prop, type]) => [
+        prop,
+        type === 'boolean' ? 'string' : type,
+      ])
+    ),
+  })
+
+  registry.define(name, element)
+}
+
+/**
+ * Parses a boolean attribute or property:
+ * present without a value or `true` is true; absent or `false` is false.
+ */
+export const parseBooleanProp = (value: unknown): boolean | undefined => {
+  if (value == null) return undefined
+  if (typeof value === 'boolean') return value
+  if (typeof value !== 'string') return Boolean(value)
+  return !/^(false|0|no|off)$/i.test(value.trim())
+}
+
+function withEcosystemProvider(
+  Component: ComponentType<any>,
+  booleanProps: string[]
+): (props: Record<string, unknown>) => JSX.Element {
+  const name = Component.displayName ?? Component.name ?? 'Component'
+
+  function WithEcosystemProvider({
+    container: _container,
+    ...rawProps
+  }: Record<string, unknown>): JSX.Element {
+    const props: Record<string, unknown> = { ...rawProps }
+    for (const prop of booleanProps) {
+      props[prop] = parseBooleanProp(props[prop])
+    }
+
+    const {
+      embedKey,
+      ecosystemEndpoint,
+      queryClient,
+      disableCssInjection,
+      disableFontInjection,
+      unminifiyCss,
+      ...componentProps
+    } = props as ProviderProps & Record<string, unknown>
+
+    return (
+      <EcosystemProvider
+        embedKey={embedKey}
+        ecosystemEndpoint={ecosystemEndpoint}
+        queryClient={queryClient}
+        disableCssInjection={
+          disableCssInjection ?? globalThis.disableSeamCssInjection
+        }
+        disableFontInjection={
+          disableFontInjection ?? globalThis.disableSeamFontInjection
+        }
+        unminifiyCss={unminifiyCss ?? globalThis.unminifiySeamCss}
+      >
+        <Component {...componentProps} />
+      </EcosystemProvider>
+    )
+  }
+
+  WithEcosystemProvider.displayName = `WithEcosystemProvider(${name})`
+
+  return WithEcosystemProvider
+}

package/src/lib/element.tsx

@@ -64,6 +64,8 @@ const providerProps: R2wcProps<ProviderProps> = {
   disableFontInjection: 'boolean',
   unminifiyCss: 'boolean',
   onSessionUpdate: 'object',
+  embedKey: 'string',
+  ecosystemEndpoint: 'string',
 }
 
 export const defineCustomElement = ({
@@ -96,6 +98,8 @@ function withProvider<P extends JSX.IntrinsicAttributes>(
     disableFontInjection,
     unminifiyCss,
     onSessionUpdate,
+    embedKey,
+    ecosystemEndpoint,
     container: _container,
     ...props
   }: ProviderProps & { container: Container } & P): JSX.Element | null {
@@ -114,6 +118,8 @@ function withProvider<P extends JSX.IntrinsicAttributes>(
         }
         unminifiyCss={unminifiyCss ?? globalThis.unminifiySeamCss}
         onSessionUpdate={onSessionUpdate}
+        embedKey={embedKey}
+        ecosystemEndpoint={ecosystemEndpoint}
       >
         <Component {...(props as P)} />
       </SeamProvider>

package/src/lib/seam/SeamProvider.tsx

@@ -8,6 +8,8 @@ import {
 import type { QueryClient } from '@tanstack/react-query'
 import { createContext, type PropsWithChildren, useMemo } from 'react'
 
+import { EcosystemContextProvider } from 'lib/seam/ecosystem/EcosystemProvider.js'
+import { seamComponentsClassName } from 'lib/seam/seam-components-class-name.js'
 import { useSeamFont } from 'lib/seam/use-seam-font.js'
 import { useSeamStyles } from 'lib/seam/use-seam-styles.js'
 import {
@@ -58,9 +60,16 @@ interface SeamProviderBaseProps extends PropsWithChildren {
   queryClient?: QueryClient | undefined
   telemetryClient?: TelemetryClient | undefined
   onSessionUpdate?: (client: SeamHttp) => void
+  /**
+   * Seam Ecosystem embed key (`eco_live_…`) used by the Ecosystem components,
+   * e.g., `CompatibleApps` and `SupportedDevices`.
+   */
+  embedKey?: string | undefined
+  /** Seam Ecosystem API endpoint. Defaults to `https://ecosystem.seam.co/v1/`. */
+  ecosystemEndpoint?: string | undefined
 }
 
-export const seamComponentsClassName = 'seam-components'
+export { seamComponentsClassName }
 
 export function SeamProvider({
   children,
@@ -70,6 +79,8 @@ export function SeamProvider({
   unminifiyCss = false,
   telemetryClient,
   queryClient,
+  embedKey,
+  ecosystemEndpoint,
   ...props
 }: SeamProviderProps): JSX.Element {
   useSeamStyles({ disabled: disableCssInjection, unminified: unminifiyCss })
@@ -95,7 +106,12 @@ export function SeamProvider({
           {...props}
         >
           <Provider value={value}>
-            <Telemetry>{children}</Telemetry>
+            <EcosystemContextProvider
+              embedKey={embedKey}
+              ecosystemEndpoint={ecosystemEndpoint}
+            >
+              <Telemetry>{children}</Telemetry>
+            </EcosystemContextProvider>
           </Provider>
         </SeamQueryProvider>
       </TelemetryProvider>

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

@@ -0,0 +1,19 @@
+import type { EcosystemElementProps } from 'lib/ecosystem-element.js'
+
+import type { CompatibleAppsProps } from './CompatibleApps.js'
+
+export const name = 'seam-compatible-apps'
+
+export const props: EcosystemElementProps<CompatibleAppsProps> = {
+  deviceType: 'string',
+  manufacturer: 'string',
+  provider: 'string',
+  capability: 'string',
+  industry: 'string',
+  maxVisible: 'number',
+  hideSearch: 'boolean',
+  hideTitle: 'boolean',
+  theme: 'string',
+}
+
+export { CompatibleApps as Component } from './CompatibleApps.js'