@saleor/macaw-ui 0.7.2 → 0.8.0-dev.104

package/src/Avatar/Avatar.stories.tsx

@@ -1,22 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-
-import placeholder from "../assets/placeholder_64x64.png";
-import { Avatar } from "./Avatar";
-
-export default {
-  title: "Avatar",
-  component: Avatar,
-} as ComponentMeta<typeof Avatar>;
-
-const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  avatar: placeholder,
-};
-
-export const WithInitials = Template.bind({});
-WithInitials.args = {
-  initials: "LI",
-};

package/src/Avatar/Avatar.tsx

@@ -1,26 +0,0 @@
-import MuiAvatar from "@material-ui/core/Avatar";
-import clsx from "clsx";
-import React from "react";
-
-import { useStyles } from "./styles";
-
-export interface AvatarProps {
-  /** User initials, e.g. John Smith = JS */
-  initials: string;
-  /** URL to the user avatar image */
-  avatar?: string;
-}
-
-export const Avatar: React.FC<AvatarProps> = ({ initials, avatar }) => {
-  const classes = useStyles();
-
-  if (avatar) {
-    return <MuiAvatar className={classes.avatar} alt="user" src={avatar} />;
-  }
-
-  return (
-    <div className={clsx(classes.avatar, classes.avatarPlaceholder)}>
-      <div className={classes.avatarInitials}>{initials}</div>
-    </div>
-  );
-};

package/src/Avatar/index.ts

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

package/src/Avatar/styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from "../theme";
-
-const avatarSize = 32;
-
-export const useStyles = makeStyles((theme) => ({
-  avatar: {
-    height: avatarSize,
-    width: avatarSize,
-    "&&": {},
-    backgroundColor: theme.palette.background.paper,
-  },
-  avatarPlaceholder: {
-    alignItems: "center",
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: "100%",
-    display: "flex",
-    justifyContent: "center",
-  },
-  avatarInitials: {
-    height: avatarSize,
-    width: avatarSize,
-    lineHeight: avatarSize + "px",
-    color: theme.palette.primary.contrastText,
-    textAlign: "center",
-  },
-}));

package/src/Backlink/Backlink.stories.tsx

@@ -1,53 +0,0 @@
-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}>Back</Backlink>
-);
-export const Loading: Story = () => (
-  <Backlink disabled onClick={() => undefined}>
-    {undefined}
-  </Backlink>
-);
-
-export default {
-  title: "Backlink",
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-    Decorator,
-  ],
-} as Meta;

package/src/Backlink/Backlink.tsx

@@ -1,50 +0,0 @@
-import Portal from "@material-ui/core/Portal";
-import Skeleton from "@material-ui/lab/Skeleton";
-import React from "react";
-
-import { ArrowRightIcon } from "../icons";
-import { LayoutButton, LayoutButtonProps } from "../LayoutButton";
-import { useTheme } from "../theme";
-import { useBacklink } from "./context";
-import useStyles from "./styles";
-
-export type BacklinkProps<T extends React.ElementType> =
-  LayoutButtonProps<T> & {
-    children: React.ReactNode;
-    disabled?: boolean;
-  };
-
-export const Backlink = <T extends React.ElementType>({
-  children,
-  disabled,
-  onClick,
-  ...props
-}: BacklinkProps<T>) => {
-  const { ssr } = useTheme();
-  const classes = useStyles();
-  const anchor = useBacklink();
-
-  if (!anchor.current && !ssr) {
-    return null;
-  }
-
-  return (
-    <Portal container={anchor.current}>
-      <LayoutButton
-        className={classes.root}
-        disabled={disabled}
-        onClick={onClick}
-        data-test-id="app-header-back-button"
-        {...props}
-      >
-        <ArrowRightIcon className={classes.backArrow} />
-        {children ? (
-          <div className={classes.title}>{children}</div>
-        ) : (
-          <Skeleton className={classes.skeleton} />
-        )}
-      </LayoutButton>
-    </Portal>
-  );
-};
-Backlink.displayName = "Backlink";

package/src/Backlink/context.tsx

@@ -1,27 +0,0 @@
-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

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

package/src/Backlink/styles.ts

