@saleor/macaw-ui 0.2.4

package/src/Sidebar/MenuItem.tsx

@@ -0,0 +1,217 @@
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import { fade } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import clsx from "clsx";
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import { makeStyles } from "../theme";
+import { SidebarMenuItem } from "./types";
+
+export interface MenuItemProps {
+  active: boolean;
+  isMenuShrunk: boolean;
+  menuItem: SidebarMenuItem;
+  onClick: (url: string) => void;
+}
+
+export const menuWidth = 210;
+export const shrunkMenuWidth = 72;
+
+const useStyles = makeStyles(
+  (theme) => ({
+    hideLabel: {
+      "&$label": {
+        opacity: 0,
+      },
+    },
+    icon: {
+      "& svg": {
+        height: 24,
+        width: 24,
+      },
+      marginRight: theme.spacing(1.5),
+      transition: theme.transitions.duration.shortest + "ms",
+    },
+    label: {
+      cursor: "pointer",
+      display: "block",
+      fontSize: 16,
+      fontWeight: "bold",
+      opacity: 1,
+      transition: theme.transitions.duration.shortest + "ms",
+    },
+    labelRoot: {
+      position: "absolute",
+      left: 72,
+      width: 200,
+      textAlign: "left",
+      pointerEvents: "none",
+    },
+    menuItemBtn: {
+      "&:focus": {
+        color: theme.palette.primary.main,
+        outline: 0,
+      },
+      background: "none",
+      border: "none",
+      color: "inherit",
+      cursor: "pointer",
+      display: "inline-flex",
+      margin: 0,
+      padding: 0,
+    },
+    paper: {
+      borderRadius: 16,
+      boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)",
+      cursor: "default",
+      padding: theme.spacing(3),
+      textAlign: "left",
+    },
+    popper: {
+      marginLeft: theme.spacing(3),
+      zIndex: 2,
+    },
+    root: {
+      "&:hover, &:focus": {
+        color: theme.palette.primary.main,
+        outline: 0,
+      },
+      borderBottomRightRadius: 100,
+      borderTopRightRadius: 100,
+      color: fade(theme.palette.text.primary, 0.6),
+      cursor: "pointer",
+      display: "flex",
+      height: 56,
+      marginBottom: theme.spacing(),
+      overflow: "hidden",
+      padding: theme.spacing(2, 3, 2, 3.5),
+      transition: theme.transitions.duration.shortest + "ms",
+      width: shrunkMenuWidth,
+    },
+    rootActive: {
+      "&$root": {
+        background: theme.palette.background.paper,
+        boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)",
+        color: theme.palette.primary.main,
+      },
+    },
+    rootExpanded: {
+      width: menuWidth,
+    },
+    subMenuLabel: {
+      "&$label": {
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(2),
+        },
+      },
+      "&:hover, &:focus": {
+        color: theme.palette.primary.main,
+        outline: 0,
+      },
+      background: "none",
+      border: "none",
+      color: fade(theme.palette.text.primary, 0.6),
+      padding: 0,
+      textAlign: "left",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+    },
+  }),
+  {
+    name: "MenuItem",
+  }
+);
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  active,
+  menuItem,
+  isMenuShrunk,
+  onClick,
+}) => {
+  const classes = useStyles({});
+  const [open, setOpen] = React.useState(false);
+  const anchor = React.useRef<HTMLDivElement>(null);
+
+  const handleClick = (event: React.MouseEvent, menuItem: SidebarMenuItem) => {
+    event.stopPropagation();
+    if (menuItem.children) {
+      setOpen(true);
+    } else {
+      onClick(menuItem.url!);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.rootActive]: active,
+        [classes.rootExpanded]: !isMenuShrunk,
+      })}
+      ref={anchor}
+      onClick={(event) => handleClick(event, menuItem)}
+    >
+      <button
+        className={classes.menuItemBtn}
+        data-test="menu-item-label"
+        data-test-id={menuItem.id}
+      >
+        {menuItem.iconSrc && (
+          <SVG className={classes.icon} src={menuItem.iconSrc} />
+        )}
+        <Typography
+          aria-label={menuItem.ariaLabel}
+          className={clsx(classes.label, classes.labelRoot, {
+            [classes.hideLabel]: isMenuShrunk,
+          })}
+          variant="body2"
+        >
+          {menuItem.label}
+        </Typography>
+      </button>
+      {menuItem.children && (
+        <Popper
+          className={classes.popper}
+          open={open}
+          anchorEl={anchor.current}
+          transition
+          disablePortal
+          placement="right-start"
+        >
+          <ClickAwayListener onClickAway={() => setOpen(false)}>
+            <Paper className={classes.paper}>
+              {menuItem.children.map((subMenuItem) => {
+                const linkProps = subMenuItem.external
+                  ? { href: subMenuItem.url, target: "_blank" }
+                  : {};
+
+                return (
+                  <Typography
+                    aria-label={subMenuItem.ariaLabel}
+                    component={subMenuItem.external ? "a" : "button"}
+                    className={clsx(classes.label, classes.subMenuLabel)}
+                    key={subMenuItem.url}
+                    onClick={(event: React.MouseEvent<any>) =>
+                      handleClick(event, subMenuItem)
+                    }
+                    data-test="submenu-item-label"
+                    data-test-id={subMenuItem.id}
+                    variant="body2"
+                    {...linkProps}
+                  >
+                    {subMenuItem.label}
+                  </Typography>
+                );
+              })}
+            </Paper>
+          </ClickAwayListener>
+        </Popper>
+      )}
+    </div>
+  );
+};
+
+MenuItem.displayName = "MenuItem";

