@saleor/macaw-ui 0.2.4

package/package.json

@@ -0,0 +1,117 @@
+{
+  "version": "0.2.4",
+  "license": "CC-BY-4.0",
+  "main": "dist/index.js",
+  "homepage": "https://macaw-ui.vercel.app/",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/mirumee/macaw-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mirumee/macaw-ui/issues"
+  },
+  "keywords": [
+    "saleor",
+    "macaw",
+    "macaw-ui",
+    "react",
+    "ui components"
+  ],
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build --tsconfig ./tsconfig.prod.json",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint src",
+    "prepare": "npm run build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "release": "np"
+  },
+  "peerDependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-helmet": "^6.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint",
+      "pre-push": "tsdx lint"
+    }
+  },
+  "np": {
+    "yarn": false
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5"
+  },
+  "name": "@saleor/macaw-ui",
+  "description": "Saleor's UI component library",
+  "author": "Saleor Commerce",
+  "module": "dist/macaw-ui.esm.js",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "size-limit": [
+    {
+      "path": "dist/macaw-ui.cjs.production.min.js",
+      "limit": "45 KB"
+    },
+    {
+      "path": "dist/macaw-ui.esm.js",
+      "limit": "25 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.14.0",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@size-limit/preset-small-lib": "^4.10.2",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@types/lodash": "^4.14.170",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.4",
+    "@types/react-helmet": "^6.1.1",
+    "@types/react-inlinesvg": "^1.0.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-import": "^1.13.3",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
+    "husky": "^6.0.0",
+    "np": "^7.5.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react-is": "^17.0.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "size-limit": "^4.10.2",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "react-inlinesvg": "^2.3.0"
+  }
+}

package/src/ActionBar/ActionBar.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { ConfirmButton, ConfirmButtonLabels } from "../ConfirmButton";
+import { ActionBar } from "./ActionBar";
+import { useActionBar } from "./context";
+
+const Wrapper: React.FC = ({ children }) => {
+  const { anchor } = useActionBar();
+
+  return <div ref={anchor}>{children}</div>;
+};
+
+const labels: ConfirmButtonLabels = {
+  confirm: "Confirm",
+  error: "Error",
+};
+
+export const WithContent: Story = () => (
+  <ActionBar disabled={false} state="default">
+    <ConfirmButton labels={labels} transitionState="default" />
+  </ActionBar>
+);
+
+export default {
+  title: "ActionBar",
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+} as Meta;

package/src/ActionBar/ActionBar.tsx

@@ -0,0 +1,58 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Container from "@material-ui/core/Container";
+import Portal from "@material-ui/core/Portal";
+import React from "react";
+
+import { ConfirmButtonTransitionState } from "../ConfirmButton";
+import useWindowScroll from "../tools/useWindowScroll";
+import { useActionBar } from "./context";
+import useStyles from "./styles";
+
+export interface ActionBarProps {
+  disabled: boolean;
+  state: ConfirmButtonTransitionState;
+  children: React.ReactNode[] | React.ReactNode;
+}
+
+export const ActionBar: React.FC<ActionBarProps> = ({
+  disabled,
+  children,
+  state,
+  ...rest
+}) => {
+  const classes = useStyles();
+
+  const { anchor, docked, setDocked } = useActionBar();
+  const scrollPosition = useWindowScroll();
+
+  React.useEffect(() => {
+    if (!disabled && state !== "loading") {
+      setDocked(false);
+    }
+  }, [disabled, state, setDocked]);
+  React.useEffect(() => () => setDocked(true), [setDocked]);
+
+  const scrolledToBottom =
+    scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
+
+  if (!anchor.current) {
+    return null;
+  }
+
+  return (
+    <Portal container={anchor.current}>
+      <div className={classes.root} {...rest}>
+        <Container maxWidth="lg">
+          <Card
+            className={classes.paper}
+            elevation={!(docked || scrolledToBottom) ? 16 : 0}
+          >
+            <CardContent className={classes.content}>{children}</CardContent>
+          </Card>
+        </Container>
+      </div>
+    </Portal>
+  );
+};
+ActionBar.displayName = "ActionBar";

package/src/ActionBar/context.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface ActionBarContextType {
+  anchor: React.RefObject<HTMLDivElement>;
+  docked: boolean;
+  setDocked: (docked: boolean) => void;
+}
+
+export const ActionBarContext = React.createContext<
+  ActionBarContextType | undefined
+>(undefined);
+ActionBarContext.displayName = "ActionBarContext";
+
+export const useActionBar = () => {
+  const ctx = React.useContext(ActionBarContext);
+  if (ctx === undefined) {
+    throw new Error("useActionBar must be used within a ActionBarContext");
+  }
+
+  return ctx;
+};
+
+export const ActionBarProvider: React.FC = ({ children }) => {
+  const [docked, setDocked] = React.useState(true);
+  const anchor = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <ActionBarContext.Provider value={{ anchor, docked, setDocked }}>
+      {children}
+    </ActionBarContext.Provider>
+  );
+};

