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

package/src/Indicator/Indicator.tsx

@@ -1,65 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import {
-  ErrorIndicatorIcon,
-  ErrorSmallIndicatorIcon,
-  FailIndicatorIcon,
-  SuccessIndicatorIcon,
-  SuccessSmallIndicatorIcon,
-  WarningIndicatorIcon,
-  WarningSmallIndicatorIcon,
-} from "../icons/indicator";
-import { CircleFilled } from "./CircleFilled";
-import { getSizeDimension, useStyles } from "./styles";
-
-export type IndicatorIcon = "warning" | "error" | "success" | "fail";
-
-export type IndicatorSize = "regular" | "small";
-
-export type IndicatorCombinations = `${IndicatorIcon}-${IndicatorSize}`;
-
-export interface IndicatorProps {
-  icon: IndicatorIcon;
-  variant?: "outline" | "filled" | "text" | "icon";
-  size?: IndicatorSize;
-  className?: string;
-}
-
-export const mapVariantToIcon: Record<
-  IndicatorCombinations,
-  React.FunctionComponent<{ className?: string }>
-> = {
-  "warning-regular": WarningIndicatorIcon,
-  "warning-small": WarningSmallIndicatorIcon,
-  "fail-regular": FailIndicatorIcon,
-  "fail-small": FailIndicatorIcon,
-  "error-regular": ErrorIndicatorIcon,
-  "error-small": ErrorSmallIndicatorIcon,
-  "success-regular": SuccessIndicatorIcon,
-  "success-small": SuccessSmallIndicatorIcon,
-};
-
-export const Indicator = React.forwardRef<HTMLSpanElement, IndicatorProps>(
-  ({ icon, size = "regular", className }, ref) => {
-    const classes = useStyles({ icon, size });
-
-    const Icon = mapVariantToIcon[`${icon}-${size}` as IndicatorCombinations];
-
-    const viewBoxSize = getSizeDimension(size);
-
-    return (
-      <span className={clsx(classes.wrapper, className)} ref={ref}>
-        <svg
-          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={classes.absolute}
-        >
-          <CircleFilled size={size} className={classes.circlePath} />
-        </svg>
-        <Icon className={classes.absolute} />
-      </span>
-    );
-  }
-);

package/src/Indicator/IndicatorCircle.stories.tsx

@@ -1,28 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-
-import { IndicatorCircle } from "./IndicatorCircle";
-
-export default {
-  title: "Indicator / Circle",
-  component: IndicatorCircle,
-} as ComponentMeta<typeof IndicatorCircle>;
-
-const Template: ComponentStory<typeof IndicatorCircle> = (args) => (
-  <IndicatorCircle {...args} />
-);
-
-export const Warning = Template.bind({});
-Warning.args = {
-  icon: "warning",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  icon: "error",
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  icon: "success",
-};

package/src/Indicator/IndicatorCircle.tsx

@@ -1,45 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { Circle } from "./Circle";
-import { IndicatorIcon } from "./Indicator";
-import { getSizeDimension, useStyles } from "./styles";
-
-export interface IndicatorCircleProps {
-  icon: IndicatorIcon;
-  className?: string;
-}
-
-export const IndicatorCircle = ({ icon, className }: IndicatorCircleProps) => {
-  const classes = useStyles({ size: "regular", icon });
-
-  const viewBoxSize = getSizeDimension("regular");
-
-  return (
-    <span className={clsx(classes.wrapper, classes.wrapperCircle, className)}>
-      <svg
-        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={classes.absolute}
-      >
-        <Circle className={classes.circlePath} />
-      </svg>
-      {icon === "success" && (
-        <svg
-          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-          fill="none"
-          className={classes.absolute}
-        >
-          <path
-            d="M8 12.8571L10.1053 15L16 9"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      )}
-    </span>
-  );
-};

package/src/Indicator/IndicatorOutlined.stories.tsx