package/src/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { SquareButton } from "../SquareButton";
+import * as fixtures from "./fixtures";
+import { Sidebar, SidebarProps } from "./Sidebar";
+
+const props: SidebarProps = {
+  active: "menu1",
+  menuItems: fixtures.menu,
+  onMenuItemClick: () => undefined,
+};
+
+export const Default: Story = () => <Sidebar {...props} />;
+export const WithToolbar: Story = () => (
+  <Sidebar {...props} toolbar={<SquareButton>tool</SquareButton>} />
+);
+
+export default {
+  title: "Sidebar",
+} as Meta;

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,88 @@
+import clsx from "clsx";
+import React from "react";
+
+import { Logo } from "../icons/Logo";
+import { localStorageKeys } from "../localStorageKeys";
+import { makeStyles } from "../theme";
+import useLocalStorage from "../tools/useLocalStorage";
+import { ExpandButton } from "./ExpandButton";
+import { MenuItem, menuWidth, shrunkMenuWidth } from "./MenuItem";
+import { BaseSidebarProps } from "./types";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    expandButton: {
+      marginLeft: theme.spacing(2),
+    },
+    float: {
+      height: "100vh",
+      position: "fixed",
+    },
+    logo: {
+      margin: `36px 0 ${theme.spacing(3)} ${theme.spacing(3.5)}`,
+    },
+    root: {
+      transition: "width 0.5s ease",
+      width: menuWidth,
+      zIndex: 100,
+    },
+    rootShrink: {
+      width: shrunkMenuWidth,
+    },
+    toolbarContainer: {
+      margin: theme.spacing(1, 0, 1, 2),
+    },
+  }),
+  {
+    name: "SideBar",
+  }
+);
+
+export interface SidebarProps extends BaseSidebarProps {
+  active: string;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  active,
+  menuItems,
+  toolbar,
+  onMenuItemClick,
+}) => {
+  const classes = useStyles({});
+  const { value: isShrunkStr, setValue: setShrink } = useLocalStorage(
+    localStorageKeys.menuShrink,
+    false.toString()
+  );
+  const isShrunk = isShrunkStr === "true";
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.rootShrink]: isShrunk,
+      })}
+    >
+      <div className={classes.float}>
+        <div className={classes.logo}>
+          <Logo />
+        </div>
+        {menuItems.map((menuItem) => (
+          <MenuItem
+            active={active === menuItem.id}
+            isMenuShrunk={isShrunk}
+            menuItem={menuItem}
+            onClick={onMenuItemClick}
+            key={menuItem.ariaLabel}
+          />
+        ))}
+        {toolbar && <div className={classes.toolbarContainer}>{toolbar}</div>}
+        <ExpandButton
+          className={classes.expandButton}
+          isShrunk={isShrunk}
+          onClick={() => setShrink((!isShrunk).toString())}
+        />
+      </div>
+    </div>
+  );
+};
+
+Sidebar.displayName = "SideBar";

package/src/Sidebar/fixtures.ts

@@ -0,0 +1,39 @@
+import homeIcon from "../../stories/assets/menu-home-icon.svg";
+import { SidebarMenuItem } from "./types";
+
+export const menu: SidebarMenuItem[] = [
+  {
+    ariaLabel: "Menu 1",
+    id: "menu1",
+    label: "Menu 1",
+    iconSrc: homeIcon,
+    url: "/section1/",
+  },
+  {
+    ariaLabel: "Menu 2",
+    id: "menu2",
+    label: "Menu 2",
+    iconSrc: homeIcon,
+    children: [
+      {
+        ariaLabel: "Menu 2.1",
+        id: "menu21",
+        label: "Menu 21",
+        url: "/section21/",
+      },
+      {
+        ariaLabel: "Menu 2.2",
+        id: "menu22",
+        label: "Menu 22",
+        url: "/section22/",
+      },
+      {
+        ariaLabel: "Menu 2.3",
+        id: "menu23",
+        label: "Menu 22 - external",
+        url: "http://example.com",
+        external: true,
+      },
+    ],
+  },
+];

