@seamapi/react 0.1.0

package/LICENSE.txt

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-2023 Seam Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# Seam React Components
+
+[![npm](https://img.shields.io/npm/v/@seamapi/react.svg)](https://www.npmjs.com/package/@seamapi/react)
+[![GitHub Actions](https://github.com/seamapi/react/actions/workflows/check.yml/badge.svg)](https://github.com/seamapi/react/actions/workflows/check.yml)
+
+Seam React component library.
+
+## Description
+
+Zero-backend beautiful drop-in pre-built components with everything you need to get started with Seam.
+
+## Installation
+
+Add this as a dependency to your project using [npm] with
+
+```
+$ npm install @seamapi/react
+```
+
+[npm]: https://www.npmjs.com/
+
+## Development and Testing
+
+### Quickstart
+
+```
+$ git clone https://github.com/seamapi/react.git
+$ cd react
+$ nvm install
+$ npm install
+$ npm run test:watch
+```
+
+Primary development tasks are defined under `scripts` in `package.json`
+and available via `npm run`.
+View them with
+
+```
+$ npm run
+```
+
+### Source code
+
+The [source code] is hosted on GitHub.
+Clone the project with
+
+```
+$ git clone git@github.com:seamapi/react.git
+```
+
+[source code]: https://github.com/seamapi/react
+
+### Requirements
+
+You will need [Node.js] with [npm] and a [Node.js debugging] client.
+
+Be sure that all commands run under the correct Node version, e.g.,
+if using [nvm], install the correct version with
+
+```
+$ nvm install
+```
+
+Set the active version for each shell session with
+
+```
+$ nvm use
+```
+
+Install the development dependencies with
+
+```
+$ npm install
+```
+
+[Node.js]: https://nodejs.org/
+[Node.js debugging]: https://nodejs.org/en/docs/guides/debugging-getting-started/
+[npm]: https://www.npmjs.com/
+[nvm]: https://github.com/creationix/nvm
+
+### Publishing
+
+#### Automatic
+
+New versions are released automatically with [semantic-release].
+as long as commits follow the [Angular Commit Message Conventions].
+
+[Angular Commit Message Conventions]: https://semantic-release.gitbook.io/semantic-release/#commit-message-format
+[semantic-release]: https://semantic-release.gitbook.io/
+
+#### Manual
+
+Publish a new version by triggering a [version workflow_dispatch on GitHub Actions].
+The `version` input will be passed as the first argument to [npm-version].
+
+This may be done on the web or using the [GitHub CLI] with
+
+```
+$ gh workflow run version.yml --raw-field version=<version>
+```
+
+[GitHub CLI]: https://cli.github.com/
+[npm-version]: https://docs.npmjs.com/cli/version
+[version workflow_dispatch on GitHub Actions]: https://github.com/seamapi/react/actions?query=workflow%3Aversion
+
+## GitHub Actions
+
+_GitHub Actions should already be configured: this section is for reference only._
+
+The following repository secrets must be set on [GitHub Actions]:
+
+- `NPM_TOKEN`: npm token for installing and publishing packages.
+- `GH_TOKEN`: A personal access token for the bot user with
+  `packages:write` and `contents:write` permission.
+- `GIT_USER_NAME`: The GitHub bot user's real name.
+- `GIT_USER_EMAIL`: The GitHub bot user's email.
+- `GPG_PRIVATE_KEY`: The GitHub bot user's [GPG private key].
+- `GPG_PASSPHRASE`: The GitHub bot user's GPG passphrase.
+
+[GitHub Actions]: https://github.com/features/actions
+[GPG private key]: https://github.com/marketplace/actions/import-gpg#prerequisites
+
+## Contributing
+
+> If using squash merge, edit and ensure the commit message follows the [Angular Commit Message Conventions] specification.
+> Otherwise, each individual commit must follow the [Angular Commit Message Conventions] specification.
+
+1. Create your feature branch (`git checkout -b my-new-feature`).
+2. Make changes.
+3. Commit your changes (`git commit -am 'Add some feature'`).
+4. Push to the branch (`git push origin my-new-feature`).
+5. Create a new draft pull request.
+6. Ensure all checks pass.
+7. Mark your pull request ready for review.
+8. Wait for the required approval from the code owners.
+9. Merge when ready.
+
+[Angular Commit Message Conventions]: https://semantic-release.gitbook.io/semantic-release/#commit-message-format
+
+## License
+
+This npm package is licensed under the [MIT license].
+
+[MIT license]: https://github.com/seamapi/react/blob/main/LICENSE.txt
+
+## Warranty
+
+This software is provided by the copyright holders and contributors "as is" and
+any express or implied warranties, including, but not limited to, the implied
+warranties of merchantability and fitness for a particular purpose are
+disclaimed. In no event shall the copyright holder or contributors be liable for
+any direct, indirect, incidental, special, exemplary, or consequential damages
+(including, but not limited to, procurement of substitute goods or services;
+loss of use, data, or profits; or business interruption) however caused and on
+any theory of liability, whether in contract, strict liability, or tort
+(including negligence or otherwise) arising in any way out of the use of this
+software, even if advised of the possibility of such damage.

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/index.js';

package/index.js

@@ -0,0 +1,2 @@
+export * from './lib/index.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/lib/components/DeviceManager/DeviceManager.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+import { type UseDevicesParams } from '../../../lib/hooks/use-devices.js';
+export type DeviceManagerProps = UseDevicesParams;
+/**
+ * Fetch, list, and manage devices.
+ */
+export declare const DeviceManager: (props: DeviceManagerProps) => ReactElement;

package/lib/components/DeviceManager/DeviceManager.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
+import {} from 'seamapi';
+import { useDevices } from '../../../lib/hooks/use-devices.js';
+/**
+ * Fetch, list, and manage devices.
+ */
+export const DeviceManager = (props) => {
+    const { devices, isLoading, isError, error } = useDevices(props);
+    if (isLoading)
+        return _jsx("p", { role: 'loading', children: t.loading });
+    if (isError)
+        return _jsx("p", { children: error?.message });
+    return (_jsx("ul", { children: devices?.map((device) => (_jsx(DeviceManagerItem, { ...device }, device.device_id))) }));
+};
+const DeviceManagerItem = (props) => {
+    return (_jsxs("li", { children: [_jsxs("p", { children: [t.device_id, ": ", props.device_id] }), _jsxs("p", { children: [t.name, ": ", props.properties.name] })] }));
+};
+const t = {
+    loading: 'Loading devices',
+    device_id: 'Device ID',
+    name: 'Device name',
+};
+//# sourceMappingURL=DeviceManager.js.map

package/lib/components/DeviceManager/DeviceManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceManager.js","sourceRoot":"","sources":["../../../src/lib/components/DeviceManager/DeviceManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAA4C,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,UAAU,EAAyB,MAAM,0BAA0B,CAAA;AAI5E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAgB,EAAE;IACvE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAEhE,IAAI,SAAS;QAAE,OAAO,YAAG,IAAI,EAAC,SAAS,YAAE,CAAC,CAAC,OAAO,GAAK,CAAA;IACvD,IAAI,OAAO;QAAE,OAAO,sBAAI,KAAK,EAAE,OAAO,GAAK,CAAA;IAE3C,OAAO,CACL,uBACG,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACxB,KAAC,iBAAiB,OAA4B,MAAM,IAA5B,MAAM,CAAC,SAAS,CAAgB,CACzD,CAAC,GACC,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,CACxB,KAAqC,EACvB,EAAE;IAChB,OAAO,CACL,yBACE,wBACG,CAAC,CAAC,SAAS,QAAI,KAAK,CAAC,SAAS,IAC7B,EACJ,wBACG,CAAC,CAAC,IAAI,QAAI,KAAK,CAAC,UAAU,CAAC,IAAI,IAC9B,IACD,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,GAAG;IACR,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,aAAa;CACpB,CAAA"}

package/lib/components/index.d.ts

@@ -0,0 +1 @@
+export * from './DeviceManager/DeviceManager.js';

package/lib/components/index.js

@@ -0,0 +1,2 @@
+export * from './DeviceManager/DeviceManager.js';
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA"}

package/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-seam.js';

package/lib/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './use-seam.js';
+//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/lib/hooks/use-devices.d.ts

@@ -0,0 +1,10 @@
+import { type UseQueryResult } from '@tanstack/react-query';
+import { type DevicesListRequest, type DevicesListResponse, type SeamError } from 'seamapi';
+export type UseDevicesParams = DevicesListRequest;
+export type UseDevicesData = DevicesListResponse['devices'];
+type Result = UseQueryResult<UseDevicesData, SeamError>;
+type UseDevicesResult = Omit<Result, 'data'> & {
+    devices: Result['data'];
+};
+export declare function useDevices(params: DevicesListRequest): UseDevicesResult;
+export {};

package/lib/hooks/use-devices.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import {} from 'seamapi';
+import { useSeam } from './use-seam.js';
+export function useDevices(params) {
+    const { client } = useSeam();
+    const { data, ...rest } = useQuery({
+        enabled: client != null,
+        queryKey: ['list', 'devices', params],
+        queryFn: async () => {
+            if (client == null)
+                return [];
+            return await client?.devices.list(params);
+        },
+    });
+    return { ...rest, devices: data };
+}
+//# sourceMappingURL=use-devices.js.map

package/lib/hooks/use-devices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../src/lib/hooks/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAIN,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AASvC,MAAM,UAAU,UAAU,CAAC,MAA0B;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC3C,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}

package/lib/hooks/use-seam.d.ts

@@ -0,0 +1,7 @@
+import { Seam } from 'seamapi';
+export declare function useSeam(): {
+    client: Seam | null;
+    isLoading: boolean;
+    isError: boolean;
+    error: unknown;
+};

package/lib/hooks/use-seam.js

@@ -0,0 +1,62 @@
+import { useQuery } from '@tanstack/react-query';
+import { useContext } from 'react';
+import { Seam } from 'seamapi';
+import { v4 as uuidv4 } from 'uuid';
+import { seamContext } from '../../lib/provider.js';
+export function useSeam() {
+    const { client, clientOptions, publishableKey, ...context } = useContext(seamContext);
+    const [clientSession, setClientSession] = useClientSession();
+    const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey);
+    const { isLoading, isError, error, data } = useQuery({
+        queryKey: ['client', { client, clientSession, userIdentifierKey }],
+        queryFn: async () => {
+            if (client != null)
+                return client;
+            if (publishableKey == null) {
+                throw new Error('Missing publishableKey');
+            }
+            // TODO: Check if client session is still valid before resuming it.
+            if (clientSession != null) {
+                return new Seam({
+                    ...clientOptions,
+                    clientSessionToken: clientSession.token,
+                });
+            }
+            const res = await Seam.getClientSessionToken({
+                ...clientOptions,
+                publishableKey,
+                userIdentifierKey,
+            });
+            if (!res.ok || res.client_session?.token == null) {
+                throw new Error('Failed to get client access token');
+            }
+            setClientSession(res.client_session);
+            return new Seam({
+                ...clientOptions,
+                clientSessionToken: res.client_session.token,
+            });
+        },
+    });
+    return { client: data ?? null, isLoading, isError, error };
+}
+function useClientSession() {
+    const localStorageKey = 'seam_client_session';
+    const setClientSession = (clientSession) => {
+        globalThis?.localStorage?.setItem(localStorageKey, JSON.stringify(clientSession));
+    };
+    const cachedClientSession = globalThis?.localStorage?.getItem(localStorageKey);
+    return [
+        cachedClientSession != null ? JSON.parse(cachedClientSession) : null,
+        setClientSession,
+    ];
+}
+function useUserIdentifierKey(userIdentifierKey) {
+    if (userIdentifierKey != null) {
+        return userIdentifierKey;
+    }
+    const localStorageKey = 'seam_user_identifier_key';
+    const key = globalThis?.localStorage?.getItem(localStorageKey) ?? uuidv4();
+    globalThis?.localStorage?.setItem(localStorageKey, key);
+    return key;
+}
+//# sourceMappingURL=use-seam.js.map

package/lib/hooks/use-seam.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-seam.js","sourceRoot":"","sources":["../../src/lib/hooks/use-seam.ts"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './provider.js';

package/lib/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './provider.js';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA"}

package/lib/provider.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type Seam, type SeamClientOptions } from 'seamapi';
+declare global {
+    var seam: Omit<SeamProviderProps, 'children'> | undefined;
+}
+export interface SeamContext {
+    client: Seam | null;
+    clientOptions?: SeamClientOptions | undefined;
+    publishableKey?: string | undefined;
+    userIdentifierKey?: string | undefined;
+}
+export interface SeamProviderProps {
+    client?: Seam;
+    publishableKey?: string;
+    userIdentifierKey?: string;
+    endpoint?: string;
+    children?: ReactNode;
+}
+export declare function SeamProvider({ children, ...props }: SeamProviderProps): ReactElement;
+export declare const seamContext: import("react").Context<SeamContext>;

package/lib/provider.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createContext, useRef } from 'react';
+import {} from 'seamapi';
+export function SeamProvider({ children, ...props }) {
+    const { Provider } = seamContext;
+    const queryClientRef = useRef(new QueryClient());
+    const contextRef = useRef(createSeamContextValue(props));
+    if (contextRef.current.client == null &&
+        contextRef.current.publishableKey == null) {
+        contextRef.current = defaultSeamContextValue;
+    }
+    if (contextRef.current.client == null &&
+        contextRef.current.publishableKey == null) {
+        throw new Error('Must provide either a Seam client or a publishableKey.');
+    }
+    return (_jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }));
+}
+const createDefaultSeamContextValue = () => {
+    if (globalThis.seam?.client == null &&
+        globalThis.seam?.publishableKey == null) {
+        return { client: null };
+    }
+    try {
+        return createSeamContextValue(globalThis.seam);
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn(err);
+        return { client: null };
+    }
+};
+const createSeamContextValue = ({ client, ...options }) => {
+    if (client == null && Object.keys(options).length === 0) {
+        return { client: null };
+    }
+    if (client != null && Object.values(options).some((v) => v == null)) {
+        throw new Error('Cannot provide both a Seam client along with other options.');
+    }
+    const { publishableKey, userIdentifierKey, ...clientOptions } = options;
+    if (client != null) {
+        return { client };
+    }
+    return {
+        client: null,
+        publishableKey,
+        userIdentifierKey,
+        clientOptions,
+    };
+};
+const defaultSeamContextValue = createDefaultSeamContextValue();
+export const seamContext = createContext(defaultSeamContextValue);
+//# sourceMappingURL=provider.js.map

