bananas-commerce-admin 0.1.0

package/dist/cjs/components/NavBarRoutes.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var List_1 = __importDefault(require("@mui/material/List"));
+var react_1 = __importDefault(require("react"));
+var RouterContext_1 = require("../contexts/RouterContext");
+var NavBarItem_1 = __importDefault(require("./NavBarItem"));
+function groupRoutesByApp(routes) {
+    var _a;
+    var _b;
+    var groupedRoutes = {};
+    for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
+        var route = routes_1[_i];
+        (_a = groupedRoutes[_b = route.app]) !== null && _a !== void 0 ? _a : (groupedRoutes[_b] = []);
+        groupedRoutes[route.app].push(route);
+    }
+    return groupedRoutes;
+}
+var NavBarRoutes = function (_a) {
+    var nav = _a.nav, open = _a.open;
+    var routes = (0, RouterContext_1.useRouter)().routes;
+    var navItems = react_1.default.useMemo(function () {
+        var apps = [];
+        var groupedRoutes = groupRoutesByApp(routes);
+        for (var _i = 0, _a = Object.keys(groupedRoutes); _i < _a.length; _i++) {
+            var app = _a[_i];
+            var appRoutes = groupedRoutes[app];
+            var appItems = [];
+            for (var _b = 0, appRoutes_1 = appRoutes; _b < appRoutes_1.length; _b++) {
+                var route = appRoutes_1[_b];
+                if (route.navigation) {
+                    appItems.push(react_1.default.createElement(NavBarItem_1.default, { key: route.id, route: route, title: route.title, open: open }));
+                }
+            }
+            apps.push(react_1.default.createElement(List_1.default, { key: app }, appItems));
+        }
+        return apps;
+    }, [
+        routes,
+        nav,
+        open,
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, navItems));
+};
+exports.default = NavBarRoutes;

package/dist/cjs/components/ProgressBar.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var ProgressBar = function (_a) {
+    var loading = _a.loading, color = _a.color;
+    loading !== null && loading !== void 0 ? loading : (loading = true);
+    color !== null && color !== void 0 ? color : (color = "secondary");
+    return (loading && react_1.default.createElement(material_1.LinearProgress, { color: color }));
+};
+exports.default = ProgressBar;

package/dist/cjs/components/User.js

@@ -0,0 +1,71 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var AccountCircle_1 = __importDefault(require("@mui/icons-material/AccountCircle"));
+var ButtonBase_1 = __importDefault(require("@mui/material/ButtonBase"));
+var List_1 = __importDefault(require("@mui/material/List"));
+var styles_1 = require("@mui/material/styles");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var UserContext_1 = require("../contexts/UserContext");
+var NavBarItem_1 = __importDefault(require("./NavBarItem"));
+var select_styles_1 = require("../util/select_styles");
+var RouterContext_1 = require("../contexts/RouterContext");
+var styles = function (theme) { return ({
+    root: __assign({ display: "flex", padding: 0, borderTopWidth: 1, borderTopStyle: "solid", borderTopColor: theme.palette.divider }, theme.mixins.toolbar),
+    link: {
+        fontSize: "inherit",
+        "& > *": {
+            fontSize: "0.9em",
+        },
+    },
+    drawerLink: {
+        "&:hover": {
+            color: theme.palette.primary.main,
+            opacity: 1,
+        },
+    },
+    appbarLink: {
+        "&:hover": {
+            color: theme.palette.secondary.light,
+            opacity: 1,
+        },
+    },
+}); };
+var User = function (_a) {
+    var classes = _a.classes, open = _a.open, icon = _a.icon;
+    var _b = (0, UserContext_1.useUser)(), user = _b.user, logout = _b.logout;
+    var _c = (0, RouterContext_1.useRouter)(), routes = _c.routes, getRoute = _c.getRoute;
+    classes !== null && classes !== void 0 ? classes : (classes = styles((0, styles_1.useTheme)()));
+    var UserIcon = icon !== null && icon !== void 0 ? icon : AccountCircle_1.default;
+    var _d = react_1.default.useMemo(function () {
+        var route = getRoute("bananas.me:list");
+        return [
+            route,
+            getRoute("bananas.logout:create").title,
+            (route === null || route === void 0 ? void 0 : route.path) === window.location.pathname,
+        ];
+    }, [routes]), route = _d[0], logoutText = _d[1], selected = _d[2];
+    return (user !== null && route !== undefined
+        ? (react_1.default.createElement(List_1.default, null,
+            react_1.default.createElement(NavBarItem_1.default, { route: route, open: open, icon: UserIcon, title: user.full_name, subtitle: react_1.default.createElement(ButtonBase_1.default, { sx: (0, select_styles_1.ss)(classes.link, classes.drawerLink), onClick: function (e) {
+                        e.preventDefault();
+                        logout();
+                    } },
+                    react_1.default.createElement(Typography_1.default, { color: "inherit" }, logoutText)) })))
+        : null);
+};
+exports.default = User;

