bananas-commerce-admin 0.1.0

package/src/components/Logo.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { LogoType } from "../types";
+
+interface LogoProps {
+  src?: LogoType;
+}
+
+const Logo: React.FC<LogoProps> = ({ src }) => {
+  if (src === true) {
+    return (
+      <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"
+      >
+        <g fill="#FFFFFF">
+          <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
+			c-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
+			l-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" />
+          <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
+			c-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
+			c17.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
+			c-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
+			c2.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
+			c78.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
+			C873.66,206.771,847.06,179.271,811.86,163.17z" />
+          <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
+			c34.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
+			c18.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
+			l-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
+			c-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" />
+        </g>
+      </svg>
+    );
+  }
+
+  if (typeof src === "string") {
+    return <img src={src} />;
+  }
+
+  if (src) {
+    const Src = src;
+    return <Src />;
+  }
+
+  return null;
+};
+
+export default Logo;

package/src/components/NavBar.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { CSSObject, Theme, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import Divider from "@mui/material/Divider";
+import User from "./User";
+import Hamburger from "./Hamburger";
+import NavBarRoutes from "./NavBarRoutes";
+import Branding from "./Branding";
+import { LogoType } from "../types";
+import { useNavigate } from "react-router-dom";
+
+const drawerWidth = 240;
+
+const openedMixin = (theme: Theme): CSSObject => ({
+  width: drawerWidth,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen,
+  }),
+  overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: "hidden",
+  width: `calc(${theme.spacing(7)} + 1px)`,
+  [theme.breakpoints.up("sm")]: {
+    width: `calc(${theme.spacing(8)} + 1px)`,
+  },
+});
+
+interface NavBarProps {
+  nav: Record<string, React.ReactNode>;
+  logo?: LogoType;
+  title?: string;
+  subtitle?: string;
+  version?: string;
+}
+
+const NavBar: React.FC<NavBarProps> = (
+  { nav, logo, title, subtitle, version },
+) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  const [open, setOpen] = React.useState(true);
+
+  const toggleDrawerOpen = () => {
+    setOpen(!open);
+  };
+
+  const onClick = () => {
+    navigate("/", { replace: true });
+  };
+
+  return (
+    <Drawer
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+        boxSizing: "border-box",
+        ...(open && {
+          ...openedMixin(theme),
+          "& .MuiDrawer-paper": openedMixin(theme),
+        }),
+        ...(!open && {
+          ...closedMixin(theme),
+          "& .MuiDrawer-paper": closedMixin(theme),
+        }),
+      }}
+      anchor="left"
+      variant="permanent"
+      open={open}
+    >
+      <Box sx={{ display: "flex", padding: theme.spacing(2, 0, 2) }}>
+        <Hamburger open={open} onClick={toggleDrawerOpen} />
+        <Branding
+          sx={{ opacity: open ? 1 : 0 }}
+          logo={logo}
+          title={title}
+          subtitle={subtitle}
+          version={version}
+          onClick={onClick}
+          fullWidth={open}
+        />
+      </Box>
+
+      <Box
+        sx={{
+          flexGrow: 1,
+          flexShrink: 0,
+        }}
+      >
+        <NavBarRoutes nav={nav} open={open} />
+      </Box>
+
+      <Box
+        sx={{
+          flexGrow: 0,
+          flexShrink: 0,
+        }}
+      >
+        <Divider />
+        <User open={open} />
+      </Box>
+    </Drawer>
+  );
+};
+
+export default NavBar;

package/src/components/NavBarItem.tsx

@@ -0,0 +1,73 @@
+import { useTheme } from "@mui/material/styles";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { RouteInfo, useRouter } from "../contexts/RouterContext";
+import { LogoType } from "../types";
+import Link from "./Link";
+import Logo from "./Logo";
+
+interface NavBarItemProps {
+  route: RouteInfo;
+  title: string;
+  open: boolean;
+  subtitle?: string | React.ReactNode;
+  icon?: LogoType;
+}
+
+const NavBarItem: React.FC<React.PropsWithChildren<NavBarItemProps>> = (
+  { route, title, subtitle, icon, children, open },
+) => {
+  const Icon = icon;
+  const [selected, setSelected] = React.useState(false);
+  const location = useLocation();
+  const { navigate } = useRouter();
+  const theme = useTheme();
+
+  const onClick = () => {
+    navigate(route);
+  };
+
+  React.useEffect(() => {
+    setSelected(location.pathname === route.path);
+  }, [location]);
+
+  return (
+    <ListItem
+      onClick={onClick}
+      key={route.id}
+      disablePadding
+      sx={{ display: "block" }}
+    >
+      <ListItemButton
+        selected={selected}
+        sx={{
+          minHeight: 48,
+          justifyContent: open ? "initial" : "center",
+          px: 2.5,
+        }}
+      >
+        <ListItemIcon
+          sx={{
+            minWidth: 0,
+            justifyContent: "center",
+            padding: theme.spacing(1, 1),
+          }}
+        >
+          {Icon !== undefined ? <Logo src={Icon} /> : title.substring(0, 1)}
+        </ListItemIcon>
+        <ListItemText
+          sx={{ opacity: open ? 1 : 0 }}
+          primary={title}
+          secondary={subtitle}
+        />
+        {children}
+      </ListItemButton>
+    </ListItem>
+  );
+};
+
+export default NavBarItem;