package/lib/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/lib/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,aAAa,EAAqC,MAAM,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAqC,MAAM,SAAS,CAAA;AAsB3D,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;IAEhC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAA;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,IACE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI;QACjC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EACzC;QACA,UAAU,CAAC,OAAO,GAAG,uBAAuB,CAAA;KAC7C;IAED,IACE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI;QACjC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EACzC;QACA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAA;KAC1E;IAED,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,cAAc,CAAC,OAAO,YACjD,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,YAAG,QAAQ,GAAY,GAC7C,CACvB,CAAA;AACH,CAAC;AAED,MAAM,6BAA6B,GAAG,GAAgB,EAAE;IACtD,IACE,UAAU,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI;QAC/B,UAAU,CAAC,IAAI,EAAE,cAAc,IAAI,IAAI,EACvC;QACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;IAED,IAAI;QACF,OAAO,sBAAsB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;KAC/C;IAAC,OAAO,GAAG,EAAE;QACZ,sCAAsC;QACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACjB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,EAC9B,MAAM,EACN,GAAG,OAAO,EAC0B,EAAe,EAAE;IACrD,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACvD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;KACxB;IAED,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE;QACnE,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAA;KACF;IAED,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,OAAO,CAAA;IAEvE,IAAI,MAAM,IAAI,IAAI,EAAE;QAClB,OAAO,EAAE,MAAM,EAAE,CAAA;KAClB;IAED,OAAO;QACL,MAAM,EAAE,IAAI;QACZ,cAAc;QACd,iBAAiB;QACjB,aAAa;KACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,uBAAuB,GAAG,6BAA6B,EAAE,CAAA;AAE/D,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,uBAAuB,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@seamapi/react",
+  "version": "0.1.0",
+  "description": "Seam React component library.",
+  "type": "module",
+  "main": "index.js",
+  "typings": "index.d.ts",
+  "exports": {
+    "import": "./index.js"
+  },
+  "module": "index.js",
+  "sideEffects": false,
+  "keywords": [
+    "node"
+  ],
+  "homepage": "https://github.com/seamapi/react",
+  "bugs": "https://github.com/seamapi/react/issues",
+  "repository": "seamapi/react",
+  "license": "MIT",
+  "author": {
+    "name": "Seam Labs, Inc.",
+    "email": "devops@getseam.com"
+  },
+  "files": [
+    "index.js",
+    "index.js.map",
+    "index.d.ts",
+    "lib",
+    "src",
+    "!test",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/*.stories.ts",
+    "!**/*.stories.tsx",
+    "!src/stories"
+  ],
+  "scripts": {
+    "start": "storybook dev --port 6006",
+    "build": "npm run build:ts",
+    "postbuild": "node ./index.js",
+    "build:ts": "tsc --project tsconfig.build.json",
+    "prebuild:ts": "del 'index.*' lib",
+    "postbuild:ts": "tsc-alias --project tsconfig.build.json",
+    "docs:build": "storybook build --docs --output-dir docs",
+    "docs:start": "storybook dev --docs --port 6007",
+    "typecheck": "tsc",
+    "dependencies": "dpdm --exit-code circular:1 src/index.ts",
+    "test": "jest --collect-coverage",
+    "test:update": "jest --updateSnapshot",
+    "test:watch": "jest --watch",
+    "test:inspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
+    "lint": "eslint --ignore-path .gitignore --ext .js,.cjs,.mjs,.ts,.tsx .",
+    "prelint": "prettier --check --ignore-path .gitignore .",
+    "postversion": "git push --follow-tags",
+    "example:basic": "vite --config examples/basic/vite.config.js",
+    "format": "eslint --ignore-path .gitignore --fix --ext .js,.cjs,.mjs,.ts,.tsx .",
+    "preformat": "prettier --write --ignore-path .gitignore ."
+  },
+  "engines": {
+    "node": ">=16.13.0",
+    "npm": ">= 8.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "seamapi": ">=5.15.0-alpha.0"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^4.28.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-webpack5": "^7.0.2",
+    "@storybook/testing-library": "^0.1.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "del-cli": "^5.0.0",
+    "dpdm": "^3.13.0",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-config-standard-with-typescript": "^34.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "http-proxy-middleware": "^2.0.6",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "^2.3.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "seamapi": "^5.15.0-alpha.0",
+    "storybook": "^7.0.2",
+    "ts-jest": "^29.1.0",
+    "tsc-alias": "^1.8.5",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vite-tsconfig-paths": "^4.0.8"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from 'lib/index.js'

package/src/lib/components/DeviceManager/DeviceManager.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement } from 'react'
+import { type CommonDeviceProperties, type Device } from 'seamapi'
+
+import { useDevices, type UseDevicesParams } from 'lib/hooks/use-devices.js'
+
+export type DeviceManagerProps = UseDevicesParams
+
+/**
+ * Fetch, list, and manage devices.
+ */
+export const DeviceManager = (props: DeviceManagerProps): ReactElement => {
+  const { devices, isLoading, isError, error } = useDevices(props)
+
+  if (isLoading) return <p role='loading'>{t.loading}</p>
+  if (isError) return <p>{error?.message}</p>
+
+  return (
+    <ul>
+      {devices?.map((device) => (
+        <DeviceManagerItem key={device.device_id} {...device} />
+      ))}
+    </ul>
+  )
+}
+
+const DeviceManagerItem = (
+  props: Device<CommonDeviceProperties>
+): ReactElement => {
+  return (
+    <li>
+      <p>
+        {t.device_id}: {props.device_id}
+      </p>
+      <p>
+        {t.name}: {props.properties.name}
+      </p>
+    </li>
+  )
+}
+
+const t = {
+  loading: 'Loading devices',
+  device_id: 'Device ID',
+  name: 'Device name',
+}

