@shellapps/experience-react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import { ExperienceConfig, Experience } from '@shellapps/experience';
+
+interface ExperienceProviderProps {
+    appId: string;
+    apiKey: string;
+    profileId?: string;
+    options?: Partial<Omit<ExperienceConfig, 'appId' | 'apiKey'>>;
+    children: React__default.ReactNode;
+}
+declare function ExperienceProvider({ appId, apiKey, profileId, options, children }: ExperienceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorBoundaryProps {
+    fallback?: React__default.ReactNode;
+    showCommentForm?: boolean;
+    onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
+    children: React__default.ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    comment: string;
+    submitted: boolean;
+}
+declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static contextType: React__default.Context<Experience | null>;
+    context: Experience | null;
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
+    private handleSubmitComment;
+    render(): string | number | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+declare function useTrack(): {
+    track: (eventName: string, metadata?: Record<string, unknown>) => void;
+    trackPageView: () => void;
+};
+declare function useFlag<T>(flagName: string, defaultValue: T): T;
+declare function useTranslation(): {
+    t: (key: string) => string;
+    locale: "en";
+};
+
+declare const ExperienceContext: React.Context<Experience | null>;
+
+export { ErrorBoundary, ExperienceContext, ExperienceProvider, type ExperienceProviderProps, useFlag, useTrack, useTranslation };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import { ExperienceConfig, Experience } from '@shellapps/experience';
+
+interface ExperienceProviderProps {
+    appId: string;
+    apiKey: string;
+    profileId?: string;
+    options?: Partial<Omit<ExperienceConfig, 'appId' | 'apiKey'>>;
+    children: React__default.ReactNode;
+}
+declare function ExperienceProvider({ appId, apiKey, profileId, options, children }: ExperienceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorBoundaryProps {
+    fallback?: React__default.ReactNode;
+    showCommentForm?: boolean;
+    onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
+    children: React__default.ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    comment: string;
+    submitted: boolean;
+}
+declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static contextType: React__default.Context<Experience | null>;
+    context: Experience | null;
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
+    private handleSubmitComment;
+    render(): string | number | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+declare function useTrack(): {
+    track: (eventName: string, metadata?: Record<string, unknown>) => void;
+    trackPageView: () => void;
+};
+declare function useFlag<T>(flagName: string, defaultValue: T): T;
+declare function useTranslation(): {
+    t: (key: string) => string;
+    locale: "en";
+};
+
+declare const ExperienceContext: React.Context<Experience | null>;
+
+export { ErrorBoundary, ExperienceContext, ExperienceProvider, type ExperienceProviderProps, useFlag, useTrack, useTranslation };

package/dist/index.js

@@ -0,0 +1,179 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ErrorBoundary: () => ErrorBoundary,
+  ExperienceContext: () => ExperienceContext,
+  ExperienceProvider: () => ExperienceProvider,
+  useFlag: () => useFlag,
+  useTrack: () => useTrack,
+  useTranslation: () => useTranslation
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ExperienceProvider.tsx
+var import_react2 = require("react");
+var import_experience = require("@shellapps/experience");
+
+// src/context.ts
+var import_react = require("react");
+var ExperienceContext = (0, import_react.createContext)(null);
+
+// src/ExperienceProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ExperienceProvider({ appId, apiKey, profileId, options, children }) {
+  const instanceRef = (0, import_react2.useRef)(null);
+  if (!instanceRef.current) {
+    const instance = import_experience.Experience.init({ appId, apiKey, ...options });
+    if (profileId) instance.identify(profileId);
+    instanceRef.current = instance;
+  }
+  (0, import_react2.useEffect)(() => {
+    if (profileId && instanceRef.current) {
+      instanceRef.current.identify(profileId);
+    }
+  }, [profileId]);
+  (0, import_react2.useEffect)(() => {
+    const handler = (e) => {
+      let el = e.target;
+      while (el) {
+        const tid = el.getAttribute?.("data-t");
+        if (tid) {
+          instanceRef.current?.track("element_click", { elementTid: tid });
+          break;
+        }
+        el = el.parentElement;
+      }
+    };
+    document.addEventListener("click", handler, true);
+    return () => document.removeEventListener("click", handler, true);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      instanceRef.current?.shutdown();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExperienceContext.Provider, { value: instanceRef.current, children });
+}
+
+// src/ErrorBoundary.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react3.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      hasError: false,
+      error: null,
+      comment: "",
+      submitted: false
+    };
+    this.handleSubmitComment = () => {
+      if (this.state.comment.trim() && this.state.error) {
+        this.context?.captureMessage(
+          `User feedback: ${this.state.comment}`,
+          "info"
+        );
+        this.setState({ submitted: true });
+      }
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.context?.captureError(error, {
+      componentStack: errorInfo.componentStack || ""
+    });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 20, textAlign: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: this.state.error?.message }),
+        this.props.showCommentForm && !this.state.submitted && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "textarea",
+            {
+              placeholder: "Tell us what happened...",
+              value: this.state.comment,
+              onChange: (e) => this.setState({ comment: e.target.value }),
+              style: { width: "100%", minHeight: 80, marginTop: 10 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: this.handleSubmitComment, style: { marginTop: 8 }, children: "Submit" })
+        ] }),
+        this.state.submitted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "Thank you for your feedback!" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+ErrorBoundary.contextType = ExperienceContext;
+
+// src/hooks.ts
+var import_react4 = require("react");
+function useExperience() {
+  const ctx = (0, import_react4.useContext)(ExperienceContext);
+  if (!ctx) throw new Error("useExperience must be used within ExperienceProvider");
+  return ctx;
+}
+function useTrack() {
+  const experience = useExperience();
+  return {
+    track: (eventName, metadata) => experience.track(eventName, metadata),
+    trackPageView: () => experience.trackPageView()
+  };
+}
+function useFlag(flagName, defaultValue) {
+  const experience = useExperience();
+  return experience.getFlag(flagName, defaultValue);
+}
+function useTranslation() {
+  return {
+    t: (key) => key,
+    locale: "en"
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorBoundary,
+  ExperienceContext,
+  ExperienceProvider,
+  useFlag,
+  useTrack,
+  useTranslation
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ExperienceProvider.tsx","../src/context.ts","../src/ErrorBoundary.tsx","../src/hooks.ts"],"sourcesContent":["export { ExperienceProvider } from './ExperienceProvider';\nexport type { ExperienceProviderProps } from './ExperienceProvider';\nexport { ErrorBoundary } from './ErrorBoundary';\nexport { useTrack, useFlag, useTranslation } from './hooks';\nexport { ExperienceContext } from './context';\n","import React, { useEffect, useRef } from 'react';\nimport { Experience } from '@shellapps/experience';\nimport type { ExperienceConfig } from '@shellapps/experience';\nimport { ExperienceContext } from './context';\n\nexport interface ExperienceProviderProps {\n  appId: string;\n  apiKey: string;\n  profileId?: string;\n  options?: Partial<Omit<ExperienceConfig, 'appId' | 'apiKey'>>;\n  children: React.ReactNode;\n}\n\nexport function ExperienceProvider({ appId, apiKey, profileId, options, children }: ExperienceProviderProps) {\n  const instanceRef = useRef<Experience | null>(null);\n\n  if (!instanceRef.current) {\n    const instance = Experience.init({ appId, apiKey, ...options });\n    if (profileId) instance.identify(profileId);\n    instanceRef.current = instance;\n  }\n\n  useEffect(() => {\n    if (profileId && instanceRef.current) {\n      instanceRef.current.identify(profileId);\n    }\n  }, [profileId]);\n\n  // data-t auto-tracking\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      let el = e.target as HTMLElement | null;\n      while (el) {\n        const tid = el.getAttribute?.('data-t');\n        if (tid) {\n          instanceRef.current?.track('element_click', { elementTid: tid });\n          break;\n        }\n        el = el.parentElement;\n      }\n    };\n    document.addEventListener('click', handler, true);\n    return () => document.removeEventListener('click', handler, true);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      instanceRef.current?.shutdown();\n    };\n  }, []);\n\n  return (\n    <ExperienceContext.Provider value={instanceRef.current}>\n      {children}\n    </ExperienceContext.Provider>\n  );\n}\n","import { createContext } from 'react';\nimport type { Experience } from '@shellapps/experience';\n\nexport const ExperienceContext = createContext<Experience | null>(null);\n","import React from 'react';\nimport type { Experience } from '@shellapps/experience';\nimport { ExperienceContext } from './context';\n\ninterface ErrorBoundaryProps {\n  fallback?: React.ReactNode;\n  showCommentForm?: boolean;\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n  children: React.ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n  comment: string;\n  submitted: boolean;\n}\n\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  static contextType = ExperienceContext;\n  declare context: Experience | null;\n\n  state: ErrorBoundaryState = {\n    hasError: false,\n    error: null,\n    comment: '',\n    submitted: false,\n  };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.context?.captureError(error, {\n      componentStack: errorInfo.componentStack || '',\n    });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  private handleSubmitComment = () => {\n    if (this.state.comment.trim() && this.state.error) {\n      this.context?.captureMessage(\n        `User feedback: ${this.state.comment}`,\n        'info',\n      );\n      this.setState({ submitted: true });\n    }\n  };\n\n  render() {\n    if (this.state.hasError) {\n      if (this.props.fallback) {\n        return this.props.fallback;\n      }\n\n      return (\n        <div style={{ padding: 20, textAlign: 'center' }}>\n          <h2>Something went wrong</h2>\n          <p>{this.state.error?.message}</p>\n          {this.props.showCommentForm && !this.state.submitted && (\n            <div>\n              <textarea\n                placeholder=\"Tell us what happened...\"\n                value={this.state.comment}\n                onChange={(e) => this.setState({ comment: e.target.value })}\n                style={{ width: '100%', minHeight: 80, marginTop: 10 }}\n              />\n              <button onClick={this.handleSubmitComment} style={{ marginTop: 8 }}>\n                Submit\n              </button>\n            </div>\n          )}\n          {this.state.submitted && <p>Thank you for your feedback!</p>}\n        </div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n","import { useContext } from 'react';\nimport { ExperienceContext } from './context';\n\nfunction useExperience() {\n  const ctx = useContext(ExperienceContext);\n  if (!ctx) throw new Error('useExperience must be used within ExperienceProvider');\n  return ctx;\n}\n\nexport function useTrack() {\n  const experience = useExperience();\n  return {\n    track: (eventName: string, metadata?: Record<string, unknown>) => experience.track(eventName, metadata),\n    trackPageView: () => experience.trackPageView(),\n  };\n}\n\nexport function useFlag<T>(flagName: string, defaultValue: T): T {\n  const experience = useExperience();\n  return experience.getFlag(flagName, defaultValue);\n}\n\nexport function useTranslation() {\n  return {\n    t: (key: string) => key,\n    locale: 'en' as const,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAyC;AACzC,wBAA2B;;;ACD3B,mBAA8B;AAGvB,IAAM,wBAAoB,4BAAiC,IAAI;;;ADiDlE;AAvCG,SAAS,mBAAmB,EAAE,OAAO,QAAQ,WAAW,SAAS,SAAS,GAA4B;AAC3G,QAAM,kBAAc,sBAA0B,IAAI;AAElD,MAAI,CAAC,YAAY,SAAS;AACxB,UAAM,WAAW,6BAAW,KAAK,EAAE,OAAO,QAAQ,GAAG,QAAQ,CAAC;AAC9D,QAAI,UAAW,UAAS,SAAS,SAAS;AAC1C,gBAAY,UAAU;AAAA,EACxB;AAEA,+BAAU,MAAM;AACd,QAAI,aAAa,YAAY,SAAS;AACpC,kBAAY,QAAQ,SAAS,SAAS;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAGd,+BAAU,MAAM;AACd,UAAM,UAAU,CAAC,MAAkB;AACjC,UAAI,KAAK,EAAE;AACX,aAAO,IAAI;AACT,cAAM,MAAM,GAAG,eAAe,QAAQ;AACtC,YAAI,KAAK;AACP,sBAAY,SAAS,MAAM,iBAAiB,EAAE,YAAY,IAAI,CAAC;AAC/D;AAAA,QACF;AACA,aAAK,GAAG;AAAA,MACV;AAAA,IACF;AACA,aAAS,iBAAiB,SAAS,SAAS,IAAI;AAChD,WAAO,MAAM,SAAS,oBAAoB,SAAS,SAAS,IAAI;AAAA,EAClE,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,WAAO,MAAM;AACX,kBAAY,SAAS,SAAS;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,YAAY,SAC5C,UACH;AAEJ;;;AExDA,IAAAC,gBAAkB;AA0DR,IAAAC,sBAAA;AAxCH,IAAM,gBAAN,cAA4B,cAAAC,QAAM,UAAkD;AAAA,EAApF;AAAA;AAIL,iBAA4B;AAAA,MAC1B,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAaA,SAAQ,sBAAsB,MAAM;AAClC,UAAI,KAAK,MAAM,QAAQ,KAAK,KAAK,KAAK,MAAM,OAAO;AACjD,aAAK,SAAS;AAAA,UACZ,kBAAkB,KAAK,MAAM,OAAO;AAAA,UACpC;AAAA,QACF;AACA,aAAK,SAAS,EAAE,WAAW,KAAK,CAAC;AAAA,MACnC;AAAA,IACF;AAAA;AAAA,EAnBA,OAAO,yBAAyB,OAA2C;AACzE,WAAO,EAAE,UAAU,MAAM,MAAM;AAAA,EACjC;AAAA,EAEA,kBAAkB,OAAc,WAAkC;AAChE,SAAK,SAAS,aAAa,OAAO;AAAA,MAChC,gBAAgB,UAAU,kBAAkB;AAAA,IAC9C,CAAC;AACD,SAAK,MAAM,UAAU,OAAO,SAAS;AAAA,EACvC;AAAA,EAYA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,UAAI,KAAK,MAAM,UAAU;AACvB,eAAO,KAAK,MAAM;AAAA,MACpB;AAEA,aACE,8CAAC,SAAI,OAAO,EAAE,SAAS,IAAI,WAAW,SAAS,GAC7C;AAAA,qDAAC,QAAG,kCAAoB;AAAA,QACxB,6CAAC,OAAG,eAAK,MAAM,OAAO,SAAQ;AAAA,QAC7B,KAAK,MAAM,mBAAmB,CAAC,KAAK,MAAM,aACzC,8CAAC,SACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,OAAO,KAAK,MAAM;AAAA,cAClB,UAAU,CAAC,MAAM,KAAK,SAAS,EAAE,SAAS,EAAE,OAAO,MAAM,CAAC;AAAA,cAC1D,OAAO,EAAE,OAAO,QAAQ,WAAW,IAAI,WAAW,GAAG;AAAA;AAAA,UACvD;AAAA,UACA,6CAAC,YAAO,SAAS,KAAK,qBAAqB,OAAO,EAAE,WAAW,EAAE,GAAG,oBAEpE;AAAA,WACF;AAAA,QAED,KAAK,MAAM,aAAa,6CAAC,OAAE,0CAA4B;AAAA,SAC1D;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;AA9Da,cACJ,cAAc;;;ACnBvB,IAAAC,gBAA2B;AAG3B,SAAS,gBAAgB;AACvB,QAAM,UAAM,0BAAW,iBAAiB;AACxC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,sDAAsD;AAChF,SAAO;AACT;AAEO,SAAS,WAAW;AACzB,QAAM,aAAa,cAAc;AACjC,SAAO;AAAA,IACL,OAAO,CAAC,WAAmB,aAAuC,WAAW,MAAM,WAAW,QAAQ;AAAA,IACtG,eAAe,MAAM,WAAW,cAAc;AAAA,EAChD;AACF;AAEO,SAAS,QAAW,UAAkB,cAAoB;AAC/D,QAAM,aAAa,cAAc;AACjC,SAAO,WAAW,QAAQ,UAAU,YAAY;AAClD;AAEO,SAAS,iBAAiB;AAC/B,SAAO;AAAA,IACL,GAAG,CAAC,QAAgB;AAAA,IACpB,QAAQ;AAAA,EACV;AACF;","names":["import_react","import_react","import_jsx_runtime","React","import_react"]}

package/dist/index.mjs

@@ -0,0 +1,137 @@
+// src/ExperienceProvider.tsx
+import { useEffect, useRef } from "react";
+import { Experience } from "@shellapps/experience";
+
+// src/context.ts
+import { createContext } from "react";
+var ExperienceContext = createContext(null);
+
+// src/ExperienceProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function ExperienceProvider({ appId, apiKey, profileId, options, children }) {
+  const instanceRef = useRef(null);
+  if (!instanceRef.current) {
+    const instance = Experience.init({ appId, apiKey, ...options });
+    if (profileId) instance.identify(profileId);
+    instanceRef.current = instance;
+  }
+  useEffect(() => {
+    if (profileId && instanceRef.current) {
+      instanceRef.current.identify(profileId);
+    }
+  }, [profileId]);
+  useEffect(() => {
+    const handler = (e) => {
+      let el = e.target;
+      while (el) {
+        const tid = el.getAttribute?.("data-t");
+        if (tid) {
+          instanceRef.current?.track("element_click", { elementTid: tid });
+          break;
+        }
+        el = el.parentElement;
+      }
+    };
+    document.addEventListener("click", handler, true);
+    return () => document.removeEventListener("click", handler, true);
+  }, []);
+  useEffect(() => {
+    return () => {
+      instanceRef.current?.shutdown();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(ExperienceContext.Provider, { value: instanceRef.current, children });
+}
+
+// src/ErrorBoundary.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ErrorBoundary = class extends React2.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      hasError: false,
+      error: null,
+      comment: "",
+      submitted: false
+    };
+    this.handleSubmitComment = () => {
+      if (this.state.comment.trim() && this.state.error) {
+        this.context?.captureMessage(
+          `User feedback: ${this.state.comment}`,
+          "info"
+        );
+        this.setState({ submitted: true });
+      }
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.context?.captureError(error, {
+      componentStack: errorInfo.componentStack || ""
+    });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { style: { padding: 20, textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx2("h2", { children: "Something went wrong" }),
+        /* @__PURE__ */ jsx2("p", { children: this.state.error?.message }),
+        this.props.showCommentForm && !this.state.submitted && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2(
+            "textarea",
+            {
+              placeholder: "Tell us what happened...",
+              value: this.state.comment,
+              onChange: (e) => this.setState({ comment: e.target.value }),
+              style: { width: "100%", minHeight: 80, marginTop: 10 }
+            }
+          ),
+          /* @__PURE__ */ jsx2("button", { onClick: this.handleSubmitComment, style: { marginTop: 8 }, children: "Submit" })
+        ] }),
+        this.state.submitted && /* @__PURE__ */ jsx2("p", { children: "Thank you for your feedback!" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+ErrorBoundary.contextType = ExperienceContext;
+
+// src/hooks.ts
+import { useContext } from "react";
+function useExperience() {
+  const ctx = useContext(ExperienceContext);
+  if (!ctx) throw new Error("useExperience must be used within ExperienceProvider");
+  return ctx;
+}
+function useTrack() {
+  const experience = useExperience();
+  return {
+    track: (eventName, metadata) => experience.track(eventName, metadata),
+    trackPageView: () => experience.trackPageView()
+  };
+}
+function useFlag(flagName, defaultValue) {
+  const experience = useExperience();
+  return experience.getFlag(flagName, defaultValue);
+}
+function useTranslation() {
+  return {
+    t: (key) => key,
+    locale: "en"
+  };
+}
+export {
+  ErrorBoundary,
+  ExperienceContext,
+  ExperienceProvider,
+  useFlag,
+  useTrack,
+  useTranslation
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ExperienceProvider.tsx","../src/context.ts","../src/ErrorBoundary.tsx","../src/hooks.ts"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Experience } from '@shellapps/experience';\nimport type { ExperienceConfig } from '@shellapps/experience';\nimport { ExperienceContext } from './context';\n\nexport interface ExperienceProviderProps {\n  appId: string;\n  apiKey: string;\n  profileId?: string;\n  options?: Partial<Omit<ExperienceConfig, 'appId' | 'apiKey'>>;\n  children: React.ReactNode;\n}\n\nexport function ExperienceProvider({ appId, apiKey, profileId, options, children }: ExperienceProviderProps) {\n  const instanceRef = useRef<Experience | null>(null);\n\n  if (!instanceRef.current) {\n    const instance = Experience.init({ appId, apiKey, ...options });\n    if (profileId) instance.identify(profileId);\n    instanceRef.current = instance;\n  }\n\n  useEffect(() => {\n    if (profileId && instanceRef.current) {\n      instanceRef.current.identify(profileId);\n    }\n  }, [profileId]);\n\n  // data-t auto-tracking\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      let el = e.target as HTMLElement | null;\n      while (el) {\n        const tid = el.getAttribute?.('data-t');\n        if (tid) {\n          instanceRef.current?.track('element_click', { elementTid: tid });\n          break;\n        }\n        el = el.parentElement;\n      }\n    };\n    document.addEventListener('click', handler, true);\n    return () => document.removeEventListener('click', handler, true);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      instanceRef.current?.shutdown();\n    };\n  }, []);\n\n  return (\n    <ExperienceContext.Provider value={instanceRef.current}>\n      {children}\n    </ExperienceContext.Provider>\n  );\n}\n","import { createContext } from 'react';\nimport type { Experience } from '@shellapps/experience';\n\nexport const ExperienceContext = createContext<Experience | null>(null);\n","import React from 'react';\nimport type { Experience } from '@shellapps/experience';\nimport { ExperienceContext } from './context';\n\ninterface ErrorBoundaryProps {\n  fallback?: React.ReactNode;\n  showCommentForm?: boolean;\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n  children: React.ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n  comment: string;\n  submitted: boolean;\n}\n\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  static contextType = ExperienceContext;\n  declare context: Experience | null;\n\n  state: ErrorBoundaryState = {\n    hasError: false,\n    error: null,\n    comment: '',\n    submitted: false,\n  };\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.context?.captureError(error, {\n      componentStack: errorInfo.componentStack || '',\n    });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  private handleSubmitComment = () => {\n    if (this.state.comment.trim() && this.state.error) {\n      this.context?.captureMessage(\n        `User feedback: ${this.state.comment}`,\n        'info',\n      );\n      this.setState({ submitted: true });\n    }\n  };\n\n  render() {\n    if (this.state.hasError) {\n      if (this.props.fallback) {\n        return this.props.fallback;\n      }\n\n      return (\n        <div style={{ padding: 20, textAlign: 'center' }}>\n          <h2>Something went wrong</h2>\n          <p>{this.state.error?.message}</p>\n          {this.props.showCommentForm && !this.state.submitted && (\n            <div>\n              <textarea\n                placeholder=\"Tell us what happened...\"\n                value={this.state.comment}\n                onChange={(e) => this.setState({ comment: e.target.value })}\n                style={{ width: '100%', minHeight: 80, marginTop: 10 }}\n              />\n              <button onClick={this.handleSubmitComment} style={{ marginTop: 8 }}>\n                Submit\n              </button>\n            </div>\n          )}\n          {this.state.submitted && <p>Thank you for your feedback!</p>}\n        </div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n","import { useContext } from 'react';\nimport { ExperienceContext } from './context';\n\nfunction useExperience() {\n  const ctx = useContext(ExperienceContext);\n  if (!ctx) throw new Error('useExperience must be used within ExperienceProvider');\n  return ctx;\n}\n\nexport function useTrack() {\n  const experience = useExperience();\n  return {\n    track: (eventName: string, metadata?: Record<string, unknown>) => experience.track(eventName, metadata),\n    trackPageView: () => experience.trackPageView(),\n  };\n}\n\nexport function useFlag<T>(flagName: string, defaultValue: T): T {\n  const experience = useExperience();\n  return experience.getFlag(flagName, defaultValue);\n}\n\nexport function useTranslation() {\n  return {\n    t: (key: string) => key,\n    locale: 'en' as const,\n  };\n}\n"],"mappings":"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","names":["React","jsx","React"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@shellapps/experience-react",
+  "version": "1.0.0",
+  "description": "React SDK for @shellapps/experience",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "react",
+    "analytics",
+    "experience",
+    "shellapps"
+  ],
+  "author": "Alex Hewitt-Procter <alexhp@hotmail.co.uk>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@shellapps/experience": "^1.0.0",
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.60",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShellTechnology/shellapps-js.git",
+    "directory": "packages/experience-react"
+  },
+  "gitHead": "97840ec6e98bfb5289b83abbe5f618ef3c4c663f"
+}