package/src/ActionBar/index.ts

@@ -0,0 +1,2 @@
+export * from "./ActionBar";
+export * from "./context";

package/src/ActionBar/styles.ts

@@ -0,0 +1,27 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    content: {
+      "&:last-child": {
+        paddingBottom: theme.spacing(2),
+      },
+      display: "flex",
+      paddingBottom: theme.spacing(2),
+      paddingTop: theme.spacing(2),
+      [theme.breakpoints.down("sm")]: {
+        marginTop: theme.spacing(1),
+      },
+    },
+    paper: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    root: {
+      height: 70,
+    },
+  }),
+  { name: "Savebar" }
+);
+
+export default useStyles;

package/src/Alert/Alert.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { Alert, AlertProps } from "./Alert";
+
+const props: AlertProps = {
+  close: false,
+  title: "Title",
+  variant: "info",
+};
+
+export const Info: Story = () => <Alert {...props} />;
+export const Warn: Story = () => <Alert {...props} variant="warning" />;
+export const Success: Story = () => <Alert {...props} variant="success" />;
+export const Error: Story = () => <Alert {...props} variant="error" />;
+export const WithClose: Story = () => <Alert {...props} close />;
+export const WithContent: Story = () => (
+  <Alert {...props}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Alert>
+);
+export const WithContentAndClose: Story = () => (
+  <Alert {...props} close>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Alert>
+);
+
+export default {
+  title: "Alert",
+} as Meta;

package/src/Alert/Alert.tsx

@@ -0,0 +1,86 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import IconButton from "@material-ui/core/IconButton";
+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";
+
+export type AlertVariant = "error" | "warning" | "success" | "info";
+export interface AlertProps {
+  className?: string;
+  close?: boolean;
+  variant: AlertVariant;
+  title: string;
+}
+
+function getIcon(variant: AlertVariant): React.ReactElement {
+  switch (variant) {
+    case "error":
+      return <NotAllowedIcon />;
+    case "success":
+      return <CompleteIcon />;
+    case "warning":
+      return <WarningIcon />;
+  }
+  return <InfoIcon />;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  className,
+  close = true,
+  variant = "info",
+  title,
+  children,
+}) => {
+  const classes = useStyles();
+  const [visible, setVisible] = React.useState(true);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Card
+      elevation={0}
+      className={clsx(className, classes.root, {
+        [classes.error]: variant === "error",
+        [classes.warning]: variant === "warning",
+        [classes.success]: variant === "success",
+      })}
+      data-test="alert"
+    >
+      <CardContent>
+        <div className={classes.container}>
+          <div>{getIcon(variant)}</div>
+          <div className={classes.content}>
+            <div className={classes.titleBar}>
+              <Typography variant="h5">{title}</Typography>
+              {close && (
+                <IconButton
+                  className={clsx(classes.close, {
+                    [classes.closeNoContent]: !!children,
+                  })}
+                  onClick={() => setVisible(false)}
+                  data-test="close"
+                >
+                  <CloseIcon />
+                </IconButton>
+              )}
+            </div>
+            {typeof children === "string" ? (
+              <Typography variant="body1">{children}</Typography>
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+Alert.displayName = "Alert";

package/src/Alert/index.ts

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

package/src/Alert/styles.ts

@@ -0,0 +1,46 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    close: {
+      color: theme.palette.common.black,
+      position: "absolute",
+      right: theme.spacing(-2),
+      top: theme.spacing(-1),
+    },
+    closeNoContent: {
+      "&$close": {
+        right: theme.spacing(-3),
+        top: theme.spacing(-3),
+      },
+    },
+    container: {
+      columnGap: theme.spacing(2),
+      display: "grid",
+      gridTemplateColumns: "40px 1fr",
+    },
+    content: {
+      padding: theme.spacing(0, 1),
+    },
+    root: {},
+    titleBar: {
+      marginTop: 6,
+      marginBottom: theme.spacing(1),
+      position: "relative",
+    },
+    error: {
+      background: theme.palette.alert.paper.error,
+    },
+    warning: {
+      background: theme.palette.alert.paper.warning,
+    },
+    success: {
+      background: theme.palette.alert.paper.success,
+    },
+  }),
+  {
+    name: "Alert",
+  }
+);
+
+export default useStyles;

package/src/Backlink/Backlink.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { Decorator } from "../utils/Decorator";
+import { Backlink } from "./Backlink";
+import { useBacklink } from "./context";
+
+// Normally some other component would rerender and force Backlink to recheck
+// anchor too, but since it's static view we need to hack it a bit
+const Wrapper: React.FC = ({ children }) => {
+  const anchor = useBacklink();
+  const [initialized, setInitialized] = React.useState(false);
+  const timer = React.useRef<number>();
+
+  React.useEffect(() => {
+    timer.current = setInterval(() => {
+      if (!initialized && anchor.current) {
+        setInitialized(true);
+        clearInterval(timer.current);
+      }
+    }, 50) as any;
+
+    return () => clearInterval(timer.current);
+  }, []);
+
+  return (
+    <div>
+      <div ref={anchor} />
+      {initialized && children}
+    </div>
+  );
+};
+
+export const Default: Story = () => (
+  <Backlink onClick={() => undefined}>Go back</Backlink>
+);
+export const Loading: Story = () => (
+  <Backlink onClick={() => undefined}>{undefined}</Backlink>
+);
+
+export default {
+  title: "Backlink",
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+    Decorator,
+  ],
+} as Meta;