@@ -1,86 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-
-import { IndicatorOutlined } from "./IndicatorOutlined";
-
-export default {
-  title: "Indicator / Outlined",
-  component: IndicatorOutlined,
-} as ComponentMeta<typeof IndicatorOutlined>;
-
-const Template: ComponentStory<typeof IndicatorOutlined> = (args) => (
-  <IndicatorOutlined {...args} />
-);
-
-export const Warning = Template.bind({});
-Warning.args = {
-  icon: "warning",
-};
-export const WarningSmall = Template.bind({});
-WarningSmall.args = {
-  icon: "warning",
-  size: "small",
-};
-export const WarningText = Template.bind({});
-WarningText.args = {
-  icon: "warning",
-  color: "text",
-};
-export const WarningSmallText = Template.bind({});
-WarningSmallText.args = {
-  icon: "warning",
-  color: "text",
-  size: "small",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  icon: "error",
-};
-export const ErrorSmall = Template.bind({});
-ErrorSmall.args = {
-  icon: "error",
-  size: "small",
-};
-export const ErrorText = Template.bind({});
-ErrorText.args = {
-  icon: "error",
-  color: "text",
-};
-export const ErrorSmallText = Template.bind({});
-ErrorSmallText.args = {
-  icon: "error",
-  color: "text",
-  size: "small",
-};
-
-export const Fail = Template.bind({});
-Fail.args = {
-  icon: "fail",
-};
-export const FailText = Template.bind({});
-FailText.args = {
-  icon: "fail",
-  color: "text",
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  icon: "success",
-};
-export const SuccessSmall = Template.bind({});
-SuccessSmall.args = {
-  icon: "success",
-  size: "small",
-};
-export const SuccessText = Template.bind({});
-SuccessText.args = {
-  icon: "success",
-  color: "text",
-};
-export const SuccessSmallText = Template.bind({});
-SuccessSmallText.args = {
-  icon: "success",
-  color: "text",
-  size: "small",
-};

package/src/Indicator/IndicatorOutlined.tsx

@@ -1,63 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-import { FailOutlineIndicatorIcon } from "../icons/indicator";
-import { CircleOutline } from "./CircleOutline";
-import {
-  IndicatorCombinations,
-  IndicatorIcon,
-  IndicatorSize,
-  mapVariantToIcon,
-} from "./Indicator";
-import { getSizeDimension, useStyles } from "./styles";
-
-export interface IndicatorOutlinedProps {
-  icon: IndicatorIcon;
-  size?: IndicatorSize;
-  color?: "default" | "text";
-  className?: string;
-}
-
-const getIconComponent = (icon: IndicatorIcon, size: IndicatorSize) => {
-  if (icon === "fail") {
-    return FailOutlineIndicatorIcon;
-  }
-  return mapVariantToIcon[`${icon}-${size}` as IndicatorCombinations];
-};
-
-export const IndicatorOutlined = ({
-  icon,
-  size = "regular",
-  color = "default",
-  className,
-}: IndicatorOutlinedProps) => {
-  const classes = useStyles({ icon, size });
-
-  const Icon = getIconComponent(icon, size);
-  const viewBoxSize = getSizeDimension(size);
-
-  const hasColor = color === "default";
-
-  return (
-    <span
-      className={clsx(
-        classes.wrapper,
-        hasColor && classes.wrapperOutline,
-        className
-      )}
-    >
-      <svg
-        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={classes.absolute}
-      >
-        <CircleOutline
-          size={size}
-          className={clsx(classes.absolute, hasColor && classes.circleOutline)}
-        />
-      </svg>
-      <Icon />
-    </span>
-  );
-};

package/src/Indicator/index.ts

@@ -1,3 +0,0 @@
-export * from "./Indicator";
-export * from "./IndicatorCircle";
-export * from "./IndicatorOutlined";

package/src/Indicator/styles.ts

@@ -1,61 +0,0 @@
-import { makeStyles, SaleorTheme } from "../theme";
-import { IndicatorProps, IndicatorSize } from "./Indicator";
-
-export const getIconColor =
-  (theme: SaleorTheme, type: "mid" | "dark") =>
-  (props: Pick<IndicatorProps, "icon">) => {
-    switch (props.icon) {
-      case "warning":
-        return theme.palette.saleor.warning[type];
-      case "success":
-        return theme.palette.saleor.success[type];
-      case "fail":
-      case "error":
-        return theme.palette.saleor.fail[type];
-      default:
-        return "inherit";
-    }
-  };
-
-export const getSizeDimension = (size: IndicatorSize) =>
-  size === "regular" ? 24 : 16;
-
-export const useStyles = makeStyles<
-  Required<Pick<IndicatorProps, "icon" | "size">>,
-  | "wrapper"
-  | "wrapperCircle"
-  | "wrapperOutline"
-  | "absolute"
-  | "circlePath"
-  | "circleOutline"
->(
-  (theme) => ({
-    wrapper: {
-      position: "relative",
-      display: "inline-block",
-      width: (props) => `${getSizeDimension(props.size)}px`,
-      height: (props) => `${getSizeDimension(props.size)}px`,
-      color: theme.palette.saleor.main[1],
-    },
-    wrapperCircle: {
-      color: getIconColor(theme, "mid"),
-    },
-    wrapperOutline: {
-      color: getIconColor(theme, "dark"),
-    },
-    absolute: {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-    },
-    circlePath: {
-      fill: getIconColor(theme, "mid"),
-    },
-    circleOutline: {
-      stroke: getIconColor(theme, "dark"),
-    },
-  }),
-  { name: "Indicator" }
-);

