bananas-commerce-admin 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# Bananas-commerce-admin
+
+Bananas-commerce-admin is an new and updated version of
+[django-bananas.js](https://github.com/5monkeys/django-bananas.js) operating
+with the same routing and apis, but updated to use typescript and react hooks as
+much as possible. It still contains some legacy code and logic from the old
+admin but is much more user friendly and looks just about the same.
+
+## Development
+
+In the tld run:
+
+```sh
+$ npm ci && npm run build:esm:watch
+```
+
+And in the example project run:
+
+```sh
+$ npm ci && npm link ../node_modules/react && npm run start
+```
+
+Due to npm being weird and duplicating dependencies, you need to run:
+`npm link ../node_modules/react` for it to work properly with the example app,
+although this is only as long as it is during local development.

package/dist/cjs/Admin.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 react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var NavBar_1 = __importDefault(require("./components/NavBar"));
+var LoadingScreen_1 = __importDefault(require("./containers/LoadingScreen"));
+var ApiContext_1 = require("./contexts/ApiContext");
+var I18nContext_1 = require("./contexts/I18nContext");
+var RouterContext_1 = require("./contexts/RouterContext");
+var UserContext_1 = require("./contexts/UserContext");
+var LoginPage_1 = __importDefault(require("./pages/LoginPage"));
+var Router_1 = require("./router/Router");
+var Admin = function (_a) {
+    var logo = _a.logo, title = _a.title, subtitle = _a.subtitle, version = _a.version, nav = _a.nav, pages = _a.pages, extensions = _a.extensions, dashboard = _a.dashboard, basename = _a.basename;
+    var _b = react_1.default.useState(false), loaded = _b[0], setLoaded = _b[1];
+    var api = (0, ApiContext_1.useApi)();
+    var i18n = (0, I18nContext_1.useI18n)();
+    var user = (0, UserContext_1.useUser)().user;
+    react_1.default.useEffect(function () {
+        if (!loaded && api !== undefined && i18n !== undefined && user !== undefined) {
+            setLoaded(true);
+        }
+    }, [loaded, api, i18n, user]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Box_1.default, { sx: {
+                display: "flex",
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                flexDirection: "column",
+            } }, loaded
+            ? user !== null
+                ? (react_1.default.createElement(react_router_dom_1.BrowserRouter, { basename: basename },
+                    react_1.default.createElement(RouterContext_1.RouterContextProvider, null,
+                        react_1.default.createElement(Box_1.default, { sx: { display: "flex" } },
+                            react_1.default.createElement(NavBar_1.default, { nav: nav, logo: logo, title: title, subtitle: subtitle, version: version }),
+                            react_1.default.createElement(Router_1.Router, { pages: pages, extensions: extensions, dashboard: dashboard })))))
+                : react_1.default.createElement(LoginPage_1.default, { logo: logo, title: title })
+            : react_1.default.createElement(LoadingScreen_1.default, { logo: logo, loading: !loaded }))));
+};
+exports.default = Admin;

package/dist/cjs/App.js

@@ -0,0 +1,49 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 CssBaseline_1 = __importDefault(require("@mui/material/CssBaseline"));
+var styles_1 = require("@mui/material/styles");
+var Admin_1 = __importDefault(require("./Admin"));
+var ApiContext_1 = require("./contexts/ApiContext");
+var UserContext_1 = require("./contexts/UserContext");
+var I18nContext_1 = require("./contexts/I18nContext");
+var notistack_1 = require("notistack");
+var App = function (_a) {
+    var theme = _a.theme, api = _a.api, rest = __rest(_a, ["theme", "api"]);
+    return (react_1.default.createElement(styles_1.ThemeProvider, { theme: theme !== null && theme !== void 0 ? theme : (0, styles_1.createTheme)() },
+        react_1.default.createElement(CssBaseline_1.default, null),
+        react_1.default.createElement(notistack_1.SnackbarProvider, { maxSnack: 4, anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "right",
+            } },
+            react_1.default.createElement(ApiContext_1.ApiContextProvider, { api: api },
+                react_1.default.createElement(I18nContext_1.I18nContextProvider, null,
+                    react_1.default.createElement(UserContext_1.UserContextProvider, null,
+                        react_1.default.createElement(Admin_1.default, __assign({}, rest))))))));
+};
+exports.default = App;

