@saleor/macaw-ui 0.2.4

package/src/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { SquareButton } from "../SquareButton";
+import { Tooltip, TooltipProps } from "./Tooltip";
+
+const props: TooltipProps = {
+  title: "Tooltip",
+  children: <SquareButton>Hover</SquareButton>,
+};
+
+export const Info: Story = () => <Tooltip variant="info" {...props} />;
+export const Success: Story = () => <Tooltip variant="success" {...props} />;
+export const Error: Story = () => <Tooltip variant="error" {...props} />;
+export const Warning: Story = () => <Tooltip variant="warning" {...props} />;
+
+export default {
+  title: "Tooltip",
+} as Meta;

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,25 @@
+import { Tooltip as MUITooltip } from "@material-ui/core";
+import { TooltipProps as MUITooltipProps } from "@material-ui/core/Tooltip";
+import React from "react";
+
+import useStyles from "./styles";
+
+export interface TooltipProps extends MUITooltipProps {
+  variant?: "info" | "success" | "warning" | "error";
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  variant = "info",
+  ...rest
+}) => {
+  const classes = useStyles({ variant, children, ...rest });
+
+  return (
+    <MUITooltip classes={classes} {...rest}>
+      {children}
+    </MUITooltip>
+  );
+};
+
+Tooltip.displayName = "Tooltip";

package/src/Tooltip/index.ts

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

package/src/Tooltip/styles.ts

@@ -0,0 +1,28 @@
+import { makeStyles } from "../theme";
+import { TooltipProps } from "./Tooltip";
+
+const useStyles = makeStyles<TooltipProps, "tooltip">(
+  (theme) => ({
+    tooltip: {
+      backgroundColor: (props) => {
+        switch (props.variant) {
+          case "info":
+            return theme.palette.info.main;
+          case "success":
+            return theme.palette.success.main;
+          case "warning":
+            return theme.palette.warning.main;
+          case "error":
+            return theme.palette.error.main;
+          default:
+            return theme.palette.info.main;
+        }
+      },
+    },
+  }),
+  {
+    name: "Tooltip",
+  }
+);
+
+export default useStyles;

package/src/UserChipMenu/UserChipMenu.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import placeholder from "../assets/placeholder_64x64.png";
+import { UserChipMenu, UserChipProps } from "./UserChipMenu";
+import { UserChipMenuItem } from "./UserChipMenuItem";
+
+const props: UserChipProps = {
+  avatar: null,
+  initials: "LI",
+  name: "Lorem Ipsum",
+};
+
+const Options: React.FC = () => (
+  <>
+    {["First Option", "Second Option"].map((option) => (
+      <UserChipMenuItem key={option}>{option}</UserChipMenuItem>
+    ))}
+  </>
+);
+
+export const Default: Story = () => (
+  <UserChipMenu {...props}>
+    <Options />
+  </UserChipMenu>
+);
+export const WithSubtext: Story = () => (
+  <UserChipMenu {...props} subtext="Lorem ipsum dolor sit amet">
+    <Options />
+  </UserChipMenu>
+);
+export const WithAvatar: Story = () => (
+  <UserChipMenu {...props} avatar={placeholder}>
+    <Options />
+  </UserChipMenu>
+);
+
+export default {
+  title: "User Chip",
+} as Meta;

package/src/UserChipMenu/UserChipMenu.tsx

