@screeb/sdk-react 0.1.0

package/README.md

@@ -0,0 +1,101 @@
+<p align="center">
+  <a href="https://screeb.app" alt="Screeb">
+    <img src="https://raw.githubusercontent.com/ScreebApp/sdk-js/master/packages/screeb-sdk-react/readme/screeb-logo.svg?token=GHSAT0AAAAAAB2OOPMGT2QD5TL3IRJN3CKCZDEYHJA" alt="Logo" height="120px" style="margin-top: 20px;"/>
+  </a>
+</p>
+<h1 align="center">@screeb/sdk-react</h1>
+<p align="center">
+  Screeb's browser sdk, optimized for React.
+
+  <b>Continuous Product Discovery, Without the Time Sink.</b>
+
+  <a href="https://screeb.app" alt="Screeb">Screeb</a> is the only Continuous Product Discovery platform that lets you analyse users' behaviour, ask in-app questions, recruit people for interviews and analyse data in a blink with AI.
+</p>
+
+<p align="center">
+  <a href="https://github.com/ScreebApp/sdk-js/actions/workflows/node.js.yml" alt="ci">
+    <img alt="ci" src="https://github.com/ScreebApp/sdk-js/actions/workflows/node.js.yml/badge.svg">
+  </a>
+  <a href="https://www.npmjs.com/package/@screeb/sdk-react" alt="version">
+    <img alt="version" src="https://img.shields.io/npm/v/@screeb/sdk-react.svg" />
+  </a>
+  <a href="https://bundlephobia.com/package/@screeb/sdk-react" alt="min size">
+    <img alt="min size" src="https://img.shields.io/bundlephobia/min/@screeb/sdk-react">
+  </a>
+  <a href="https://bundlephobia.com/package/@screeb/sdk-react" alt="minzipped size">
+    <img alt="minzipped size" src="https://img.shields.io/bundlephobia/minzip/@screeb/sdk-react">
+  </a>
+<img alt="downloads" src="https://badgen.net/npm/dw/@screeb/sdk-react" />
+</p>
+
+
+## Installation
+
+This library is published in the NPM registry and can be installed using any compatible package manager.
+
+```bash
+npm install @screeb/sdk-react --save
+
+# For Yarn, use the command below.
+yarn add @screeb/sdk-react
+```
+
+## Usage
+
+Basic usage:
+```ts
+import * as React from 'react';
+
+import { ScreebProvider, useScreeb } from '@screeb/sdk-react';
+
+const SCREEB_APP_ID = 'your-screeb-website-id';
+
+const App = () => (
+  <ScreebProvider
+    autoInit
+    websiteId={SCREEB_APP_ID}
+    userId="dev@screeb.app"
+    userProperties={{
+      firstname: "John",
+      lastname: "Smith",
+      last_seen_at: new Date(),
+      authenticated: true,
+      org_size: 20,
+    }}
+  >
+    <HomePage />
+  </ScreebProvider>
+);
+
+// Anywhere in your app
+const HomePage = () => {
+  const { trackEvent } = useScreeb();
+
+  const onButtonClicked = React.useCallback(
+    () => eventTrack(
+			"screeb-sdk-react-example started",
+			{ test: 123 }
+		);
+  );
+
+  return (
+    <button onClick={onButtonClicked}>
+      Track event!
+    </button>
+  );
+};
+```
+
+For a more advanced usage and a complete API documentation, see [documentation generated from source files](https://github.com/ScreebApp/sdk-js/tree/master/packages/screeb-sdk-react/docs).
+
+For further information, see [our developper documentation](https://github.com/ScreebApp/developers).
+
+## Support
+For any issues, please contact our support team at support@screeb.com.
+
+## Contributing
+All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.
+
+## License
+
+Released under [MIT License](https://github.com/ScreebApp/sdk-js/blob/master/LICENSE).

package/dist/es/context.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { ScreebContextValues } from "./types";
+declare const ScreebContext: React.Context<ScreebContextValues | undefined>;
+export default ScreebContext;

package/dist/es/index.d.ts

@@ -0,0 +1,3 @@
+export { ScreebProvider } from "./provider";
+export { useScreeb } from "./useScreeb";
+export * from "./types";

package/dist/es/index.js

@@ -0,0 +1,347 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Screeb from '@screeb/sdk-browser';
+import * as React from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+var ScreebContext = React.createContext(undefined);
+
+/**
+ * Logs messages in the console with a corresponding urgency
+ *
+ * @param level the urgency of the message
+ * @param message the message to log in the console
+ */
+var log = function (level, message) {
+    var packageName = "[@screeb/react-sdk]";
+    switch (level) {
+        case "info":
+            // eslint-disable-next-line no-console
+            console.log("".concat(packageName, " ").concat(message));
+            break;
+        case "warn":
+            // eslint-disable-next-line no-console
+            console.warn("".concat(packageName, " ").concat(message));
+            break;
+        case "error":
+            // eslint-disable-next-line no-console
+            console.error("".concat(packageName, " ").concat(message));
+            break;
+        default:
+            // eslint-disable-next-line no-console
+            console.log("".concat(packageName, " ").concat(message));
+    }
+};
+
+var isSSR = typeof window === "undefined";
+
+var isInitialized = false;
+var ScreebProvider = function (_a) {
+    var websiteId = _a.websiteId, userId = _a.userId, userProperties = _a.userProperties, children = _a.children, _b = _a.shouldLoad, shouldLoad = _b === void 0 ? !isSSR : _b, _c = _a.autoInit, autoInit = _c === void 0 ? false : _c, options = _a.options, rest = __rest(_a, ["websiteId", "userId", "userProperties", "children", "shouldLoad", "autoInit", "options"]);
+    var isLoaded = React.useRef(Screeb.isLoaded());
+    // Allow data-x attributes, see https://github.com/devrnt/react-use-screeb/issues/478
+    var invalidPropKeys = Object.keys(rest).filter(function (key) { return !key.startsWith("data-"); });
+    if (invalidPropKeys.length > 0) {
+        log("warn", [
+            "some invalid props were passed to ScreebProvider. ",
+            "Please check following props: ".concat(invalidPropKeys.join(", "), "."),
+        ].join(""));
+    }
+    var ensureScreeb = React.useCallback(
+    // eslint-disable-next-line no-unused-vars
+    function (functionName, callback, onlyLoaded) {
+        if (onlyLoaded === void 0) { onlyLoaded = false; }
+        return __awaiter(this, void 0, void 0, function () {
+            var message, message;
+            return __generator(this, function (_a) {
+                if (!Screeb.isLoaded() && !shouldLoad) {
+                    message = "Screeb instance is not loaded because `shouldLoad` is set to `false` in `ScreebProvider`";
+                    log("warn", message);
+                    return [2 /*return*/, Promise.reject(message)];
+                }
+                if (!isInitialized && !onlyLoaded) {
+                    message = [
+                        "\"".concat(functionName, "\" was called but Screeb has not been initialized yet. "),
+                        "Please call 'init' before calling '".concat(functionName, "' or "),
+                        "set 'autoInit' to true in the ScreebProvider.",
+                    ].join("");
+                    log("warn", message);
+                    return [2 /*return*/, Promise.reject(message)];
+                }
+                return [2 /*return*/, Promise.resolve(callback())];
+            });
+        });
+    }, [shouldLoad]);
+    var close = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isLoaded.current) return [3 /*break*/, 2];
+                    return [4 /*yield*/, Screeb.close()];
+                case 1:
+                    _a.sent();
+                    isLoaded.current = false;
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [isLoaded.current]);
+    var debug = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("debug", function () { return Screeb.debug(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var eventTrack = React.useCallback(function (eventName, eventProperties) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("eventTrack", function () {
+                        return Screeb.eventTrack(eventName, eventProperties);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var identity = React.useCallback(function (userId, userProperties) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("identity", function () {
+                        return Screeb.identity(userId, userProperties);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var identityGet = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("identityGet", function () { return Screeb.identityGet(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var identityGroupAssign = React.useCallback(function (groupName, groupType, groupProperties) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("identityGroupAssign", function () {
+                        return Screeb.identityGroupAssign(groupName, groupType, groupProperties);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var identityGroupUnassign = React.useCallback(function (groupName, groupType) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("identityGroupUnassign", function () {
+                        return Screeb.identityGroupUnassign(groupName, groupType);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var identityProperties = React.useCallback(function (userProperties) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("identityProperties", function () {
+                        return Screeb.identityProperties(userProperties);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var identityReset = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("identityReset", function () { return Screeb.identityReset(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var init = React.useCallback(function (websiteId, userId, userProperties) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("init", function () {
+                        if (!isInitialized) {
+                            Screeb.init(websiteId, userId, userProperties);
+                            isInitialized = true;
+                        }
+                    }, true)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [ensureScreeb, websiteId, shouldLoad]);
+    var load = React.useCallback(function (options) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!!isLoaded.current) return [3 /*break*/, 3];
+                    Screeb.load(options);
+                    isLoaded.current = true;
+                    if (!autoInit) return [3 /*break*/, 3];
+                    if (!websiteId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, init(websiteId, userId, userProperties)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    log("warn", "autoInit is set to true, but no websiteId have been provided.");
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [isLoaded.current, autoInit]);
+    var surveyClose = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("surveyClose", function () { return Screeb.surveyClose(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var surveyStart = React.useCallback(function (surveyId, allowMultipleResponses, hiddenFields) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, ensureScreeb("surveyStart", function () {
+                        return Screeb.surveyStart(surveyId, allowMultipleResponses, hiddenFields);
+                    })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, []);
+    var targetingCheck = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("targetingCheck", function () { return Screeb.targetingCheck(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var targetingDebug = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, ensureScreeb("targetingDebug", function () { return Screeb.targetingDebug(); })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    }); }); }, []);
+    var providerValue = React.useMemo(function () { return ({
+        close: close,
+        debug: debug,
+        eventTrack: eventTrack,
+        identity: identity,
+        identityGet: identityGet,
+        identityGroupAssign: identityGroupAssign,
+        identityGroupUnassign: identityGroupUnassign,
+        identityProperties: identityProperties,
+        identityReset: identityReset,
+        init: init,
+        load: load,
+        surveyClose: surveyClose,
+        surveyStart: surveyStart,
+        targetingCheck: targetingCheck,
+        targetingDebug: targetingDebug,
+    }); }, [
+        close,
+        debug,
+        eventTrack,
+        identity,
+        identityGet,
+        identityGroupAssign,
+        identityGroupUnassign,
+        identityProperties,
+        identityReset,
+        init,
+        load,
+        surveyClose,
+        surveyStart,
+        targetingCheck,
+        targetingDebug,
+    ]);
+    if (!isSSR && shouldLoad) {
+        load(options);
+    }
+    return (jsx(ScreebContext.Provider, __assign({ value: providerValue }, { children: children })));
+};
+var useScreebContext = function () {
+    var context = React.useContext(ScreebContext);
+    if (context === undefined) {
+        // eslint-disable-next-line quotes
+        throw new Error('"useScreeb" must be used within `ScreebProvider`.');
+    }
+    return context;
+};
+
+var useScreeb = function () {
+    return useScreebContext();
+};
+
+export { ScreebProvider, useScreeb };

package/dist/es/logger.d.ts

@@ -0,0 +1,9 @@
+type LogLevel = "info" | "error" | "warn";
+/**
+ * Logs messages in the console with a corresponding urgency
+ *
+ * @param level the urgency of the message
+ * @param message the message to log in the console
+ */
+export declare const log: (level: LogLevel, message: string) => void;
+export {};

package/dist/es/provider.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { ScreebContextValues, ScreebProviderProps } from "./types";
+export declare const ScreebProvider: React.FC<React.PropsWithChildren<ScreebProviderProps>>;
+export declare const useScreebContext: () => ScreebContextValues;