@loopaware/react-native 0.1.0

package/LICENSE

@@ -0,0 +1,109 @@
+LoopAware Source Available License
+Version 1.0, April 2026
+
+Copyright (c) 2025-2026 Marco Polo Research Lab
+https://mprlab.com
+
+TERMS AND CONDITIONS
+
+1. Definitions
+
+   "Licensor" means Marco Polo Research Lab, the entity offering the
+   Software under these terms.
+
+   "Software" means the LoopAware software made available under this
+   license, including all source code, object code, documentation, and
+   associated files.
+
+   "You" means the individual or entity exercising rights under this
+   license.
+
+   "Non-Commercial Use" means use of the Software for any purpose that
+   does not generate revenue, directly or indirectly. This includes
+   personal projects, open-source projects that are free to use,
+   educational use, academic research, and evaluation of the Software.
+
+   "Commercial Use" means any use of the Software in connection with a
+   product, service, or project that generates revenue, directly or
+   indirectly. This includes, without limitation: products or services
+   sold or licensed for a fee, products or services that generate
+   advertising revenue, products or services offered under a paid
+   subscription, and internal use by a for-profit entity to support
+   revenue-generating operations.
+
+   "Commercial License" means a separate written agreement between You
+   and the Licensor granting rights to Commercial Use.
+
+2. Grant of Rights for Non-Commercial Use
+
+   Subject to the terms of this license, the Licensor grants You a
+   non-exclusive, worldwide, royalty-free license to use, copy, modify,
+   and create derivative works of the Software, solely for
+   Non-Commercial Use.
+
+   You may redistribute the Software or derivative works, provided that:
+
+   (a) You include a copy of this license with every distribution;
+   (b) You do not remove or alter any copyright notices; and
+   (c) You clearly state any modifications You have made.
+
+3. Commercial Use Requires a Commercial License
+
+   You may not use the Software for any Commercial Use unless You have
+   obtained a Commercial License from the Licensor.
+
+   Commercial Licenses are available at:
+   https://loopaware.mprlab.com/pricing
+
+   For licensing inquiries, contact: legal@mprlab.com
+
+4. Competing Use Restriction
+
+   Regardless of whether Your use is commercial or non-commercial, You
+   may not use the Software to create, offer, or operate a product or
+   service that competes with the Software or any product or service
+   offered by the Licensor that incorporates the Software.
+
+5. Patents
+
+   To the extent Your permitted use would necessarily infringe the
+   Licensor's patents, this license includes a patent license for that
+   use. If You bring a patent claim against any party alleging that the
+   Software infringes a patent, Your rights under this license terminate
+   immediately.
+
+6. Trademarks
+
+   This license does not grant You any rights to use the Licensor's
+   trademarks, trade names, service marks, or product names, except as
+   necessary to comply with the attribution requirements in Section 2.
+
+7. Disclaimer of Warranty
+
+   THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTIES OF ANY KIND,
+   EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF
+   FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, TITLE, OR
+   NON-INFRINGEMENT.
+
+8. Limitation of Liability
+
+   IN NO EVENT SHALL THE LICENSOR BE LIABLE FOR ANY INDIRECT, SPECIAL,
+   INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR RELATED TO
+   THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+   THE LICENSOR'S TOTAL LIABILITY UNDER THIS LICENSE SHALL NOT EXCEED
+   THE AMOUNTS PAID BY YOU TO THE LICENSOR FOR THE SOFTWARE IN THE
+   TWELVE MONTHS PRECEDING THE CLAIM.
+
+9. Termination
+
+   This license terminates automatically if You violate any of its
+   terms. Upon termination, You must cease all use of the Software and
+   destroy all copies in Your possession.
+
+   The Licensor may, at its sole discretion, reinstate Your rights under
+   this license upon written notice.
+
+10. Governing Law
+
+    This license is governed by the laws of the State of California,
+    United States, without regard to conflict of law principles.

package/README.md