package/dist/cjs/api.js

@@ -0,0 +1,225 @@
+"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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiClient = exports.ApiOperation = void 0;
+var swagger_parser_1 = __importDefault(require("@apidevtools/swagger-parser"));
+var get_cookie_1 = require("./util/get_cookie");
+var ApiOperation = /** @class */ (function () {
+    function ApiOperation(id, tags, server, endpoint, method, request, summary, description) {
+        this.id = id;
+        this.tags = tags;
+        this.server = server;
+        this.endpoint = endpoint;
+        this.method = method;
+        this.request = request;
+        this.summary = summary;
+        this.description = description;
+    }
+    ApiOperation.prototype.call = function (request, init) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint, csrftoken, _i, _c, _d, name_1, value, url, _e, _f, _g, name_2, value;
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        endpoint = this.endpoint;
+                        csrftoken = (0, get_cookie_1.getCookie)("csrftoken");
+                        init !== null && init !== void 0 ? init : (init = {});
+                        (_a = init.method) !== null && _a !== void 0 ? _a : (init.method = this.method);
+                        init.headers = new Headers(init.headers);
+                        if (csrftoken !== undefined)
+                            init.headers.append("X-CSRFToken", csrftoken);
+                        init.credentials = "include";
+                        // Add body to request
+                        if ((request === null || request === void 0 ? void 0 : request.body) !== undefined) {
+                            (_b = init.body) !== null && _b !== void 0 ? _b : (init.body = JSON.stringify(request === null || request === void 0 ? void 0 : request.body));
+                        }
+                        // Add params to url
+                        if ((request === null || request === void 0 ? void 0 : request.params) !== undefined) {
+                            for (_i = 0, _c = Object.entries(request.params); _i < _c.length; _i++) {
+                                _d = _c[_i], name_1 = _d[0], value = _d[1];
+                                endpoint = endpoint.replace("{".concat(name_1, "}"), value);
+                            }
+                        }
+                        url = new URL(this.server + endpoint);
+                        // Add query to url
+                        if ((request === null || request === void 0 ? void 0 : request.query) !== undefined) {
+                            for (_e = 0, _f = Object.entries(request.query); _e < _f.length; _e++) {
+                                _g = _f[_e], name_2 = _g[0], value = _g[1];
+                                url.searchParams.append(name_2, value);
+                            }
+                        }
+                        return [4 /*yield*/, fetch(url, init)];
+                    case 1: return [2 /*return*/, _h.sent()];
+                }
+            });
+        });
+    };
+    return ApiOperation;
+}());
+exports.ApiOperation = ApiOperation;
+var ApiClient = /** @class */ (function () {
+    function ApiClient(document, server) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.operations = {};
+        this.document = document;
+        // If the document uses servers and it is not manually set this will be prepended to path later
+        if ("servers" in this.document && this.document.servers !== undefined &&
+            this.document.servers.length >= 1) {
+            server !== null && server !== void 0 ? server : (server = this.document.servers.pop().url);
+        }
+        // Make sure the server variable is an URL
+        if (server !== undefined && !(server instanceof URL)) {
+            server = new URL(server);
+        }
+        // Build operations
+        for (var _i = 0, _j = Object.entries((_a = this.document.paths) !== null && _a !== void 0 ? _a : {}); _i < _j.length; _i++) {
+            var _k = _j[_i], path = _k[0], definition = _k[1];
+            for (var _l = 0, _m = Object.entries(definition); _l < _m.length; _l++) {
+                var _o = _m[_l], method = _o[0], operation = _o[1];
+                // All operations require an operation id
+                if (!operation.operationId) {
+                    break;
+                }
+                // Check if an tag starting with `app:` exists on the operation
+                if (!((_b = operation.tags) === null || _b === void 0 ? void 0 : _b.some(function (tag) { return tag.startsWith("app:"); }))) {
+                    break;
+                }
+                var request = {};
+                // Fill the request object with `path`, `query` and `body` data which may be provided
+                for (var _p = 0, _q = (_c = operation.parameters) !== null && _c !== void 0 ? _c : []; _p < _q.length; _p++) {
+                    var parameter = _q[_p];
+                    if ("in" in parameter) {
+                        switch (parameter.in) {
+                            case "body": {
+                                request["body"] = {
+                                    required: (_d = parameter.required) !== null && _d !== void 0 ? _d : false,
+                                    schema: parameter.schema,
+                                };
+                                break;
+                            }
+                            case "path": {
+                                (_e = request["params"]) !== null && _e !== void 0 ? _e : (request["params"] = {});
+                                request["params"][parameter.name] = {
+                                    // Path parameters are always required: https://swagger.io/docs/specification/describing-parameters/#path-parameters
+                                    required: true,
+                                    schema: parameter.schema,
+                                };
+                                break;
+                            }
+                            case "query": {
+                                (_f = request["query"]) !== null && _f !== void 0 ? _f : (request["query"] = {});
+                                request["query"][parameter.name] = {
+                                    required: (_g = parameter.required) !== null && _g !== void 0 ? _g : false,
+                                    schema: parameter.schema,
+                                };
+                            }
+                        }
+                    }
+                }
+                // If `requestBody` exists then add it to the request objects body object
+                if ("requestBody" in operation && operation.requestBody !== undefined) {
+                    if ("content" in operation.requestBody) {
+                        var schema = operation.requestBody.content["application/json"].schema;
+                        var required = (_h = operation.requestBody.required) !== null && _h !== void 0 ? _h : false;
+                        request["body"] = {
+                            schema: schema,
+                            required: required,
+                        };
+                    }
+                }
+                // Combine base url and path
+                server = server ? server.toString() : "";
+                if (server.endsWith("/")) {
+                    server = server.slice(0, -1);
+                }
+                var endpoint = path.startsWith("/") ? path : "/" + path;
+                // Create a new `ApiOperation` with the relevant information
+                this.operations[operation.operationId] = new ApiOperation(operation.operationId, operation.tags, server, endpoint, method, request, operation.summary, operation.description);
+            }
+        }
+    }
+    ApiClient.load = function (source, server) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, schema, document;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(source)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error("Could not load schema from ".concat(source));
+                        }
+                        return [4 /*yield*/, response.json().catch(function (e) {
+                                throw e;
+                            })];
+                    case 2:
+                        schema = _a.sent();
+                        return [4 /*yield*/, swagger_parser_1.default.dereference(schema)];
+                    case 3:
+                        document = _a.sent();
+                        return [2 /*return*/, new ApiClient(document, server)];
+                }
+            });
+        });
+    };
+    ApiClient.prototype.isAuthenticated = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.operations["bananas.me:list"].call()];
+                    case 1:
+                        response = _b.sent();
+                        return [2 /*return*/, response.ok];
+                    case 2:
+                        _a = _b.sent();
+                        return [2 /*return*/, false];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return ApiClient;
+}());
+exports.ApiClient = ApiClient;