package/src/components/NavBarRoutes.tsx

@@ -0,0 +1,67 @@
+import List from "@mui/material/List";
+import React from "react";
+import { RouteInfo, useRouter } from "../contexts/RouterContext";
+import NavBarItem from "./NavBarItem";
+
+interface NavBarRoutesProps {
+  nav: Record<string, React.ReactNode>;
+  open: boolean;
+}
+
+function groupRoutesByApp(routes: RouteInfo[]): Record<string, RouteInfo[]> {
+  const groupedRoutes = {};
+
+  for (const route of routes) {
+    groupedRoutes[route.app] ??= [];
+    groupedRoutes[route.app].push(route);
+  }
+
+  return groupedRoutes;
+}
+
+const NavBarRoutes: React.FC<NavBarRoutesProps> = ({ nav, open }) => {
+  const { routes } = useRouter();
+
+  const navItems = React.useMemo(() => {
+    const apps: React.ReactNode[] = [];
+    const groupedRoutes = groupRoutesByApp(routes);
+
+    for (const app of Object.keys(groupedRoutes)) {
+      const appRoutes = groupedRoutes[app];
+      const appItems: React.ReactNode[] = [];
+
+      for (const route of appRoutes) {
+        if (route.navigation) {
+          appItems.push(
+            <NavBarItem
+              key={route.id}
+              route={route}
+              title={route.title}
+              open={open}
+            />,
+          );
+        }
+      }
+
+      apps.push(
+        <List key={app}>
+          {appItems}
+        </List>,
+      );
+    }
+
+    return apps;
+  }, [
+    routes,
+    nav,
+    open,
+  ]);
+
+  return (
+    <>
+      {navItems}
+    </>
+  );
+};
+
+export default NavBarRoutes;

package/src/components/ProgressBar.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { LinearProgress } from "@mui/material";
+
+interface ProgressBarProps {
+  loading?: boolean;
+  color?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "info"
+    | "success"
+    | "warning"
+    | "inherit"
+    | undefined;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  loading,
+  color,
+}) => {
+  loading ??= true;
+  color ??= "secondary";
+
+  return (
+    loading && <LinearProgress color={color} />
+  );
+};
+
+export default ProgressBar;

package/src/components/User.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import ButtonBase from "@mui/material/ButtonBase";
+import List from "@mui/material/List";
+import { Theme, useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+import { useUser } from "../contexts/UserContext";
+import { LogoType } from "../types";
+import NavBarItem from "./NavBarItem";
+import { ss } from "../util/select_styles";
+import { useRouter } from "../contexts/RouterContext";
+import { useLocation } from "react-router-dom";
+
+const styles = (theme: Theme) => ({
+  root: {
+    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,
+    },
+  },
+});
+
+interface UserProps {
+  classes?: ReturnType<typeof styles>;
+  open: boolean;
+  icon?: LogoType;
+}
+
+const User: React.FC<UserProps> = ({ classes, open, icon }) => {
+  const { user, logout } = useUser();
+  const { routes, getRoute } = useRouter();
+
+  classes ??= styles(useTheme());
+
+  const UserIcon = icon ?? AccountCircleIcon;
+  const [route, logoutText, selected] = React.useMemo(() => {
+    const route = getRoute("bananas.me:list");
+    return [
+      route,
+      getRoute("bananas.logout:create")!.title,
+      route?.path === window.location.pathname,
+    ];
+  }, [routes]);
+
+  return (
+    user !== null && route !== undefined
+      ? (
+        <List>
+          <NavBarItem
+            route={route}
+            open={open}
+            icon={UserIcon}
+            title={user.full_name}
+            subtitle={
+              <ButtonBase
+                sx={ss(
+                  classes.link,
+                  classes.drawerLink,
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  logout();
+                }}
+              >
+                <Typography color="inherit">{logoutText}</Typography>
+              </ButtonBase>
+            }
+          />
+        </List>
+      )
+      : null
+  );
+};
+
+export default User;

package/src/containers/Content.tsx

@@ -0,0 +1,18 @@
+import { Box } from "@mui/material";
+import React from "react";
+
+const Content: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        position: "relative",
+        flexGrow: 1,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Content;

