bananas-commerce-admin 0.1.0

package/example/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "bananas-commerce-admin-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Bananas-commerce admin interface and building blocks",
+  "keywords": [
+    "admin",
+    "bananas",
+    "django",
+    "django-admin",
+    "react",
+    "bananas-commerce",
+    "bananas-commerce-admin"
+  ],
+  "author": "Elias Sjögreen",
+  "scripts": {
+    "start": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  },
+  "devDependencies": {
+    "stream-http": "^3.2.0",
+    "typescript": "^4.7.4",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^16.11.43",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "babel-loader": "^8.2.5",
+    "buffer": "^6.0.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "https-browserify": "^1.0.0",
+    "node-polyfill-webpack-plugin": "^2.0.0",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.8.7",
+    "@mui/system": "^5.8.7",
+    "bananas-commerce-admin": "file:..",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  }
+}

package/example/webpack.config.js

@@ -0,0 +1,67 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  context: __dirname,
+  mode: "development",
+  entry: "./index.tsx",
+  output: {
+    publicPath: "/",
+    chunkFilename: "[name].[chunkhash].js",
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist"),
+    clean: true,
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: "index.html",
+      template: "./index.html",
+    }),
+    new NodePolyfillPlugin(),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?[jt]sx?$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              ["@babel/preset-react", { runtime: "automatic" }],
+              "@babel/preset-typescript",
+            ],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: {
+          loader: "file-loader",
+        },
+      },
+    ],
+  },
+  optimization: {
+    nodeEnv: "development",
+  },
+  devServer: {
+    allowedHosts: "all",
+    hot: true,
+    compress: true,
+    host: "0.0.0.0",
+    port: 8123,
+    historyApiFallback: true,
+    proxy: {
+      "/_": "http://localhost:8000",
+      "/api": "http://localhost:8000",
+      "/private": "http://localhost:8000",
+    },
+  },
+  devtool: "eval-source-map",
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "bananas-commerce-admin",
+  "version": "0.1.0",
+  "description": "Bananas-commerce admin interface and building blocks",
+  "keywords": [
+    "admin",
+    "bananas",
+    "django",
+    "django-admin",
+    "react",
+    "bananas-commerce",
+    "bananas-commerce-admin"
+  ],
+  "author": "Elias Sjögreen",
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:esm:watch": "npm run build:esm -- --watch",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:cjs:watch": "npm run build:cjs -- --watch"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^16.11.43",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "typescript": "^4.7.4",
+    "openapi-types": "^12.0.0"
+  },
+  "peerDependencies": {
+    "@apidevtools/swagger-parser": "^10.1.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.8.7",
+    "@mui/system": "^5.8.7",
+    "notistack": "^2.0.5",
+    "react": "^17.0.0",
+    "react-router-dom": "^6.3.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4"
+  }
+}

package/src/Admin.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+
+import Box from "@mui/material/Box";
+
+import NavBar from "./components/NavBar";
+import LoadingScreen from "./containers/LoadingScreen";
+import { useApi } from "./contexts/ApiContext";
+import { useI18n } from "./contexts/I18nContext";
+import { RouterContextProvider } from "./contexts/RouterContext";
+import { useUser } from "./contexts/UserContext";
+import LoginPage from "./pages/LoginPage";
+import { Router, RouterProps } from "./router/Router";
+import { LogoType } from "./types";
+
+export type AdminProps = {
+  logo?: LogoType;
+  title?: string;
+  subtitle?: string;
+  version?: string;
+  nav: Record<string, React.ReactNode>;
+  basename?: string;
+} & RouterProps;
+
+const Admin: React.FC<AdminProps> = (
+  {
+    logo,
+    title,
+    subtitle,
+    version,
+    nav,
+    pages,
+    extensions,
+    dashboard,
+    basename,
+  },
+) => {
+  const [loaded, setLoaded] = React.useState(false);
+
+  const api = useApi();
+  const i18n = useI18n();
+  const { user } = useUser();
+
+  React.useEffect(() => {
+    if (
+      !loaded && api !== undefined && i18n !== undefined && user !== undefined
+    ) {
+      setLoaded(true);
+    }
+  }, [loaded, api, i18n, user]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          flexDirection: "column",
+        }}
+      >
+        {loaded
+          ? user !== null
+            ? (
+              <BrowserRouter basename={basename}>
+                <RouterContextProvider>
+                  <Box sx={{ display: "flex" }}>
+                    <NavBar
+                      nav={nav}
+                      logo={logo}
+                      title={title}
+                      subtitle={subtitle}
+                      version={version}
+                    />
+                    <Router
+                      pages={pages}
+                      extensions={extensions}
+                      dashboard={dashboard}
+                    />
+                  </Box>
+                </RouterContextProvider>
+              </BrowserRouter>
+            )
+            : <LoginPage logo={logo} title={title} />
+          : <LoadingScreen logo={logo} loading={!loaded} />}
+      </Box>
+    </>
+  );
+};
+
+export default Admin;