package/dist/cjs/components/Branding.js

@@ -0,0 +1,41 @@
+"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 ButtonBase_1 = __importDefault(require("@mui/material/ButtonBase"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var select_styles_1 = require("../util/select_styles");
+var Logo_1 = __importDefault(require("./Logo"));
+var Branding = function (_a) {
+    var logo = _a.logo, title = _a.title, subtitle = _a.subtitle, version = _a.version, onClick = _a.onClick, fullWidth = _a.fullWidth, sx = _a.sx;
+    return (react_1.default.createElement(Box_1.default, { sx: (0, select_styles_1.ss)({
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            flexGrow: 1,
+        }, [{ width: "100%" }, fullWidth !== null && fullWidth !== void 0 ? fullWidth : false], sx) },
+        react_1.default.createElement(ButtonBase_1.default, { sx: {
+                justifyContent: "flex-start",
+                width: "100%",
+                height: "100%",
+                padding: 0,
+            }, color: "inherit", onClick: onClick },
+            logo ? react_1.default.createElement(Logo_1.default, { src: logo }) : (react_1.default.createElement(Typography_1.default, { sx: {
+                    fontWeight: "bold",
+                }, color: "inherit", variant: "h4" }, title)),
+            react_1.default.createElement(Box_1.default, { sx: {
+                    marginLeft: 10,
+                    "& > *": {
+                        textAlign: "left",
+                        fontSize: "0.75rem",
+                        display: "block",
+                        lineHeight: "1em",
+                    },
+                } },
+                react_1.default.createElement(Typography_1.default, { color: "inherit" }, subtitle),
+                react_1.default.createElement(Typography_1.default, { color: "inherit" }, version)))));
+};
+exports.default = Branding;

