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

package/src/ActionBar/context.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-
-// Imitate object returned from useRef
-type AnchorFunction = {
-  (el: HTMLDivElement): void;
-  current: HTMLDivElement | null;
-};
-
-export interface ActionBarContextType {
-  anchor: AnchorFunction;
-}
-
-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 [anchorState, setAnchor] = React.useState<HTMLDivElement | null>(null);
-
-  const anchor = React.useMemo(() => {
-    const fn = setAnchor as AnchorFunction;
-    fn.current = anchorState;
-    return fn;
-  }, [anchorState]);
-
-  return (
-    <ActionBarContext.Provider value={{ anchor }}>
-      {children}
-    </ActionBarContext.Provider>
-  );
-};

package/src/ActionBar/index.ts

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

package/src/ActionBar/styles.ts

@@ -1,31 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    content: {
-      "&:last-child": {
-        paddingBottom: theme.spacing(2),
-      },
-      display: "flex",
-      gap: theme.spacing(2),
-      paddingBottom: theme.spacing(2),
-      paddingTop: theme.spacing(2),
-      [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing(1),
-      },
-    },
-    paper: {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-    root: {
-      height: 72,
-    },
-    shadow: {
-      boxShadow: "0 -24px 20px -20px rgba(0, 0, 0, 0.15)",
-    },
-  }),
-  { name: "ActionBar" }
-);
-
-export default useStyles;

package/src/Alert/Alert.stories.tsx

@@ -1,48 +0,0 @@
-import { Link, Typography } from "@material-ui/core";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { Alert, AlertProps } from "./Alert";
-import { AlertBase } from "./AlertBase";
-
-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 const Custom: Story = () => (
-  <AlertBase {...props} elevation={16} variant="warning">
-    <Typography>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </Typography>
-  </AlertBase>
-);
-
-export const WithoutTitle: Story = () => (
-  <Alert close={false} variant="info">
-    <Typography>
-      Gift cards will appear after their order is fullfilled.{" "}
-      <Link>View Orders with Gift Cards</Link>
-    </Typography>
-  </Alert>
-);
-
-export default {
-  title: "Alert",
-} as Meta;

package/src/Alert/Alert.tsx

@@ -1,86 +0,0 @@
-import Typography from "@material-ui/core/Typography";
-import clsx from "clsx";
-import React from "react";
-
-import { IconButton } from "../IconButton";
-import { CloseIcon } from "../icons";
-import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
-import { AlertBase, AlertBaseProps, AlertVariant } from "./AlertBase";
-import useStyles from "./styles";
-
-export interface AlertProps extends AlertBaseProps {
-  close?: boolean;
-  title?: string;
-}
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-  variant: AlertVariant;
-}
-const Icon: React.FC<IconProps> = ({ variant, ...props }) => {
-  switch (variant) {
-    case "error":
-      return <NotAllowedIcon {...props} />;
-    case "warning":
-      return <WarningIcon {...props} />;
-    case "success":
-      return <CompleteIcon {...props} />;
-    default:
-      return <InfoIcon {...props} />;
-  }
-};
-
-export const Alert: React.FC<AlertProps> = ({
-  close = true,
-  variant = "info",
-  title,
-  children,
-  ...rest
-}) => {
-  const classes = useStyles();
-  const [visible, setVisible] = React.useState(true);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <AlertBase variant={variant} {...rest}>
-      <div className={classes.container}>
-        <div className={classes.icon}>
-          <Icon
-            className={clsx({
-              [classes.error]: variant === "error",
-              [classes.warning]: variant === "warning",
-              [classes.success]: variant === "success",
-            })}
-            variant={variant}
-          />
-        </div>
-        <div className={classes.content}>
-          <div className={classes.titleBar}>
-            {title && <Typography variant="h5">{title}</Typography>}
-            {close && (
-              <IconButton
-                className={clsx(classes.close, {
-                  [classes.closeNoContent]: !children,
-                })}
-                hoverOutline={false}
-                variant="secondary"
-                onClick={() => setVisible(false)}
-                data-test-id="close"
-              >
-                <CloseIcon />
-              </IconButton>
-            )}
-          </div>
-          {typeof children === "string" ? (
-            <Typography variant="body1">{children}</Typography>
-          ) : (
-            children
-          )}
-        </div>
-      </div>
-    </AlertBase>
-  );
-};
-
-Alert.displayName = "Alert";

