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

package/src/Chip/Chip.tsx

@@ -1,52 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "./styles";
-
-export interface ChipProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
-  startAdornment?: React.ReactElement;
-  startAdornmentClassName?: string;
-  endAdornment?: React.ReactElement;
-  endAdornmnetClassName?: string;
-}
-
-export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
-  (
-    {
-      startAdornment,
-      startAdornmentClassName,
-      endAdornment,
-      endAdornmnetClassName,
-      className,
-      children,
-      ...props
-    }: ChipProps,
-    ref
-  ) => {
-    const classes = useStyles();
-
-    return (
-      <div className={clsx(classes.chip, className)} ref={ref} {...props}>
-        {startAdornment && (
-          <span
-            className={clsx(classes.startAdornment, startAdornmentClassName)}
-          >
-            {startAdornment}
-          </span>
-        )}
-        <span>{children}</span>
-        {endAdornment && (
-          <span className={clsx(classes.endAdornment, endAdornmnetClassName)}>
-            {endAdornment}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-
-Chip.displayName = "Chip";

package/src/Chip/ChipAdornment.tsx

@@ -1,53 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    adornment: {
-      color: theme.palette.primary.contrastText,
-      opacity: 0.6,
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      transition: theme.transitions.create("opacity", {
-        duration: theme.transitions.duration.short,
-        easing: theme.transitions.easing.easeOut,
-      }),
-      lineHeight: 0,
-      "&:hover": {
-        opacity: 1,
-      },
-    },
-    defaultCursor: {
-      cursor: "inherit",
-    },
-  }),
-  { name: "ChipAdornment" }
-);
-
-export interface ChipAdornmentProps {
-  className?: string;
-  inheirtCursor?: boolean;
-}
-
-export const ChipAdornment: React.FC<ChipAdornmentProps> = ({
-  className,
-  inheirtCursor,
-  children,
-}) => {
-  const classes = useStyles();
-
-  return (
-    <span
-      className={clsx(
-        classes.adornment,
-        inheirtCursor && classes.defaultCursor,
-        className
-      )}
-    >
-      {children}
-    </span>
-  );
-};

package/src/Chip/ChipMovable.tsx

@@ -1,40 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { DragIcon } from "../icons";
-import { makeStyles } from "../theme";
-import { Chip, ChipProps } from "./Chip";
-import { ChipAdornment } from "./ChipAdornment";
-
-export interface ChipMovableProps extends ChipProps {}
-
-const useStyles = makeStyles(
-  () => ({
-    root: {
-      cursor: "move",
-    },
-  }),
-  { name: "ChipMovable" }
-);
-
-export const ChipMovable = React.forwardRef<HTMLDivElement, ChipMovableProps>(
-  ({ startAdornment, className, ...props }, ref) => {
-    const classes = useStyles();
-
-    return (
-      <Chip
-        className={clsx(classes.root, className)}
-        startAdornment={
-          <ChipAdornment inheirtCursor>
-            <DragIcon aria-hidden="true" />
-            {startAdornment}
-          </ChipAdornment>
-        }
-        {...props}
-        ref={ref}
-      />
-    );
-  }
-);
-
-ChipMovable.displayName = "ChipMovable";

package/src/Chip/ChipRemovable.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-import { CloseIcon } from "../icons";
-import { Chip, ChipProps } from "./Chip";
-import { ChipAdornment } from "./ChipAdornment";
-
-export interface ChipRemovableProps extends ChipProps {
-  onRemove: () => void;
-}
-
-export const ChipRemovable = React.forwardRef<
-  HTMLDivElement,
-  ChipRemovableProps
->(({ endAdornment, onRemove, ...props }, ref) => {
-  return (
-    <Chip
-      endAdornment={
-        <ChipAdornment>
-          <CloseIcon role="button" onClick={() => onRemove()} />
-          {endAdornment}
-        </ChipAdornment>
-      }
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-ChipRemovable.displayName = "ChipRemovable";

package/src/Chip/ChipSwatch.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-
-import { CloseIcon } from "../icons";
-import { makeStyles } from "../theme";
-import { Chip, ChipProps } from "./Chip";
-import { ChipAdornment } from "./ChipAdornment";
-import { ColorSwatch } from "./private/ColorSwatch";
-
-export interface ChipSwatchProps extends Omit<ChipProps, "startAdornment"> {
-  onRemove?: () => void;
-  color: string;
-}
-
-const useStyles = makeStyles({
-  swatchPosition: {
-    marginLeft: "-10px",
-  },
-});
-
-export const ChipSwatch = React.forwardRef<HTMLDivElement, ChipSwatchProps>(
-  ({ endAdornment, color, onRemove, ...props }, ref) => {
-    const classes = useStyles();
-
-    return (
-      <Chip
-        startAdornment={<ColorSwatch color={color} />}
-        startAdornmentClassName={classes.swatchPosition}
-        endAdornment={
-          onRemove && (
-            <ChipAdornment>
-              <CloseIcon role="button" onClick={() => onRemove()} />
-            </ChipAdornment>
-          )
-        }
-        {...props}
-        ref={ref}
-      />
-    );
-  }
-);
-
-ChipSwatch.displayName = "ChipSwatch";

package/src/Chip/index.ts

@@ -1,5 +0,0 @@
-export * from "./Chip";
-export * from "./ChipAdornment";
-export * from "./ChipMovable";
-export * from "./ChipRemovable";
-export * from "./ChipSwatch";

package/src/Chip/private/ColorSwatch.tsx

@@ -1,21 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "../styles";
-
-export interface ColorSwatchProps {
-  color: string;
-  className?: string;
-}
-
-export const ColorSwatch = ({ color, className }: ColorSwatchProps) => {
-  const classes = useStyles();
-
-  return (
-    <div
-      className={clsx(classes.swatch, className)}
-      style={{ background: color }}
-      aria-hidden="true"
-    />
-  );
-};

package/src/Chip/styles.ts

@@ -1,46 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    chip: {
-      ...theme.typography.body2,
-      background: theme.palette.saleor.active[1],
-      color: theme.palette.primary.contrastText,
-      borderRadius: "8px",
-      display: "flex",
-      alignItems: "center",
-      padding: theme.spacing(0, 2),
-      gap: "4px",
-      lineHeight: 1,
-      minHeight: theme.spacing(4),
-      cursor: "default",
-      userSelect: "none",
-      textAlign: "center",
-      "& > span": {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-      },
-    },
-    startAdornment: {
-      marginLeft: "-8px",
-      flexShrink: 0,
-    },
-    endAdornment: {
-      marginRight: "-8px",
-      flexShrink: 0,
-    },
-    swatch: {
-      width: theme.spacing(3),
-      height: theme.spacing(3),
-      border: `2px solid #fff`,
-      flexShrink: 0,
-      marginRight: "7px",
-      borderRadius: "4px",
-      // default background when no style specified
-      background: "transparent",
-    },
-  }),
-  { name: "Chip" }
-);
-
-export default useStyles;

package/src/CircleIndicator/CircleIndicator.stories.tsx

@@ -1,48 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { Meta, Story } from "@storybook/react";
-import clsx from "clsx";
-import React from "react";
-
-import { Decorator, GuideDecorator } from "../utils/Decorator";
-import useGuideStyles from "../utils/guideStyles";
-import { CircleIndicator } from "./CircleIndicator";
-
-const StoryWrapper: React.FC = () => {
-  const guideClasses = useGuideStyles();
-
-  return (
-    <div>
-      <Typography className={guideClasses.headline} variant="h1">
-        Circle Indicators
-      </Typography>
-      <Typography className={guideClasses.paragraph} component="p">
-        Circle Indicators represent status of a certain element.
-      </Typography>
-      <div style={{ display: "flex", gap: "24px" }}>
-        <div
-          className={clsx(guideClasses.border)}
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(2, 1fr)",
-            placeItems: "center",
-            gap: 24,
-            margin: "auto",
-            padding: 24,
-          }}
-        >
-          Error <CircleIndicator color="error" />
-          Warning <CircleIndicator color="warning" />
-          Success <CircleIndicator color="success" />
-          Info <CircleIndicator color="info" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const Default: Story = () => <StoryWrapper />;
-
-export default {
-  decorators: [Decorator, GuideDecorator],
-  title: "Circle Indicator",
-} as Meta;

package/src/CircleIndicator/CircleIndicator.tsx

@@ -1,36 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { CircleIndicatorIcon, SuccessCircleIndicatorIcon, useTheme } from "..";
-import { PillColor } from "../Pill";
-import useStyles from "./styles";
-
-export type CircleIndicatorColor = PillColor;
-
-export interface CircleIndicatorProps {
-  color: CircleIndicatorColor;
-}
-
-/**
- * @deprecated use IndicatorCircle component instead */
-export const CircleIndicator: React.FC<CircleIndicatorProps> = ({ color }) => {
-  const { themeType } = useTheme();
-  const classes = useStyles();
-
-  return color === "success" ? (
-    <SuccessCircleIndicatorIcon
-      className={clsx(classes.success, themeType === "dark" && classes.dark)}
-    />
-  ) : (
-    <CircleIndicatorIcon
-      className={clsx({
-        [classes.error]: color === "error",
-        [classes.warning]: color === "warning",
-        [classes.info]: color === "info",
-        [classes.dark]: themeType === "dark",
-      })}
-    />
-  );
-};
-
-CircleIndicator.displayName = "CircleIndicator";

package/src/CircleIndicator/index.ts

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

package/src/CircleIndicator/styles.ts

@@ -1,31 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    dark: {},
-    success: {
-      color: theme.palette.saleor.success.mid,
-      "&$dark": {
-        color: theme.palette.saleor.success.dark,
-      },
-    },
-    error: {
-      color: theme.palette.saleor.fail.mid,
-      "&$dark": {
-        color: theme.palette.saleor.fail.dark,
-      },
-    },
-    warning: {
-      color: theme.palette.saleor.warning.mid,
-      "&$dark": {
-        color: theme.palette.saleor.warning.dark,
-      },
-    },
-    info: {
-      color: theme.palette.saleor.main[1],
-    },
-  }),
-  { name: "CircleIndicator" }
-);
-
-export default useStyles;