package/dist/cjs/containers/Content.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+var Content = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement(material_1.Box, { sx: {
+            display: "flex",
+            position: "relative",
+            flexGrow: 1,
+        } }, children));
+};
+exports.default = Content;

package/dist/cjs/containers/ErrorScreen.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Card_1 = __importDefault(require("@mui/material/Card"));
+var CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var I18nContext_1 = require("../contexts/I18nContext");
+var UserContext_1 = require("../contexts/UserContext");
+var errorMessages = {
+    403: "You are authenticated as %(username)s, but are not authorized to access this page. Would you like to login to a different account?",
+    404: "We're sorry, but the requested page could not be found.",
+};
+var ErrorScreen = function (_a) {
+    var _b, _c;
+    var error = _a.error;
+    var t = (0, I18nContext_1.useI18n)().t;
+    var _d = (0, UserContext_1.useUser)(), user = _d.user, logout = _d.logout;
+    var theme = (0, styles_1.useTheme)();
+    return (react_1.default.createElement(Card_1.default, null,
+        react_1.default.createElement(CardContent_1.default, null,
+            react_1.default.createElement(material_1.Typography, { variant: "h4" }, error.message),
+            react_1.default.createElement(material_1.Typography, null, t(error.response.status >= 500
+                ? "There's been an error. It's been reported to the site administrators via email and should be fixed shortly. Thanks for your patience."
+                : (_b = errorMessages[error.response.status]) !== null && _b !== void 0 ? _b : "", (_c = user) !== null && _c !== void 0 ? _c : {}))),
+        react_1.default.createElement(material_1.CardActions, null, error.response.status === 403 && (react_1.default.createElement(Box_1.default, { sx: { marginTop: theme.spacing(3), textAlign: "right" } },
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: function () {
+                    return logout();
+                }, sx: { boxShadow: "none" } }, t("Log in again")))))));
+};
+exports.default = ErrorScreen;

package/dist/cjs/containers/LoadingScreen.js