package/src/LayoutButton/LayoutButton.tsx

@@ -1,49 +0,0 @@
-import type { ButtonBaseProps } from "@material-ui/core/ButtonBase";
-import ButtonBase from "@material-ui/core/ButtonBase";
-import clsx from "clsx";
-import React from "react";
-
-import { UserInteraction } from "../../types/utils";
-import useStyles from "./styles";
-
-export type LayoutButtonProps<T extends React.ElementType> = ButtonBaseProps<
-  T,
-  { component?: T }
-> & {
-  state?: UserInteraction;
-};
-
-export const LayoutButtonInner = <T extends React.ElementType = "button">(
-  {
-    className,
-    children,
-    state = "default",
-    component,
-    ...rest
-  }: LayoutButtonProps<T>,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) => {
-  const classes = useStyles();
-
-  return (
-    <ButtonBase
-      className={clsx(classes.root, className, {
-        [classes.hover]: state === "hover",
-        [classes.active]: state === "active",
-      })}
-      component={component}
-      disableRipple
-      ref={ref}
-      {...rest}
-    >
-      {children}
-    </ButtonBase>
-  );
-};
-LayoutButtonInner.displayName = "LayoutButton";
-
-export const LayoutButton = React.forwardRef(LayoutButtonInner) as <
-  T extends React.ElementType
->(
-  props: LayoutButtonProps<T> & { ref?: React.ForwardedRef<unknown> }
-) => ReturnType<typeof LayoutButtonInner>;

package/src/LayoutButton/index.ts

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

package/src/LayoutButton/styles.ts

@@ -1,33 +0,0 @@
-import { alpha } from "@material-ui/core/styles";
-
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      "&:hover, &:focus-visible, &$hover": {
-        background: theme.palette.background.paper,
-        color: theme.palette.primary.main,
-      },
-      "&:active, &$active": {
-        background: theme.palette.background.paper,
-        color: theme.palette.primary.main,
-      },
-      ...theme.typography.body1,
-      background: alpha(theme.palette.background.paper, 0.4),
-      borderRadius: 4,
-      color: theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: 500,
-      height: 40,
-      padding: theme.spacing(0.5, 2),
-      textAlign: "center",
-      transition: theme.transitions.duration.shorter + "ms",
-    },
-    hover: {},
-    active: {},
-  }),
-  { name: "LayoutButton" }
-);
-
-export default useStyles;

package/src/List/List.stories.tsx

@@ -1,137 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardHeader from "@material-ui/core/CardHeader";
-import Checkbox from "@material-ui/core/Checkbox";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { DeleteIcon, IconButton, Pagination } from "..";
-import { useListStory } from "../utils/useListStory";
-import {
-  List,
-  ListBody,
-  ListFooter,
-  ListHeader,
-  ListItem,
-  ListItemCell,
-  ListItemCellAction,
-  useListWidths,
-} from ".";
-
-export const Default: Story = () => {
-  const {
-    hasNextPage,
-    hasPreviousPage,
-    pageData,
-    setRowsPerPage,
-    nextPage,
-    previousPage,
-    rowsPerPage,
-  } = useListStory();
-
-  return (
-    <Card>
-      <CardHeader title="Example List" />
-      <List gridTemplate={["1fr", "200px"]}>
-        <ListHeader>
-          <ListItem>
-            <ListItemCell>Name</ListItemCell>
-            <ListItemCell>Calories (per 100g)</ListItemCell>
-          </ListItem>
-        </ListHeader>
-        <ListBody>
-          {pageData.map((dataRow) => (
-            <ListItem key={dataRow.name}>
-              <ListItemCell>{dataRow.name}</ListItemCell>
-              <ListItemCell>{`${dataRow.calories} kcal`}</ListItemCell>
-            </ListItem>
-          ))}
-        </ListBody>
-        <ListFooter>
-          <ListItem>
-            <ListItemCell colSpan={10}>
-              <Pagination
-                choices={[1, 2, 3]}
-                onRowNumberUpdate={setRowsPerPage}
-                hasNextPage={hasNextPage}
-                hasPreviousPage={hasPreviousPage}
-                labels={{ noOfRows: "No. of rows:" }}
-                onNextPage={nextPage}
-                onPreviousPage={previousPage}
-                rowNumber={rowsPerPage}
-              />
-            </ListItemCell>
-          </ListItem>
-        </ListFooter>
-      </List>
-    </Card>
-  );
-};
-
-const StoryWrapper: React.FC = () => {
-  const { data, pageData, selected, isRowSelected, toggleAll, toggleRow } =
-    useListStory(10);
-  const { checkbox, actions } = useListWidths();
-
-  return (
-    <Card>
-      <CardHeader title="Example List" />
-      <List gridTemplate={[checkbox, "1fr", "200px", actions(1)]}>
-        <ListHeader>
-          {selected.length > 0 ? (
-            <ListItem>
-              <ListItemCell padding="checkbox">
-                <Checkbox
-                  checked={selected.length === data.length}
-                  indeterminate={selected.length !== data.length}
-                  onChange={toggleAll}
-                />
-              </ListItemCell>
-              <ListItemCell colSpan={2} />
-              <ListItemCell padding="action">
-                <IconButton variant="secondary" hoverOutline>
-                  <DeleteIcon />
-                </IconButton>
-              </ListItemCell>
-            </ListItem>
-          ) : (
-            <ListItem>
-              <ListItemCell />
-              <ListItemCell>Name</ListItemCell>
-              <ListItemCell>Calories (per 100g)</ListItemCell>
-              <ListItemCell />
-            </ListItem>
-          )}
-        </ListHeader>
-        <ListBody>
-          {pageData.map((dataRow) => (
-            <ListItem selected={isRowSelected(dataRow.name)} key={dataRow.name}>
-              <ListItemCell padding="checkbox">
-                <ListItemCellAction>
-                  <Checkbox
-                    checked={isRowSelected(dataRow.name)}
-                    onChange={() => toggleRow(dataRow.name)}
-                  />
-                </ListItemCellAction>
-              </ListItemCell>
-              <ListItemCell>{dataRow.name}</ListItemCell>
-              <ListItemCell>{`${dataRow.calories} kcal`}</ListItemCell>
-              <ListItemCell padding="action">
-                <ListItemCellAction>
-                  <IconButton variant="secondary" hoverOutline>
-                    <DeleteIcon />
-                  </IconButton>
-                </ListItemCellAction>
-              </ListItemCell>
-            </ListItem>
-          ))}
-        </ListBody>
-      </List>
-    </Card>
-  );
-};
-
-export const WithActions: Story = () => <StoryWrapper />;
-
-export default {
-  title: "Lists / List",
-} as Meta;

