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

package/src/SidebarDrawer/SidebarDrawer.tsx

@@ -1,135 +0,0 @@
-import Drawer from "@material-ui/core/Drawer";
-import Typography from "@material-ui/core/Typography";
-import ArrowLeftIcon from "@material-ui/icons/ArrowLeft";
-import MenuIcon from "@material-ui/icons/Menu";
-import clsx from "clsx";
-import React from "react";
-import SVG from "react-inlinesvg";
-
-import { Logo } from "../icons/Logo";
-import { LogoDark } from "../icons/LogoDark";
-import { BaseSidebarProps, SidebarMenuItem } from "../Sidebar/types";
-import { SquareButton } from "../SquareButton";
-import { useTheme } from "../theme";
-import { MenuItemBtn } from "./MenuItemBtn";
-import useStyles from "./styles";
-
-export type SideBarDrawerProps = BaseSidebarProps;
-
-export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
-  menuItems,
-  onMenuItemClick,
-  linkComponent,
-  logoHref,
-}) => {
-  const [isOpened, setOpened] = React.useState(false);
-  const classes = useStyles({});
-  const [activeMenu, setActiveMenu] = React.useState<SidebarMenuItem | null>(
-    null
-  );
-  const [showSubmenu, setShowSubmenu] = React.useState(false);
-  const container = React.useRef<HTMLDivElement>(null);
-  const { themeType } = useTheme();
-
-  const handleMenuItemClick = (menuItem: SidebarMenuItem) => {
-    setOpened(false);
-    setShowSubmenu(false);
-    onMenuItemClick(menuItem);
-  };
-
-  const handleMenuItemWithChildrenClick = (menuItem: SidebarMenuItem) => {
-    setActiveMenu(menuItem);
-    setShowSubmenu(true);
-    container.current?.scrollTo({
-      top: 0,
-    });
-  };
-
-  const Link = linkComponent ?? "a";
-
-  return (
-    <>
-      <SquareButton onClick={() => setOpened(true)}>
-        <MenuIcon />
-      </SquareButton>
-      <Drawer
-        classes={{
-          paper: classes.root,
-        }}
-        open={isOpened}
-        onClose={() => setOpened(false)}
-      >
-        <div
-          className={clsx(classes.container, {
-            [classes.containerSubMenu]: showSubmenu,
-          })}
-          ref={container}
-        >
-          <div
-            className={clsx(classes.innerContainer, {
-              [classes.secondaryContentActive]: showSubmenu,
-            })}
-          >
-            <div className={classes.content}>
-              <Link href={logoHref} className={classes.logo}>
-                {themeType === "dark" ? <LogoDark /> : <Logo />}
-              </Link>
-              {menuItems.map((menuItem) => (
-                <MenuItemBtn
-                  menuItem={menuItem}
-                  onClick={
-                    menuItem.children
-                      ? () => handleMenuItemWithChildrenClick(menuItem)
-                      : handleMenuItemClick
-                  }
-                  linkComponent={linkComponent}
-                  key={menuItem.ariaLabel}
-                />
-              ))}
-            </div>
-            {activeMenu && (
-              <div className={classes.content}>
-                <div className={classes.subMenuTopBar}>
-                  <div className={classes.activeMenuLabel}>
-                    {activeMenu.iconSrc && (
-                      <SVG className={classes.icon} src={activeMenu.iconSrc} />
-                    )}
-                    <Typography className={classes.label}>
-                      {activeMenu.label}
-                    </Typography>
-                  </div>
-                  <SquareButton onClick={() => setShowSubmenu(false)}>
-                    <ArrowLeftIcon />
-                  </SquareButton>
-                </div>
-                {activeMenu.children?.map((subMenuItem) => {
-                  if (subMenuItem.url || subMenuItem.children) {
-                    return (
-                      <MenuItemBtn
-                        menuItem={subMenuItem}
-                        onClick={handleMenuItemClick}
-                        key={subMenuItem.ariaLabel}
-                        linkComponent={linkComponent}
-                      />
-                    );
-                  }
-
-                  return (
-                    <Typography
-                      variant="caption"
-                      className={classes.subMenuHeader}
-                    >
-                      {subMenuItem.label}
-                    </Typography>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      </Drawer>
-    </>
-  );
-};
-
-SidebarDrawer.displayName = "SideBarDrawer";

package/src/SidebarDrawer/index.ts

@@ -1,2 +0,0 @@
-export * from "./MenuItemBtn";
-export * from "./SidebarDrawer";

package/src/SidebarDrawer/styles.ts

@@ -1,75 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    activeMenuLabel: {
-      display: "flex",
-    },
-    container: {
-      overflowX: "hidden",
-      width: "100%",
-    },
-    containerSubMenu: {
-      "&$container": {
-        overflow: "hidden",
-      },
-    },
-    content: {
-      width: "50%",
-    },
-    icon: {
-      marginRight: theme.spacing(2),
-    },
-    innerContainer: {
-      display: "flex",
-      position: "relative",
-      right: 0,
-      transition: theme.transitions.duration.short + "ms",
-      width: "200%",
-    },
-    label: {
-      fontWeight: "bold",
-    },
-    logo: {
-      display: "block",
-      marginBottom: theme.spacing(4),
-    },
-    subMenuHeader: {
-      textTransform: "uppercase",
-      color: theme.palette.text.hint,
-      padding: theme.spacing(1, 0, 2.5, 0),
-    },
-    menuItemBtn: {
-      alignItems: "center",
-      background: "none",
-      border: "none",
-      color: theme.palette.text.secondary,
-      display: "flex",
-      marginBottom: theme.spacing(3),
-      padding: 0,
-      textDecoration: "none",
-      cursor: "pointer",
-    },
-    root: {
-      background: theme.palette.background.default,
-      borderBottomRightRadius: 32,
-      borderTopRightRadius: 32,
-      padding: theme.spacing(3),
-      width: 260,
-    },
-    secondaryContentActive: {
-      right: "100%",
-    },
-    subMenuTopBar: {
-      alignItems: "center",
-      display: "flex",
-      justifyContent: "space-between",
-      marginBottom: theme.spacing(3),
-    },
-  }),
-  {
-    name: "SideBarDrawer",
-  }
-);
-
-export default useStyles;

package/src/SquareButton/SquareButton.stories.tsx

@@ -1,20 +0,0 @@
-import CloseIcon from "@material-ui/icons/Close";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { SquareButton } from "./SquareButton";
-
-export const Default: Story = () => (
-  <SquareButton>
-    <CloseIcon />
-  </SquareButton>
-);
-export const Disabled: Story = () => (
-  <SquareButton disabled>
-    <CloseIcon />
-  </SquareButton>
-);
-
-export default {
-  title: "Square button",
-} as Meta;

package/src/SquareButton/SquareButton.tsx

@@ -1,51 +0,0 @@
-import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase";
-import clsx from "clsx";
-import React from "react";
-
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    disabled: {
-      "&$root": {
-        color: theme.palette.grey[500],
-      },
-    },
-    root: {
-      "&:hover, &:focus-visible": {
-        background: theme.palette.saleor.active[5],
-      },
-      "&:active": {
-        background: theme.palette.saleor.active[4],
-      },
-      background: theme.palette.background.paper,
-      borderRadius: 4,
-      color: theme.palette.primary.main,
-      height: 48,
-      transition: theme.transitions.duration.shortest + "ms",
-      width: 48,
-    },
-  }),
-  {
-    name: "ExpandButton",
-  }
-);
-
-export const SquareButton: React.FC<ButtonBaseProps> = React.forwardRef(
-  ({ className, ...rest }, ref) => {
-    const classes = useStyles({});
-
-    return (
-      <ButtonBase
-        className={clsx(classes.root, className, {
-          [classes.disabled]: rest.disabled,
-        })}
-        disableRipple
-        ref={ref}
-        {...rest}
-      />
-    );
-  }
-);
-
-SquareButton.displayName = "SquareButton";