package/src/Sidebar/index.ts

@@ -0,0 +1,4 @@
+export * from "./Sidebar";
+export * from "./MenuItem";
+export * from "./types";
+export * from "./ExpandButton";

package/src/Sidebar/types.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface SidebarMenuItem {
+  ariaLabel: string;
+  children?: SidebarMenuItem[];
+  iconSrc?: string;
+  label: string;
+  id: string;
+  url?: string;
+  external?: boolean;
+}
+
+export interface BaseSidebarProps {
+  className?: string;
+  menuItems: SidebarMenuItem[];
+  toolbar?: React.ReactNode;
+  onMenuItemClick: (url: string) => void;
+}

package/src/SidebarDrawer/MenuItemBtn.tsx

@@ -0,0 +1,40 @@
+import Typography from "@material-ui/core/Typography";
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import { SidebarMenuItem } from "../Sidebar/types";
+import useStyles from "./styles";
+
+export interface MenuItemBtnProps {
+  menuItem: SidebarMenuItem;
+  onClick: (url: string) => void;
+}
+export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
+  menuItem,
+  onClick,
+}) => {
+  const classes = useStyles();
+  const linkProps = menuItem.external
+    ? { href: menuItem.url, target: "_blank" }
+    : {};
+  const Component = menuItem.external ? "a" : "button";
+
+  return (
+    <Component
+      className={classes.menuItemBtn}
+      data-test="menu-item-label"
+      data-test-id={menuItem.id}
+      onClick={() => onClick(menuItem.url!)}
+      {...linkProps}
+    >
+      {menuItem.iconSrc && (
+        <SVG className={classes.icon} src={menuItem.iconSrc} />
+      )}
+      <Typography aria-label={menuItem.ariaLabel} className={classes.label}>
+        {menuItem.label}
+      </Typography>
+    </Component>
+  );
+};
+
+MenuItemBtn.displayName = "MenuItemBtn";

package/src/SidebarDrawer/SidebarDrawer.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import * as fixtures from "../Sidebar/fixtures";
+import { SidebarDrawer } from "./SidebarDrawer";
+
+export const Default: Story = () => (
+  <SidebarDrawer menuItems={fixtures.menu} onMenuItemClick={() => undefined} />
+);
+
+export default {
+  title: "Sidebar - mobile",
+} as Meta;

package/src/SidebarDrawer/SidebarDrawer.tsx