package/src/Alert/AlertBase.tsx

@@ -1,38 +0,0 @@
-import Card, { CardProps } from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "./styles";
-
-export type AlertVariant = "error" | "warning" | "success" | "info";
-export interface AlertBaseProps extends Omit<CardProps, "variant"> {
-  className?: string;
-  variant: AlertVariant;
-}
-
-export const AlertBase: React.FC<AlertBaseProps> = ({
-  className,
-  variant = "info",
-  children,
-  ...rest
-}) => {
-  const classes = useStyles();
-
-  return (
-    <Card
-      elevation={0}
-      className={clsx(className, classes.root, {
-        [classes.error]: variant === "error",
-        [classes.warning]: variant === "warning",
-        [classes.success]: variant === "success",
-      })}
-      data-test-id="alert"
-      {...rest}
-    >
-      <CardContent>{children}</CardContent>
-    </Card>
-  );
-};
-
-AlertBase.displayName = "AlertBase";

package/src/Alert/index.ts

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

package/src/Alert/styles.ts

@@ -1,59 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    close: {
-      "&:hover": {
-        color: theme.palette.text.primary,
-      },
-      color: theme.palette.text.secondary,
-      position: "absolute",
-      right: theme.spacing(-2),
-      top: theme.spacing(-1),
-    },
-    closeNoContent: {
-      "&$close": {
-        top: 2,
-      },
-    },
-    container: {
-      columnGap: theme.spacing(2),
-      display: "grid",
-      gridTemplateColumns: "40px 1fr",
-    },
-    content: {
-      padding: theme.spacing(0, 1),
-    },
-    icon: {
-      "& $error": {
-        color: theme.palette.alert.icon.error,
-      },
-      "& $warning": {
-        color: theme.palette.alert.icon.warning,
-      },
-      "& $success": {
-        color: theme.palette.alert.icon.success,
-      },
-    },
-    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/Autocomplete/Autocomplete.stories.tsx

@@ -1,43 +0,0 @@
-import { MenuItem } from "@material-ui/core";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { Decorator, GuideDecorator } from "../utils/Decorator";
-import { useMockAutocomplete } from "../utils/useMockAutocomplete";
-import { Autocomplete } from "./Autocomplete";
-import { choices } from "./fixtures";
-
-export const Default: Story = () => {
-  const { results, search } = useMockAutocomplete(choices);
-
-  return (
-    <Autocomplete
-      choices={results}
-      fullWidth
-      label="Employee of the month"
-      onInputChange={search}
-    >
-      {({ highlightedIndex, getItemProps }) =>
-        results.map((choice, choiceIndex) => (
-          <MenuItem
-            selected={highlightedIndex === choiceIndex}
-            {...getItemProps({ item: choice, index: choiceIndex })}
-          >
-            {choice.label}
-          </MenuItem>
-        ))
-      }
-    </Autocomplete>
-  );
-};
-
-export const Loading: Story = () => (
-  <Autocomplete fullWidth choices={[]} label="Employee of the month" loading>
-    {() => null}
-  </Autocomplete>
-);
-
-export default {
-  decorators: [Decorator, GuideDecorator],
-  title: "Autocomplete / Single choice",
-} as Meta;

package/src/Autocomplete/Autocomplete.tsx