package/dist/cjs/components/Hamburger.js

@@ -0,0 +1,40 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
+var Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var styles_1 = require("@mui/material/styles");
+var Hamburger = function (_a) {
+    var open = _a.open, onToggle = _a.onToggle, rest = __rest(_a, ["open", "onToggle"]);
+    var theme = (0, styles_1.useTheme)();
+    return (react_1.default.createElement(Box_1.default, { sx: __assign({ display: "flex", alignItems: "center", justifyContent: "flex-start", padding: theme.spacing(0, 1), flexShrink: 1 }, theme.mixins.toolbar) },
+        react_1.default.createElement(IconButton_1.default, __assign({ "aria-label": open ? "Close drawer" : "Open drawer", color: "inherit", onClick: onToggle }, rest, { size: "large" }), open ? react_1.default.createElement(ChevronLeft_1.default, null) : react_1.default.createElement(Menu_1.default, null))));
+};
+exports.default = Hamburger;

package/dist/cjs/components/Link.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var RouterContext_1 = require("../contexts/RouterContext");
+var react_router_dom_1 = require("react-router-dom");
+var react_1 = __importDefault(require("react"));
+var Link = function (_a) {
+    var route = _a.route;
+    var getRoute = (0, RouterContext_1.useRouter)().getRoute;
+    if (typeof route === "string") {
+        var routeInfo = getRoute(route);
+        if (routeInfo === undefined) {
+            throw new Error("Could not find route with reverse: ".concat(route));
+        }
+        route = routeInfo;
+    }
+    return react_1.default.createElement(react_router_dom_1.Link, { to: route.path });
+};
+exports.default = Link;

package/dist/cjs/components/Logo.js

