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

package/src/SwitchSelector/SwitchSelector.stories.tsx

@@ -1,63 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
-
-import useGuideStyles from "../utils/guideStyles";
-import { SwitchSelector } from "./SwitchSelector";
-import { SwitchSelectorButton } from "./SwitchSelectorButton";
-
-type SwitchSelectorButtonOptions = {
-  label: string | React.ReactNode;
-  value: string;
-};
-
-const INITIAL_TAB = "op2";
-
-const OPTIONS: SwitchSelectorButtonOptions[] = [
-  { label: "Option 1", value: "op1" },
-  { label: "Option 2", value: "op2" },
-  { label: "Option 3", value: "op3" },
-  { label: "Option 4", value: "op4" },
-];
-
-const DefaultStory: React.FC = () => {
-  const guideClasses = useGuideStyles();
-  const [active, setActive] = useState(INITIAL_TAB);
-
-  const currentTab = OPTIONS.find((option) => option.value === active);
-
-  return (
-    <div>
-      <Typography className={guideClasses.headline} variant="h1">
-        Switch Selector
-      </Typography>
-      <Typography className={guideClasses.paragraph} component="p">
-        Switch Selector has the functionality of a radio button group. It is
-        used to change an active tab to toggle context.
-      </Typography>
-      <div>
-        <SwitchSelector>
-          {OPTIONS.map(({ label, value }) => (
-            <SwitchSelectorButton
-              value={value}
-              onClick={() => setActive(value)}
-              activeTab={active}
-            >
-              {label}
-            </SwitchSelectorButton>
-          ))}
-        </SwitchSelector>
-
-        <div style={{ marginTop: "2em" }}>
-          <Typography>{`You have selected ${currentTab?.label}`}</Typography>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const Default: Story = () => <DefaultStory />;
-
-export default {
-  title: "Switch selector",
-} as Meta;

package/src/SwitchSelector/SwitchSelector.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-import { makeStyles } from "..";
-
-const useStyles = makeStyles((theme) => ({
-  switchSelector: {
-    border: `1px solid ${theme.palette.saleor.main[5]}`,
-    padding: "6px",
-    borderRadius: 4,
-    width: "fit-content",
-  },
-}));
-
-export const SwitchSelector: React.FC<{}> = ({ children }) => {
-  const classes = useStyles();
-
-  return <div className={classes.switchSelector}>{children}</div>;
-};
-
-SwitchSelector.displayName = "SwitchSelector";

package/src/SwitchSelector/SwitchSelectorButton.tsx

@@ -1,60 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { Button, makeStyles } from "..";
-
-interface SwitchSelectorButtonProps {
-  value: string;
-  activeTab?: string;
-  onClick: () => void;
-}
-
-const useSwitchSelectorButtonStyles = makeStyles((theme) => ({
-  root: {
-    color: "#77738C",
-    background: "none",
-    borderColor: "transparent",
-    cursor: "pointer",
-
-    "&:not(:first-child)": {
-      marginLeft: theme.spacing(1),
-    },
-
-    "&:hover": {
-      backgroundColor: theme.palette.common.white,
-      color: theme.palette.saleor.active[1],
-      border: `1px solid ${theme.palette.saleor.active[1]}`,
-    },
-
-    "&:active": {
-      backgroundColor: theme.palette.saleor.active[5],
-    },
-  },
-  buttonSelected: {
-    color: theme.palette.common.white,
-    backgroundColor: theme.palette.saleor.active[1],
-  },
-}));
-
-export const SwitchSelectorButton: React.FC<SwitchSelectorButtonProps> = ({
-  onClick,
-  value,
-  children,
-  activeTab,
-}) => {
-  const classes = useSwitchSelectorButtonStyles();
-
-  return (
-    <Button
-      key={value}
-      onClick={onClick}
-      className={clsx(classes.root, {
-        [classes.buttonSelected]: value === activeTab,
-      })}
-    >
-      {children}
-    </Button>
-  );
-};
-
-SwitchSelectorButton.displayName = "SwitchSelectorButton";

package/src/SwitchSelector/index.ts

@@ -1,2 +0,0 @@
-export * from "./SwitchSelector";
-export * from "./SwitchSelectorButton";

package/src/Tooltip/Arrow.tsx

@@ -1,54 +0,0 @@
-import { Side } from "@floating-ui/react-dom-interactions";
-import clsx from "clsx";
-import React, { forwardRef } from "react";
-
-import { useTheme } from "../theme";
-import { useArrowStyles } from "./styles";
-import { TooltipProps } from "./Tooltip";
-
-interface ArrowProps {
-  x: number | undefined;
-  y: number | undefined;
-  side: Side;
-  variant: TooltipProps["variant"];
-}
-
-export const Arrow = forwardRef<HTMLDivElement, ArrowProps>(
-  ({ x, y, side, variant }, ref) => {
-    const { themeType } = useTheme();
-    const classes = useArrowStyles({ variant, side });
-
-    return (
-      <div
-        className={clsx(
-          classes.arrowContainer,
-          themeType === "dark" && classes.dark
-        )}
-        ref={ref}
-        style={{
-          top: y ?? "",
-          left: x ?? "",
-        }}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
-          <path
-            className={classes.backgroundPath}
-            fillRule="evenodd"
-            d="M12.25 7 8.6 2.133a2 2 0 0 0-3.2 0L1.75 7h10.5Z"
-            clipRule="evenodd"
-          />
-          <path
-            className={classes.borderPath}
-            fillRule="evenodd"
-            d="M5.8 2.433c.6-.8 1.8-.8 2.4 0L11.25 6.5h1.25L9 1.833a2.5 2.5 0 0 0-4 0L1.5 6.5h1.25L5.8 2.433Z"
-            clipRule="evenodd"
-          />
-          <path
-            className={classes.backgroundPath}
-            d="M12.5 6.5h-11l-.75 1h12.5l-.75-1Z"
-          />
-        </svg>
-      </div>
-    );
-  }
-);

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,82 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import isChromatic from "chromatic/isChromatic";
-import React from "react";
-
-import { SquareButton } from "../SquareButton";
-import { makeStyles } from "../theme";
-import { Decorator } from "../utils/Decorator";
-import { Tooltip, TooltipProps } from "./Tooltip";
-
-const Template: Story<TooltipProps> = (args) => {
-  return <Tooltip {...args} />;
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  variant: undefined,
-};
-
-export const WithHeader = Template.bind({});
-WithHeader.args = {
-  variant: undefined,
-  header: "App Permissions",
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  variant: "success",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  variant: "error",
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  variant: "warning",
-};
-
-const useStyles = makeStyles({
-  pageWrapper: {
-    display: "flex",
-    width: "210vw",
-    height: "150vh",
-  },
-  storyWrapper: {
-    paddingTop: "10%",
-    paddingLeft: "90vw",
-  },
-  tip: {
-    position: "static",
-    left: "12px",
-    top: "12px",
-  },
-});
-
-const TooltipDecorator = (storyFn: any) => {
-  const classes = useStyles();
-
-  if (isChromatic()) {
-    return storyFn();
-  }
-
-  return (
-    <div className={classes.pageWrapper}>
-      <div className={classes.tip}>Scroll to right to test tooltip</div>
-      <div className={classes.storyWrapper}>{storyFn()}</div>
-    </div>
-  );
-};
-
-export default {
-  title: "Tooltip",
-  component: Tooltip,
-  args: {
-    title: "Tooltip",
-    children: <SquareButton>Hover</SquareButton>,
-    placement: "top-start",
-    open: isChromatic() ? true : undefined,
-  },
-  decorators: [TooltipDecorator, Decorator],
-} as Meta<TooltipProps>;

package/src/Tooltip/Tooltip.tsx

@@ -1,170 +0,0 @@
-import {
-  arrow,
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  offset,
-  Placement,
-  shift,
-  Side,
-  useDismiss,
-  useFloating,
-  useFocus,
-  useHover,
-  useInteractions,
-  useRole,
-} from "@floating-ui/react-dom-interactions";
-import clsx from "clsx";
-import React from "react";
-
-import { useTheme } from "../theme";
-import { mergeRefs } from "../utils/mergeRefs";
-import { Arrow } from "./Arrow";
-import useStyles from "./styles";
-
-export interface TooltipProps {
-  variant?: "success" | "warning" | "error";
-  placement?: Placement;
-  arrow?: boolean;
-  onClick?: React.MouseEventHandler<any>;
-  onOpen?: () => void;
-  onClose?: () => void;
-  open?: boolean;
-  initialOpen?: boolean;
-  disabled?: boolean;
-  children: React.ReactElement;
-  header?: React.ReactNode;
-  title?: React.ReactNode;
-  /** Ref for element that triggers opening the tooltip on hover */
-  referenceRef?: React.Ref<HTMLElement>;
-  /** Ref for tooltip div element */
-  floatingRef?: React.Ref<HTMLDivElement>;
-}
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  variant,
-  placement: initialPlacement = "bottom-start",
-  arrow: hasArrow = true,
-  onOpen,
-  onClose,
-  onClick,
-  open: forceState,
-  initialOpen = false,
-  disabled = false,
-  children,
-  header,
-  title,
-  referenceRef,
-  floatingRef,
-}) => {
-  const { themeType } = useTheme();
-
-  const [stateOpen, setStateOpen] = React.useState(initialOpen);
-  const arrowRef = React.useRef<HTMLSpanElement | null>(null);
-
-  const open = forceState ?? stateOpen;
-
-  const {
-    x,
-    y,
-    placement,
-    strategy,
-    context,
-    update,
-    reference,
-    floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
-  } = useFloating({
-    placement: initialPlacement,
-    open,
-    onOpenChange: (isOpen) => {
-      setStateOpen(isOpen);
-
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    },
-    middleware: [
-      offset(5),
-      flip(),
-      // padding matches padding of tooltip box
-      shift({ padding: 12 }),
-      // padding matches border-radius of tooltip box
-      arrow({ element: arrowRef, padding: 8 }),
-    ],
-    whileElementsMounted: autoUpdate,
-  });
-
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    useHover(context, { restMs: 10 }),
-    useFocus(context),
-    useRole(context, { role: "tooltip" }),
-    useDismiss(context),
-  ]);
-
-  const side = React.useMemo<Side>(() => {
-    return placement.split("-")[0] as Side;
-  }, [placement]);
-
-  const classes = useStyles({ variant, side });
-
-  const mountReference = React.useCallback(
-    mergeRefs(reference, referenceRef),
-    []
-  );
-  const mountFloating = React.useCallback(mergeRefs(floating, floatingRef), []);
-  const mountArrow = React.useCallback((el: HTMLDivElement) => {
-    arrowRef.current = el;
-    update();
-  }, []);
-
-  if (disabled) {
-    return children;
-  }
-
-  return (
-    <>
-      {React.cloneElement(
-        children,
-        getReferenceProps({
-          ref: mountReference,
-          ...children.props,
-        })
-      )}
-      <FloatingPortal>
-        {open && (
-          <div
-            {...getFloatingProps({
-              ref: mountFloating,
-              className: clsx(themeType === "dark" && classes.dark),
-              style: {
-                position: strategy,
-                top: y ?? "",
-                left: x ?? "",
-              },
-            })}
-            onClick={onClick}
-          >
-            <div className={classes.tooltip}>
-              {header && <div className={classes.header}>{header}</div>}
-              {title}
-            </div>
-            {hasArrow && (
-              <Arrow
-                ref={mountArrow}
-                x={arrowX}
-                y={arrowY}
-                variant={variant}
-                side={side}
-              />
-            )}
-          </div>
-        )}
-      </FloatingPortal>
-    </>
-  );
-};
-
-Tooltip.displayName = "Tooltip";