@@ -0,0 +1,84 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+var Fade_1 = __importDefault(require("@mui/material/Fade"));
+var system_1 = require("@mui/system");
+var Logo_1 = __importDefault(require("../components/Logo"));
+var select_styles_1 = require("../util/select_styles");
+var styles = function (theme) {
+    return ({
+        root: {
+            position: "relative",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        backdrop: {
+            position: "absolute",
+            zIndex: 2000,
+            backgroundColor: (0, system_1.alpha)(theme.palette.background.default, 0.666),
+        },
+        backdropPrimary: {
+            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, 0.666),
+        },
+        backdropSecondary: {
+            backgroundColor: (0, system_1.alpha)(theme.palette.secondary.main, 0.666),
+        },
+        backdropPaper: {
+            backgroundColor: (0, system_1.alpha)(theme.palette.background.paper, 0.666),
+        },
+        spinner: {
+            color: theme.palette.primary.main,
+        },
+        spinnerContrast: {
+            color: theme.palette.primary.contrastText,
+        },
+        logo: {
+            position: "absolute",
+            margin: 0,
+            marginTop: theme.spacing(-36),
+        },
+    });
+};
+var LoadingScreenInner = function (_a) {
+    var loading = _a.loading, logo = _a.logo, classes = _a.classes, backdrop = _a.backdrop, color = _a.color;
+    return (react_1.default.createElement(Box_1.default, { sx: (0, select_styles_1.ss)(classes.root, [classes.backdrop, backdrop], [classes.backdropPrimary, backdrop && color === "primary"], [classes.backdropSecondary, backdrop && color === "secondary"], [classes.backdropPaper, backdrop && color === "paper"]) },
+        react_1.default.createElement(Box_1.default, { sx: classes.logo }, logo && react_1.default.createElement(Logo_1.default, { src: logo })),
+        loading && (react_1.default.createElement(CircularProgress_1.default, { sx: (0, select_styles_1.ss)(classes.spinner, [classes.spinnerContrast, !color]) }))));
+};
+var LoadingScreen = function (props) {
+    var _a = __assign({}, props), loading = _a.loading, logo = _a.logo, backdrop = _a.backdrop, color = _a.color, classes = _a.classes;
+    classes !== null && classes !== void 0 ? classes : (classes = styles((0, styles_1.useTheme)()));
+    loading !== null && loading !== void 0 ? loading : (loading = true);
+    backdrop !== null && backdrop !== void 0 ? backdrop : (backdrop = false);
+    return backdrop
+        ? (react_1.default.createElement(Fade_1.default, { in: loading, timeout: {
+                enter: 750,
+                exit: 250,
+            } },
+            react_1.default.createElement(LoadingScreenInner, { loading: loading, logo: logo, backdrop: backdrop, color: color, classes: classes })))
+        : (react_1.default.createElement(LoadingScreenInner, { loading: loading, logo: logo, backdrop: backdrop, color: color, classes: classes }));
+};
+exports.default = LoadingScreen;

package/dist/cjs/containers/PageErrorBoundary.js

@@ -0,0 +1,43 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var PageErrorBoundary = /** @class */ (function (_super) {
+    __extends(PageErrorBoundary, _super);
+    function PageErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { error: null };
+        _this.errorPage = props.errorPage;
+        return _this;
+    }
+    PageErrorBoundary.prototype.componentDidCatch = function (error) {
+        this.setState({ error: error });
+    };
+    PageErrorBoundary.prototype.render = function () {
+        var error = this.state.error;
+        if (error) {
+            var ErrorPage = this.errorPage;
+            return react_1.default.createElement(ErrorPage, { error: error });
+        }
+        return this.props.children;
+    };
+    return PageErrorBoundary;
+}(react_1.default.Component));
+exports.default = PageErrorBoundary;

package/dist/cjs/containers/PageLoader.js

@@ -0,0 +1,123 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLoadFailedError = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var ApiContext_1 = require("../contexts/ApiContext");
+var useAsyncError_1 = __importDefault(require("../hooks/useAsyncError"));
+var LoadingScreen_1 = __importDefault(require("./LoadingScreen"));
+var PageLoadFailedError = /** @class */ (function (_super) {
+    __extends(PageLoadFailedError, _super);
+    function PageLoadFailedError(response, message) {
+        var _this = _super.call(this, message) || this;
+        _this.response = response;
+        return _this;
+    }
+    return PageLoadFailedError;
+}(Error));
+exports.PageLoadFailedError = PageLoadFailedError;
+var PageLoader = function (_a) {
+    var route = _a.route, page = _a.page;
+    var Page = react_1.default.lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = {};
+                    return [4 /*yield*/, Promise.resolve(page)];
+                case 1: return [2 /*return*/, (_a.default = _b.sent(),
+                        _a)];
+            }
+        });
+    }); });
+    var api = (0, ApiContext_1.useApi)();
+    var params = (0, react_router_dom_1.useParams)();
+    var searchParams = (0, react_router_dom_1.useSearchParams)()[0];
+    var _b = react_1.default.useState(null), data = _b[0], setData = _b[1];
+    var throwError = (0, useAsyncError_1.default)();
+    react_1.default.useEffect(function () {
+        if (data === null) {
+            api.operations[route.id].call({
+                params: params,
+                query: Object.fromEntries(searchParams.entries()),
+            })
+                .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!response.ok) return [3 /*break*/, 2];
+                            _a = setData;
+                            return [4 /*yield*/, response.json()];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            throwError(new PageLoadFailedError(response, "Page data load failed with ".concat(response.status, " ").concat(response.statusText)));
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); })
+                .catch(throwError);
+        }
+    }, [api, params, searchParams, data]);
+    return (react_1.default.createElement(react_2.Suspense, { fallback: react_1.default.createElement(LoadingScreen_1.default, null) },
+        react_1.default.createElement(Page, { data: data })));
+};
+exports.default = PageLoader;

