@saleor/macaw-ui 0.2.4

package/src/ConfirmButton/ConfirmButton.tsx

@@ -0,0 +1,119 @@
+import Button, { ButtonProps } from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import CheckIcon from "@material-ui/icons/Check";
+import clsx from "clsx";
+import React from "react";
+
+import useStyles from "./styles";
+
+const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;
+export type ConfirmButtonTransitionState =
+  | "loading"
+  | "success"
+  | "error"
+  | "default";
+
+export type ConfirmButtonLabels = Record<"confirm" | "error", string>;
+export interface ConfirmButtonProps extends Omit<ButtonProps, "classes"> {
+  labels: ConfirmButtonLabels;
+  noTransition?: boolean;
+  transitionState: ConfirmButtonTransitionState;
+  onTransitionToDefault?: () => void;
+}
+
+export const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+  children,
+  className,
+  disabled,
+  labels,
+  noTransition,
+  transitionState,
+  onClick,
+  onTransitionToDefault,
+  ...props
+}) => {
+  const classes = useStyles();
+  const [
+    displayCompletedActionState,
+    setDisplayCompletedActionState,
+  ] = React.useState(false);
+  const timeout = React.useRef<number>();
+
+  React.useEffect(() => {
+    if (!noTransition && transitionState === "loading") {
+      setDisplayCompletedActionState(true);
+    }
+  }, [transitionState, noTransition]);
+
+  React.useEffect(() => {
+    if (
+      !noTransition &&
+      (["error", "success"] as ConfirmButtonTransitionState[]).includes(
+        transitionState
+      )
+    ) {
+      timeout.current = (setTimeout(() => {
+        setDisplayCompletedActionState(false);
+        if (onTransitionToDefault) {
+          onTransitionToDefault();
+        }
+      }, DEFAULT_NOTIFICATION_SHOW_TIME) as unknown) as number;
+    } else if (transitionState === "loading") {
+      clearTimeout(timeout.current);
+    }
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [noTransition, transitionState, onTransitionToDefault]);
+
+  const isCompleted = noTransition
+    ? transitionState !== "default"
+    : displayCompletedActionState;
+
+  return (
+    <Button
+      variant="contained"
+      onClick={transitionState === "loading" ? undefined : onClick}
+      color="primary"
+      className={clsx(className, {
+        [classes.error]: transitionState === "error" && isCompleted,
+        [classes.success]: transitionState === "success" && isCompleted,
+      })}
+      disabled={!isCompleted && disabled}
+      data-test-state={isCompleted ? transitionState : "default"}
+      {...props}
+    >
+      <CircularProgress
+        size={24}
+        color="inherit"
+        className={clsx({
+          [classes.progress]: true,
+          [classes.invisible]: transitionState !== "loading",
+        })}
+      />
+      <CheckIcon
+        className={clsx({
+          [classes.icon]: true,
+          [classes.invisible]: !(transitionState === "success" && isCompleted),
+        })}
+      />
+      <span
+        className={clsx({
+          [classes.label]: true,
+          [classes.invisible]:
+            (transitionState === "loading" || transitionState === "success") &&
+            isCompleted,
+        })}
+      >
+        {transitionState === "error" && isCompleted
+          ? labels.error
+          : children || labels.confirm}
+      </span>
+    </Button>
+  );
+};
+
+ConfirmButton.displayName = "ConfirmButton";

package/src/ConfirmButton/index.ts

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

package/src/ConfirmButton/styles.ts

@@ -0,0 +1,44 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    error: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.main,
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
+    },
+    icon: {
+      marginLeft: "0 !important",
+      position: "absolute",
+      transitionDuration: theme.transitions.duration.standard + "ms",
+    },
+    invisible: {
+      opacity: 0,
+    },
+    label: {
+      alignItems: "center",
+      display: "flex",
+      transitionDuration: theme.transitions.duration.standard + "ms",
+    },
+    progress: {
+      "& svg": {
+        color: theme.palette.common.white,
+        margin: 0,
+      },
+      position: "absolute",
+      transitionDuration: theme.transitions.duration.standard + "ms",
+    },
+    success: {
+      "&:hover": {
+        backgroundColor: theme.palette.primary.main,
+      },
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+  }),
+  { name: "ConfirmButton" }
+);
+
+export default useStyles;