@@ -1,188 +0,0 @@
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Grow from "@material-ui/core/Grow";
-import Paper from "@material-ui/core/Paper";
-import Popper, { PopperPlacementType } from "@material-ui/core/Popper";
-import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
-import clsx from "clsx";
-import { useCombobox, UseComboboxGetItemPropsOptions } from "downshift";
-import React from "react";
-
-import { SyntheticChangeEvent } from "../../types/utils";
-import { Choice } from "../Filter";
-import { ChevronIcon } from "../icons";
-import { isScrolledToBottom, useElementScroll } from "../tools";
-import { mergeRefs } from "../utils/mergeRefs";
-import useStyles from "./styles";
-
-export interface AutocompleteProps extends StandardTextFieldProps {
-  children: (data: {
-    getItemProps: (opts: UseComboboxGetItemPropsOptions<Choice>) => any;
-    highlightedIndex: number;
-    inputValue: string;
-  }) => React.ReactNode | React.ReactNodeArray;
-  className?: string;
-  styles?: React.CSSProperties;
-  choices: Choice[];
-  label?: string;
-  loading?: boolean;
-  popperPlacement?: PopperPlacementType;
-  onChange?: (event: SyntheticChangeEvent) => void;
-  onInputChange?: (value: string) => void;
-  onScrollToBottom?: () => void;
-}
-
-export const Autocomplete: React.FC<AutocompleteProps> = ({
-  choices,
-  children,
-  loading,
-  name,
-  InputProps,
-  popperPlacement = "bottom-start",
-  onChange,
-  onInputChange,
-  onScrollToBottom,
-  ...rest
-}) => {
-  const classes = useStyles();
-  const anchor = React.useRef<HTMLDivElement>();
-  const input = React.useRef<HTMLInputElement>();
-
-  const {
-    closeMenu,
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    openMenu,
-    inputValue,
-    setInputValue,
-  } = useCombobox({
-    circularNavigation: false,
-    defaultHighlightedIndex: 0,
-    items: choices,
-    onInputValueChange: ({ inputValue }) => {
-      if (onInputChange) {
-        onInputChange(inputValue ?? "");
-      }
-    },
-    onSelectedItemChange: ({ selectedItem }) => {
-      closeMenu();
-      if (onChange) {
-        onChange({
-          target: {
-            name: name ?? "",
-            value: selectedItem?.value ?? "",
-          },
-        });
-      }
-    },
-    itemToString: (choice) => choice?.label ?? "",
-    onIsOpenChange: ({ selectedItem, inputValue, isOpen }) => {
-      if (!isOpen && selectedItem && selectedItem?.label !== inputValue) {
-        setInputValue(selectedItem!.label);
-      }
-    },
-  });
-
-  const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
-
-  React.useEffect(() => {
-    if (
-      isOpen &&
-      onScrollToBottom &&
-      dropdownRef &&
-      isScrolledToBottom(dropdownRef, position!, 5)
-    ) {
-      onScrollToBottom();
-    }
-  }, [position?.y, dropdownRef]);
-
-  const labelProps = getLabelProps();
-  const { ref: comboboxDownshiftRef, ...comboboxProps } = getComboboxProps();
-  const { ref: downshiftRef, ...inputProps } = getInputProps({
-    onFocus: () => {
-      if (!isOpen) {
-        input.current?.select();
-        openMenu();
-      }
-    },
-  });
-  const menuProps = getMenuProps({}, { suppressRefError: true });
-
-  React.useEffect(() => {
-    if (
-      isOpen &&
-      onScrollToBottom &&
-      dropdownRef &&
-      isScrolledToBottom(dropdownRef, position!, 5)
-    ) {
-      onScrollToBottom();
-    }
-  }, [position?.y, dropdownRef]);
-
-  return (
-    <>
-      <TextField
-        {...rest}
-        {...comboboxProps}
-        name={name}
-        InputLabelProps={labelProps}
-        ref={mergeRefs(comboboxDownshiftRef, anchor)}
-        InputProps={{
-          ...InputProps,
-          ...inputProps,
-          endAdornment: (
-            <>
-              {loading && (
-                <div className={classes.loader}>
-                  <CircularProgress size={24} />
-                </div>
-              )}
-              <ChevronIcon
-                {...getToggleButtonProps()}
-                type="button"
-                aria-label="toggle menu"
-              />
-            </>
-          ),
-        }}
-        inputProps={{ ref: mergeRefs(downshiftRef, input) }}
-      />
-      <Popper
-        className={clsx(classes.popper, menuProps.className)}
-        open={isOpen}
-        anchorEl={input.current}
-        transition
-        placement={popperPlacement}
-      >
-        {({ TransitionProps, placement }) => (
-          <Grow
-            {...TransitionProps}
-            style={{
-              transformOrigin:
-                placement === "bottom" ? "left top" : "left bottom",
-            }}
-          >
-            <Paper
-              className={classes.dropdown}
-              elevation={8}
-              style={{ width: anchor.current?.clientWidth }}
-              {...menuProps}
-              ref={mergeRefs(setAnchor, menuProps.ref)}
-            >
-              {children({
-                highlightedIndex,
-                getItemProps,
-                inputValue,
-              })}
-            </Paper>
-          </Grow>
-        )}
-      </Popper>
-    </>
-  );
-};