package/src/App.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import CssBaseline from "@mui/material/CssBaseline";
+import { createTheme, Theme, ThemeProvider } from "@mui/material/styles";
+import Admin, { AdminProps } from "./Admin";
+import { ApiContextProvider } from "./contexts/ApiContext";
+import { ApiClient } from "./api";
+import { UserContextProvider } from "./contexts/UserContext";
+import { I18nContextProvider } from "./contexts/I18nContext";
+import { SnackbarProvider } from "notistack";
+
+type AppProps = {
+  api: ApiClient | string | URL | {
+    schema: string | URL;
+    server?: string | URL;
+  };
+  theme?: Partial<Theme> | ((outerTheme: Theme) => Theme);
+} & AdminProps;
+
+const App: React.FC<AppProps> = ({ theme, api, ...rest }) => {
+  return (
+    <ThemeProvider theme={theme ?? createTheme()}>
+      <CssBaseline />
+      <SnackbarProvider
+        maxSnack={4}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+      >
+        <ApiContextProvider api={api}>
+          <I18nContextProvider>
+            <UserContextProvider>
+              <Admin {...rest} />
+            </UserContextProvider>
+          </I18nContextProvider>
+        </ApiContextProvider>
+      </SnackbarProvider>
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/api.ts

@@ -0,0 +1,202 @@
+import SwaggerParser from "@apidevtools/swagger-parser";
+import { OpenAPI } from "openapi-types";
+import { getCookie } from "./util/get_cookie";
+
+export class ApiOperation {
+  readonly id: string;
+  readonly tags: string[];
+  readonly server: string;
+  readonly endpoint: string;
+  readonly method: string;
+  readonly request: OpenAPI.Request;
+  readonly summary?: string;
+  readonly description?: string;
+
+  constructor(
+    id: string,
+    tags: string[],
+    server: string,
+    endpoint: string,
+    method: string,
+    request: OpenAPI.Request,
+    summary?: string,
+    description?: string,
+  ) {
+    this.id = id;
+    this.tags = tags;
+    this.server = server;
+    this.endpoint = endpoint;
+    this.method = method;
+    this.request = request;
+    this.summary = summary;
+    this.description = description;
+  }
+
+  async call(request?: OpenAPI.Request, init?: RequestInit) {
+    let endpoint = this.endpoint;
+    const csrftoken = getCookie("csrftoken");
+
+    init ??= {};
+    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?.body !== undefined) {
+      init.body ??= JSON.stringify(request?.body);
+    }
+
+    // Add params to url
+    if (request?.params !== undefined) {
+      for (const [name, value] of Object.entries(request.params)) {
+        endpoint = endpoint.replace(`{${name}}`, value);
+      }
+    }
+
+    const url = new URL(this.server + endpoint);
+
+    // Add query to url
+    if (request?.query !== undefined) {
+      for (const [name, value] of Object.entries(request.query)) {
+        url.searchParams.append(name, value);
+      }
+    }
+
+    return await fetch(url, init);
+  }
+}
+
+export class ApiClient {
+  readonly document: OpenAPI.Document;
+  readonly operations: Record<string, ApiOperation> = {};
+
+  static async load(source: string | URL, server?: string | URL) {
+    const response = await fetch(source);
+    if (!response.ok) {
+      throw new Error(`Could not load schema from ${source}`);
+    }
+    const schema = await response.json().catch((e) => {
+      throw e;
+    });
+
+    const document = await SwaggerParser.dereference(schema);
+    return new ApiClient(document, server);
+  }
+
+  constructor(document: OpenAPI.Document, server?: string | URL) {
+    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 ??= 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 (
+      const [path, definition] of Object.entries(
+        this.document.paths ?? {},
+      ) as [string, Record<string, OpenAPI.Operation>][]
+    ) {
+      for (const [method, operation] of Object.entries(definition)) {
+        // All operations require an operation id
+        if (!operation.operationId) {
+          break;
+        }
+
+        // Check if an tag starting with `app:` exists on the operation
+        if (!operation.tags?.some((tag) => tag.startsWith("app:"))) {
+          break;
+        }
+
+        const request: OpenAPI.Request = {};
+
+        // Fill the request object with `path`, `query` and `body` data which may be provided
+        for (
+          const parameter of operation.parameters ?? [] as OpenAPI.Parameter[]
+        ) {
+          if ("in" in parameter) {
+            switch (parameter.in) {
+              case "body": {
+                request["body"] = {
+                  required: parameter.required ?? false,
+                  schema: parameter.schema,
+                };
+                break;
+              }
+
+              case "path": {
+                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": {
+                request["query"] ??= {};
+                request["query"][parameter.name] = {
+                  required: parameter.required ?? 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) {
+            const schema =
+              operation.requestBody.content["application/json"].schema;
+            const required = operation.requestBody.required ?? false;
+
+            request["body"] = {
+              schema,
+              required,
+            };
+          }
+        }
+
+        // Combine base url and path
+        server = server ? server.toString() : "";
+        if (server.endsWith("/")) {
+          server = server.slice(0, -1);
+        }
+
+        const 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,
+        );
+      }
+    }
+  }
+
+  async isAuthenticated() {
+    try {
+      const response = await this.operations["bananas.me:list"].call();
+      return response.ok;
+    } catch {
+      return false;
+    }
+  }
+}

package/src/components/Branding.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import { SxProps } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+import { ss } from "../util/select_styles";
+import Logo from "./Logo";
+import { LogoType } from "../types";
+
+interface BrandingProps {
+  logo?: LogoType;
+  title?: string;
+  subtitle?: string;
+  version?: string;
+  onClick?: React.MouseEventHandler;
+  fullWidth?: boolean;
+  sx?: SxProps;
+}
+
+const Branding: React.FC<BrandingProps> = (
+  { logo, title, subtitle, version, onClick, fullWidth, sx },
+) => {
+  return (
+    <Box
+      sx={ss(
+        {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          flexGrow: 1,
+        },
+        [{ width: "100%" }, fullWidth ?? false],
+        sx,
+      )}
+    >
+      <ButtonBase
+        sx={{
+          justifyContent: "flex-start",
+          width: "100%",
+          height: "100%",
+          padding: 0,
+        }}
+        color="inherit"
+        onClick={onClick}
+      >
+        {logo ? <Logo src={logo} /> : (
+          <Typography
+            sx={{
+              fontWeight: "bold",
+            }}
+            color="inherit"
+            variant="h4"
+          >
+            {title}
+          </Typography>
+        )}
+        <Box
+          sx={{
+            marginLeft: 10,
+            "& > *": {
+              textAlign: "left",
+              fontSize: "0.75rem",
+              display: "block",
+              lineHeight: `1em`,
+            },
+          }}
+        >
+          <Typography color="inherit">{subtitle}</Typography>
+          <Typography color="inherit">{version}</Typography>
+        </Box>
+      </ButtonBase>
+    </Box>
+  );
+};
+
+export default Branding;

package/src/components/Hamburger.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import MenuIcon from "@mui/icons-material/Menu";
+import Box from "@mui/material/Box";
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+
+type HamburgerProps = {
+  open: boolean;
+  onToggle?: React.MouseEventHandler;
+} & IconButtonProps;
+
+const Hamburger: React.FC<HamburgerProps> = ({ open, onToggle, ...rest }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: theme.spacing(0, 1),
+        flexShrink: 1,
+        ...theme.mixins.toolbar,
+      }}
+    >
+      <IconButton
+        aria-label={open ? "Close drawer" : "Open drawer"}
+        color="inherit"
+        onClick={onToggle}
+        {...rest}
+        size="large"
+      >
+        {open ? <ChevronLeftIcon /> : <MenuIcon />}
+      </IconButton>
+    </Box>
+  );
+};
+
+export default Hamburger;

package/src/components/Link.tsx

@@ -0,0 +1,23 @@
+import { RouteInfo, useRouter } from "../contexts/RouterContext";
+import { Link as RouterLink } from "react-router-dom";
+import React from "react";
+
+type LinkProps = { route: RouteInfo } | { route: string };
+
+const Link: React.FC<LinkProps> = ({ route }) => {
+  const { getRoute } = useRouter();
+
+  if (typeof route === "string") {
+    const routeInfo = getRoute(route);
+
+    if (routeInfo === undefined) {
+      throw new Error(`Could not find route with reverse: ${route}`);
+    }
+
+    route = routeInfo;
+  }
+
+  return <RouterLink to={route.path}></RouterLink>;
+};
+
+export default Link;