package/src/Backlink/Backlink.tsx

@@ -0,0 +1,40 @@
+import Portal from "@material-ui/core/Portal";
+import Typography from "@material-ui/core/Typography";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import Skeleton from "@material-ui/lab/Skeleton";
+import React from "react";
+
+import { useBacklink } from "./context";
+import useStyles from "./styles";
+
+export interface AppHeaderProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+export const Backlink: React.FC<AppHeaderProps> = ({ children, onClick }) => {
+  const classes = useStyles();
+  const anchor = useBacklink();
+
+  if (!anchor.current) {
+    return null;
+  }
+
+  return (
+    <Portal container={anchor.current}>
+      <div
+        className={classes.root}
+        onClick={onClick}
+        data-test-id="app-header-back-button"
+      >
+        <ArrowBackIcon className={classes.backArrow} />
+        {children ? (
+          <Typography className={classes.title}>{children}</Typography>
+        ) : (
+          <Skeleton className={classes.skeleton} />
+        )}
+      </div>
+    </Portal>
+  );
+};
+Backlink.displayName = "Backlink";

package/src/Backlink/context.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export type BacklinkContextType = React.RefObject<HTMLDivElement>;
+
+export const BacklinkContext = React.createContext<
+  BacklinkContextType | undefined
+>(undefined);
+BacklinkContext.displayName = "BacklinkContext";
+
+export const useBacklink = () => {
+  const ctx = React.useContext(BacklinkContext);
+  if (ctx === undefined) {
+    throw new Error("useBacklink must be used within a BacklinkContext");
+  }
+
+  return ctx;
+};
+
+export const BacklinkProvider: React.FC = ({ children }) => {
+  const anchor = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <BacklinkContext.Provider value={anchor}>
+      {children}
+    </BacklinkContext.Provider>
+  );
+};

package/src/Backlink/index.ts

@@ -0,0 +1,2 @@
+export * from "./Backlink";
+export * from "./context";

package/src/Backlink/styles.ts

@@ -0,0 +1,41 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    backArrow: {
+      fontSize: 30,
+    },
+    menuButton: {
+      flex: "0 0 auto",
+      marginLeft: theme.spacing(-2),
+      marginRight: theme.spacing(),
+      marginTop: theme.spacing(-2),
+    },
+    root: {
+      "&:hover": {
+        color: theme.typography.body1.color,
+      },
+      alignItems: "center",
+      color: theme.palette.grey[500],
+      cursor: "pointer",
+      display: "flex",
+      marginTop: theme.spacing(0.5),
+      transition: theme.transitions.duration.standard + "ms",
+      [theme.breakpoints.down("sm")]: {
+        margin: theme.spacing(4, 0, 0, 0),
+      },
+    },
+    skeleton: {
+      width: "10rem",
+    },
+    title: {
+      color: "inherit",
+      flex: 1,
+      marginLeft: theme.spacing(),
+      textTransform: "uppercase",
+    },
+  }),
+  { name: "AppHeader" }
+);
+
+export default useStyles;

package/src/ConfirmButton/ConfirmButton.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import {
+  ConfirmButton,
+  ConfirmButtonLabels,
+  ConfirmButtonTransitionState,
+} from "./ConfirmButton";
+
+const labels: ConfirmButtonLabels = {
+  confirm: "Confirm",
+  error: "Error",
+};
+
+export const Interactive: Story = () => {
+  const [
+    transitionState,
+    setTransitionState,
+  ] = React.useState<ConfirmButtonTransitionState>("default");
+  const timer = React.useRef<number>();
+  React.useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    },
+    []
+  );
+
+  const handleClick = () => {
+    if (!timer.current) {
+      setTransitionState("loading");
+      timer.current = (setTimeout(
+        () => setTransitionState("success"),
+        2000
+      ) as unknown) as number;
+    }
+  };
+
+  return (
+    <ConfirmButton
+      labels={labels}
+      transitionState={transitionState}
+      onClick={handleClick}
+    />
+  );
+};
+
+export const Default: Story = () => (
+  <ConfirmButton labels={labels} transitionState="default" />
+);
+export const Loading: Story = () => (
+  <ConfirmButton
+    labels={labels}
+    transitionState="loading"
+    noTransition={true}
+  />
+);
+export const Error: Story = () => (
+  <ConfirmButton labels={labels} transitionState="error" noTransition={true} />
+);
+export const Success: Story = () => (
+  <ConfirmButton
+    labels={labels}
+    transitionState="success"
+    noTransition={true}
+  />
+);
+
+export default {
+  title: "Confirm Button",
+} as Meta;