@hygraph/app-sdk-react 0.0.2

package/README.md

@@ -0,0 +1,15 @@
+# @hygraph/app-sdk-react
+
+React SDK for building Apps for Hygraph.
+
+## ⚡ Usage
+
+For docs, guides and examples, please visit [our official documentation](https://hygraph.com/docs/).
+
+## 📝 License
+
+Licensed under the MIT License.
+
+---
+
+Made with 💜 by Hygraph 👋 [join our community](https://slack.hygraph.com/)!

package/dist/Wrapper.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AppProps } from '@hygraph/app-sdk';
+import type { ExtensionDialogProps, FormSidebarExtensionProps } from '@hygraph/app-sdk';
+import type { FieldExtensionProps } from './hooks';
+type WrapperContext = AppProps | FieldExtensionProps | FormSidebarExtensionProps | (ExtensionDialogProps & Record<string, unknown>);
+type SDKState = 'init' | 'error' | 'ok' | 'validation';
+declare const WrapperContext: React.Context<WrapperContext>;
+type WrapperProps = {
+    uid?: string;
+    fallback?: React.FC<{
+        state: SDKState;
+    }>;
+    debug?: boolean;
+} & {
+    children: React.ReactNode;
+};
+export declare function Wrapper(props: WrapperProps): JSX.Element;
+export declare function useWrapperContext(): WrapperContext;
+export {};

package/dist/cjs/Wrapper.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AppProps } from '@hygraph/app-sdk';
+import type { ExtensionDialogProps, FormSidebarExtensionProps } from '@hygraph/app-sdk';
+import type { FieldExtensionProps } from './hooks';
+type WrapperContext = AppProps | FieldExtensionProps | FormSidebarExtensionProps | (ExtensionDialogProps & Record<string, unknown>);
+type SDKState = 'init' | 'error' | 'ok' | 'validation';
+declare const WrapperContext: React.Context<WrapperContext>;
+type WrapperProps = {
+    uid?: string;
+    fallback?: React.FC<{
+        state: SDKState;
+    }>;
+    debug?: boolean;
+} & {
+    children: React.ReactNode;
+};
+export declare function Wrapper(props: WrapperProps): JSX.Element;
+export declare function useWrapperContext(): WrapperContext;
+export {};

package/dist/cjs/Wrapper.js

