@testerpaykit/react 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# @testerpaykit/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The TesterPayKit tester surface for web apps: a floating bug button with a
+menu, a bug report wizard with screenshot and annotation, voice reports,
+one-tap quick actions, retests judged step by step, messages, session
+details and earnings. German or English, following the browser language.
+
+Reports, sessions and engaged testing minutes land in your
+[TesterPayKit](https://testerpaykit.com) project.
+
+## Install
+
+```bash
+npm install @testerpaykit/react @testerpaykit/sdk @testerpaykit/api-client @testerpaykit/storage-browser
+```
+
+## Quick start
+
+```tsx
+import { useEffect, useState } from 'react';
+import { TesterPayKit } from '@testerpaykit/sdk';
+import { TesterPayKitApiClient } from '@testerpaykit/api-client';
+import { IndexedDBAdapter } from '@testerpaykit/storage-browser';
+import { TpkTesterHub } from '@testerpaykit/react';
+
+export function Tpk({ screen }: { screen: string }) {
+  const [sdk, setSdk] = useState<TesterPayKit | null>(null);
+  useEffect(() => {
+    const instance = new TesterPayKit({
+      apiKey: '',
+      projectId: '<your project id>',
+      testerId: '<invite code>', // the SDK signs the tester in with it
+      deviceId: crypto.randomUUID(),
+      storage: new IndexedDBAdapter(),
+      apiClient: new TesterPayKitApiClient({ apiKey: '' }),
+      deviceMetadata: { os: 'Web', osVersion: navigator.userAgent, deviceModel: 'browser', appVersion: '1.0.0', sdkVersion: '1.0.0', timezoneOffset: -new Date().getTimezoneOffset() },
+      appMetadata: { bundleId: 'com.example.web', version: '1.0.0', buildNumber: '1' },
+      autoStartSession: true,
+    });
+    void instance.init().then(() => setSdk(instance));
+  }, []);
+  return sdk ? <TpkTesterHub sdk={sdk} currentScreen={screen} /> : null;
+}
+```
+
+`<TpkTesterHub locale="de" />` pins the language.
+
+**Web origins:** the API only answers browsers from origins registered in
+your project settings (CORS). Add every domain your app runs on, including
+`http://localhost:<port>` for development.