@@ -0,0 +1,25 @@
+"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 Logo = function (_a) {
+    var src = _a.src;
+    if (src === true) {
+        return (react_1.default.createElement("svg", { version: "1.1", id: "bananas", x: "0px", y: "0px", width: "32px", height: "32px", viewBox: "0 0 927.611 927.611", xmlSpace: "preserve", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+            react_1.default.createElement("g", { fill: "#FFFFFF" },
+                react_1.default.createElement("path", { d: "M158.56,618.97l2.4-0.7c97-26.199,181.6-59.8,251.2-99.8c94.5-54.3,159.4-119.5,193-193.799l16-35.4l-28.699,26.2\n\t\t\tc-57,52.1-134.801,91-231.4,115.8c-81.9,21-176,31.7-279.8,31.7c-5.4,0-17.4-0.1-24.6-0.2l-16.9-0.8c-13.3-0.6-25.4,7.6-29.8,20.2\n\t\t\tl-6.6,19.1c-3.9,11.301-0.7,23.9,8.2,32c7.4,6.7,14.9,13.2,14.9,13.2s56,48.5,129.6,71.7L158.56,618.97z" }),
+                react_1.default.createElement("path", { d: "M811.86,163.17c-29.1-13.4-56.899-15.4-70.899-15.4c-1.801,0-3.5,0-4.9,0.1c-3.2-11.2-19.4-78.1-30.7-124.9\n\t\t\tc-5.2-21.5-31.1-30.2-48.2-16.1l-53.6,44.2c-14,11.5-16.9,31.7-6.7,46.7c22.4,32.9,59.5,91.7,77.7,144.8\n\t\t\tc17.2,50.3,18.7,102.9,10.5,154.6c-13.4,83.7-57.6,168.2-131.4,251.2c-40.199,45.2-84.699,86.399-132.199,123.7\n\t\t\tc-23.801,18.699-48.4,36.399-73.7,53c-2.601,1.699-32.7,19.399-53.601,30.199c-11.699,6-18.1,19-15.8,31.9l2.5,14\n\t\t\tc2.4,13.4,13.5,23.5,27,24.6c34.3,2.9,105.101,4.801,199.7-13.899c51.8-10.2,101.8-34.5,148.2-62.101\n\t\t\tc78.1-46.6,182.8-131.399,238.1-271c24.7-62.3,35.2-126.699,31.2-191.599c-3.9-63.8-20.7-112.4-34.1-142\n\t\t\tC873.66,206.771,847.06,179.271,811.86,163.17z" }),
+                react_1.default.createElement("path", { d: "M109.46,744.97c13.1,8.101,34.4,19.8,60.3,28.4c44.5,14.8,91.8,21.2,138.5,22.7l2.6,0.1l2.101-1.4\n\t\t\tc34.5-23.1,67.3-47.3,97.6-71.899c37.7-30.7,71.5-62.2,100.5-93.601c26.3-28.5,50.6-58.899,71.4-91.6\n\t\t\tc18.199-28.6,33.699-59.1,44.8-91.2c5.2-15,9.5-30.399,12.399-46.1c3-15.9,4.4-32.1,6.5-48.2c0.4-3.2,0.801-6.3,1.2-9.5\n\t\t\tl-19.899,33.9c-41.7,71.199-110.5,133.699-204.601,186c-61.2,34.1-126.8,60.1-193.6,81.199c-36.4,11.5-71.6,21.601-108.6,27.301\n\t\t\tc-14.6,2.199-25.3,14.8-25.3,29.6c0,6.4,0,13.1,0,18.9C95.36,729.87,100.66,739.47,109.46,744.97z" }))));
+    }
+    if (typeof src === "string") {
+        return react_1.default.createElement("img", { src: src });
+    }
+    if (src) {
+        var Src = src;
+        return react_1.default.createElement(Src, null);
+    }
+    return null;
+};
+exports.default = Logo;

package/dist/cjs/components/NavBar.js