package/src/Autocomplete/fixtures.ts

@@ -1,122 +0,0 @@
-export const choices = [
-  {
-    label: "Hazel, Direct Integration Producer",
-    value: "hazel, direct integration producer",
-  },
-  {
-    label: "Audra, District Functionality Facilitator",
-    value: "audra, district functionality facilitator",
-  },
-  {
-    label: "Emilie, Product Integration Assistant",
-    value: "emilie, product integration assistant",
-  },
-  {
-    label: "Kyla, Central Interactions Director",
-    value: "kyla, central interactions director",
-  },
-  {
-    label: "Vida, Senior Usability Producer",
-    value: "vida, senior usability producer",
-  },
-  {
-    label: "Lonie, Chief Infrastructure Director",
-    value: "lonie, chief infrastructure director",
-  },
-  {
-    label: "Zola, Lead Operations Producer",
-    value: "zola, lead operations producer",
-  },
-  {
-    label: "Angel, District Operations Orchestrator",
-    value: "angel, district operations orchestrator",
-  },
-  {
-    label: "Glenda, Lead Accountability Technician",
-    value: "glenda, lead accountability technician",
-  },
-  {
-    label: "Kayley, National Web Facilitator",
-    value: "kayley, national web facilitator",
-  },
-  {
-    label: "Kali, National Configuration Planner",
-    value: "kali, national configuration planner",
-  },
-  {
-    label: "Lilian, Internal Branding Planner",
-    value: "lilian, internal branding planner",
-  },
-  {
-    label: "Lamar, Dynamic Integration Executive",
-    value: "lamar, dynamic integration executive",
-  },
-  {
-    label: "Leonel, Central Brand Strategist",
-    value: "leonel, central brand strategist",
-  },
-  {
-    label: "Broderick, Chief Division Liaison",
-    value: "broderick, chief division liaison",
-  },
-  {
-    label: "Kavon, Future Marketing Representative",
-    value: "kavon, future marketing representative",
-  },
-  {
-    label: "Sydnee, Corporate Marketing Liaison",
-    value: "sydnee, corporate marketing liaison",
-  },
-  {
-    label: "Jett, Future Data Specialist",
-    value: "jett, future data specialist",
-  },
-  {
-    label: "Theresia, International Tactics Assistant",
-    value: "theresia, international tactics assistant",
-  },
-  {
-    label: "Cesar, Direct Mobility Director",
-    value: "cesar, direct mobility director",
-  },
-  {
-    label: "Madonna, Investor Assurance Executive",
-    value: "madonna, investor assurance executive",
-  },
-  {
-    label: "Ima, Internal Research Facilitator",
-    value: "ima, internal research facilitator",
-  },
-  {
-    label: "Joanne, Investor Identity Coordinator",
-    value: "joanne, investor identity coordinator",
-  },
-  {
-    label: "Gavin, Future Web Assistant",
-    value: "gavin, future web assistant",
-  },
-  {
-    label: "Maverick, Internal Optimization Assistant",
-    value: "maverick, internal optimization assistant",
-  },
-  {
-    label: "Hudson, Regional Branding Representative",
-    value: "hudson, regional branding representative",
-  },
-  {
-    label: "Brooklyn, Human Paradigm Producer",
-    value: "brooklyn, human paradigm producer",
-  },
-  {
-    label: "Gussie, Future Configuration Supervisor",
-    value: "gussie, future configuration supervisor",
-  },
-  {
-    label: "Michel, Corporate Tactics Orchestrator",
-    value: "michel, corporate tactics orchestrator",
-  },
-  {
-    label: "Maxime, Customer Mobility Analyst",
-    value: "maxime, customer mobility analyst",
-  },
-];

package/src/Autocomplete/index.ts

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

package/src/Autocomplete/styles.ts

@@ -1,22 +0,0 @@
-import { zIndex } from "../consts";
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    dropdown: {
-      maxHeight: 220,
-      overflow: "scroll",
-    },
-    loader: {
-      marginRight: theme.spacing(1),
-    },
-    popper: {
-      marginTop: theme.spacing(1),
-      // Places popper above dialogs
-      zIndex: zIndex.popper,
-    },
-  }),
-  { name: "Autocomplete" }
-);
-
-export default useStyles;