@contentful/react-apps-toolkit 0.2.1 → 0.4.1

package/README.md

@@ -20,6 +20,14 @@ yarn add @contentful/react-apps-toolkit
 
 The following hooks and utilities are exported from the package: Nothing
 
+#### SDKProvider
+
+Wrapper component, which makes the Apps SDK available to children via React Context. To use any of the hooks contained in this package, an application must be wrapped in the SDK provider, as all hooks depend on the Apps SDK.
+
+#### useCMA
+
+Returns an initialized client for the Contentful Management API, which can immediately be used to communicate with the rest of your Contentful space. [Contentful Management API docs](https://www.contentful.com/developers/docs/references/content-management-api/).
+
 ### Resources
 
 - [Create Contentful App](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/)

package/dist/SDKProvider.js

@@ -19,6 +19,7 @@ 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 });
+var DELAY_TIMEOUT = 4 * 1000;
 /**
  * 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
@@ -26,7 +27,14 @@ exports.SDKContext = react_1.default.createContext({ sdk: null });
 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);
+        var timeout = window.setTimeout(function () {
+            console.warn("Your app is taking longer than expected to initialize. If you think this is an error with Contentful's App SDK, let us know: https://github.com/contentful/ui-extensions-sdk/issues");
+        }, DELAY_TIMEOUT);
+        (0, app_sdk_1.init)(function (sdk) {
+            setSDK(sdk);
+            window.clearTimeout(timeout);
+        });
+        return function () { return window.clearTimeout(timeout); };
     }, []);
     if (!sdk) {
         if (props.loading) {

package/dist/SDKProvider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/SDKProvider.spec.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var SDKProvider_1 = require("./SDKProvider");
+var app_sdk_1 = require("@contentful/app-sdk");
+jest.useFakeTimers();
+jest.mock('@contentful/app-sdk', function () { return ({
+    init: jest.fn(),
+}); });
+describe('SDKProvider', function () {
+    var consoleWarnMock;
+    beforeEach(function () {
+        // @ts-ignore
+        app_sdk_1.init.mockImplementation(function (callback) {
+            callback({});
+        });
+        consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+    });
+    afterEach(function () {
+        consoleWarnMock === null || consoleWarnMock === void 0 ? void 0 : consoleWarnMock.mockRestore();
+    });
+    it('renders its children when sdk the init returns the sdk', function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }) })).getByText;
+        expect(getByText('children')).toBeTruthy();
+    });
+    it('calls console warn after timeout if callback is not returning ', function () {
+        // @ts-ignore
+        app_sdk_1.init.mockImplementation(function () { });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }) }));
+        jest.runAllTimers();
+        expect(consoleWarnMock).toHaveBeenCalled();
+    });
+});

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useSDK';
 export * from './SDKProvider';
+export * from './useCMA';

package/dist/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useSDK"), exports);
 __exportStar(require("./SDKProvider"), exports);
+__exportStar(require("./useCMA"), exports);

package/dist/useCMA.d.ts

@@ -0,0 +1,6 @@
+import { PlainClientAPI } from 'contentful-management';
+/**
+ * React hook returning a CMA plain client instance.
+ * Must be used in the `SDKProvider` component. Will throw error, if called outside of `SDKProvider`.
+ */
+export declare function useCMA(): PlainClientAPI | undefined;

package/dist/useCMA.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCMA = void 0;
+var contentful_management_1 = require("contentful-management");
+var react_1 = require("react");
+var useSDK_1 = require("./useSDK");
+/**
+ * React hook returning a CMA plain client instance.
+ * Must be used in the `SDKProvider` component. Will throw error, if called outside of `SDKProvider`.
+ */
+function useCMA() {
+    var sdk = (0, useSDK_1.useSDK)();
+    var cma = (0, react_1.useMemo)(function () {
+        return (0, contentful_management_1.createClient)({ apiAdapter: sdk.cmaAdapter }, {
+            type: 'plain',
+            defaults: {
+                environmentId: sdk.ids.environment,
+                spaceId: sdk.ids.space,
+            },
+        });
+    }, [sdk]);
+    return cma;
+}
+exports.useCMA = useCMA;

package/dist/useCMA.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/useCMA.spec.js

@@ -0,0 +1,36 @@
+"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 useCMA_1 = require("./useCMA");
+var mockedCma = 'mocked-cma';
+var mockedSdk = {
+    cmaAdapter: 'placholder',
+    ids: {
+        environment: 'placeholder',
+        space: 'placeholder',
+    },
+};
+jest.mock('./useSDK', function () { return (__assign(__assign({}, jest.requireActual('./useSDK')), { useSDK: function () { return mockedSdk; } })); });
+jest.mock('./SDKProvider', function () { return ({
+    SDKContext: {},
+}); });
+jest.mock('contentful-management', function () {
+    return __assign(__assign({}, jest.requireActual('contentful-management')), { createClient: function () { return mockedCma; } });
+});
+describe('useCMA', function () {
+    test('should return cma client', function () {
+        var result = (0, react_hooks_1.renderHook)(function () { return (0, useCMA_1.useCMA)(); }).result;
+        expect(result.current).toBe(mockedCma);
+    });
+});

package/dist/useSDK.js

@@ -11,7 +11,7 @@ var SDKProvider_1 = require("./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');
+        throw new Error('SDKContext not found. Make sure this hook is used inside the SDKProvider');
     }
     return sdk;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/react-apps-toolkit",
-  "version": "0.2.1",
+  "version": "0.4.1",
   "description": "Toolkit for building a Contentful app in React",
   "keywords": [],
   "author": "Contentful GmbH",
@@ -39,6 +39,7 @@
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "jest": "^27.5.0",
+    "react": "^17.0.2",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },
@@ -46,7 +47,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@contentful/app-sdk": "^4.0.0"
+    "@contentful/app-sdk": "^4.0.0",
+    "contentful-management": ">=7.30.0"
   },
-  "gitHead": "97a40b53cd03af999d289ac3e40ae90149d9c92a"
+  "gitHead": "c46d32ec211a13f7e023d481b79e669f8e7b9001"
 }