package/src/containers/ErrorScreen.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import { useTheme } from "@mui/material/styles";
+import { Button, CardActions, Typography } from "@mui/material";
+import { PageLoadFailedError } from "./PageLoader";
+import { useI18n } from "../contexts/I18nContext";
+import { useUser } from "../contexts/UserContext";
+
+const 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.",
+};
+
+interface ErrorScreenInnerProps {
+  error: PageLoadFailedError;
+}
+
+const ErrorScreen: React.FC<ErrorScreenInnerProps> = ({
+  error,
+}) => {
+  const { t } = useI18n();
+  const { user, logout } = useUser();
+  const theme = useTheme();
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h4">
+          {error.message}
+        </Typography>
+
+        <Typography>
+          {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."
+              : errorMessages[error.response.status] ?? "",
+            (user as unknown as Record<string, string>) ?? {},
+          )}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        {error.response.status === 403 && (
+          <Box sx={{ marginTop: theme.spacing(3), textAlign: "right" }}>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={() =>
+                logout()}
+              sx={{ boxShadow: "none" }}
+            >
+              {t("Log in again")}
+            </Button>
+          </Box>
+        )}
+      </CardActions>
+    </Card>
+  );
+};
+
+export default ErrorScreen;

package/src/containers/LoadingScreen.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+
+import { Theme, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Fade from "@mui/material/Fade";
+import { alpha } from "@mui/system";
+
+import Logo from "../components/Logo";
+import { LogoType } from "../types";
+import { ss } from "../util/select_styles";
+
+const styles = (theme: Theme) =>
+  ({
+    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: alpha(theme.palette.background.default, 0.666),
+    },
+    backdropPrimary: {
+      backgroundColor: alpha(theme.palette.primary.main, 0.666),
+    },
+    backdropSecondary: {
+      backgroundColor: alpha(theme.palette.secondary.main, 0.666),
+    },
+    backdropPaper: {
+      backgroundColor: 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),
+    },
+  }) as const;
+
+interface LoadingScreenInnerProps {
+  loading: boolean;
+  logo?: LogoType;
+  backdrop: boolean;
+  color?: string;
+  classes: ReturnType<typeof styles>;
+}
+
+const LoadingScreenInner: React.FC<LoadingScreenInnerProps> = ({
+  loading,
+  logo,
+  classes,
+  backdrop,
+  color,
+}) => {
+  return (
+    <Box
+      sx={ss(
+        classes.root,
+        [classes.backdrop, backdrop],
+        [classes.backdropPrimary, backdrop && color === "primary"],
+        [classes.backdropSecondary, backdrop && color === "secondary"],
+        [classes.backdropPaper, backdrop && color === "paper"],
+      )}
+    >
+      <Box
+        sx={classes.logo}
+      >
+        {logo && <Logo src={logo} />}
+      </Box>
+      {loading && (
+        <CircularProgress
+          sx={ss(classes.spinner, [classes.spinnerContrast, !color])}
+        />
+      )}
+    </Box>
+  );
+};
+
+interface LoadingScreenProps {
+  loading?: boolean;
+  logo?: LogoType;
+  backdrop?: boolean;
+  color?: string;
+  classes?: ReturnType<typeof styles>;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = (props) => {
+  let { loading, logo, backdrop, color, classes } = { ...props };
+  classes ??= styles(useTheme());
+  loading ??= true;
+  backdrop ??= false;
+
+  return backdrop
+    ? (
+      <Fade
+        in={loading}
+        timeout={{
+          enter: 750,
+          exit: 250,
+        }}
+      >
+        <LoadingScreenInner
+          loading={loading}
+          logo={logo}
+          backdrop={backdrop}
+          color={color}
+          classes={classes}
+        />
+      </Fade>
+    )
+    : (
+      <LoadingScreenInner
+        loading={loading}
+        logo={logo}
+        backdrop={backdrop}
+        color={color}
+        classes={classes}
+      />
+    );
+};
+
+export default LoadingScreen;

package/src/containers/PageErrorBoundary.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface PageErrorBoundaryProps<T = Error> {
+  errorPage: React.ComponentType<{ error: T }>;
+  children: React.ReactNode;
+}
+
+export default class PageErrorBoundary<T = Error>
+  extends React.Component<PageErrorBoundaryProps<T>> {
+  state: { error: T | null } = { error: null };
+  errorPage: PageErrorBoundaryProps<T>["errorPage"];
+
+  constructor(props: PageErrorBoundaryProps<T>) {
+    super(props);
+    this.errorPage = props.errorPage;
+  }
+
+  componentDidCatch(error: Error) {
+    this.setState({ error });
+  }
+
+  render() {
+    const { error } = this.state;
+
+    if (error) {
+      const ErrorPage = this.errorPage;
+      return <ErrorPage error={error} />;
+    }
+
+    return this.props.children;
+  }
+}