@@ -0,0 +1,113 @@
+import Avatar from "@material-ui/core/Avatar";
+import Chip from "@material-ui/core/Chip";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Grow from "@material-ui/core/Grow";
+import Hidden from "@material-ui/core/Hidden";
+import Menu from "@material-ui/core/MenuList";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import Typography from "@material-ui/core/Typography";
+import clsx from "clsx";
+import React from "react";
+
+import ArrowDropdownIcon from "../icons/ArrowDropdownIcon";
+import { UserChipMenuContext } from "./context";
+import useStyles from "./styles";
+
+export interface UserChipProps {
+  avatar: string | null;
+  initials: string;
+  name: string;
+  subtext?: string;
+}
+
+export const UserChipMenu: React.FC<UserChipProps> = ({
+  avatar,
+  initials,
+  name,
+  subtext,
+  children,
+  ...props
+}) => {
+  const classes = useStyles({});
+  const [isMenuOpened, setMenuState] = React.useState(false);
+  const anchor = React.useRef<HTMLDivElement>(null);
+
+  const closeMenu = () => setMenuState(false);
+
+  return (
+    <div className={classes.userMenuContainer} {...props}>
+      <Chip
+        avatar={
+          avatar ? (
+            <Avatar alt="user" src={avatar} />
+          ) : (
+            <div className={classes.avatarPlaceholder}>
+              <div className={classes.avatarInitials}>{initials}</div>
+            </div>
+          )
+        }
+        classes={{
+          avatar: classes.avatar,
+        }}
+        className={classes.userChip}
+        label={
+          <div className={classes.labelContainer}>
+            <Hidden smDown>
+              <div>
+                <Typography className={classes.label} variant="body2">
+                  {name}
+                </Typography>
+                {subtext && (
+                  <Typography
+                    className={classes.label}
+                    variant="body2"
+                    color="textSecondary"
+                  >
+                    {subtext}
+                  </Typography>
+                )}
+              </div>
+            </Hidden>
+            <ArrowDropdownIcon
+              className={clsx(classes.arrow, {
+                [classes.rotate]: isMenuOpened,
+              })}
+            />
+          </div>
+        }
+        onClick={() => setMenuState(!isMenuOpened)}
+        ref={anchor}
+        data-test="userMenu"
+      />
+      <Popper
+        className={classes.popover}
+        open={isMenuOpened}
+        anchorEl={anchor.current}
+        transition
+        placement="bottom-end"
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "right top" : "right bottom",
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={closeMenu} mouseEvent="onClick">
+                <Menu>
+                  <UserChipMenuContext.Provider value={closeMenu}>
+                    {children}
+                  </UserChipMenuContext.Provider>
+                </Menu>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+};
+UserChipMenu.displayName = "UserChip";

package/src/UserChipMenu/UserChipMenuItem.tsx

@@ -0,0 +1,33 @@
+import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
+import React from "react";
+
+import { useUserChipMenu } from "./context";
+
+export interface UserChipMenuItemProps extends Omit<MenuItemProps, "button"> {
+  leaveOpen?: boolean;
+}
+
+export const UserChipMenuItem: React.FC<UserChipMenuItemProps> = ({
+  leaveOpen,
+  onClick,
+  ...props
+}) => {
+  const closeMenu = useUserChipMenu();
+
+  // We're not really interested in event type here
+  const handleClickWithClose = (event: unknown) => {
+    closeMenu();
+    if (onClick) {
+      onClick(event as any);
+    }
+  };
+
+  return (
+    <MenuItem
+      {...props}
+      onClick={leaveOpen ? onClick : handleClickWithClose}
+      button
+    />
+  );
+};
+UserChipMenuItem.displayName = "UserChipMenuItem";

package/src/UserChipMenu/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+
+export type UserChipMenuContextType = () => void;
+
+export const UserChipMenuContext = createContext<
+  UserChipMenuContextType | undefined
+>(undefined);
+UserChipMenuContext.displayName = "UserChipMenuContext";
+
+export const useUserChipMenu = () => {
+  const ctx = useContext(UserChipMenuContext);
+  if (ctx === undefined) {
+    throw new Error(
+      "useUserChipMenu must be used within a UserChipMenuContext"
+    );
+  }
+
+  return ctx;
+};

package/src/UserChipMenu/index.ts

@@ -0,0 +1,2 @@
+export * from "./UserChipMenu";
+export * from "./UserChipMenuItem";

package/src/UserChipMenu/styles.ts

@@ -0,0 +1,65 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    arrow: {
+      [theme.breakpoints.down("sm")]: {
+        marginLeft: 0,
+      },
+      marginLeft: theme.spacing(2),
+      transition: theme.transitions.duration.standard + "ms",
+    },
+    avatar: {
+      "&&": {
+        [theme.breakpoints.down("sm")]: {
+          height: 40,
+          width: 40,
+        },
+        height: 32,
+        width: 32,
+      },
+    },
+    avatarInitials: {
+      color: theme.palette.primary.contrastText,
+    },
+    avatarPlaceholder: {
+      alignItems: "center",
+      background: theme.palette.primary.main,
+      borderRadius: "100%",
+      display: "flex",
+      justifyContent: "center",
+    },
+    label: {
+      lineHeight: 1.2,
+    },
+    labelContainer: {
+      display: "inline-flex",
+      alignItems: "center",
+    },
+    popover: {
+      marginTop: theme.spacing(2),
+      zIndex: 10,
+    },
+    rotate: {
+      transform: "rotate(180deg)",
+    },
+    userChip: {
+      [theme.breakpoints.down("sm")]: {
+        height: 48,
+      },
+      backgroundColor: theme.palette.background.paper,
+      borderRadius: 24,
+      color: theme.palette.text.primary,
+      height: 40,
+      padding: theme.spacing(0.5),
+    },
+    userMenuContainer: {
+      position: "relative",
+    },
+  }),
+  {
+    name: "UserChipMenu",
+  }
+);
+
+export default useStyles;