@@ -0,0 +1,113 @@
+import Drawer from "@material-ui/core/Drawer";
+import Typography from "@material-ui/core/Typography";
+import ArrowLeftIcon from "@material-ui/icons/ArrowLeft";
+import MenuIcon from "@material-ui/icons/Menu";
+import clsx from "clsx";
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import { Logo } from "../icons/Logo";
+import { BaseSidebarProps, SidebarMenuItem } from "../Sidebar/types";
+import { SquareButton } from "../SquareButton";
+import { MenuItemBtn } from "./MenuItemBtn";
+import useStyles from "./styles";
+
+export type SideBarDrawerProps = BaseSidebarProps;
+
+export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
+  menuItems,
+  onMenuItemClick,
+}) => {
+  const [isOpened, setOpened] = React.useState(false);
+  const classes = useStyles({});
+  const [activeMenu, setActiveMenu] = React.useState<SidebarMenuItem | null>(
+    null
+  );
+  const [showSubmenu, setShowSubmenu] = React.useState(false);
+  const container = React.useRef<HTMLDivElement>(null);
+
+  const handleMenuItemClick = (url: string) => {
+    setOpened(false);
+    setShowSubmenu(false);
+    onMenuItemClick(url);
+  };
+
+  const handleMenuItemWithChildrenClick = (menuItem: SidebarMenuItem) => {
+    setActiveMenu(menuItem);
+    setShowSubmenu(true);
+    container.current?.scrollTo({
+      top: 0,
+    });
+  };
+
+  return (
+    <>
+      <SquareButton onClick={() => setOpened(true)}>
+        <MenuIcon />
+      </SquareButton>
+      <Drawer
+        classes={{
+          paper: classes.root,
+        }}
+        open={isOpened}
+        onClose={() => setOpened(false)}
+      >
+        <div
+          className={clsx(classes.container, {
+            [classes.containerSubMenu]: showSubmenu,
+          })}
+          ref={container}
+        >
+          <div
+            className={clsx(classes.innerContainer, {
+              [classes.secondaryContentActive]: showSubmenu,
+            })}
+          >
+            <div className={classes.content}>
+              <div className={classes.logo}>
+                <Logo />
+              </div>
+              {menuItems.map((menuItem) => (
+                <MenuItemBtn
+                  menuItem={menuItem}
+                  onClick={
+                    menuItem.children
+                      ? () => handleMenuItemWithChildrenClick(menuItem)
+                      : handleMenuItemClick
+                  }
+                  key={menuItem.ariaLabel}
+                />
+              ))}
+            </div>
+            {activeMenu && (
+              <div className={classes.content}>
+                <div className={classes.subMenuTopBar}>
+                  <div className={classes.activeMenuLabel}>
+                    {activeMenu.iconSrc && (
+                      <SVG className={classes.icon} src={activeMenu.iconSrc} />
+                    )}
+                    <Typography className={classes.label}>
+                      {activeMenu.label}
+                    </Typography>
+                  </div>
+                  <SquareButton onClick={() => setShowSubmenu(false)}>
+                    <ArrowLeftIcon />
+                  </SquareButton>
+                </div>
+                {activeMenu.children?.map((subMenuItem) => (
+                  <MenuItemBtn
+                    menuItem={subMenuItem}
+                    onClick={handleMenuItemClick}
+                    key={subMenuItem.ariaLabel}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+SidebarDrawer.displayName = "SideBarDrawer";

package/src/SidebarDrawer/index.ts

@@ -0,0 +1,2 @@
+export * from "./MenuItemBtn";
+export * from "./SidebarDrawer";

package/src/SidebarDrawer/styles.ts

@@ -0,0 +1,69 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    activeMenuLabel: {
+      display: "flex",
+    },
+    container: {
+      overflowX: "hidden",
+      width: "100%",
+    },
+    containerSubMenu: {
+      "&$container": {
+        overflow: "hidden",
+      },
+    },
+    content: {
+      width: "50%",
+    },
+    icon: {
+      marginRight: theme.spacing(2),
+    },
+    innerContainer: {
+      display: "flex",
+      position: "relative",
+      right: 0,
+      transition: theme.transitions.duration.short + "ms",
+      width: "200%",
+    },
+    label: {
+      fontWeight: "bold",
+    },
+    logo: {
+      display: "block",
+      marginBottom: theme.spacing(4),
+    },
+    menuItemBtn: {
+      alignItems: "center",
+      background: "none",
+      border: "none",
+      color: theme.palette.text.secondary,
+      display: "flex",
+      marginBottom: theme.spacing(3),
+      padding: 0,
+      textDecoration: "none",
+    },
+    root: {
+      background: theme.palette.background.default,
+      borderBottomRightRadius: 32,
+      borderTopRightRadius: 32,
+      padding: theme.spacing(3),
+      width: 260,
+    },
+    secondaryContentActive: {
+      right: "100%",
+    },
+    subMenuTopBar: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: theme.spacing(3),
+    },
+  }),
+  {
+    name: "SideBarDrawer",
+  }
+);
+
+export default useStyles;

package/src/SquareButton/SquareButton.stories.tsx

@@ -0,0 +1,15 @@
+import CloseIcon from "@material-ui/icons/Close";
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { SquareButton } from "./SquareButton";
+
+export const Default: Story = () => (
+  <SquareButton>
+    <CloseIcon />
+  </SquareButton>
+);
+
+export default {
+  title: "Square button",
+} as Meta;

package/src/SquareButton/SquareButton.tsx

@@ -0,0 +1,35 @@
+import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase";
+import clsx from "clsx";
+import React from "react";
+
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      "&:hover, &:focus": {
+        background: "#daedeb",
+      },
+      background: theme.palette.background.paper,
+      borderRadius: 16,
+      color: theme.palette.primary.main,
+      height: 48,
+      transition: theme.transitions.duration.shortest + "ms",
+      width: 48,
+    },
+  }),
+  {
+    name: "ExpandButton",
+  }
+);
+
+export const SquareButton: React.FC<ButtonBaseProps> = ({
+  className,
+  ...rest
+}) => {
+  const classes = useStyles({});
+
+  return <ButtonBase className={clsx(classes.root, className)} {...rest} />;
+};
+
+SquareButton.displayName = "SquareButton";

package/src/SquareButton/index.ts

@@ -0,0 +1 @@
+export * from "./SquareButton";