@contentful/react-apps-toolkit 0.1.2 → 0.2.0

package/dist/SDKProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { FC, ReactElement } from 'react';
+import { KnownSDK } from '@contentful/app-sdk';
+export declare const SDKContext: React.Context<{
+    sdk: KnownSDK | null;
+}>;
+interface SDKProviderProps {
+    loading?: ReactElement;
+}
+/**
+ * The Component providing the AppSdk, the useSDK hook can only be used within this Provider
+ * @param props.loading an optional loading element that gets rendered while initializing the app
+ */
+export declare const SDKProvider: FC<SDKProviderProps>;
+export {};

package/dist/SDKProvider.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SDKProvider = exports.SDKContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var app_sdk_1 = require("@contentful/app-sdk");
+exports.SDKContext = react_1.default.createContext({ sdk: null });
+/**
+ * The Component providing the AppSdk, the useSDK hook can only be used within this Provider
+ * @param props.loading an optional loading element that gets rendered while initializing the app
+ */
+var SDKProvider = function (props) {
+    var _a = react_1.default.useState(), sdk = _a[0], setSDK = _a[1];
+    react_1.default.useEffect(function () {
+        (0, app_sdk_1.init)(setSDK);
+    }, []);
+    if (!sdk) {
+        if (props.loading) {
+            return props.loading;
+        }
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(exports.SDKContext.Provider, __assign({ value: { sdk: sdk } }, { children: props.children }));
+};
+exports.SDKProvider = SDKProvider;

package/dist/index.d.ts

@@ -1 +1,2 @@
-export declare const useHelloWorld: () => string;
+export * from './useSDK';
+export * from './SDKProvider';

package/dist/index.js

@@ -1,7 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHelloWorld = void 0;
-var useHelloWorld = function () {
-    return 'hello world';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.useHelloWorld = useHelloWorld;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useSDK"), exports);
+__exportStar(require("./SDKProvider"), exports);

package/dist/useSDK.d.ts

@@ -0,0 +1,7 @@
+import { KnownSDK } from '@contentful/app-sdk';
+/**
+ * A react hook returning the App SDK.
+ *  - The type of SDK varies depending on the location where it is used.
+ *  - As it is depending on the context providing the SDK, the hook can only be used within the SDKProvider
+ */
+export declare function useSDK<SDK extends KnownSDK = KnownSDK>(): SDK;

package/dist/useSDK.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSDK = void 0;
+var react_1 = require("react");
+var SDKProvider_1 = require("./SDKProvider");
+/**
+ * A react hook returning the App SDK.
+ *  - The type of SDK varies depending on the location where it is used.
+ *  - As it is depending on the context providing the SDK, the hook can only be used within the SDKProvider
+ */
+function useSDK() {
+    var sdk = (0, react_1.useContext)(SDKProvider_1.SDKContext).sdk;
+    if (!sdk) {
+        throw new Error('SDKContext not found. Make sure the useSDK hook is used inside the SDKProvider');
+    }
+    return sdk;
+}
+exports.useSDK = useSDK;

package/dist/useSDK.spec.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var index_1 = require("./index");
+var mockedSdk = 'mocked-sdk';
+jest.mock('react', function () {
+    return __assign(__assign({}, jest.requireActual('react')), { useContext: function () { return ({ sdk: mockedSdk }); } });
+});
+jest.mock('./SDKProvider', function () { return ({
+    SDKContext: {},
+}); });
+describe('useSDK', function () {
+    test('should return the sdk from the context', function () {
+        var result = (0, react_hooks_1.renderHook)(function () { return (0, index_1.useSDK)(); }).result;
+        expect(result.current).toBe('mocked-sdk');
+    });
+    test('should throw when the sdk is not in context', function () {
+        mockedSdk = undefined;
+        var result = (0, react_hooks_1.renderHook)(function () { return (0, index_1.useSDK)(); }).result;
+        expect(function () {
+            expect(result.current).not.toBe(undefined);
+        }).toThrow();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/react-apps-toolkit",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Toolkit for building a Contentful app in React",
   "keywords": [],
   "author": "Contentful GmbH",
@@ -45,5 +45,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79bec506a5972dc4bcc51018bf5bb325397bb2a0"
+  "dependencies": {
+    "@contentful/app-sdk": "^4.0.0"
+  },
+  "gitHead": "2066aafb2513dcd00c4894259667dd7a68aa6fa6"
 }

package/dist/index.spec.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_hooks_1 = require("@testing-library/react-hooks");
-var index_1 = require("./index");
-test('should increment counter', function () {
-    var result = (0, react_hooks_1.renderHook)(function () { return (0, index_1.useHelloWorld)(); }).result;
-    expect(result.current).toBe('hello world');
-});