package/src/Notification/Notification.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { Notification } from "./Notification";
+import type { NotificationProps } from "./types";
+
+const props: NotificationProps = {
+  title: "Title",
+  onClose: () => undefined,
+  type: "info",
+};
+
+export const Info: Story = () => <Notification {...props} />;
+export const Warn: Story = () => <Notification {...props} type="warning" />;
+export const Success: Story = () => <Notification {...props} type="success" />;
+export const Error: Story = () => <Notification {...props} type="error" />;
+export const WithAction: Story = () => (
+  <Notification
+    {...props}
+    action={{
+      label: "Action",
+      onClick: () => undefined,
+    }}
+  />
+);
+export const WithContent: Story = () => (
+  <Notification {...props} content="Some notification content" />
+);
+export const WithActionAndContent: Story = () => (
+  <Notification
+    {...props}
+    content="Some notification content"
+    action={{
+      label: "Action",
+      onClick: () => undefined,
+    }}
+  />
+);
+
+export default {
+  title: "Notification",
+} as Meta;

package/src/Notification/Notification.tsx

@@ -0,0 +1,98 @@
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import SnackbarContent from "@material-ui/core/SnackbarContent";
+import Typography from "@material-ui/core/Typography";
+import CloseIcon from "@material-ui/icons/Close";
+import clsx from "clsx";
+import React from "react";
+
+import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
+import useStyles from "./styles";
+import type { NotificationProps, NotificationType } from "./types";
+
+function getIcon(variant: NotificationType): React.ReactElement {
+  switch (variant) {
+    case "error":
+      return <NotAllowedIcon />;
+    case "success":
+      return <CompleteIcon />;
+    case "warning":
+      return <WarningIcon />;
+  }
+  return <InfoIcon />;
+}
+
+export const Notification: React.FC<NotificationProps> = ({
+  onClose,
+  title,
+  type,
+  action,
+  content,
+  className,
+  ...rest
+}) => {
+  const classes = useStyles();
+
+  return (
+    <div
+      className={clsx(classes.snackbarContainer, className)}
+      data-test="notification"
+      data-test-type={type}
+      {...rest}
+    >
+      <SnackbarContent
+        aria-describedby="client-snackbar"
+        classes={{
+          action: classes.snackbarAction,
+          message: classes.messageContainer,
+        }}
+        className={clsx(classes.snackbar, {
+          [classes.info]: type === "info",
+          [classes.error]: type === "error",
+          [classes.success]: type === "success",
+          [classes.warning]: type === "warning",
+        })}
+        message={
+          <div className={classes.container}>
+            <div>{getIcon(type)}</div>
+            <div>
+              <div className={classes.title}>
+                <Typography variant="h5">{title}</Typography>
+              </div>
+              <Typography variant="body1">{content}</Typography>
+            </div>
+          </div>
+        }
+        action={[
+          <div key="actions">
+            {!!action && (
+              <Button
+                className={classes.actionBtn}
+                key="action"
+                color="default"
+                size="small"
+                onClick={action.onClick}
+                data-test="button-action"
+              >
+                {action.label}
+              </Button>
+            )}
+          </div>,
+          <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={onClose}
+            className={clsx(classes.closeBtn, {
+              [classes.closeBtnInfo]: type === "info",
+            })}
+            data-test="close"
+          >
+            <CloseIcon />
+          </IconButton>,
+        ]}
+      />
+    </div>
+  );
+};
+Notification.displayName = "Notification";

package/src/Notification/index.ts

@@ -0,0 +1,2 @@
+export * from "./Notification";
+export * from "./types";

package/src/Notification/styles.ts

