npm - bananas-commerce-admin - Versions diffs - 0.2.2 → 0.2.5 - Mend

bananas-commerce-admin 0.2.2 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/example/package.json CHANGED Viewed

@@ -1,9 +1,8 @@
 {
-  "name": "bananas-commerce-admin-example",
+  "name": "bananas-commerce-example-admin",
   "version": "0.1.0",
   "private": true,
-  "description": "Bananas-commerce admin interface and building blocks",
-  "type": "module",
+  "description": "Bananas Commerce Admin Example App",
   "keywords": [
     "admin",
     "bananas",
@@ -13,27 +12,38 @@
     "bananas-commerce",
     "bananas-commerce-admin"
   ],
+  "type": "module",
   "author": "Elias Sjögreen",
   "scripts": {
-    "build": "node build.js"
+    "build": "node ./scripts/build.js",
+    "build:watch": "node ./scripts/build.js --watch",
+    "serve": "live-server --port=3000 --no-browser --proxy=/_/:http://localhost:8000/_/ --mount=/:./public/ ./public/index.html",
+    "serve:watch": "npm run build:watch & npm run serve"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@types/lodash": "^4.14.182",
+    "@node-rs/xxhash": "^1.2.1",
     "@types/node": "^16.11.43",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "esbuild": "^0.15.14",
+    "esbuild": "^0.15.18",
+    "esbuild-plugin-svgr": "^1.0.1",
+    "live-server": "^1.2.2",
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@apidevtools/swagger-parser": "^10.1.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@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"
+    "notistack": "^2.0.8",
+    "react": "file:../node_modules/react",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.5"
   }
 }

package/example/scripts/build.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { build } from "esbuild";
+import { options } from "./options.js";
+await build(options);

package/example/scripts/options.js ADDED Viewed

@@ -0,0 +1,81 @@
+import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
+import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import svgrPlugin from "esbuild-plugin-svgr";
+import path from "node:path";
+const htmlTemplate = (entrypoint) =>
+  `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <script type="module">
+      globalThis.process ??= {};
+      globalThis.process.env ??= {};
+      globalThis.process.env.SENTRY_DSN = \`<!--# echo var="SENTRY_DSN" -->\`;
+      globalThis.process.env.SENTRY_ENVIRONMENT = \`<!--# echo var="SENTRY_ENVIRONMENT" -->\`;
+    </script>
+    <script type="module" src="${path.join(
+      process.env.BASE_URL ?? "/",
+      entrypoint
+    )}"></script>
+    <title>Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
+`;
+export const options = {
+  entryPoints: ["./index.tsx"],
+  outdir: "./public/",
+  logLevel: "info",
+  chunkNames: "[name]-[hash]",
+  publicPath: process.env.BASE_URL ?? "/",
+  target: "es6",
+  format: "esm",
+  bundle: true,
+  splitting: true,
+  treeShaking: true,
+  sourcemap: true,
+  minify: true,
+  metafile: true,
+  define: {
+    "process.env.NODE_ENV": `"${process.env.NODE_ENV ?? "development"}"`,
+    "process.env.BASE_URL":
+      process.env.BASE_URL != undefined
+        ? `"${process.env.BASE_URL}"`
+        : "undefined",
+  },
+  plugins: [
+    svgrPlugin(),
+    NodeModulesPolyfillPlugin(),
+    NodeGlobalsPolyfillPlugin({
+      process: true,
+      buffer: true,
+    }),
+    {
+      name: "create-index-plugin",
+      async setup(build) {
+        const fs = await import("node:fs/promises");
+        const { xxh32 } = await import("@node-rs/xxhash");
+        build.onEnd(async (result) => {
+          const source = await fs.readFile("./public/index.js", {
+            encoding: "utf-8",
+          });
+          const filename = `index-${xxh32(source)
+            .toString(36)
+            .toUpperCase()}.js`;
+          await Promise.all([
+            fs.writeFile(`./public/${filename}`, source),
+            fs.writeFile("./public/index.html", htmlTemplate(filename)),
+          ]);
+        });
+      },
+    },
+  ],
+  watch: process.argv.includes("-w") || process.argv.includes("--watch"),
+};

package/{example/pages/.gitkeep → nodemon.json} RENAMED Viewed

File without changes

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Bananas-commerce admin interface and building blocks",
   "keywords": [
     "admin",
@@ -23,6 +23,8 @@
     }
   },
   "scripts": {
+    "dev": "npm run build:esm:watch & npm run build:watch --prefix ./example & npm run serve --prefix ./example",
+    "dev:install": "npm i && npx npm-install-peers && npm i --prefix ./example",
     "build": "npm run build:esm && npm run build:cjs",
     "build:esm": "tsc",
     "build:esm:watch": "npm run build:esm -- --watch",
@@ -30,8 +32,8 @@
     "build:cjs:watch": "npm run build:cjs -- --watch"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "openapi-types": "^12.0.0",
     "typescript": "^4.7.4"
   },
@@ -43,8 +45,10 @@
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/system": "^5.8.7",
+    "mui-chips-input": "^1.3.1",
     "notistack": "^2.0.5",