package/dist/cjs/contexts/ApiContext.js

@@ -0,0 +1,105 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.ApiContextProvider = exports.useApi = void 0;
+var notistack_1 = require("notistack");
+var React = __importStar(require("react"));
+var api_1 = require("../api");
+var get_cookie_1 = require("../util/get_cookie");
+var ApiContext = React.createContext(undefined);
+var useApi = function () { return React.useContext(ApiContext); };
+exports.useApi = useApi;
+var ApiContextProvider = function (_a) {
+    var children = _a.children, init = _a.api;
+    var _b = React.useState(), api = _b[0], setApi = _b[1];
+    var enqueueSnackbar = (0, notistack_1.useSnackbar)().enqueueSnackbar;
+    React.useEffect(function () {
+        if (api === undefined) {
+            (init instanceof api_1.ApiClient
+                ? Promise.resolve(init)
+                : typeof init === "string" ||
+                    init instanceof URL
+                    ? api_1.ApiClient.load(init)
+                    : api_1.ApiClient.load(init.schema, init.server)).then(function (api) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setApi(api);
+                            if (!((0, get_cookie_1.getCookie)("csrftoken") === undefined)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, api.operations["bananas.csrf:list"].call()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); }).catch(function (e) {
+                enqueueSnackbar("Failed to load schema, view console for more info", {
+                    variant: "error",
+                });
+                throw e;
+            });
+        }
+    }, [api]);
+    return (React.createElement(ApiContext.Provider, { value: api }, children));
+};
+exports.ApiContextProvider = ApiContextProvider;
+exports.default = ApiContext;

package/dist/cjs/contexts/I18nContext.js

@@ -0,0 +1,109 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.I18nContextProvider = exports.useI18n = exports.interpolateString = void 0;
+var React = __importStar(require("react"));
+var useLocalStorage_1 = __importDefault(require("../hooks/useLocalStorage"));
+var ApiContext_1 = require("./ApiContext");
+function interpolateString(string, params) {
+    return Array.isArray(params)
+        ? params.reduce(function (s, value) { return s.replace(/%[sd]|\{\}/, value); }, string)
+        : Object.entries(params).reduce(function (s, _a) {
+            var key = _a[0], value = _a[1];
+            return s.replace(new RegExp("%\\(".concat(key, "\\)[sd]|\\{").concat(key, "\\}"), "g"), value);
+        }, string);
+}
+exports.interpolateString = interpolateString;
+var I18nContext = React.createContext(undefined);
+var useI18n = function () { return React.useContext(I18nContext); };
+exports.useI18n = useI18n;
+var I18nContextProvider = function (_a) {
+    var children = _a.children;
+    var api = (0, ApiContext_1.useApi)();
+    var _b = (0, useLocalStorage_1.default)("i18n", undefined), i18n = _b[0], setI18n = _b[1];
+    React.useEffect(function () {
+        if (api && i18n === undefined) {
+            api.operations["bananas.i18n:list"].call().then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                var i18n;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, response.json()];
+                        case 1:
+                            i18n = (_a.sent()).catalog;
+                            setI18n(i18n);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        }
+    }, [api, i18n]);
+    var t = function (key, params) {
+        var _a;
+        var value = (_a = i18n === null || i18n === void 0 ? void 0 : i18n[key]) !== null && _a !== void 0 ? _a : key;
+        return params ? interpolateString(value, params) : value;
+    };
+    return (React.createElement(I18nContext.Provider, { value: { i18n: i18n, t: t } }, children));
+};
+exports.I18nContextProvider = I18nContextProvider;
+exports.default = I18nContext;