package/src/ConfirmButton/ConfirmButton.stories.tsx

@@ -1,125 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { Decorator, GuideDecorator } from "../utils/Decorator";
-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 setSuccess = () => {
-    setTransitionState("success");
-    timer.current = undefined;
-  };
-
-  const handleClick = () => {
-    if (!timer.current) {
-      setTransitionState("loading");
-      timer.current = setTimeout(setSuccess, 2000) as unknown as number;
-    }
-  };
-
-  return (
-    <>
-      <ConfirmButton
-        labels={labels}
-        transitionState={transitionState}
-        onClick={handleClick}
-      />
-      <ConfirmButton
-        labels={labels}
-        transitionState={transitionState}
-        onClick={handleClick}
-        variant="secondary"
-      />
-    </>
-  );
-};
-
-export const Default: Story = () => (
-  <>
-    <ConfirmButton labels={labels} transitionState="default" />
-    <ConfirmButton
-      labels={labels}
-      transitionState="default"
-      variant="secondary"
-    />
-  </>
-);
-export const Loading: Story = () => (
-  <>
-    <ConfirmButton
-      labels={labels}
-      transitionState="loading"
-      noTransition={true}
-    />
-    <ConfirmButton
-      labels={labels}
-      transitionState="loading"
-      noTransition={true}
-      variant="secondary"
-    />
-  </>
-);
-export const Error: Story = () => (
-  <>
-    <ConfirmButton
-      labels={labels}
-      transitionState="error"
-      noTransition={true}
-    />
-    <ConfirmButton
-      labels={labels}
-      transitionState="error"
-      noTransition={true}
-      variant="secondary"
-    />
-  </>
-);
-export const Success: Story = () => (
-  <>
-    <ConfirmButton
-      labels={labels}
-      transitionState="success"
-      noTransition={true}
-    />
-    <ConfirmButton
-      labels={labels}
-      transitionState="success"
-      noTransition={true}
-      variant="secondary"
-    />
-  </>
-);
-
-export default {
-  decorators: [
-    (Story) => (
-      <div style={{ display: "flex", gap: "24px" }}>
-        <Story />
-      </div>
-    ),
-    Decorator,
-    GuideDecorator,
-  ],
-  title: "Confirm Button",
-} as Meta;