@@ -1,36 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    backArrow: {
-      fontSize: 30,
-      transform: "rotate(180deg)",
-    },
-    menuButton: {
-      flex: "0 0 auto",
-      marginLeft: theme.spacing(-2),
-      marginRight: theme.spacing(),
-      marginTop: theme.spacing(-2),
-    },
-    root: {
-      alignItems: "center",
-      cursor: "pointer",
-      display: "inline-flex",
-      marginTop: theme.spacing(0.5),
-      [theme.breakpoints.down("sm")]: {
-        margin: theme.spacing(4, 0, 0, 0),
-      },
-    },
-    skeleton: {
-      width: "10rem",
-    },
-    title: {
-      lineHeight: 1.1,
-      flex: 1,
-      marginLeft: theme.spacing(),
-    },
-  }),
-  { name: "AppHeader" }
-);
-
-export default useStyles;

package/src/BaseList/BaseList.tsx

@@ -1,154 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import {
-  ListContext,
-  ListGridContext,
-  useGridStyles,
-  useListContext,
-} from "./context";
-import { ListGridTemplate, useStyles } from "./styles";
-
-export interface BaseListProps extends React.HTMLAttributes<HTMLElement> {
-  gridTemplate: ListGridTemplate;
-}
-export const BaseList: React.FC<BaseListProps> = ({
-  children,
-  gridTemplate,
-  ...props
-}) => (
-  <ListGridContext.Provider value={gridTemplate}>
-    <section {...props}>{children}</section>
-  </ListGridContext.Provider>
-);
-
-export type BaseListItemClassKey =
-  | "row"
-  | "rowBody"
-  | "rowHead"
-  | "rowFoot"
-  | "rowHover"
-  | "rowBodySelected";
-
-export interface BaseListItemProps
-  extends React.HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-  classes: Record<BaseListItemClassKey, string>;
-  hover?: boolean;
-  selected?: boolean;
-}
-
-export const BaseListItem: React.FC<BaseListItemProps> = ({
-  classes,
-  className,
-  children,
-  hover = true,
-  selected,
-  ...props
-}) => {
-  const baseClasses = useStyles();
-  const gridClasses = useGridStyles();
-  const listSection = useListContext();
-
-  const Component = listSection === "body" ? "li" : "div";
-
-  return (
-    <Component
-      className={clsx(
-        className,
-        "OfsettedTableRow",
-        gridClasses.root,
-        classes.row,
-        baseClasses.row,
-        {
-          [classes.rowBody]: listSection === "body",
-          [classes.rowHead]: listSection === "head",
-          [classes.rowFoot]: listSection === "foot",
-          [classes.rowHover]: hover,
-          [classes.rowBodySelected]: selected,
-        }
-      )}
-      aria-selected={selected}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-};
-
-export type BaseListItemCellClassKey =
-  | "cell"
-  | "cellBody"
-  | "cellHeader"
-  | "cellAction"
-  | "cellCheckbox";
-
-export interface BaseListItemCellProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  classes: Record<BaseListItemCellClassKey, string>;
-  colSpan?: number;
-  padding?: "action" | "checkbox" | "none";
-}
-export const BaseListItemCell: React.FC<BaseListItemCellProps> = ({
-  classes,
-  className,
-  children,
-  colSpan,
-  padding,
-  ...props
-}) => {
-  const baseClasses = useStyles();
-  const listSection = useListContext();
-  const style = colSpan ? { gridColumn: `span ${colSpan}` } : {};
-
-  return (
-    <div
-      className={clsx(className, baseClasses.cell, classes.cell, {
-        [classes.cellBody]: listSection === "body",
-        [classes.cellHeader]: listSection === "head",
-        [classes.cellAction]: padding === "action",
-        [classes.cellCheckbox]: padding === "checkbox",
-      })}
-      style={style}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-export type BaseListHeaderProps = React.HTMLProps<HTMLElement>;
-export const BaseListHeader: React.FC<BaseListHeaderProps> = ({
-  children,
-  ...props
-}) => (
-  <ListContext.Provider value="head">
-    <header {...props}>{children}</header>
-  </ListContext.Provider>
-);
-
-export type BaseListBodyProps = React.HTMLProps<HTMLUListElement>;
-export const BaseListBody: React.FC<BaseListBodyProps> = ({
-  children,
-  className,
-  ...props
-}) => {
-  const classes = useStyles();
-
-  return (
-    <ListContext.Provider value="body">
-      <ul role="feed" className={clsx(classes.body, className)} {...props}>
-        {children}
-      </ul>
-    </ListContext.Provider>
-  );
-};
-
-export type BaseListFooterProps = React.HTMLProps<HTMLElement>;
-export const BaseListFooter: React.FC<BaseListFooterProps> = ({
-  children,
-  ...props
-}) => (
-  <ListContext.Provider value="foot">
-    <footer {...props}>{children}</footer>
-  </ListContext.Provider>
-);

package/src/BaseList/context.ts

@@ -1,16 +0,0 @@
-import { createContext, useContext, useMemo } from "react";
-
-import { ListGridTemplate, useGridTemplateStyles } from "./styles";
-
-export const ListContext = createContext<"body" | "head" | "foot">("body");
-export const ListGridContext = createContext<ListGridTemplate>(["1fr"]);
-
-export const useListContext = () => useContext(ListContext);
-export const useListGridContext = () => useContext(ListGridContext);
-
-export function useGridStyles() {
-  const gridTemplate = useListGridContext();
-  const props = useMemo(() => ({ width: gridTemplate }), [gridTemplate]);
-
-  return useGridTemplateStyles(props);
-}

package/src/BaseList/index.ts

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

package/src/BaseList/styles.ts

@@ -1,48 +0,0 @@
-import { merge } from "lodash";
-
-import { makeStyles } from "..";
-
-export type ListGridTemplate = string[] | Record<string, string[]>;
-
-export const useGridTemplateStyles = makeStyles<
-  { width: ListGridTemplate },
-  "root"
->(
-  () => ({
-    root: ({ width }) => {
-      if (width instanceof Array) {
-        return {
-          gridTemplateColumns: width.join(" "),
-        };
-      }
-
-      const x = Object.entries(width).map(([breakpoint, value]) => ({
-        [breakpoint]: {
-          gridTemplateColumns: value.join(" "),
-        },
-      }));
-      return {
-        ...merge({}, ...x),
-      };
-    },
-  }),
-  { name: "ListGrid" }
-);
-
-export const useStyles = makeStyles(
-  () => ({
-    row: {
-      alignItems: "center",
-      display: "grid",
-    },
-    cell: {
-      boxSizing: "content-box",
-      flex: 1,
-    },
-    body: {
-      margin: 0,
-      padding: 0,
-    },
-  }),
-  { name: "BaseList" }
-);

package/src/Button/Button.tsx

@@ -1,82 +0,0 @@
-import MuiButton, {
-  ButtonProps as MuiButtonProps,
-  ButtonTypeMap as MuiButtonTypeMap,
-} from "@material-ui/core/Button";
-import { OverridableComponent } from "@material-ui/core/OverridableComponent";
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "./styles";
-
-export type ButtonVariant = "primary" | "secondary" | "tertiary";
-// Aliasing "default" to "text" because "default" isn't actually default
-export type ButtonColor = "primary" | "secondary" | "text";
-
-interface ButtonInnerProps {
-  color?: ButtonColor;
-  error?: boolean;
-  variant?: ButtonVariant;
-}
-
-export interface ButtonTypeMap<P = {}, D extends React.ElementType = "button"> {
-  props: Omit<MuiButtonTypeMap<P, D>["props"], "variant" | "color"> &
-    ButtonInnerProps;
-  defaultComponent: D;
-  classKey: never;
-}
-
-export type ButtonProps<T extends React.ElementType = "button"> = Omit<
-  MuiButtonProps<T>,
-  "variant"
-> &
-  ButtonInnerProps;
-
-function getButtonProps(
-  colorProp: ButtonColor,
-  variant: ButtonVariant
-): Partial<MuiButtonProps> {
-  const color = colorProp === "text" ? "default" : colorProp;
-
-  switch (variant) {
-    case "primary":
-      return { variant: "contained", color };
-    case "secondary":
-      return { variant: "outlined", color };
-    default:
-      return { variant: "outlined", size: "small", color };
-  }
-}
-
-const _Button: React.FC<ButtonProps> = React.forwardRef(
-  (
-    { className, color = "primary", error, variant = "tertiary", ...props },
-    ref
-  ) => {
-    const classes = useStyles();
-
-    return (
-      <MuiButton
-        ref={ref}
-        className={clsx(className, classes.buttonDefault, {
-          [classes.primary]: variant === "primary" && error,
-          [classes.primaryDisabled]:
-            variant === "primary" && error && props.disabled,
-
-          [classes.secondary]: variant === "secondary" && error,
-          [classes.secondaryDisabled]:
-            variant === "secondary" && error && props.disabled,
-
-          [classes.tertiary]: variant === "tertiary" && error,
-          [classes.tertiaryDisabled]: variant === "tertiary" && props.disabled,
-          [classes.tertiaryErrorAndDisabled]:
-            variant === "tertiary" && props.disabled && error,
-        })}
-        {...getButtonProps(color, variant)}
-        disableRipple
-        {...props}
-      />
-    );
-  }
-);
-_Button.displayName = "Button";
-export const Button = _Button as OverridableComponent<ButtonTypeMap>;

package/src/Button/styles.ts

@@ -1,104 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => {
-    const isDarkMode = theme.palette.type === "dark";
-
-    return {
-      buttonDefault: {
-        "& span": {
-          fontWeight: 600,
-        },
-      },
-
-      primary: {
-        "&&": {
-          "&:hover, &.Mui-focusVisible": {
-            borderColor: theme.palette.saleor.errorAction[1],
-            color: theme.palette.saleor.errorAction[1],
-          },
-          "&:active": {
-            background: theme.palette.saleor.errorAction[5],
-          },
-        },
-        background: theme.palette.saleor.errorAction[1],
-        borderColor: theme.palette.saleor.errorAction[1],
-
-        ...(isDarkMode && {
-          color: theme.palette.saleor.main[1],
-        }),
-      },
-      primaryDisabled: {
-        "&&&": {
-          background: theme.palette.saleor.errorAction[5],
-          borderColor: theme.palette.saleor.errorAction[5],
-        },
-      },
-
-      secondary: {
-        "&&": {
-          "&:hover, &.Mui-focusVisible": {
-            borderColor: theme.palette.saleor.errorAction[1],
-            color: theme.palette.saleor.errorAction[1],
-          },
-          "&:active": {
-            background: theme.palette.saleor.errorAction[5],
-            borderColor: theme.palette.saleor.errorAction[1],
-          },
-        },
-        borderColor: theme.palette.saleor.errorAction[4],
-        color: theme.palette.saleor.errorAction[2],
-      },
-      secondaryDisabled: {
-        "&&&": {
-          borderColor: theme.palette.saleor.errorAction[5],
-          color: theme.palette.saleor.errorAction[5],
-
-          ...(isDarkMode && {
-            color: theme.palette.saleor.errorAction[3],
-          }),
-        },
-      },
-
-      tertiary: {
-        "&&": {
-          "&:hover, &.Mui-focusVisible": {
-            borderColor: theme.palette.saleor.errorAction[1],
-            color: theme.palette.saleor.errorAction[1],
-          },
-          "&:active": {
-            background: theme.palette.saleor.errorAction[5],
-            borderColor: theme.palette.saleor.errorAction[1],
-          },
-        },
-        borderColor: theme.palette.saleor.errorAction[4],
-        color: theme.palette.saleor.errorAction[2],
-      },
-      tertiaryDisabled: {
-        "&&&": {
-          border: "none",
-          color: theme.palette.saleor.main[5],
-
-          ...(isDarkMode && {
-            color: theme.palette.saleor.main[3],
-          }),
-        },
-      },
-      tertiaryErrorAndDisabled: {
-        "&&": {
-          color: `${theme.palette.saleor.errorAction[5]} !important`,
-        },
-        "&&&": {
-          ...(isDarkMode && {
-            color: theme.palette.saleor.errorAction[3],
-          }),
-        },
-      },
-    };
-  },
-  {
-    name: "Button",
-  }
-);
-
-export default useStyles;