package/src/SquareButton/index.ts

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

package/src/StatusChip/StatusChip.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { StatusChip } from "./StatusChip";
-import type { StatusChipProps } from "./types";
-
-const props: StatusChipProps = {
-  label: "Lorem Ipsum",
-  variant: "neutral",
-};
-
-export const Info: Story = () => <StatusChip {...props} />;
-export const Warn: Story = () => <StatusChip {...props} variant="warning" />;
-export const Success: Story = () => <StatusChip {...props} variant="success" />;
-export const Error: Story = () => <StatusChip {...props} variant="error" />;
-export const Large: Story = () => <StatusChip {...props} size="lg" />;
-
-export default {
-  title: "Status Chip",
-} as Meta;

package/src/StatusChip/StatusChip.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import { Pill, PillColor } from "../Pill/Pill";
-import { StatusChipProps } from "./types";
-
-const colors: Record<StatusChipProps["variant"], PillColor> = {
-  error: "error",
-  neutral: "info",
-  success: "success",
-  warning: "warning",
-};
-
-/**
- *
- * @deprecated
- */
-export const StatusChip: React.FC<StatusChipProps> = ({
-  size: _,
-  variant,
-  ...rest
-}) => {
-  const color = colors[variant];
-
-  return <Pill color={color} {...rest} />;
-};
-
-StatusChip.displayName = "HeaderChip";

package/src/StatusChip/index.ts

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

package/src/StatusChip/types.ts

@@ -1,8 +0,0 @@
-export type StatusChipSize = "md" | "lg";
-export interface StatusChipProps {
-  children?: null;
-  className?: string;
-  label: string;
-  size?: StatusChipSize;
-  variant: "success" | "warning" | "neutral" | "error";
-}

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>;