package/src/ConfirmButton/ConfirmButton.tsx

@@ -1,113 +0,0 @@
-import CircularProgress from "@material-ui/core/CircularProgress";
-import CheckIcon from "@material-ui/icons/Check";
-import clsx from "clsx";
-import React from "react";
-
-import { Button, ButtonProps } from "../Button";
-import useStyles from "./styles";
-
-const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;
-export type ConfirmButtonTransitionState =
-  | "loading"
-  | "success"
-  | "error"
-  | "default";
-
-export type ConfirmButtonLabels = Record<"confirm" | "error", string>;
-export interface ConfirmButtonProps extends Omit<ButtonProps, "classes"> {
-  labels: ConfirmButtonLabels;
-  noTransition?: boolean;
-  transitionState: ConfirmButtonTransitionState;
-  onTransitionToDefault?: () => void;
-}
-
-export const ConfirmButton: React.FC<ConfirmButtonProps> = ({
-  children,
-  disabled,
-  labels,
-  noTransition,
-  transitionState,
-  variant = "primary",
-  onClick,
-  onTransitionToDefault,
-  ...props
-}) => {
-  const classes = useStyles();
-  const [displayCompletedActionState, setDisplayCompletedActionState] =
-    React.useState(false);
-  const timeout = React.useRef<number>();
-
-  React.useEffect(() => {
-    if (!noTransition && transitionState === "loading") {
-      setDisplayCompletedActionState(true);
-    }
-  }, [transitionState, noTransition]);
-
-  React.useEffect(() => {
-    if (
-      !noTransition &&
-      (["error", "success"] as ConfirmButtonTransitionState[]).includes(
-        transitionState
-      )
-    ) {
-      timeout.current = setTimeout(() => {
-        setDisplayCompletedActionState(false);
-        if (onTransitionToDefault) {
-          onTransitionToDefault();
-        }
-      }, DEFAULT_NOTIFICATION_SHOW_TIME) as unknown as number;
-    } else if (transitionState === "loading") {
-      clearTimeout(timeout.current);
-    }
-
-    return () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, [noTransition, transitionState, onTransitionToDefault]);
-
-  const isCompleted = noTransition
-    ? transitionState !== "default"
-    : displayCompletedActionState;
-
-  return (
-    <Button
-      variant={variant}
-      error={transitionState === "error" && isCompleted}
-      onClick={transitionState === "loading" ? undefined : onClick}
-      disabled={!isCompleted && disabled}
-      data-test-state={isCompleted ? transitionState : "default"}
-      {...props}
-    >
-      <CircularProgress
-        size={24}
-        color="inherit"
-        className={clsx({
-          [classes.progress]: true,
-          [classes.invisible]: transitionState !== "loading",
-        })}
-      />
-      <CheckIcon
-        className={clsx({
-          [classes.icon]: true,
-          [classes.invisible]: !(transitionState === "success" && isCompleted),
-        })}
-      />
-      <span
-        className={clsx({
-          [classes.label]: true,
-          [classes.invisible]:
-            (transitionState === "loading" || transitionState === "success") &&
-            isCompleted,
-        })}
-      >
-        {transitionState === "error" && isCompleted
-          ? labels.error
-          : children || labels.confirm}
-      </span>
-    </Button>
-  );
-};
-
-ConfirmButton.displayName = "ConfirmButton";

package/src/ConfirmButton/index.ts

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

package/src/ConfirmButton/styles.ts

@@ -1,43 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    error: {
-      "&:hover": {
-        backgroundColor: theme.palette.error.main,
-      },
-      backgroundColor: theme.palette.error.main,
-      color: theme.palette.error.contrastText,
-    },
-    icon: {
-      marginLeft: "0 !important",
-      position: "absolute",
-      transitionDuration: theme.transitions.duration.standard + "ms",
-    },
-    invisible: {
-      opacity: 0,
-    },
-    label: {
-      alignItems: "center",
-      display: "flex",
-      transitionDuration: theme.transitions.duration.standard + "ms",
-    },
-    progress: {
-      "& svg": {
-        margin: 0,
-      },
-      position: "absolute",
-      transitionDuration: theme.transitions.duration.standard + "ms",
-    },
-    success: {
-      "&:hover": {
-        backgroundColor: theme.palette.primary.main,
-      },
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  }),
-  { name: "ConfirmButton" }
-);
-
-export default useStyles;