package/src/Tooltip/TooltipMountWrapper.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { useMountWrapperStyles } from "./styles";
-
-export interface MountWrapperProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
-  children: React.ReactNode;
-}
-
-/** Component used to wrap non-buttons for Tooltip support */
-export const TooltipMountWrapper = React.forwardRef<
-  HTMLButtonElement,
-  { children: React.ReactNode }
->(({ children, ...props }, ref) => {
-  const classes = useMountWrapperStyles();
-
-  return (
-    <button className={classes.wrapper} {...props} ref={ref}>
-      {children}
-    </button>
-  );
-});

package/src/Tooltip/index.ts

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

package/src/Tooltip/styles.ts

@@ -1,152 +0,0 @@
-import { Side } from "@floating-ui/core";
-
-import { dark, light, makeStyles, SaleorTheme } from "../theme";
-import { TooltipProps } from "./Tooltip";
-
-export type StyleProps = Pick<TooltipProps, "variant"> & { side: Side };
-
-export const getBorderColor = (isDark: boolean) => (props: StyleProps) => {
-  if (isDark) {
-    switch (props.variant) {
-      case "success":
-        return dark.success.light;
-      case "warning":
-        return dark.warning.light;
-      case "error":
-        return dark.fail.light;
-      default:
-        return "#797d7d"; // dark.main[3] without alpha
-    }
-  }
-
-  switch (props.variant) {
-    case "success":
-      return light.success.mid;
-    case "warning":
-      return light.warning.mid;
-    case "error":
-      return light.fail.mid;
-    default:
-      return "#7d7f7f"; // light.main[3] without alpha
-  }
-};
-
-export const getBackgroundColor =
-  (isDark: boolean, theme: SaleorTheme) => (props: StyleProps) => {
-    if (isDark) {
-      switch (props.variant) {
-        case "success":
-          return dark.success.dark;
-        case "warning":
-          return dark.warning.dark;
-        case "error":
-          return dark.fail.dark;
-        default:
-          return dark.main[1];
-      }
-    }
-
-    return theme.palette.common.white;
-  };
-
-const useStyles = makeStyles<StyleProps, "tooltip" | "dark" | "header">(
-  (theme) => ({
-    dark: {
-      "& $tooltip": {
-        color: (props) => {
-          return props.variant ? dark.main[2] : light.main[2];
-        },
-        backgroundColor: getBackgroundColor(true, theme),
-        borderColor: getBorderColor(true),
-      },
-    },
-    tooltip: {
-      backgroundColor: getBackgroundColor(false, theme),
-      padding: theme.spacing(1.5),
-      borderRadius: theme.spacing(1),
-      border: `1px solid ${theme.palette.saleor.main[3]}`,
-      borderWidth: "1px",
-      fontWeight: 500,
-      borderColor: getBorderColor(false),
-
-      color: (props) => {
-        switch (props.variant) {
-          case "success":
-            return theme.palette.success.dark;
-          case "warning":
-            return theme.palette.warning.dark;
-          case "error":
-            return theme.palette.error.dark;
-          default:
-            return theme.palette.saleor.main[1];
-        }
-      },
-    },
-    header: {
-      fontSize: theme.typography.caption.fontSize,
-      letterSpacing: "0.1em",
-      fontWeight: 500,
-      textTransform: "uppercase",
-      marginBottom: theme.spacing(0.5),
-      color: light.main[3],
-    },
-  }),
-  {
-    name: "Tooltip",
-  }
-);
-
-export const useArrowStyles = makeStyles<StyleProps>(
-  (theme) => ({
-    borderPath: {
-      fill: getBorderColor(false),
-    },
-    backgroundPath: {
-      fill: getBackgroundColor(false, theme),
-    },
-    arrowContainer: {
-      width: "14px",
-      height: "8px",
-      position: "absolute",
-      transform: (props) => {
-        switch (props.side) {
-          case "top":
-            return "rotate(180deg)";
-          case "bottom":
-            return "rotate(0deg)";
-          case "left":
-            return "rotate(90deg)";
-          case "right":
-            return "rotate(-90deg)";
-        }
-      },
-      top: (props) => (props.side === "bottom" && "-13px") || "",
-      bottom: (props) => (props.side === "top" && "-13px") || "",
-      left: (props) => (props.side === "right" && "-16px") || "",
-      right: (props) => (props.side === "left" && "-16px") || "",
-    },
-    dark: {
-      "& $borderPath": {
-        fill: getBorderColor(true),
-      },
-
-      "& $backgroundPath": {
-        fill: getBackgroundColor(true, theme),
-      },
-    },
-  }),
-  { name: "TooltipArrow" }
-);
-export default useStyles;
-
-export const useMountWrapperStyles = makeStyles(
-  {
-    wrapper: {
-      all: "unset",
-      display: "inline-block",
-      lineHeight: 0,
-      pointerEvents: "all",
-    },
-  },
-  { name: "TooltipMountWrapper" }
-);

package/src/UserChipMenu/UserChipMenu.stories.tsx

@@ -1,46 +0,0 @@
-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>
-    <div style={{ height: 24 }} />
-    <UserChipMenu {...props} open>
-      <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;