@contentful/react-apps-toolkit 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Contentful
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/SDKProvider.d.ts

@@ -0,0 +1,14 @@
+import { KnownSDK } from '@contentful/app-sdk';
+import { FC, ReactElement } from 'react';
+export declare const SDKContext: import("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,44 @@
+"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 });
+exports.SDKProvider = exports.SDKContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var app_sdk_1 = require("@contentful/app-sdk");
+var react_1 = require("react");
+exports.SDKContext = (0, react_1.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
+ */
+var SDKProvider = function (props) {
+    var _a = (0, react_1.useState)(), sdk = _a[0], setSDK = _a[1];
+    (0, react_1.useEffect)(function () {
+        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) {
+            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/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

@@ -0,0 +1,4 @@
+export * from './SDKProvider';
+export * from './useCMA';
+export * from './useFieldValue';
+export * from './useSDK';

package/dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SDKProvider"), exports);
+__exportStar(require("./useCMA"), exports);
+__exportStar(require("./useFieldValue"), exports);
+__exportStar(require("./useSDK"), 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;

package/dist/useCMA.js

@@ -0,0 +1,25 @@
+"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 () {
+        var _a;
+        return (0, contentful_management_1.createClient)({ apiAdapter: sdk.cmaAdapter }, {
+            type: 'plain',
+            defaults: {
+                environmentId: (_a = sdk.ids.environmentAlias) !== null && _a !== void 0 ? _a : 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/useFieldValue.d.ts

@@ -0,0 +1,15 @@
+import { SerializedJSONValue } from '@contentful/app-sdk';
+export declare type UseFieldValueReturnValue<Value = unknown> = [
+    value: Value | undefined,
+    setValue: (newValue: Value | undefined) => Promise<SerializedJSONValue | undefined>
+];
+/**
+ * Returns field value and a function to update it.
+ * Must be wrapped by SDKProvider.
+ * Can only be used when app is rendered in field, sidebar or entry editor location.
+ *
+ * @param {string=} fieldId Id of the field to read and update. Can be omitted when app is rendered in field location.
+ * @param {string=} locale Locale to read and update. When omitted, default locale is used.
+ * @returns {UseFieldValueReturnValue} Field value, function to update it
+ */
+export declare function useFieldValue<Value = unknown>(fieldId?: string, locale?: string): UseFieldValueReturnValue<Value>;

package/dist/useFieldValue.js

@@ -0,0 +1,84 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __generator = (this && this.__generator) || function (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 (_) 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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldValue = void 0;
+var react_1 = require("react");
+var useSDK_1 = require("./useSDK");
+/**
+ * Returns field value and a function to update it.
+ * Must be wrapped by SDKProvider.
+ * Can only be used when app is rendered in field, sidebar or entry editor location.
+ *
+ * @param {string=} fieldId Id of the field to read and update. Can be omitted when app is rendered in field location.
+ * @param {string=} locale Locale to read and update. When omitted, default locale is used.
+ * @returns {UseFieldValueReturnValue} Field value, function to update it
+ */
+function useFieldValue(fieldId, locale) {
+    var _this = this;
+    var sdk = (0, useSDK_1.useSDK)();
+    var entryFieldApi = (0, react_1.useMemo)(function () { return getEntryFieldApi(sdk, fieldId); }, [sdk, fieldId]);
+    var localeWithDefault = locale !== null && locale !== void 0 ? locale : sdk.locales.default;
+    var _a = (0, react_1.useState)(entryFieldApi.getValue(localeWithDefault)), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () { return entryFieldApi.onValueChanged(localeWithDefault, setValue); }, [entryFieldApi, localeWithDefault]);
+    var updateValue = (0, react_1.useCallback)(function (newValue) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setValue(newValue);
+                    return [4 /*yield*/, entryFieldApi.setValue(newValue, localeWithDefault)];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, [entryFieldApi, localeWithDefault]);
+    return [value, updateValue];
+}
+exports.useFieldValue = useFieldValue;
+function getEntryFieldApi(sdk, fieldId) {
+    if (!('entry' in sdk)) {
+        throw new Error('`useFieldValue` can only be used in field, sidebar or entry editor location.');
+    }
+    var fieldIdWithDefault = fieldId !== null && fieldId !== void 0 ? fieldId : ('field' in sdk ? sdk.field.id : undefined);
+    if (!fieldIdWithDefault) {
+        throw new Error('Missing `fieldId`. The `fieldId` can only be omitted when your app is renderd in field location.');
+    }
+    var field = sdk.entry.fields[fieldIdWithDefault];
+    if (!field) {
+        throw new Error("Invalid `fieldId`. The current entry does not have a field \"".concat(fieldIdWithDefault, "\"."));
+    }
+    return field;
+}

package/dist/useFieldValue.spec.d.ts

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

package/dist/useFieldValue.spec.js

@@ -0,0 +1,249 @@
+"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 __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __generator = (this && this.__generator) || function (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 (_) 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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var useFieldValue_1 = require("./useFieldValue");
+var useSDK_1 = require("./useSDK");
+var mockSDK = {
+    field: {
+        id: 'fieldId',
+    },
+    locales: {
+        default: 'defaultLocale',
+    },
+    entry: {
+        fields: {
+            fieldId: {
+                getValue: function (locale) { return "fieldId ".concat(locale, " value"); },
+                onValueChanged: jest.fn(),
+                setValue: jest.fn(),
+            },
+            otherFieldId: {
+                getValue: function (locale) { return "otherFieldId ".concat(locale, " value"); },
+                onValueChanged: jest.fn(),
+                setValue: jest.fn(),
+            },
+        },
+    },
+};
+jest.mock('./useSDK', function () { return (__assign(__assign({}, jest.requireActual('./useSDK')), { useSDK: jest.fn() })); });
+var useSDKMock = useSDK_1.useSDK;
+beforeEach(function () {
+    jest.resetAllMocks();
+    mockSDK.entry.fields.fieldId.onValueChanged.mockImplementation(function () { return function () { }; });
+    mockSDK.entry.fields.fieldId.setValue.mockImplementation(function () { return Promise.resolve('return value'); });
+    mockSDK.entry.fields.otherFieldId.onValueChanged.mockImplementation(function () { return function () { }; });
+    mockSDK.entry.fields.otherFieldId.setValue.mockImplementation(function () {
+        return Promise.resolve('other return value');
+    });
+});
+describe('useFieldValue', function () {
+    describe('throws error', function () {
+        it('when rendered in wrong location', function () {
+            useSDKMock.mockImplementation(function () { return ({}); });
+            var result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)(); }).result;
+            expect(function () {
+                expect(result.current).not.toBe(undefined);
+            }).toThrowErrorMatchingInlineSnapshot("\"`useFieldValue` can only be used in field, sidebar or entry editor location.\"");
+        });
+        it('when rendered omitting `fieldId` outside of field location', function () {
+            // @ts-expect-error
+            useSDKMock.mockImplementation(function () { return ({
+                entry: mockSDK.entry,
+            }); });
+            var result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)(); }).result;
+            expect(function () {
+                expect(result.current).not.toBe(undefined);
+            }).toThrowErrorMatchingInlineSnapshot("\"Missing `fieldId`. The `fieldId` can only be omitted when your app is renderd in field location.\"");
+        });
+        it('when providing unknown `fieldId`', function () {
+            // @ts-expect-error
+            useSDKMock.mockImplementation(function () { return mockSDK; });
+            var result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)('unknownFieldId'); }).result;
+            expect(function () {
+                expect(result.current).not.toBe(undefined);
+            }).toThrowErrorMatchingInlineSnapshot("\"Invalid `fieldId`. The current entry does not have a field \\\"unknownFieldId\\\".\"");
+        });
+    });
+    describe('with no params', function () {
+        var result;
+        beforeEach(function () {
+            // @ts-expect-error
+            useSDKMock.mockImplementation(function () { return mockSDK; });
+            result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)(); }).result;
+        });
+        it('returns initial value', function () {
+            expect(result.current[0]).toBe('fieldId defaultLocale value');
+        });
+        it('updates value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, react_hooks_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, result.current[1]('new value')];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _a.sent();
+                        expect(result.current[0]).toBe('new value');
+                        expect(mockSDK.entry.fields['fieldId'].setValue).toHaveBeenCalledWith('new value', 'defaultLocale');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('updates value when `onValueChanged` is called', function () {
+            var calls = mockSDK.entry.fields.fieldId.onValueChanged.mock.calls;
+            expect(calls[0][0]).toBe('defaultLocale');
+            (0, react_hooks_1.act)(function () { return calls[0][1]('new value'); });
+            expect(result.current[0]).toBe('new value');
+        });
+        it('returns the updated value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var returnedValue;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, react_hooks_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, result.current[1]('new value')];
+                                    case 1:
+                                        returnedValue = _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _a.sent();
+                        expect(returnedValue).toBe('return value');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('with `fieldId`', function () {
+        var result;
+        beforeEach(function () {
+            // @ts-expect-error
+            useSDKMock.mockImplementation(function () { return mockSDK; });
+            result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)('otherFieldId'); }).result;
+        });
+        it('returns initial value', function () {
+            expect(result.current[0]).toBe('otherFieldId defaultLocale value');
+        });
+        it('updates value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, react_hooks_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, result.current[1]('new value')];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _a.sent();
+                        expect(result.current[0]).toBe('new value');
+                        expect(mockSDK.entry.fields['otherFieldId'].setValue).toHaveBeenCalledWith('new value', 'defaultLocale');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('updates value when `onValueChanged` is called', function () {
+            var calls = mockSDK.entry.fields.otherFieldId.onValueChanged.mock.calls;
+            expect(calls[0][0]).toBe('defaultLocale');
+            (0, react_hooks_1.act)(function () { return calls[0][1]('new value'); });
+            expect(result.current[0]).toBe('new value');
+        });
+    });
+    describe('with `locale`', function () {
+        var result;
+        beforeEach(function () {
+            // @ts-expect-error
+            useSDKMock.mockImplementation(function () { return mockSDK; });
+            result = (0, react_hooks_1.renderHook)(function () { return (0, useFieldValue_1.useFieldValue)('fieldId', 'locale'); }).result;
+        });
+        it('returns initial value', function () {
+            expect(result.current[0]).toBe('fieldId locale value');
+        });
+        it('updates value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, react_hooks_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, result.current[1]('new value')];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _a.sent();
+                        expect(result.current[0]).toBe('new value');
+                        expect(mockSDK.entry.fields['fieldId'].setValue).toHaveBeenCalledWith('new value', 'locale');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('updates value when `onValueChanged` is called', function () {
+            var calls = mockSDK.entry.fields.fieldId.onValueChanged.mock.calls;
+            expect(calls[0][0]).toBe('locale');
+            (0, react_hooks_1.act)(function () { return calls[0][1]('new value'); });
+            expect(result.current[0]).toBe('new value');
+        });
+    });
+});

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 this hook is used inside the SDKProvider');
+    }
+    return sdk;
+}
+exports.useSDK = useSDK;

package/dist/useSDK.spec.d.ts

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

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": "1.0.0",
+  "version": "1.0.2",
   "description": "Toolkit for building a Contentful app in React",
   "keywords": [],
   "author": "Contentful GmbH",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.3",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "jest": "^27.5.0",
@@ -50,5 +50,6 @@
   "dependencies": {
     "@contentful/app-sdk": "^4.0.0",
     "contentful-management": ">=7.30.0"
-  }
+  },
+  "gitHead": "2d1dc051ed88de975125555694539a430be0126b"
 }