package/src/extensions/index.ts

@@ -0,0 +1,3 @@
+export * from "./sendMessage";
+export * from "./types";
+export * from "./useExtensionMessage";

package/src/extensions/sendMessage.ts

@@ -0,0 +1,23 @@
+import { BaseExtensionMessageData } from "./types";
+
+export function sendMessageToDashboard<T extends BaseExtensionMessageData>(
+  message: T,
+  targetOrigin: string
+) {
+  if (!!window.parent) {
+    window.parent.postMessage(message, targetOrigin);
+  }
+}
+
+export function sendMessageToExtension<T extends BaseExtensionMessageData>(
+  message: T,
+  targetOrigin: string
+) {
+  const appFrame: HTMLIFrameElement | null = document.querySelector(
+    "#extension-app"
+  );
+
+  if (!!appFrame?.contentWindow) {
+    appFrame.contentWindow.postMessage(message, targetOrigin);
+  }
+}

package/src/extensions/types.ts

@@ -0,0 +1,26 @@
+import { ThemeType } from "../theme";
+
+export enum ExtensionMessageType {
+  BREADCRUMB_CLICK,
+  BREADCRUMB_SET,
+  THEME,
+}
+export interface BaseExtensionMessageData {
+  type: ExtensionMessageType;
+}
+
+export type Breadcrumb = Record<"label" | "value", string>;
+export interface BreadcrumbClickMessage extends BaseExtensionMessageData {
+  breadcrumb: string;
+}
+export interface BreadcrumbChangeMessage extends BaseExtensionMessageData {
+  breadcrumbs: Breadcrumb[];
+}
+
+export interface ThemeChangeMessage extends BaseExtensionMessageData {
+  theme: ThemeType;
+}
+
+export interface ExtensionMessageEvent<T extends BaseExtensionMessageData> {
+  data: T;
+}

package/src/extensions/useExtensionMessage.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+import { BaseExtensionMessageData, ExtensionMessageEvent } from "./types";
+
+export function useExtensionMessage<T extends BaseExtensionMessageData>(
+  handle: (message: ExtensionMessageEvent<T>) => void
+) {
+  useEffect(() => {
+    window.addEventListener("message", handle);
+
+    return () => window.removeEventListener("message", handle);
+  }, [handle]);
+}

package/src/icons/ArrowDropdownIcon.tsx

@@ -0,0 +1,11 @@
+import { createSvgIcon } from "@material-ui/core/utils";
+import React from "react";
+
+const ArrowDropdownIcon = createSvgIcon(
+  <g style={{ fillRule: "evenodd" }}>
+    <path d="M7 10l5 5 5-5z" />
+  </g>,
+  "ArrowDropdownIcon"
+);
+
+export default ArrowDropdownIcon;

package/src/icons/CheckboxCheckedIcon.tsx

@@ -0,0 +1,15 @@
+import { createSvgIcon } from "@material-ui/core/utils";
+import React from "react";
+
+export const CheckboxCheckedIcon = createSvgIcon(
+  <>
+    <rect x="5" y="5" width="14" height="14" fill="currentColor" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
+      fill="white"
+    />
+  </>,
+  "CheckboxCheckedIcon"
+);

package/src/icons/CheckboxIcon.tsx

@@ -0,0 +1,7 @@
+import { createSvgIcon } from "@material-ui/core/utils";
+import React from "react";
+
+export const CheckboxIcon = createSvgIcon(
+  <rect x="5" y="5" width="14" height="14" stroke="currentColor" fill="none" />,
+  "CheckboxIcon"
+);

package/src/icons/CheckboxIndeterminateIcon.tsx

@@ -0,0 +1,17 @@
+import { createSvgIcon } from "@material-ui/core/utils";
+import React from "react";
+
+export const CheckboxIndeterminateIcon = createSvgIcon(
+  <>
+    <rect
+      x="5"
+      y="5"
+      width="14"
+      height="14"
+      stroke="currentColor"
+      fill="none"
+    />
+    <rect x="8" y="11" width="8" height="2" fill="currentColor" />
+  </>,
+  "CheckboxIndeterminateIcon"
+);

package/src/icons/CompleteIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const CompleteIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="20" fill="white" />
+    <circle cx="20" cy="20" r="14" stroke="#5DC292" strokeWidth="4" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M28.7678 13.7678C29.3536 14.3536 29.3536 15.3033 28.7678 15.8891L17.4142 27.2426L12.0607 21.8891C11.4749 21.3033 11.4749 20.3536 12.0607 19.7678L12.7678 19.0607C13.3536 18.4749 14.3033 18.4749 14.8891 19.0607L17.4142 21.5858L25.9393 13.0607C26.5251 12.4749 27.4749 12.4749 28.0607 13.0607L28.7678 13.7678Z"
+      fill="#5DC292"
+    />
+  </svg>
+);
+
+CompleteIcon.displayName = "CompleteIcon";