@@ -0,0 +1,101 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var styles_1 = require("@mui/material/styles");
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+var Divider_1 = __importDefault(require("@mui/material/Divider"));
+var User_1 = __importDefault(require("./User"));
+var Hamburger_1 = __importDefault(require("./Hamburger"));
+var NavBarRoutes_1 = __importDefault(require("./NavBarRoutes"));
+var Branding_1 = __importDefault(require("./Branding"));
+var react_router_dom_1 = require("react-router-dom");
+var drawerWidth = 240;
+var openedMixin = function (theme) { return ({
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+    overflowX: "hidden",
+}); };
+var closedMixin = function (theme) {
+    var _a;
+    return (_a = {
+            transition: theme.transitions.create("width", {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+            overflowX: "hidden",
+            width: "calc(".concat(theme.spacing(7), " + 1px)")
+        },
+        _a[theme.breakpoints.up("sm")] = {
+            width: "calc(".concat(theme.spacing(8), " + 1px)"),
+        },
+        _a);
+};
+var NavBar = function (_a) {
+    var nav = _a.nav, logo = _a.logo, title = _a.title, subtitle = _a.subtitle, version = _a.version;
+    var theme = (0, styles_1.useTheme)();
+    var navigate = (0, react_router_dom_1.useNavigate)();
+    var _b = React.useState(true), open = _b[0], setOpen = _b[1];
+    var toggleDrawerOpen = function () {
+        setOpen(!open);
+    };
+    var onClick = function () {
+        navigate("/", { replace: true });
+    };
+    return (React.createElement(Drawer_1.default, { sx: __assign(__assign({ width: drawerWidth, flexShrink: 0, whiteSpace: "nowrap", boxSizing: "border-box" }, (open && __assign(__assign({}, openedMixin(theme)), { "& .MuiDrawer-paper": openedMixin(theme) }))), (!open && __assign(__assign({}, closedMixin(theme)), { "& .MuiDrawer-paper": closedMixin(theme) }))), anchor: "left", variant: "permanent", open: open },
+        React.createElement(Box_1.default, { sx: { display: "flex", padding: theme.spacing(2, 0, 2) } },
+            React.createElement(Hamburger_1.default, { open: open, onClick: toggleDrawerOpen }),
+            React.createElement(Branding_1.default, { sx: { opacity: open ? 1 : 0 }, logo: logo, title: title, subtitle: subtitle, version: version, onClick: onClick, fullWidth: open })),
+        React.createElement(Box_1.default, { sx: {
+                flexGrow: 1,
+                flexShrink: 0,
+            } },
+            React.createElement(NavBarRoutes_1.default, { nav: nav, open: open })),
+        React.createElement(Box_1.default, { sx: {
+                flexGrow: 0,
+                flexShrink: 0,
+            } },
+            React.createElement(Divider_1.default, null),
+            React.createElement(User_1.default, { open: open }))));
+};
+exports.default = NavBar;

package/dist/cjs/components/NavBarItem.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@mui/material/styles");
+var ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+var ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+var ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+var react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var RouterContext_1 = require("../contexts/RouterContext");
+var Logo_1 = __importDefault(require("./Logo"));
+var NavBarItem = function (_a) {
+    var route = _a.route, title = _a.title, subtitle = _a.subtitle, icon = _a.icon, children = _a.children, open = _a.open;
+    var Icon = icon;
+    var _b = react_1.default.useState(false), selected = _b[0], setSelected = _b[1];
+    var location = (0, react_router_dom_1.useLocation)();
+    var navigate = (0, RouterContext_1.useRouter)().navigate;
+    var theme = (0, styles_1.useTheme)();
+    var onClick = function () {
+        navigate(route);
+    };
+    react_1.default.useEffect(function () {
+        setSelected(location.pathname === route.path);
+    }, [location]);
+    return (react_1.default.createElement(ListItem_1.default, { onClick: onClick, key: route.id, disablePadding: true, sx: { display: "block" } },
+        react_1.default.createElement(ListItemButton_1.default, { selected: selected, sx: {
+                minHeight: 48,
+                justifyContent: open ? "initial" : "center",
+                px: 2.5,
+            } },
+            react_1.default.createElement(ListItemIcon_1.default, { sx: {
+                    minWidth: 0,
+                    justifyContent: "center",
+                    padding: theme.spacing(1, 1),
+                } }, Icon !== undefined ? react_1.default.createElement(Logo_1.default, { src: Icon }) : title.substring(0, 1)),
+            react_1.default.createElement(ListItemText_1.default, { sx: { opacity: open ? 1 : 0 }, primary: title, secondary: subtitle }),
+            children)));
+};
+exports.default = NavBarItem;