package/src/List/List.tsx

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-
-import { useTheme } from "..";
-import {
-  BaseList,
-  BaseListBody,
-  BaseListBodyProps,
-  BaseListFooter,
-  BaseListFooterProps,
-  BaseListHeader,
-  BaseListHeaderProps,
-  BaseListItem,
-  BaseListItemCell,
-  BaseListItemCellProps,
-  BaseListItemProps,
-  BaseListProps,
-} from "../BaseList";
-import { ListActionContext, useListAction } from "./context";
-import { useStyles } from "./styles";
-
-export const List: React.FC<BaseListProps> = BaseList;
-export const ListHeader: React.FC<BaseListHeaderProps> = BaseListHeader;
-export const ListFooter: React.FC<BaseListFooterProps> = BaseListFooter;
-export const ListBody: React.FC<BaseListBodyProps> = BaseListBody;
-export const ListItem: React.FC<Omit<BaseListItemProps, "classes">> = ({
-  hover: initialHover = true,
-  ...rest
-}) => {
-  const classes = useStyles();
-  const [hover, setHover] = useState(true);
-
-  return (
-    <ListActionContext.Provider value={setHover}>
-      <BaseListItem classes={classes} hover={initialHover && hover} {...rest} />
-    </ListActionContext.Provider>
-  );
-};
-export const ListItemCell: React.FC<Omit<BaseListItemCellProps, "classes">> = (
-  props
-) => {
-  const classes = useStyles();
-
-  return <BaseListItemCell classes={classes} {...props} />;
-};
-
-export const ListItemCellAction: React.FC<
-  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = (props) => {
-  const setHover = useListAction();
-
-  return (
-    <div
-      onMouseEnter={() => setHover(false)}
-      onMouseLeave={() => setHover(true)}
-      {...props}
-    />
-  );
-};
-
-export const useListWidths = () => {
-  const theme = useTheme();
-
-  return {
-    actions: (n: number = 1) => `calc( ${theme.spacing(n + 1)} + ${48 * n}px)`,
-    checkbox: "64px",
-  };
-};

package/src/List/context.ts

@@ -1,22 +0,0 @@
-import { createContext, useContext } from "react";
-
-export type ListActionContextType = (hover: boolean) => void;
-
-export const ListActionContext = createContext<
-  ListActionContextType | undefined
->(undefined);
-ListActionContext.displayName = "ListActionContext";
-
-export const useListAction = () => {
-  const ctx = useContext(ListActionContext);
-  if (ctx === undefined) {
-    throw new Error("useListAction must be used within a ListActionContext");
-  }
-
-  return ctx;
-};
-
-export interface UseTableActionHover {
-  hover: boolean;
-  props: Record<"onMouseLeave" | "onMouseEnter", () => void>;
-}

package/src/List/index.ts

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