@@ -0,0 +1,117 @@
+"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 (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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWrapperContext = exports.Wrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var app_sdk_1 = require("@hygraph/app-sdk");
+var WrapperContext = react_1.default.createContext({});
+function useInitSDK(uid, debug) {
+    if (debug === void 0) { debug = false; }
+    var _a = __read(react_1.default.useState(), 2), sdkProps = _a[0], setSdkProps = _a[1];
+    var _b = __read(react_1.default.useState('init'), 2), extensionState = _b[0], setExtensionState = _b[1];
+    react_1.default.useEffect(function () {
+        function initSdk() {
+            return __awaiter(this, void 0, void 0, function () {
+                var initialState, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, (0, app_sdk_1.init)({
+                                    uid: uid,
+                                    debug: debug,
+                                    onProps: setSdkProps,
+                                })];
+                        case 1:
+                            initialState = _a.sent();
+                            if (initialState.status === 'ok') {
+                                setSdkProps(initialState.props);
+                            }
+                            setExtensionState(initialState.status);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _a.sent();
+                            setExtensionState('error');
+                            console.error(error_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        initSdk();
+    }, [uid, debug]);
+    return { sdkProps: sdkProps, extensionState: extensionState };
+}
+function Wrapper(props) {
+    var children = props.children, uid = props.uid, _a = props.fallback, FallbackComponent = _a === void 0 ? DefaultFallbackComponent : _a, debug = props.debug;
+    var _b = useInitSDK(uid, debug), sdkProps = _b.sdkProps, extensionState = _b.extensionState;
+    if (extensionState != 'ok' || !sdkProps)
+        return react_1.default.createElement(FallbackComponent, { state: extensionState });
+    return react_1.default.createElement(WrapperContext.Provider, { value: sdkProps, children: children });
+}
+exports.Wrapper = Wrapper;
+function useWrapperContext() {
+    return react_1.default.useContext(WrapperContext);
+}
+exports.useWrapperContext = useWrapperContext;
+function DefaultFallbackComponent(_a) {
+    var state = _a.state;
+    return (react_1.default.createElement("p", null, state === 'error'
+        ? 'SDK connection error, check logs'
+        : 'Waiting for connection'));
+}

package/dist/cjs/hooks.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { FormSidebarExtensionProps, FieldExtensionProps as FieldExtensionPropsBase, AppInstallation } from '@hygraph/app-sdk';
+export declare function useFieldExtension(): FieldExtensionProps;
+export declare function useFormSidebarExtension(): FormSidebarExtensionProps;
+export declare function useUiExtensionDialog<DialogReturn = any, DialogProps = Record<string, unknown>>(): {
+    onCloseDialog: (value?: DialogReturn | null) => void;
+} & DialogProps;
+export declare function useApp(): {
+    readonly useUpdateInstallation: () => readonly [(arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>, {
+        readonly data: AppInstallation | undefined;
+        readonly error: string;
+        readonly loading: boolean;
+    }];
+    readonly updateInstallation: (arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>;
+    readonly installation: AppInstallation;
+    readonly context: import("@hygraph/app-sdk").Context;
+    readonly openDialog: import("@hygraph/app-sdk/dist/type-helpers/dialog").OpenDialog;
+    readonly showToast: import("@hygraph/app-sdk/dist/type-helpers/toast").ShowToast;
+    readonly openAssetPicker: import("@hygraph/app-sdk/dist/type-helpers/openAssetPicker").OpenAssetPicker;
+    readonly redirectParent: (location: string | Location) => Promise<void>;
+    readonly historyReplace: (url: string | ((href: string) => string)) => Promise<void>;
+    readonly historyPush: (url: string | ((href: string) => string)) => Promise<void>;
+};
+export interface FieldExtensionProps extends Omit<FieldExtensionPropsBase, 'onBlur' | 'onChange' | 'onFocus'> {
+    onBlur: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+    onChange: <T extends HTMLElement = HTMLElement>(event: React.ChangeEvent<T> | any) => Promise<void>;
+    onFocus: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+}

package/dist/cjs/hooks.js

@@ -0,0 +1,74 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApp = exports.useUiExtensionDialog = exports.useFormSidebarExtension = exports.useFieldExtension = void 0;
+var react_1 = __importDefault(require("react"));
+var Wrapper_1 = require("./Wrapper");
+function useFieldExtension() {
+    return (0, Wrapper_1.useWrapperContext)();
+}
+exports.useFieldExtension = useFieldExtension;
+function useFormSidebarExtension() {
+    return (0, Wrapper_1.useWrapperContext)();
+}
+exports.useFormSidebarExtension = useFormSidebarExtension;
+function useUiExtensionDialog() {
+    return (0, Wrapper_1.useWrapperContext)();
+}
+exports.useUiExtensionDialog = useUiExtensionDialog;
+function useApp() {
+    var appProps = (0, Wrapper_1.useWrapperContext)();
+    var installProps = useUpdateInstallation(appProps === null || appProps === void 0 ? void 0 : appProps.updateInstallation);
+    return __assign(__assign({}, appProps), { useUpdateInstallation: function () { return installProps; } });
+}
+exports.useApp = useApp;
+function useUpdateInstallation(installApp) {
+    var _a = __read(react_1.default.useState(false), 2), loading = _a[0], setLoading = _a[1];
+    var _b = __read(react_1.default.useState(''), 2), error = _b[0], setError = _b[1];
+    var _c = __read(react_1.default.useState(), 2), data = _c[0], setData = _c[1];
+    var executeInstall = function (args) {
+        setLoading(true);
+        setError('');
+        return installApp(args)
+            .then(function (installation) {
+            setData(installation);
+            setLoading(false);
+            return installation;
+        })
+            .catch(function (error) {
+            setError(error);
+            setLoading(false);
+            return error;
+        });
+    };
+    return [executeInstall, { data: data, error: error, loading: loading }];
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hygraph/app-sdk';
+export { Wrapper } from './Wrapper';
+export { useApp, useFieldExtension, useFormSidebarExtension, useUiExtensionDialog, } from './hooks';

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"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 });
+exports.useUiExtensionDialog = exports.useFormSidebarExtension = exports.useFieldExtension = exports.useApp = exports.Wrapper = void 0;
+__exportStar(require("@hygraph/app-sdk"), exports);
+var Wrapper_1 = require("./Wrapper");
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return Wrapper_1.Wrapper; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useApp", { enumerable: true, get: function () { return hooks_1.useApp; } });
+Object.defineProperty(exports, "useFieldExtension", { enumerable: true, get: function () { return hooks_1.useFieldExtension; } });
+Object.defineProperty(exports, "useFormSidebarExtension", { enumerable: true, get: function () { return hooks_1.useFormSidebarExtension; } });
+Object.defineProperty(exports, "useUiExtensionDialog", { enumerable: true, get: function () { return hooks_1.useUiExtensionDialog; } });

package/dist/esm/Wrapper.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AppProps } from '@hygraph/app-sdk';
+import type { ExtensionDialogProps, FormSidebarExtensionProps } from '@hygraph/app-sdk';
+import type { FieldExtensionProps } from './hooks';
+type WrapperContext = AppProps | FieldExtensionProps | FormSidebarExtensionProps | (ExtensionDialogProps & Record<string, unknown>);
+type SDKState = 'init' | 'error' | 'ok' | 'validation';
+declare const WrapperContext: React.Context<WrapperContext>;
+type WrapperProps = {
+    uid?: string;
+    fallback?: React.FC<{
+        state: SDKState;
+    }>;
+    debug?: boolean;
+} & {
+    children: React.ReactNode;
+};
+export declare function Wrapper(props: WrapperProps): JSX.Element;
+export declare function useWrapperContext(): WrapperContext;
+export {};

package/dist/esm/Wrapper.js

@@ -0,0 +1,109 @@
+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 (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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from 'react';
+import { init } from '@hygraph/app-sdk';
+var WrapperContext = React.createContext({});
+function useInitSDK(uid, debug) {
+    if (debug === void 0) { debug = false; }
+    var _a = __read(React.useState(), 2), sdkProps = _a[0], setSdkProps = _a[1];
+    var _b = __read(React.useState('init'), 2), extensionState = _b[0], setExtensionState = _b[1];
+    React.useEffect(function () {
+        function initSdk() {
+            return __awaiter(this, void 0, void 0, function () {
+                var initialState, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, init({
+                                    uid: uid,
+                                    debug: debug,
+                                    onProps: setSdkProps,
+                                })];
+                        case 1:
+                            initialState = _a.sent();
+                            if (initialState.status === 'ok') {
+                                setSdkProps(initialState.props);
+                            }
+                            setExtensionState(initialState.status);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _a.sent();
+                            setExtensionState('error');
+                            console.error(error_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        initSdk();
+    }, [uid, debug]);
+    return { sdkProps: sdkProps, extensionState: extensionState };
+}
+export function Wrapper(props) {
+    var children = props.children, uid = props.uid, _a = props.fallback, FallbackComponent = _a === void 0 ? DefaultFallbackComponent : _a, debug = props.debug;
+    var _b = useInitSDK(uid, debug), sdkProps = _b.sdkProps, extensionState = _b.extensionState;
+    if (extensionState != 'ok' || !sdkProps)
+        return React.createElement(FallbackComponent, { state: extensionState });
+    return React.createElement(WrapperContext.Provider, { value: sdkProps, children: children });
+}
+export function useWrapperContext() {
+    return React.useContext(WrapperContext);
+}
+function DefaultFallbackComponent(_a) {
+    var state = _a.state;
+    return (React.createElement("p", null, state === 'error'
+        ? 'SDK connection error, check logs'
+        : 'Waiting for connection'));
+}

package/dist/esm/hooks.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { FormSidebarExtensionProps, FieldExtensionProps as FieldExtensionPropsBase, AppInstallation } from '@hygraph/app-sdk';
+export declare function useFieldExtension(): FieldExtensionProps;
+export declare function useFormSidebarExtension(): FormSidebarExtensionProps;
+export declare function useUiExtensionDialog<DialogReturn = any, DialogProps = Record<string, unknown>>(): {
+    onCloseDialog: (value?: DialogReturn | null) => void;
+} & DialogProps;
+export declare function useApp(): {
+    readonly useUpdateInstallation: () => readonly [(arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>, {
+        readonly data: AppInstallation | undefined;
+        readonly error: string;
+        readonly loading: boolean;
+    }];
+    readonly updateInstallation: (arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>;
+    readonly installation: AppInstallation;
+    readonly context: import("@hygraph/app-sdk").Context;
+    readonly openDialog: import("@hygraph/app-sdk/dist/type-helpers/dialog").OpenDialog;
+    readonly showToast: import("@hygraph/app-sdk/dist/type-helpers/toast").ShowToast;
+    readonly openAssetPicker: import("@hygraph/app-sdk/dist/type-helpers/openAssetPicker").OpenAssetPicker;
+    readonly redirectParent: (location: string | Location) => Promise<void>;
+    readonly historyReplace: (url: string | ((href: string) => string)) => Promise<void>;
+    readonly historyPush: (url: string | ((href: string) => string)) => Promise<void>;
+};
+export interface FieldExtensionProps extends Omit<FieldExtensionPropsBase, 'onBlur' | 'onChange' | 'onFocus'> {
+    onBlur: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+    onChange: <T extends HTMLElement = HTMLElement>(event: React.ChangeEvent<T> | any) => Promise<void>;
+    onFocus: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+}

package/dist/esm/hooks.js

@@ -0,0 +1,64 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from 'react';
+import { useWrapperContext } from './Wrapper';
+export function useFieldExtension() {
+    return useWrapperContext();
+}
+export function useFormSidebarExtension() {
+    return useWrapperContext();
+}
+export function useUiExtensionDialog() {
+    return useWrapperContext();
+}
+export function useApp() {
+    var appProps = useWrapperContext();
+    var installProps = useUpdateInstallation(appProps === null || appProps === void 0 ? void 0 : appProps.updateInstallation);
+    return __assign(__assign({}, appProps), { useUpdateInstallation: function () { return installProps; } });
+}
+function useUpdateInstallation(installApp) {
+    var _a = __read(React.useState(false), 2), loading = _a[0], setLoading = _a[1];
+    var _b = __read(React.useState(''), 2), error = _b[0], setError = _b[1];
+    var _c = __read(React.useState(), 2), data = _c[0], setData = _c[1];
+    var executeInstall = function (args) {
+        setLoading(true);
+        setError('');
+        return installApp(args)
+            .then(function (installation) {
+            setData(installation);
+            setLoading(false);
+            return installation;
+        })
+            .catch(function (error) {
+            setError(error);
+            setLoading(false);
+            return error;
+        });
+    };
+    return [executeInstall, { data: data, error: error, loading: loading }];
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hygraph/app-sdk';
+export { Wrapper } from './Wrapper';
+export { useApp, useFieldExtension, useFormSidebarExtension, useUiExtensionDialog, } from './hooks';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from '@hygraph/app-sdk';
+export { Wrapper } from './Wrapper';
+export { useApp, useFieldExtension, useFormSidebarExtension, useUiExtensionDialog, } from './hooks';

package/dist/hooks.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { FormSidebarExtensionProps, FieldExtensionProps as FieldExtensionPropsBase, AppInstallation } from '@hygraph/app-sdk';
+export declare function useFieldExtension(): FieldExtensionProps;
+export declare function useFormSidebarExtension(): FormSidebarExtensionProps;
+export declare function useUiExtensionDialog<DialogReturn = any, DialogProps = Record<string, unknown>>(): {
+    onCloseDialog: (value?: DialogReturn | null) => void;
+} & DialogProps;
+export declare function useApp(): {
+    readonly useUpdateInstallation: () => readonly [(arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>, {
+        readonly data: AppInstallation | undefined;
+        readonly error: string;
+        readonly loading: boolean;
+    }];
+    readonly updateInstallation: (arg: Partial<Pick<AppInstallation, "config" | "status">>) => Promise<AppInstallation>;
+    readonly installation: AppInstallation;
+    readonly context: import("@hygraph/app-sdk").Context;
+    readonly openDialog: import("@hygraph/app-sdk/dist/type-helpers/dialog").OpenDialog;
+    readonly showToast: import("@hygraph/app-sdk/dist/type-helpers/toast").ShowToast;
+    readonly openAssetPicker: import("@hygraph/app-sdk/dist/type-helpers/openAssetPicker").OpenAssetPicker;
+    readonly redirectParent: (location: string | Location) => Promise<void>;
+    readonly historyReplace: (url: string | ((href: string) => string)) => Promise<void>;
+    readonly historyPush: (url: string | ((href: string) => string)) => Promise<void>;
+};
+export interface FieldExtensionProps extends Omit<FieldExtensionPropsBase, 'onBlur' | 'onChange' | 'onFocus'> {
+    onBlur: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+    onChange: <T extends HTMLElement = HTMLElement>(event: React.ChangeEvent<T> | any) => Promise<void>;
+    onFocus: <T extends HTMLElement = HTMLElement>(event?: React.FocusEvent<T>) => Promise<void>;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hygraph/app-sdk';
+export { Wrapper } from './Wrapper';
+export { useApp, useFieldExtension, useFormSidebarExtension, useUiExtensionDialog, } from './hooks';

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@hygraph/app-sdk-react",
+  "license": "MIT",
+  "version": "0.0.2",
+  "author": "Hygraph",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npm run build:types && npm run build:esm && npm run build:cjs",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:esm": "tsc --target es5 --module es2015 --outDir dist/esm",
+    "build:cjs": "tsc --target es5 --module commonjs --outDir dist/cjs",
+    "prepare": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@graphcms/zoid": "^9.0.64-alpha.3",
+    "@hygraph/app-sdk": "0.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "react": "^17.0.1",
+    "typescript": "^4.1.5"
+  },
+  "gitHead": "77d8975601e7f944471fede0c200ffd7779dda05"
+}

package/src/Wrapper.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { init, AppProps } from '@hygraph/app-sdk';
+import type {
+  ExtensionDialogProps,
+  FormSidebarExtensionProps,
+} from '@hygraph/app-sdk';
+import type { FieldExtensionProps } from './hooks';
+
+type WrapperContext =
+  | AppProps
+  | FieldExtensionProps
+  | FormSidebarExtensionProps
+  | (ExtensionDialogProps & Record<string, unknown>);
+
+type SDKState = 'init' | 'error' | 'ok' | 'validation';
+
+const WrapperContext = React.createContext<WrapperContext>(
+  {} as WrapperContext
+);
+
+type WrapperProps = {
+  uid?: string;
+  fallback?: React.FC<{ state: SDKState }>;
+  debug?: boolean;
+} & { children: React.ReactNode };
+
+function useInitSDK<T>(uid?: string, debug: boolean = false) {
+  const [sdkProps, setSdkProps] = React.useState<T>();
+  const [extensionState, setExtensionState] = React.useState<SDKState>('init');
+
+  React.useEffect(() => {
+    async function initSdk() {
+      try {
+        const initialState = await init({
+          uid,
+          debug,
+          onProps: setSdkProps,
+        });
+        if (initialState.status === 'ok') {
+          setSdkProps(initialState.props);
+        }
+        setExtensionState(initialState.status);
+      } catch (error) {
+        setExtensionState('error');
+        console.error(error);
+      }
+    }
+
+    initSdk();
+  }, [uid, debug]);
+
+  return { sdkProps, extensionState };
+}
+
+export function Wrapper(props: WrapperProps) {
+  const {
+    children,
+    uid,
+    fallback: FallbackComponent = DefaultFallbackComponent,
+    debug,
+  } = props;
+
+  const { sdkProps, extensionState } = useInitSDK<WrapperContext>(uid, debug);
+
+  if (extensionState != 'ok' || !sdkProps)
+    return <FallbackComponent state={extensionState} />;
+
+  return <WrapperContext.Provider value={sdkProps} children={children} />;
+}
+
+export function useWrapperContext() {
+  return React.useContext(WrapperContext);
+}
+
+function DefaultFallbackComponent({ state }: { state: SDKState }) {
+  return (
+    <p>
+      {state === 'error'
+        ? 'SDK connection error, check logs'
+        : 'Waiting for connection'}
+    </p>
+  );
+}

package/src/declaration.d.ts

@@ -0,0 +1 @@
+declare module "@graphcms/zoid";

package/src/hooks.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useWrapperContext } from './Wrapper';
+import type {
+  FormSidebarExtensionProps,
+  AppProps,
+  FieldExtensionProps as FieldExtensionPropsBase,
+  AppInstallation,
+} from '@hygraph/app-sdk';
+
+export function useFieldExtension() {
+  return useWrapperContext() as FieldExtensionProps;
+}
+
+export function useFormSidebarExtension() {
+  return useWrapperContext() as FormSidebarExtensionProps;
+}
+
+export function useUiExtensionDialog<
+  DialogReturn = any,
+  DialogProps = Record<string, unknown>
+>() {
+  return useWrapperContext() as {
+    onCloseDialog: (value?: DialogReturn | null) => void;
+  } & DialogProps;
+}
+
+export function useApp() {
+  const appProps = useWrapperContext() as AppProps;
+
+  const installProps = useUpdateInstallation(appProps?.updateInstallation);
+  return { ...appProps, useUpdateInstallation: () => installProps } as const;
+}
+
+function useUpdateInstallation(installApp: AppProps['updateInstallation']) {
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const [data, setData] = React.useState<AppInstallation>();
+
+  const executeInstall: AppProps['updateInstallation'] = args => {
+    setLoading(true);
+    setError('');
+
+    return installApp(args)
+      .then(installation => {
+        setData(installation);
+        setLoading(false);
+        return installation;
+      })
+      .catch(error => {
+        setError(error);
+        setLoading(false);
+        return error;
+      });
+  };
+
+  return [executeInstall, { data, error, loading }] as const;
+}
+
+export interface FieldExtensionProps
+  extends Omit<FieldExtensionPropsBase, 'onBlur' | 'onChange' | 'onFocus'> {
+  onBlur: <T extends HTMLElement = HTMLElement>(
+    event?: React.FocusEvent<T>
+  ) => Promise<void>;
+
+  onChange: <T extends HTMLElement = HTMLElement>(
+    event: React.ChangeEvent<T> | any
+  ) => Promise<void>;
+
+  onFocus: <T extends HTMLElement = HTMLElement>(
+    event?: React.FocusEvent<T>
+  ) => Promise<void>;
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+export * from '@hygraph/app-sdk';
+export { Wrapper } from './Wrapper';
+export {
+  useApp,
+  useFieldExtension,
+  useFormSidebarExtension,
+  useUiExtensionDialog,
+} from './hooks';

package/tsconfig.json

@@ -0,0 +1,73 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": ["esnext", "dom"],                 /* Specify library files to be included in the compilation. */
+    "allowJs": true,                          /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true,                      /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
+    "importsNotUsedAsValues": "error"
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"]
+}