package/src/lib/components/index.ts

@@ -0,0 +1 @@
+export * from './DeviceManager/DeviceManager.js'

package/src/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-seam.js'

package/src/lib/hooks/use-devices.ts

@@ -0,0 +1,31 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import {
+  type DevicesListRequest,
+  type DevicesListResponse,
+  type SeamError,
+} from 'seamapi'
+
+import { useSeam } from './use-seam.js'
+
+export type UseDevicesParams = DevicesListRequest
+export type UseDevicesData = DevicesListResponse['devices']
+
+type Result = UseQueryResult<UseDevicesData, SeamError>
+
+type UseDevicesResult = Omit<Result, 'data'> & { devices: Result['data'] }
+
+export function useDevices(params: DevicesListRequest): UseDevicesResult {
+  const { client } = useSeam()
+  const { data, ...rest } = useQuery<DevicesListResponse['devices'], SeamError>(
+    {
+      enabled: client != null,
+      queryKey: ['list', 'devices', params],
+      queryFn: async () => {
+        if (client == null) return []
+        return await client?.devices.list(params)
+      },
+    }
+  )
+
+  return { ...rest, devices: data }
+}

package/src/lib/hooks/use-seam.ts

@@ -0,0 +1,88 @@
+import { useQuery } from '@tanstack/react-query'
+import { useContext } from 'react'
+import { type ClientSession, Seam } from 'seamapi'
+import { v4 as uuidv4 } from 'uuid'
+
+import { seamContext } from 'lib/provider.js'
+
+export function useSeam(): {
+  client: Seam | null
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+} {
+  const { client, clientOptions, publishableKey, ...context } =
+    useContext(seamContext)
+  const [clientSession, setClientSession] = useClientSession()
+  const userIdentifierKey = useUserIdentifierKey(context.userIdentifierKey)
+
+  const { isLoading, isError, error, data } = useQuery<Seam>({
+    queryKey: ['client', { client, clientSession, userIdentifierKey }],
+    queryFn: async () => {
+      if (client != null) return client
+
+      if (publishableKey == null) {
+        throw new Error('Missing publishableKey')
+      }
+
+      // TODO: Check if client session is still valid before resuming it.
+      if (clientSession != null) {
+        return new Seam({
+          ...clientOptions,
+          clientSessionToken: clientSession.token,
+        })
+      }
+
+      const res = await Seam.getClientSessionToken({
+        ...clientOptions,
+        publishableKey,
+        userIdentifierKey,
+      })
+
+      if (!res.ok || res.client_session?.token == null) {
+        throw new Error('Failed to get client access token')
+      }
+
+      setClientSession(res.client_session)
+
+      return new Seam({
+        ...clientOptions,
+        clientSessionToken: res.client_session.token,
+      })
+    },
+  })
+
+  return { client: data ?? null, isLoading, isError, error }
+}
+
+function useClientSession(): [
+  clientSession: ClientSession | null,
+  setClientSession: (clientSession: ClientSession) => void
+] {
+  const localStorageKey = 'seam_client_session'
+
+  const setClientSession = (clientSession: ClientSession): void => {
+    globalThis?.localStorage?.setItem(
+      localStorageKey,
+      JSON.stringify(clientSession)
+    )
+  }
+
+  const cachedClientSession = globalThis?.localStorage?.getItem(localStorageKey)
+
+  return [
+    cachedClientSession != null ? JSON.parse(cachedClientSession) : null,
+    setClientSession,
+  ]
+}
+
+function useUserIdentifierKey(userIdentifierKey: string | undefined): string {
+  if (userIdentifierKey != null) {
+    return userIdentifierKey
+  }
+
+  const localStorageKey = 'seam_user_identifier_key'
+  const key = globalThis?.localStorage?.getItem(localStorageKey) ?? uuidv4()
+  globalThis?.localStorage?.setItem(localStorageKey, key)
+  return key
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js'
+export * from './hooks/index.js'
+export * from './provider.js'

package/src/lib/provider.tsx

@@ -0,0 +1,102 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createContext, type ReactElement, type ReactNode, useRef } from 'react'
+import { type Seam, type SeamClientOptions } from 'seamapi'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var seam: Omit<SeamProviderProps, 'children'> | undefined
+}
+
+export interface SeamContext {
+  client: Seam | null
+  clientOptions?: SeamClientOptions | undefined
+  publishableKey?: string | undefined
+  userIdentifierKey?: string | undefined
+}
+
+export interface SeamProviderProps {
+  client?: Seam
+  publishableKey?: string
+  userIdentifierKey?: string
+  endpoint?: string
+  children?: ReactNode
+}
+
+export function SeamProvider({
+  children,
+  ...props
+}: SeamProviderProps): ReactElement {
+  const { Provider } = seamContext
+
+  const queryClientRef = useRef(new QueryClient())
+
+  const contextRef = useRef(createSeamContextValue(props))
+  if (
+    contextRef.current.client == null &&
+    contextRef.current.publishableKey == null
+  ) {
+    contextRef.current = defaultSeamContextValue
+  }
+
+  if (
+    contextRef.current.client == null &&
+    contextRef.current.publishableKey == null
+  ) {
+    throw new Error('Must provide either a Seam client or a publishableKey.')
+  }
+
+  return (
+    <QueryClientProvider client={queryClientRef.current}>
+      <Provider value={{ ...contextRef.current }}>{children}</Provider>
+    </QueryClientProvider>
+  )
+}
+
+const createDefaultSeamContextValue = (): SeamContext => {
+  if (
+    globalThis.seam?.client == null &&
+    globalThis.seam?.publishableKey == null
+  ) {
+    return { client: null }
+  }
+
+  try {
+    return createSeamContextValue(globalThis.seam)
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.warn(err)
+    return { client: null }
+  }
+}
+
+const createSeamContextValue = ({
+  client,
+  ...options
+}: Omit<SeamProviderProps, 'children'>): SeamContext => {
+  if (client == null && Object.keys(options).length === 0) {
+    return { client: null }
+  }
+
+  if (client != null && Object.values(options).some((v) => v == null)) {
+    throw new Error(
+      'Cannot provide both a Seam client along with other options.'
+    )
+  }
+
+  const { publishableKey, userIdentifierKey, ...clientOptions } = options
+
+  if (client != null) {
+    return { client }
+  }
+
+  return {
+    client: null,
+    publishableKey,
+    userIdentifierKey,
+    clientOptions,
+  }
+}
+
+const defaultSeamContextValue = createDefaultSeamContextValue()
+
+export const seamContext = createContext<SeamContext>(defaultSeamContextValue)