@@ -0,0 +1,107 @@
+# LoopAware React Native Feedback
+
+Native feedback button for Expo and React Native apps. This client submits customer feedback to `/public/mobile-feedback`; it is not part of LA Sentry error capture.
+
+## Installation
+
+```bash
+npm install @loopaware/react-native
+```
+
+The package ships built ESM JavaScript and TypeScript declarations from `dist/`. React and React Native are peer
+dependencies and must come from the host app.
+
+## Expo setup
+
+Register the mobile app for a LoopAware site through the authenticated API:
+
+```http
+POST /api/sites/{site_id}/mobile-apps
+```
+
+```json
+{
+  "platform": "ios",
+  "app_identifier": "com.example.app",
+  "display_name": "Example iOS"
+}
+```
+
+The response includes a public `client_id`. Ship that value with the app alongside the site ID.
+
+```tsx
+import * as Application from "expo-application";
+import { LoopAwareFeedbackButton, LoopAwareProvider } from "@loopaware/react-native";
+
+export function App() {
+  return (
+    <LoopAwareProvider
+      siteId="SITE_ID"
+      mobileClientId="MOBILE_CLIENT_ID"
+      apiOrigin="https://loopaware.mprlab.com"
+      app={{
+        applicationId: Application.applicationId ?? "com.example.app",
+        version: Application.nativeApplicationVersion ?? "",
+        build: Application.nativeBuildVersion ?? "",
+        environment: "production",
+      }}
+    >
+      <CheckoutScreen />
+    </LoopAwareProvider>
+  );
+}
+
+function CheckoutScreen() {
+  return (
+    <>
+      <CheckoutContent />
+      <LoopAwareFeedbackButton
+        screen={{ name: "Checkout", path: "/checkout/payment" }}
+        context={{ step: "payment", plan: "pro" }}
+      />
+    </>
+  );
+}
+```
+
+The `context` object should contain only safe product state. Do not include passwords, payment data, tokens, or free-form private user content.
+
+## Manual submission
+
+Apps with their own UI can call `submitLoopAwareFeedback` directly:
+
+```tsx
+await submitLoopAwareFeedback(
+  {
+    siteId: "SITE_ID",
+    mobileClientId: "MOBILE_CLIENT_ID",
+    apiOrigin: "https://loopaware.mprlab.com",
+    app: {
+      platform: "android",
+      applicationId: "com.example.app",
+      version: "1.2.3",
+      build: "44",
+      environment: "production",
+    },
+  },
+  {
+    contact: "person@example.com",
+    message: "The checkout button is confusing.",
+    sentiment: "sad",
+    screen: { name: "Checkout", path: "/checkout/payment" },
+    context: { step: "payment" },
+  }
+);
+```
+
+## Non-React Native apps
+
+Swift, Kotlin, and other native clients should call the same `/public/mobile-feedback` REST endpoint directly. Register
+the app with `/api/sites/{site_id}/mobile-apps`, store the public `client_id`, and submit the same JSON shape used by
+`submitLoopAwareFeedback`.
+
+## Package validation
+
+Repository CI runs `make client-react-native-check`. That target typechecks the source, builds `dist/`, packs the npm
+tarball, verifies the package contents, installs the tarball into a temporary consumer project, and typechecks a real
+`@loopaware/react-native` import.

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+export type LoopAwareSentiment = "sad" | "neutral" | "happy";
+export type LoopAwareContextValue = string | number | boolean | null | LoopAwareContextValue[] | {
+    [key: string]: LoopAwareContextValue;
+};
+export type LoopAwareFeedbackContext = {
+    [key: string]: LoopAwareContextValue;
+};
+export type LoopAwareScreen = {
+    name: string;
+    path?: string;
+};
+export type LoopAwareAppMetadata = {
+    platform?: "ios" | "android";
+    applicationId: string;
+    version?: string;
+    build?: string;
+    environment?: string;
+};
+export type LoopAwareConfig = {
+    siteId: string;
+    mobileClientId: string;
+    apiOrigin: string;
+    app: LoopAwareAppMetadata;
+    defaultContext?: LoopAwareFeedbackContext;
+};
+export type LoopAwareProviderProps = LoopAwareConfig & {
+    children: ReactNode;
+};
+export type LoopAwareFeedbackInput = {
+    contact: string;
+    message: string;
+    sentiment?: LoopAwareSentiment;
+    screen: LoopAwareScreen;
+    context?: LoopAwareFeedbackContext;
+};
+export type LoopAwareFeedbackButtonProps = {
+    screen: LoopAwareScreen;
+    context?: LoopAwareFeedbackContext;
+    buttonLabel?: string;
+};
+export declare function LoopAwareProvider({ children, siteId, mobileClientId, apiOrigin, app, defaultContext, }: LoopAwareProviderProps): JSX.Element;
+export declare function useLoopAware(): LoopAwareConfig;
+export declare function submitLoopAwareFeedback(config: LoopAwareConfig, input: LoopAwareFeedbackInput): Promise<void>;
+export declare function LoopAwareFeedbackButton({ screen, context, buttonLabel }: LoopAwareFeedbackButtonProps): JSX.Element;