@@ -0,0 +1,74 @@
+import { makeStyles } from "../theme";
+
+const iconWidth = 40;
+
+const useStyles = makeStyles(
+  (theme) => ({
+    actionBtn: {
+      left: -4,
+      position: "relative",
+      minWidth: "unset",
+    },
+    closeBtn: {
+      "& svg": {
+        maxHeight: 20,
+        maxWidth: 20,
+      },
+      padding: 10,
+      position: "absolute",
+      right: 5,
+      top: 7,
+    },
+    closeBtnInfo: {
+      color: theme.palette.text.primary,
+    },
+    error: {
+      backgroundColor: theme.palette.alert.paper.error,
+    },
+    hiddenText: {
+      maxHeight: 0,
+    },
+    info: {},
+    snackbar: {
+      borderRadius: 4,
+      padding: theme.spacing(0, 6, 1, 2),
+      position: "relative",
+    },
+    snackbarContainer: {
+      marginBottom: theme.spacing(2),
+      maxWidth: 450,
+      position: "relative",
+    },
+    snackbarAction: {
+      paddingLeft: `calc(${iconWidth}px + ${theme.spacing(2)})`,
+    },
+    success: {
+      backgroundColor: theme.palette.alert.paper.success,
+    },
+    text: {
+      fontWeight: 400,
+      paddingTop: 5,
+    },
+    warning: {
+      backgroundColor: theme.palette.alert.paper.warning,
+    },
+
+    messageContainer: {
+      paddingTop: theme.spacing(2),
+      position: "relative",
+    },
+
+    container: {
+      columnGap: theme.spacing(2),
+      display: "grid",
+      gridTemplateColumns: `${iconWidth}px 1fr`,
+    },
+    title: {
+      marginTop: 6,
+      marginBottom: theme.spacing(0.5),
+    },
+  }),
+  { name: "Notification" }
+);
+
+export default useStyles;

package/src/Notification/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+export type NotificationType = "info" | "success" | "error" | "warning";
+export interface NotificationAction {
+  label: string;
+  onClick: () => void;
+}
+export interface NotificationData {
+  content?: ReactNode;
+  title: string;
+  action?: NotificationAction;
+  type: NotificationType;
+}
+
+export interface NotificationProps extends NotificationData {
+  className?: string;
+  onClose: () => void;
+}

package/src/ResponsiveTable/ResponsiveTable.tsx

@@ -0,0 +1,24 @@
+import Table from "@material-ui/core/Table";
+import React from "react";
+
+import useStyles from "./styles";
+
+interface ResponsiveTableProps {
+  children: React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  key?: string;
+}
+
+export const ResponsiveTable: React.FC<ResponsiveTableProps> = (props) => {
+  const { children, className } = props;
+
+  const classes = useStyles(props);
+
+  return (
+    <div className={classes.root}>
+      <Table className={className}>{children}</Table>
+    </div>
+  );
+};
+
+ResponsiveTable.displayName = "ResponsiveTable";

package/src/ResponsiveTable/index.ts

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

package/src/ResponsiveTable/styles.ts

@@ -0,0 +1,23 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      [theme.breakpoints.up("md")]: {
+        "&& table": {
+          tableLayout: "fixed",
+        },
+      },
+      "& table": {
+        tableLayout: "auto",
+      },
+      overflowX: "auto",
+      width: "100%",
+    },
+  }),
+  {
+    name: "ResponsiveTable",
+  }
+);
+
+export default useStyles;

package/src/Savebar/ButtonTooltipDecorator.tsx

@@ -0,0 +1,22 @@
+import Tooltip from "@material-ui/core/Tooltip";
+import React from "react";
+
+interface ButtonTooltipDecoratorProps {
+  tooltip?: string;
+}
+
+export const ButtonTooltipDecorator: React.FC<ButtonTooltipDecoratorProps> = ({
+  tooltip,
+  children,
+}) => {
+  if (tooltip) {
+    return (
+      <Tooltip title={tooltip} placement="top">
+        <span>{children}</span>
+      </Tooltip>
+    );
+  }
+
+  return <>{children}</>;
+};
+ButtonTooltipDecorator.displayName = "ButtonTooltipDecorator";

package/src/Savebar/Savebar.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { useActionBar } from "../ActionBar";
+import {
+  Savebar,
+  SavebarLabels,
+  SavebarProps,
+  SavebarTooltips,
+} from "./Savebar";
+
+const Wrapper: React.FC = ({ children }) => {
+  const { anchor } = useActionBar();
+
+  return <div ref={anchor}>{children}</div>;
+};
+
+const labels: SavebarLabels = {
+  confirm: "Confirm",
+  error: "Error",
+  cancel: "Cancel",
+  delete: "Delete",
+};
+const tooltips: SavebarTooltips = {
+  confirm: "Confirm text",
+  cancel: "Cancel text",
+  delete: "Delete text",
+};
+
+const props: SavebarProps = {
+  labels,
+  disabled: false,
+  onCancel: () => undefined,
+  onSubmit: () => undefined,
+  state: "default",
+};
+
+export const Default: Story = () => <Savebar {...props} />;
+export const WithDelete: Story = () => (
+  <Savebar {...props} onDelete={() => undefined} />
+);
+export const WithTooltips: Story = () => (
+  <div style={{ paddingTop: 50 }}>
+    <Savebar {...props} onDelete={() => undefined} tooltips={tooltips} />
+  </div>
+);
+
+export default {
+  title: "Savebar",
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+} as Meta;