-    "react": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   },
   "dependencies": {

package/src/Admin.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import { useUser } from "./contexts/UserContext";
 import LoginPage from "./pages/LoginPage";
 import { Router, RouterProps } from "./router/Router";
 import { LogoType, NavOverrides } from "./types";
+import DialogContextProvider, { BcomDialog } from "./contexts/DialogContext";
 export type AdminProps = {
   logo?: LogoType;
@@ -22,18 +23,16 @@ export type AdminProps = {
   basename?: string;
 } & RouterProps;
-const Admin: React.FC<AdminProps> = (
-  {
-    logo,
-    title,
-    subtitle,
-    version,
-    nav,
-    extensions,
-    dashboard,
-    basename,
-  },
-) => {
+const Admin: React.FC<AdminProps> = ({
+  logo,
+  title,
+  subtitle,
+  version,
+  nav,
+  extensions,
+  dashboard,
+  basename,
+}) => {
   const [loaded, setLoaded] = React.useState(false);
   const api = useApi();
@@ -42,7 +41,10 @@ const Admin: React.FC<AdminProps> = (
   React.useEffect(() => {
     if (
-      !loaded && api !== undefined && i18n !== undefined && user !== undefined
+      !loaded &&
+      api !== undefined &&
+      i18n !== undefined &&
+      user !== undefined
     ) {
       setLoaded(true);
     }
@@ -61,11 +63,12 @@ const Admin: React.FC<AdminProps> = (
           flexDirection: "column",
         }}
       >
-        {loaded
-          ? user !== null
-            ? (
-              <BrowserRouter basename={basename}>
-                <RouterContextProvider>
+        {loaded ? (
+          user !== null ? (
+            <BrowserRouter basename={basename}>
+              <RouterContextProvider>
+                <DialogContextProvider>
+                  <BcomDialog />
                   <Box sx={{ display: "flex" }}>
                     <NavBar
                       nav={nav}
@@ -74,16 +77,17 @@ const Admin: React.FC<AdminProps> = (
                       subtitle={subtitle}
                       version={version}
                     />
-                    <Router
-                      extensions={extensions}
-                      dashboard={dashboard}
-                    />
+                    <Router extensions={extensions} dashboard={dashboard} />
                   </Box>
-                </RouterContextProvider>
-              </BrowserRouter>
-            )
-            : <LoginPage logo={logo} title={title} />
-          : <LoadingScreen logo={logo} loading={!loaded} />}
+                </DialogContextProvider>
+              </RouterContextProvider>
+            </BrowserRouter>
+          ) : (
+            <LoginPage logo={logo} title={title} />
+          )
+        ) : (
+          <LoadingScreen logo={logo} loading={!loaded} />
+        )}
       </Box>
     </>
   );

package/src/App.tsx CHANGED Viewed

@@ -10,10 +10,14 @@ import { I18nContextProvider } from "./contexts/I18nContext";
 import { SnackbarProvider } from "notistack";
 type AppProps = {
-  api: ApiClient | string | URL | {
-    schema: string | URL;
-    server?: string | URL;
-  };
+  api:
+    | ApiClient
+    | string
+    | URL
+    | {
+        schema: string | URL;
+        server?: string | URL;
+      };
   theme?: Partial<Theme> | ((outerTheme: Theme) => Theme);
 } & AdminProps;

package/src/components/TitleBar.tsx CHANGED Viewed

@@ -13,9 +13,11 @@ export interface TitleBarProps {
   title?: React.ReactNode;
 }
-export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
-  { back = false, title, children },
-) => {
+export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = ({
+  back = false,
+  title,
+  children,
+}) => {
   const theme = useTheme();
   const { navigate } = useRouter();
@@ -27,6 +29,7 @@ export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
     <AppBar
       sx={{
         flexGrow: 1,
+        backgroundColor: theme.palette.background.paper,
         borderBottomWidth: 1,
         borderBottomStyle: "solid",
         borderBottomColor: theme.palette.divider,
@@ -36,21 +39,23 @@ export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
     >
       <Toolbar>
         <Box sx={{ display: "flex", flexGrow: 1, alignItems: "center" }}>
-          {back
-            ? (
-              <IconButton
-                size="large"
-                edge="start"
-                color="inherit"
-                aria-label="back"
-                sx={{ mr: 2 }}
-                onClick={() => navigate(back as string | number | RouteInfo)}
-              >
-                <ArrowBackIcon />
-              </IconButton>
-            )
-            : null}
-          {title ? <Typography variant="h6">{title}</Typography> : null}
+          {back ? (
+            <IconButton
+              size="large"
+              edge="start"
+              color="default"
+              aria-label="back"
+              sx={{ mr: 2 }}
+              onClick={() => navigate(back as string | number | RouteInfo)}
+            >
+              <ArrowBackIcon />
+            </IconButton>
+          ) : null}
+          {title ? (
+            <Typography color={theme.palette.text.primary} variant="h6">
+              {title}
+            </Typography>
+          ) : null}
         </Box>
         {children}
       </Toolbar>

package/src/containers/Content.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ const Content: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
       container
       sx={{
         position: "relative",
-        padding: 2,
+        padding: 3,
         minWidth: 600,
         overflow: "scroll",
         height: "100%",

package/src/containers/PageLoader.tsx CHANGED Viewed

@@ -22,9 +22,15 @@ export interface PageLoaderProps {
   route: RouteInfo;
   page: PageComponent | Promise<PageComponent>;
   request?: OpenAPI.Request;
+  defaultRequest?: OpenAPI.Request;
 }
-const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
+const PageLoader: React.FC<PageLoaderProps> = ({
+  route,
+  page,
+  request,
+  defaultRequest,
+}) => {
   const Page = React.lazy(async () => ({
     default: await Promise.resolve(page),
   }));
@@ -37,17 +43,29 @@ const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
   React.useEffect(() => {
     if (data === null) {
-      api.operations[route.id].call({
-        params: { ...params, ...request?.params },
-        query: new URLSearchParams([
-          ...searchParams.entries(),
-          ...(request?.query != null
-            ? request.query instanceof URLSearchParams
-              ? request.query.entries()
-              : Object.entries(request.query)
-            : []),
-        ]),
-      })
+      const query =
+        Array.from(searchParams.entries()).length == 0
+          ? defaultRequest?.query != null
+            ? defaultRequest.query instanceof URLSearchParams
+              ? defaultRequest.query.entries()
+              : Object.entries(defaultRequest.query)
+            : []
+          : searchParams.entries();
+      api.operations[route.id]
+        .call({
+          params: { ...params, ...request?.params },
+          query: new URLSearchParams([
+            ...Array.from(query),
+            ...Array.from(
+              request?.query != null
+                ? request.query instanceof URLSearchParams
+                  ? request.query.entries()
+                  : Object.entries(request.query)
+                : []
+            ),
+          ]),
+        })
         .then(async (response) => {
           if (response.ok) {
             setData(await response.json());
@@ -55,8 +73,8 @@ const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
             throwError(
               new PageLoadFailedError(
                 response,
-                `Page data load failed with ${response.status} ${response.statusText}`,
-              ),
+                `Page data load failed with ${response.status} ${response.statusText}`
+              )
             );
           }
         })

package/src/contexts/DialogContext.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import React, { useContext, useState } from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+const DialogContext = React.createContext<{
+  title: string;
+  description: string;
+  cb: (ok: boolean) => void;
+  open: boolean;
+  makeOpen: (title: string, description: string) => Promise<boolean>;
+}>({
+  makeOpen: () => Promise.resolve(false),
+} as any);
+function DialogContextProvider(props: { children: React.ReactNode }) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [open, setOpen] = useState(false);
+  return (
+    <DialogContext.Provider
+      value={{
+        makeOpen: (title, description) => {
+          setTitle(title);
+          setDescription(description);
+          setOpen(true);
+          return new Promise((resolve) => {
+            const event = (e: any) => {
+              window.removeEventListener("dialogclick", event);
+              resolve(e.detail);
+            };
+            window.addEventListener("dialogclick", event);
+          });
+        },
+        title: title,
+        description: description,
+        open: open,
+        cb: (ok) => {
+          window.dispatchEvent(new CustomEvent("dialogclick", { detail: ok }));
+          setOpen(false);
+        },
+      }}
+    >
+      {props.children}
+    </DialogContext.Provider>
+  );
+}
+export function BcomDialog() {
+  const ctx = useContext(DialogContext);
+  return (
+    <Dialog open={ctx.open}>
+      <DialogContent>
+        <DialogTitle>{ctx.title}</DialogTitle>
+        <DialogContent>{ctx.description}</DialogContent>
+        <DialogActions>
+          <Button onClick={() => ctx.cb(false)}>Cancel</Button>
+          <Button onClick={() => ctx.cb(true)}>Ok</Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+}
+export function useDialog() {
+  const { makeOpen } = useContext(DialogContext);
+  return makeOpen;
+}
+export default DialogContextProvider;

package/src/contexts/UserContext.tsx CHANGED Viewed

@@ -19,18 +19,18 @@ interface UserContext {
   changePassword: (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string,
+    newPassword2: string
   ) => Promise<void>;
 }
 const UserContext = React.createContext<UserContext>(
-  undefined as unknown as UserContext,
+  undefined as unknown as UserContext
 );
 export const useUser = () => React.useContext(UserContext);
-export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = (
-  { children },
-) => {
+export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
   const api = useApi();
   const [user, setUser] = useLocalStorage("user", null);
@@ -62,16 +62,17 @@ export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = (
   const changePassword = async (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string,
+    newPassword2: string
   ) => {
-    const response = await api?.operations["bananas.change_password:create"]
-      .call({
-        body: {
-          old_password: oldPassword,
-          new_password1: newPassword1,
-          new_password2: newPassword2,
-        },
-      });
+    const response = await api?.operations[
+      "bananas.change_password:create"
+    ].call({
+      body: {
+        old_password: oldPassword,
+        new_password1: newPassword1,
+        new_password2: newPassword2,
+      },
+    });
     if (!response.ok) {
       throw new Error("Failed to change password");