@mochabug/adapt-react 1.0.0-rc1

package/README.md

@@ -0,0 +1,112 @@
+# @mochabug/adapt-react
+
+React component for Adapt.
+
+```bash
+npm install @mochabug/adapt-react
+```
+
+Requires React 17, 18, or 19.
+
+## Quickstart
+
+```tsx
+import { AdaptAutomation } from '@mochabug/adapt-react';
+
+<AdaptAutomation id="auto-123" style={{ height: 600 }} />
+```
+
+If the automation requires authentication:
+
+```tsx
+<AdaptAutomation id="auto-123" authToken="your-token" style={{ height: 600 }} />
+```
+
+## SSR (Next.js)
+
+Keep auth token on server:
+
+```tsx
+// app/page.tsx (Server Component)
+import { startSession } from '@mochabug/adapt-core';
+
+export default async function Page() {
+  const authToken = await getAuthTokenFromBackend();
+  const { token } = await startSession({ id: 'auto-123' }, authToken);
+
+  return <AutomationClient sessionToken={token} />;
+}
+
+// components/AutomationClient.tsx (Client Component)
+'use client';
+import { AdaptAutomation } from '@mochabug/adapt-react';
+
+export function AutomationClient({ sessionToken }) {
+  return (
+    <AdaptAutomation
+      id="auto-123"
+      sessionToken={sessionToken}
+      style={{ height: 600 }}
+    />
+  );
+}
+```
+
+## Session inheritance
+
+```tsx
+// direct
+<AdaptAutomation id="auto-123" inheritToken="token-from-parent" />
+
+// from URL hash: example.com#mb_session=xxx
+<AdaptAutomation id="auto-123" inheritFrom={{ hash: 'mb_session' }} />
+```
+
+## Fork display
+
+```tsx
+// side-by-side
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="side-by-side"
+  sideBySideSplit={60}
+/>
+
+// dialog
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="dialog"
+  dialogBackdropClose
+/>
+```
+
+## Callbacks
+
+```tsx
+<AdaptAutomation
+  id="auto-123"
+  onSession={(status, fork) => console.log(status, fork)}
+  onOutput={(output) => console.log(output)}
+/>
+```
+
+## Props
+
+| Prop | Type |
+|------|------|
+| `id` | `string` (required) |
+| `sessionToken` | `string` |
+| `authToken` | `string` |
+| `inheritToken` | `string` |
+| `inheritFrom` | `{ hash: string } \| { param: string }` |
+| `forkDisplayMode` | `'side-by-side' \| 'dialog'` |
+| `sideBySideSplit` | `number` (0-100) |
+| `dialogBackdropClose` | `boolean` |
+| `onSession` | `(status, fork?) => void` |
+| `onOutput` | `(output) => void` |
+| `className` | `string` |
+| `style` | `CSSProperties` |
+
+## License
+
+ISC © mochabug AB

package/dist/esm/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef } from "react";
+import { AdaptWebClient, } from "@mochabug/adapt-web";
+/**
+ * React component for embedding Adapt automations.
+ *
+ * @example
+ * ```tsx
+ * import { AdaptAutomation } from '@mochabug/adapt-react';
+ *
+ * function App() {
+ *   return (
+ *     <AdaptAutomation
+ *       id="automation-123"
+ *       style={{ height: '600px' }}
+ *       onSession={(status) => console.log('Status:', status)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With session inheritance from URL hash
+ * <AdaptAutomation
+ *   id="automation-123"
+ *   inheritFrom={{ hash: 'mb_session' }}
+ *   style={{ height: '100vh' }}
+ * />
+ * ```
+ */
+export const AdaptAutomation = forwardRef(function AdaptAutomation({ id, sessionToken, authToken, inheritToken, inheritFrom, forkDisplayMode, sideBySideSplit, dialogBackdropClose, onSession, onOutput, classNames, className, style, }, ref) {
+    const clientRef = useRef(null);
+    const internalRef = useRef(null);
+    const containerIdRef = useRef(`adapt-${Math.random().toString(36).slice(2, 11)}`);
+    const containerId = containerIdRef.current;
+    // Merge refs
+    const setRef = (element) => {
+        internalRef.current =
+            element;
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+    };
+    useEffect(() => {
+        clientRef.current = new AdaptWebClient({
+            container: containerId,
+            id,
+            sessionToken,
+            authToken,
+            inheritToken,
+            inheritFrom,
+            forkDisplayMode,
+            sideBySideSplit,
+            dialogBackdropClose,
+            onSession,
+            onOutput,
+            classNames,
+        });
+        return () => {
+            clientRef.current?.destroy();
+            clientRef.current = null;
+        };
+        // Only recreate client if automation ID changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    return (_jsx("div", { ref: setRef, id: containerId, className: className, style: style }));
+});

package/dist/types/index.d.ts

@@ -0,0 +1,41 @@
+import { type AdaptWebClientOptions } from "@mochabug/adapt-web";
+import type { Output, StatusJson } from "@mochabug/adapt-core";
+export type { Output, StatusJson };
+/**
+ * Props for the AdaptAutomation React component.
+ */
+export interface AdaptAutomationProps extends Pick<AdaptWebClientOptions, "id" | "sessionToken" | "authToken" | "inheritToken" | "inheritFrom" | "forkDisplayMode" | "sideBySideSplit" | "dialogBackdropClose" | "onSession" | "onOutput" | "classNames"> {
+    /** CSS class name for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * React component for embedding Adapt automations.
+ *
+ * @example
+ * ```tsx
+ * import { AdaptAutomation } from '@mochabug/adapt-react';
+ *
+ * function App() {
+ *   return (
+ *     <AdaptAutomation
+ *       id="automation-123"
+ *       style={{ height: '600px' }}
+ *       onSession={(status) => console.log('Status:', status)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With session inheritance from URL hash
+ * <AdaptAutomation
+ *   id="automation-123"
+ *   inheritFrom={{ hash: 'mb_session' }}
+ *   style={{ height: '100vh' }}
+ * />
+ * ```
+ */
+export declare const AdaptAutomation: import("react").ForwardRefExoticComponent<AdaptAutomationProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mochabug/adapt-react",
+  "version": "1.0.0-rc1",
+  "description": "React component for Adapt automation platform",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "build:types": "tsc --project tsconfig.types.json",
+    "build": "rm -rf dist && npm run build:esm && npm run build:types",
+    "sample": "cd sample && npm run dev"
+  },
+  "keywords": [
+    "adapt",
+    "automations",
+    "mochabug",
+    "react"
+  ],
+  "author": "mochabug AB",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.6",
+    "react": "^19.2.0",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@mochabug/adapt-web": "^1.0.0-rc22"
+  }
+}