package/src/icons/InfoIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="20" fill="white" />
+    <circle cx="20" cy="20" r="14" stroke="#28234A" strokeWidth="4" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+      fill="#28234A"
+    />
+  </svg>
+);
+
+InfoIcon.displayName = "InfoIcon";

package/src/icons/Logo.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export const Logo: React.FC = () => (
+  <svg
+    width="36"
+    height="33"
+    viewBox="0 0 36 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.6072 33C22.4977 33 23.9789 30.6214 23.9789 27.3629C23.9789 23.3549 20.3772 22.6056 17.3814 22.1167C15.0924 21.7258 14.0489 21.5304 14.0489 20.1292C14.0489 19.0867 14.9577 18.6954 16.4389 18.6954C18.2566 18.6954 18.7614 19.2168 18.9298 20.7482L23.7097 20.0314C23.3055 16.7404 21.4542 15.0787 16.5735 15.0787C11.2216 15.0787 9.33654 17.2293 9.33654 20.6504C9.30299 25.082 13.4768 25.5382 16.5735 26.0594C18.492 26.418 19.2328 26.7437 19.2328 28.0146C19.2328 29.0573 18.5933 29.5135 16.6745 29.5135C14.5539 29.5135 13.9144 29.1551 13.6451 27.4281L9 28.1124C9.43753 31.599 11.4908 33 16.6072 33Z"
+      fill="#28234A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.7838 0L13.4043 6.64709H29.1638L35.5433 0H19.7838Z"
+      fill="#8AC4EB"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.15911 2.31187C6.27552 2.1958 6.4332 2.13062 6.59759 2.13062H27.3248C27.5761 2.13062 27.8026 2.28211 27.8987 2.51437C27.9947 2.74664 27.9412 3.01388 27.7632 3.19134L21.7867 9.1508C21.6703 9.26687 21.5126 9.33205 21.3482 9.33205H0.621008C0.369679 9.33205 0.143131 9.18056 0.0471181 8.94829C-0.0488948 8.71603 0.00456112 8.44879 0.182532 8.27133L6.15911 2.31187ZM6.85429 3.37259L2.12325 8.09007H21.0915L25.8225 3.37259H6.85429Z"
+      fill="#28234A"
+    />
+  </svg>
+);
+
+Logo.displayName = "Logo";

package/src/icons/NotAllowedIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const NotAllowedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="16" fill="#F5FAFB" />
+    <circle cx="20" cy="20" r="20" fill="white" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z"
+      fill="#FE6E76"
+    />
+  </svg>
+);
+
+NotAllowedIcon.displayName = "NotAllowedIcon";

package/src/icons/NotAllowedInvertedIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const NotAllowedInvertedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="16" fill="#F5FAFB" />
+    <circle cx="20" cy="20" r="20" fill="#FE6E76" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z"
+      fill="white"
+    />
+  </svg>
+);
+
+NotAllowedInvertedIcon.displayName = "NotAllowedInvertedIcon";

package/src/icons/WarningIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const WarningIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="20" fill="white" />
+    <circle cx="20" cy="20" r="14" stroke="#FFB84E" strokeWidth="4" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+      fill="#FFB84E"
+    />
+  </svg>
+);
+
+WarningIcon.displayName = "WarningIcon";

package/src/icons/index.ts

@@ -0,0 +1,9 @@
+export * from "./CompleteIcon";
+export * from "./InfoIcon";
+export * from "./NotAllowedIcon";
+export * from "./NotAllowedInvertedIcon";
+export * from "./WarningIcon";
+export * from "./ArrowDropdownIcon";
+export * from "./CheckboxIcon";
+export * from "./CheckboxCheckedIcon";
+export * from "./CheckboxIndeterminateIcon";

package/src/index.tsx

@@ -0,0 +1,15 @@
+export * from "./theme";
+export * from "./extensions";
+export * from "./icons";
+export * from "./Savebar";
+export * from "./Backlink";
+export * from "./ConfirmButton";
+export * from "./Sidebar";
+export * from "./SidebarDrawer";
+export * from "./SquareButton";
+export * from "./Alert";
+export * from "./Notification";
+export * from "./UserChipMenu";
+export * from "./ResponsiveTable";
+export * from "./Tooltip";
+export * from "./ActionBar";