package/src/Savebar/Savebar.tsx

@@ -0,0 +1,79 @@
+import Button from "@material-ui/core/Button";
+import React from "react";
+
+import { useActionBar } from "../ActionBar";
+import { ActionBar } from "../ActionBar/ActionBar";
+import {
+  ConfirmButton,
+  ConfirmButtonLabels,
+  ConfirmButtonTransitionState,
+} from "../ConfirmButton";
+import { ButtonTooltipDecorator } from "./ButtonTooltipDecorator";
+import useStyles from "./styles";
+
+export type SavebarLabels = ConfirmButtonLabels &
+  Record<"delete" | "cancel", string>;
+export type SavebarTooltips = Partial<
+  Record<"confirm" | "delete" | "cancel", string>
+>;
+export interface SavebarProps {
+  disabled: boolean;
+  state: ConfirmButtonTransitionState;
+  labels: SavebarLabels;
+  tooltips?: SavebarTooltips;
+  onCancel: () => void;
+  onDelete?: () => void;
+  onSubmit: () => void;
+}
+
+export const Savebar: React.FC<SavebarProps> = ({
+  disabled,
+  labels,
+  tooltips,
+  state,
+  onCancel,
+  onDelete,
+  onSubmit,
+}) => {
+  const classes = useStyles();
+  const { setDocked } = useActionBar();
+
+  return (
+    <ActionBar state={state} disabled={disabled}>
+      {!!onDelete && (
+        <ButtonTooltipDecorator tooltip={tooltips?.delete}>
+          <Button
+            variant="contained"
+            onClick={onDelete}
+            className={classes.deleteButton}
+            data-test="button-bar-delete"
+          >
+            {labels.delete}
+          </Button>
+        </ButtonTooltipDecorator>
+      )}
+      <div className={classes.spacer} />
+      <ButtonTooltipDecorator tooltip={tooltips?.cancel}>
+        <Button
+          className={classes.cancelButton}
+          variant="text"
+          onClick={onCancel}
+          data-test="button-bar-cancel"
+        >
+          {labels.cancel}
+        </Button>
+      </ButtonTooltipDecorator>
+      <ButtonTooltipDecorator tooltip={tooltips?.confirm}>
+        <ConfirmButton
+          disabled={disabled}
+          labels={labels}
+          onClick={onSubmit}
+          transitionState={state}
+          data-test="button-bar-confirm"
+          onTransitionToDefault={() => setDocked(true)}
+        />
+      </ButtonTooltipDecorator>
+    </ActionBar>
+  );
+};
+Savebar.displayName = "Savebar";

package/src/Savebar/index.ts

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

package/src/Savebar/styles.ts

@@ -0,0 +1,25 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    button: {
+      marginRight: theme.spacing(1),
+    },
+    cancelButton: {
+      marginRight: theme.spacing(2),
+    },
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.dark,
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
+    },
+    spacer: {
+      flex: "1",
+    },
+  }),
+  { name: "Savebar" }
+);
+
+export default useStyles;

package/src/Sidebar/ExpandButton.tsx

@@ -0,0 +1,44 @@
+import { ButtonProps } from "@material-ui/core/Button";
+import ArrowIcon from "@material-ui/icons/ArrowBack";
+import clsx from "clsx";
+import React from "react";
+
+import { SquareButton } from "../SquareButton";
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    arrow: {
+      transition: theme.transitions.duration.shortest + "ms",
+    },
+    shrunk: {
+      transform: "scaleX(-1)",
+    },
+  }),
+  {
+    name: "ExpandButton",
+  }
+);
+
+export interface ExpandButtonProps extends ButtonProps {
+  isShrunk: boolean;
+}
+
+export const ExpandButton: React.FC<ExpandButtonProps> = ({
+  isShrunk,
+  ...rest
+}) => {
+  const classes = useStyles({});
+
+  return (
+    <SquareButton {...rest}>
+      <ArrowIcon
+        className={clsx(classes.arrow, {
+          [classes.shrunk]: isShrunk,
+        })}
+      />
+    </SquareButton>
+  );
+};
+
+ExpandButton.displayName = "ExpandButton";