package/dist/index.js

@@ -0,0 +1,206 @@
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { Modal, Platform, Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
+const LoopAwareContext = createContext(null);
+export function LoopAwareProvider({ children, siteId, mobileClientId, apiOrigin, app, defaultContext, }) {
+    const value = useMemo(() => ({
+        siteId,
+        mobileClientId,
+        apiOrigin: apiOrigin.replace(/\/+$/, ""),
+        app,
+        defaultContext,
+    }), [siteId, mobileClientId, apiOrigin, app, defaultContext]);
+    return React.createElement(LoopAwareContext.Provider, { value: value }, children);
+}
+export function useLoopAware() {
+    const config = useContext(LoopAwareContext);
+    if (!config) {
+        throw new Error("loopaware_provider_missing");
+    }
+    return config;
+}
+export async function submitLoopAwareFeedback(config, input) {
+    const mergedContext = {
+        ...(config.defaultContext ?? {}),
+        ...(input.context ?? {}),
+    };
+    const platform = config.app.platform ?? (Platform.OS === "ios" || Platform.OS === "android" ? Platform.OS : "ios");
+    const response = await fetch(`${config.apiOrigin.replace(/\/+$/, "")}/public/mobile-feedback`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            site_id: config.siteId,
+            mobile_client_id: config.mobileClientId,
+            contact: input.contact,
+            message: input.message,
+            sentiment: input.sentiment ?? "",
+            screen: {
+                name: input.screen.name,
+                path: input.screen.path ?? "",
+            },
+            app: {
+                platform,
+                application_id: config.app.applicationId,
+                version: config.app.version ?? "",
+                build: config.app.build ?? "",
+                environment: config.app.environment ?? "",
+            },
+            context: mergedContext,
+        }),
+    });
+    if (!response.ok) {
+        throw new Error(`loopaware_feedback_failed:${response.status}`);
+    }
+}
+export function LoopAwareFeedbackButton({ screen, context, buttonLabel = "Feedback" }) {
+    const config = useLoopAware();
+    const [open, setOpen] = useState(false);
+    const [contact, setContact] = useState("");
+    const [message, setMessage] = useState("");
+    const [sentiment, setSentiment] = useState();
+    const [status, setStatus] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    async function handleSubmit() {
+        const normalizedContact = contact.trim();
+        const normalizedMessage = message.trim();
+        if (!normalizedContact || (!normalizedMessage && !sentiment)) {
+            setStatus("Add contact and feedback.");
+            return;
+        }
+        setSubmitting(true);
+        setStatus("Sending...");
+        try {
+            await submitLoopAwareFeedback(config, {
+                contact: normalizedContact,
+                message: normalizedMessage,
+                sentiment,
+                screen,
+                context,
+            });
+            setContact("");
+            setMessage("");
+            setSentiment(undefined);
+            setStatus("Sent.");
+            setOpen(false);
+        }
+        catch {
+            setStatus("Unable to send feedback.");
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Pressable, { accessibilityRole: "button", onPress: () => setOpen(true), style: styles.floatingButton },
+            React.createElement(Text, { style: styles.floatingButtonText }, buttonLabel)),
+        React.createElement(Modal, { animationType: "slide", transparent: true, visible: open, onRequestClose: () => setOpen(false) },
+            React.createElement(View, { style: styles.modalBackdrop },
+                React.createElement(View, { style: styles.sheet },
+                    React.createElement(Text, { style: styles.title }, "Send feedback"),
+                    React.createElement(TextInput, { autoCapitalize: "none", keyboardType: "email-address", onChangeText: setContact, placeholder: "Email or phone", style: styles.input, value: contact }),
+                    React.createElement(View, { style: styles.sentimentRow }, ["sad", "neutral", "happy"].map((value) => (React.createElement(Pressable, { accessibilityRole: "button", key: value, onPress: () => setSentiment(value), style: [styles.sentimentButton, sentiment === value ? styles.sentimentButtonActive : null] },
+                        React.createElement(Text, { style: styles.sentimentText }, value))))),
+                    React.createElement(TextInput, { multiline: true, onChangeText: setMessage, placeholder: "Your message", style: [styles.input, styles.messageInput], value: message }),
+                    status ? React.createElement(Text, { style: styles.status }, status) : null,
+                    React.createElement(View, { style: styles.actions },
+                        React.createElement(Pressable, { accessibilityRole: "button", onPress: () => setOpen(false), style: styles.secondaryButton },
+                            React.createElement(Text, { style: styles.secondaryButtonText }, "Cancel")),
+                        React.createElement(Pressable, { accessibilityRole: "button", disabled: submitting, onPress: handleSubmit, style: [styles.primaryButton, submitting ? styles.disabledButton : null] },
+                            React.createElement(Text, { style: styles.primaryButtonText }, "Send"))))))));
+}
+const styles = StyleSheet.create({
+    actions: {
+        flexDirection: "row",
+        gap: 12,
+        justifyContent: "flex-end",
+    },
+    disabledButton: {
+        opacity: 0.6,
+    },
+    floatingButton: {
+        alignItems: "center",
+        backgroundColor: "#0d6efd",
+        borderRadius: 24,
+        bottom: 24,
+        elevation: 4,
+        paddingHorizontal: 18,
+        paddingVertical: 12,
+        position: "absolute",
+        right: 20,
+    },
+    floatingButtonText: {
+        color: "#ffffff",
+        fontWeight: "700",
+    },
+    input: {
+        borderColor: "#ced4da",
+        borderRadius: 8,
+        borderWidth: 1,
+        marginBottom: 12,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    messageInput: {
+        minHeight: 110,
+        textAlignVertical: "top",
+    },
+    modalBackdrop: {
+        backgroundColor: "rgba(0, 0, 0, 0.35)",
+        flex: 1,
+        justifyContent: "flex-end",
+    },
+    primaryButton: {
+        backgroundColor: "#0d6efd",
+        borderRadius: 8,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    primaryButtonText: {
+        color: "#ffffff",
+        fontWeight: "700",
+    },
+    secondaryButton: {
+        borderColor: "#6c757d",
+        borderRadius: 8,
+        borderWidth: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    secondaryButtonText: {
+        color: "#343a40",
+        fontWeight: "700",
+    },
+    sentimentButton: {
+        borderColor: "#ced4da",
+        borderRadius: 8,
+        borderWidth: 1,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    sentimentButtonActive: {
+        backgroundColor: "#e7f1ff",
+        borderColor: "#0d6efd",
+    },
+    sentimentRow: {
+        flexDirection: "row",
+        gap: 8,
+        marginBottom: 12,
+    },
+    sentimentText: {
+        textTransform: "capitalize",
+    },
+    sheet: {
+        backgroundColor: "#ffffff",
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        padding: 20,
+    },
+    status: {
+        color: "#495057",
+        marginBottom: 12,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "700",
+        marginBottom: 16,
+    },
+});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@loopaware/react-native",
+  "version": "0.1.0",
+  "description": "React Native feedback widget client for LoopAware.",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "./dist/index.js",
+  "react-native": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tyemirov/loopaware.git",
+    "directory": "clients/react-native"
+  },
+  "keywords": [
+    "loopaware",
+    "feedback",
+    "react-native",
+    "expo"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "node scripts/clean-dist.mjs && tsc -p tsconfig.build.json",
+    "prepack": "npm run build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "verify-package": "node scripts/verify-package.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}