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

package/src/Filter/utils.ts

@@ -1,216 +0,0 @@
-import { sortBy, uniqBy } from "lodash";
-
-import {
-  FilterData,
-  FilterDetailedOptions,
-  FilterInput,
-  FilterType,
-  OnFilterChangeOpts,
-} from "./types";
-
-export function getFilterName(
-  name: string,
-  options: FilterDetailedOptions
-): string {
-  return options.group ? `${options.group.name}:${name}` : name;
-}
-
-export function getAvailableFilterGroups(
-  filterData: FilterData[]
-): Array<Record<"name" | "label", string>> {
-  return uniqBy(
-    filterData
-      .filter((filter) => !filter.active && filter.options.group)
-      .map((filter) => filter.options.group!),
-    "name"
-  );
-}
-
-export function getAvailableFilters(
-  filterData: FilterData[]
-): Array<Record<"name" | "label", string>> {
-  return sortBy(
-    [
-      ...filterData.filter(
-        (filter) => !(filter.active || filter.options.group)
-      ),
-      ...getAvailableFilterGroups(filterData),
-    ],
-    "label"
-  );
-}
-export function getActiveFilters(filterData: FilterData[]) {
-  return filterData.filter((filter) => filter.active);
-}
-
-export function validate(filterData: FilterData[]) {
-  if (uniqBy(filterData, "name").length !== filterData.length) {
-    throw new Error("Filter names should be unique");
-  }
-}
-
-function getDefaultValue(filter: FilterData) {
-  const { options } = filter;
-
-  return {
-    value:
-      options.multiple || options.type === FilterType.Range
-        ? null
-        : options.type === FilterType.Choice
-        ? options.default ?? options.choices![0].value
-        : "",
-    values:
-      filter.range && options.type === FilterType.Range
-        ? ["", ""]
-        : options.multiple
-        ? []
-        : null,
-  };
-}
-
-export function register(
-  filterData: FilterData[],
-  name: string,
-  label: string,
-  initial: FilterInput[],
-  options: FilterDetailedOptions
-): FilterData[] {
-  const existingFilter = initial.find((f) => f.name === name);
-  const filter: FilterData = {
-    active: !!existingFilter,
-    label,
-    name,
-    range: false,
-    sortIndex: filterData.length,
-    options,
-    value: null,
-    values: null,
-  };
-
-  return [
-    ...filterData,
-    {
-      ...filter,
-      ...getDefaultValue(filter),
-      ...existingFilter,
-    },
-  ];
-}
-
-export function change(
-  filterData: FilterData[],
-  name: string,
-  value: string | string[],
-  opts: OnFilterChangeOpts = {}
-): FilterData[] {
-  const filterToUpdate = filterData.find((filter) => filter.name === name)!;
-
-  let update: Partial<FilterData>;
-
-  if (filterToUpdate!.options.multiple) {
-    update = {
-      values: value as string[],
-    };
-  } else if (
-    filterToUpdate!.options.type === FilterType.Range &&
-    opts.rangePart
-  ) {
-    update = {
-      values:
-        opts.rangePart === "min"
-          ? [value as string, filterToUpdate.values![1]]
-          : [filterToUpdate.values![0], value as string],
-    };
-  } else {
-    update = { value: value as string };
-  }
-
-  return filterData.map((filter) =>
-    filter.name === name
-      ? {
-          ...filter,
-          ...update,
-        }
-      : filter
-  );
-}
-
-function getFilterOrGroup(filterData: FilterData[], name: string): FilterData {
-  let selectedFilter = filterData.find((filter) => filter.name === name);
-
-  if (!selectedFilter) {
-    selectedFilter = filterData.find(
-      (filter) => !filter.active && filter.options.group?.name === name
-    )!;
-  }
-
-  return selectedFilter;
-}
-
-export function toggle(filterData: FilterData[], name: string): FilterData[] {
-  const selectedFilter = getFilterOrGroup(filterData, name);
-  const { name: filterName } = selectedFilter;
-
-  const sortIndex = selectedFilter.active
-    ? selectedFilter.sortIndex
-    : getActiveFilters(filterData).length;
-  const value = selectedFilter.active ? getDefaultValue(selectedFilter) : {};
-
-  return filterData.map((filter) =>
-    filter.name === filterName
-      ? {
-          ...filter,
-          active: !filter.active,
-          sortIndex,
-          ...value,
-        }
-      : filter.active && filter.sortIndex > sortIndex
-      ? {
-          ...filter,
-          sortIndex: filter.sortIndex - 1,
-        }
-      : filter
-  );
-}
-
-export function toggleRange(
-  filterData: FilterData[],
-  name: string
-): FilterData[] {
-  return filterData.map((filter) =>
-    filter.name === name
-      ? {
-          ...filter,
-          range: !filter.range,
-          ...getDefaultValue({
-            ...filter,
-            range: !filter.range,
-          }),
-        }
-      : filter
-  );
-}
-
-export function swap(
-  filterData: FilterData[],
-  previousFilterName: string,
-  nextFilterName: string
-): FilterData[] {
-  const previousFilter = getFilterOrGroup(filterData, previousFilterName);
-  const nextFilter = getFilterOrGroup(filterData, nextFilterName);
-
-  return filterData.map((filter) =>
-    filter.name === previousFilter.name
-      ? {
-          ...filter,
-          active: false,
-        }
-      : filter.name === nextFilter.name
-      ? {
-          ...filter,
-          active: true,
-          sortIndex: previousFilter.sortIndex,
-        }
-      : filter
-  );
-}

package/src/IconButton/IconButton.stories.tsx

@@ -1,48 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-
-import { DeleteIcon } from "../icons";
-import { IconButton } from "./IconButton";
-
-export default {
-  name: "Buttons / IconButton",
-  component: IconButton,
-} as ComponentMeta<typeof IconButton>;
-
-const Template: ComponentStory<typeof IconButton> = (args) => (
-  <IconButton {...args}>
-    <DeleteIcon />
-  </IconButton>
-);
-
-export const Regular = Template.bind({});
-Regular.args = {
-  variant: "primary",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  error: true,
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  variant: "secondary",
-};
-
-export const OutlineError = Template.bind({});
-OutlineError.args = {
-  variant: "secondary",
-  error: true,
-};
-
-export const Ghost = Template.bind({});
-Ghost.args = {
-  variant: "ghost",
-};
-
-export const GhostError = Template.bind({});
-GhostError.args = {
-  variant: "ghost",
-  error: true,
-};

package/src/IconButton/IconButton.tsx

@@ -1,106 +0,0 @@
-import ButtonBase from "@material-ui/core/ButtonBase";
-import MuiIconButton, {
-  IconButtonProps as MuiIconButtonProps,
-  IconButtonTypeMap as MuiIconButtonTypeMap,
-} from "@material-ui/core/IconButton";
-import { OverrideProps } from "@material-ui/core/OverridableComponent";
-import clsx from "clsx";
-import React from "react";
-
-import { UserInteraction } from "../../types/utils";
-import useStyles from "./styles";
-
-export interface IconButtonInnerProps {
-  error?: boolean;
-  hoverOutline?: boolean;
-  state?: UserInteraction;
-  variant?: "primary" | "secondary" | "ghost";
-}
-
-export interface IconButtonTypeMap<
-  P = {},
-  D extends React.ElementType = "button"
-> {
-  props: Omit<MuiIconButtonTypeMap<P, D>["props"], "variant"> &
-    IconButtonInnerProps & { href?: string } & OverrideProps<
-      MuiIconButtonTypeMap<P, D>,
-      "a"
-    >;
-  defaultComponent: D;
-  classKey: never;
-}
-
-export type IconButtonProps<T extends React.ElementType = "button"> =
-  MuiIconButtonProps<T, { component?: T }> &
-    IconButtonInnerProps & { href?: string };
-
-const _IconButton: React.FC<IconButtonProps> = React.forwardRef(
-  (
-    {
-      className,
-      error,
-      hoverOutline = true,
-      variant = "primary",
-      state = "default",
-      ...props
-    },
-    ref
-  ) => {
-    const classes = useStyles();
-
-    if (variant === "ghost") {
-      return (
-        <ButtonBase
-          ref={ref}
-          className={clsx(classes.ghost, className, {
-            [classes.hoverOutline]: hoverOutline && !props.disabled,
-            [classes.hover]: state === "hover" && !props.disabled,
-            [classes.active]: state === "active" && !props.disabled,
-            [classes.error]: error,
-            [classes.disabledError]: error && props.disabled,
-          })}
-          disableRipple
-          {...props}
-        />
-      );
-    }
-
-    if (variant === "secondary") {
-      return (
-        <ButtonBase
-          ref={ref}
-          className={clsx(classes.secondary, className, {
-            [classes.hoverOutline]: hoverOutline && !props.disabled,
-            [classes.hover]: state === "hover" && !props.disabled,
-            [classes.active]: state === "active" && !props.disabled,
-            [classes.error]: error,
-            [classes.disabledError]: error && props.disabled,
-          })}
-          disableRipple
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <MuiIconButton
-        ref={ref}
-        className={clsx(classes.primary, className, {
-          [classes.hover]: state === "hover" && !props.disabled,
-          [classes.active]: state === "active" && !props.disabled,
-          [classes.error]: error,
-          [classes.disabledError]: error && props.disabled,
-        })}
-        disableRipple
-        {...props}
-      />
-    );
-  }
-);
-_IconButton.displayName = "Button";
-
-export const IconButton = _IconButton as <
-  T extends React.ElementType = "button"
->(
-  props: IconButtonProps<T> & { ref?: React.ForwardedRef<T> }
-) => ReturnType<typeof _IconButton>;

package/src/IconButton/index.ts

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

package/src/IconButton/partials.ts

@@ -1,66 +0,0 @@
-import type { SaleorThemeColors } from "..";
-
-// Extracting it to separate file to avoid circular imports
-export function getSecondaryButtonStyles(
-  colors: SaleorThemeColors,
-  isDarkMode: boolean
-) {
-  return {
-    "&:hover, &.Mui-focusVisible, &$hover, &$active": {
-      color: colors.main[1],
-    },
-    "&:disabled": {
-      color: colors.main[5],
-      borderColor: "transparent",
-
-      ...(isDarkMode && {
-        color: colors.main[2],
-      }),
-    },
-    background: "transparent",
-    borderRadius: 4,
-    color: colors.main[3],
-    border: `1px solid ${colors.main[6]}`,
-    padding: 8,
-    transition: "200ms",
-
-    ...(isDarkMode && {
-      border: `1px solid ${colors.main[4]}`,
-      color: colors.main[2],
-    }),
-  };
-}
-
-export function getGhostButtonStyles(
-  colors: SaleorThemeColors,
-  isDarkMode: boolean
-) {
-  return {
-    "&:hover, &.Mui-focusVisible, &$hover, &$active": {
-      color: colors.main[1],
-      background: colors.main[5],
-    },
-
-    "&$active": {
-      color: colors.main[1],
-      background: colors.main[4],
-    },
-
-    "&:disabled": {
-      color: colors.main[3],
-
-      ...(isDarkMode && {
-        color: colors.main[3],
-      }),
-    },
-    background: "transparent",
-    borderRadius: 4,
-    color: colors.main[5],
-    padding: 8,
-    transition: "200ms",
-
-    ...(isDarkMode && {
-      color: colors.main[2],
-    }),
-  };
-}

package/src/IconButton/styles.ts

@@ -1,116 +0,0 @@
-import { makeStyles } from "../theme";
-import { getGhostButtonStyles, getSecondaryButtonStyles } from "./partials";
-
-const useStyles = makeStyles(
-  (theme) => {
-    const isDarkMode = theme.palette.type === "dark";
-
-    return {
-      primary: {
-        "&:hover, &.Mui-focusVisible, &$hover, &$active": {
-          color: theme.palette.saleor.main[1],
-          borderColor: theme.palette.saleor.main[1],
-        },
-        "&:active, &$active": {
-          background: theme.palette.saleor.main[5],
-        },
-        "&:disabled": {
-          background: theme.palette.saleor.main[5],
-          color: theme.palette.saleor.main[4],
-        },
-      },
-      secondary: getSecondaryButtonStyles(theme.palette.saleor, isDarkMode),
-      ghost: getGhostButtonStyles(theme.palette.saleor, isDarkMode),
-      hoverOutline: {
-        "&$secondary": {
-          "&:hover, &:focus-visible, &$hover": {
-            background: theme.palette.saleor.main[6],
-            borderColor: theme.palette.saleor.main[1],
-
-            ...(isDarkMode && {
-              background: "transparent",
-            }),
-          },
-          "&:active, &$active": {
-            background: theme.palette.saleor.main[4],
-          },
-        },
-      },
-      error: {
-        "&&&": {
-          "&:hover, &.Mui-focusVisible, &$hover": {
-            borderColor: theme.palette.saleor.errorAction[1],
-            color: theme.palette.saleor.errorAction[1],
-          },
-          "&:active, &$active": {
-            background: theme.palette.saleor.errorAction[5],
-            color: theme.palette.saleor.errorAction[1],
-            borderColor: theme.palette.saleor.errorAction[2],
-          },
-          "&$secondary": {
-            "&:hover, &.Mui-focusVisible, &$hover": {
-              background: theme.palette.background.paper,
-              borderColor: theme.palette.saleor.errorAction[1],
-              color: theme.palette.saleor.errorAction[1],
-            },
-            "&:active, &$active": {
-              background: theme.palette.saleor.errorAction[5],
-              color: theme.palette.saleor.errorAction[1],
-            },
-            "&:disabled": {
-              borderColor: "transparent",
-            },
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.saleor.errorAction[2],
-            borderColor: theme.palette.saleor.errorAction[5],
-          },
-
-          "&$ghost": {
-            backgroundColor: theme.palette.background.default,
-            color: theme.palette.saleor.errorAction[2],
-
-            "&:hover, &.Mui-focusVisible, &$hover": {
-              color: theme.palette.saleor.errorAction[1],
-              backgroundColor: theme.palette.saleor.errorAction[4],
-            },
-
-            "&:active, &$active": {
-              background: theme.palette.saleor.errorAction[3],
-              color: theme.palette.saleor.errorAction[1],
-            },
-
-            "&:disabled": {
-              color: theme.palette.saleor.errorAction[3],
-            },
-          },
-
-          ...(isDarkMode && {
-            color: theme.palette.saleor.main[1],
-          }),
-        },
-
-        color: theme.palette.background.paper,
-        backgroundColor: theme.palette.saleor.errorAction[1],
-        borderColor: theme.palette.saleor.errorAction[1],
-      },
-      disabledError: {
-        "&&&": {
-          borderColor: "transparent",
-          color: theme.palette.saleor.errorAction[5],
-
-          ...(isDarkMode && {
-            backgroundColor: theme.palette.saleor.errorAction[4],
-            color: theme.palette.saleor.main[3],
-          }),
-        },
-      },
-      active: {},
-      hover: {},
-    };
-  },
-  {
-    name: "IconButton",
-  }
-);
-
-export default useStyles;

package/src/Indicator/Circle.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-export interface CircleProps {
-  className?: string;
-}
-
-export const Circle = ({ className }: CircleProps) => {
-  return (
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-      fill="currentColor"
-      className={className}
-    />
-  );
-};

package/src/Indicator/CircleFilled.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-
-import { IndicatorProps } from "./Indicator";
-
-interface CircleFilledProps {
-  size?: IndicatorProps["size"];
-  className: string;
-}
-
-export const CircleFilled = ({ className, size }: CircleFilledProps) => {
-  if (size === "small") {
-    return <circle cx={8} cy={8} r={8} className={className} />;
-  }
-
-  return <circle cx={12} cy={12} r={12} className={className} />;
-};

package/src/Indicator/CircleOutline.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-import { IndicatorProps } from "./Indicator";
-
-interface CircleOutlineProps {
-  size: IndicatorProps["size"];
-  className: string;
-}
-
-export const CircleOutline = ({ className, size }: CircleOutlineProps) => {
-  if (size === "small") {
-    return (
-      <circle
-        cx={8}
-        cy={8}
-        r={7.25}
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className={className}
-      />
-    );
-  }
-
-  return (
-    <circle
-      cx={12}
-      cy={12}
-      r={11.25}
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={className}
-    />
-  );
-};

package/src/Indicator/Indicator.stories.tsx

@@ -1,49 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
-
-import { Indicator } from "./Indicator";
-
-export default {
-  title: "Indicator / Regular",
-  component: Indicator,
-} as ComponentMeta<typeof Indicator>;
-
-const Template: ComponentStory<typeof Indicator> = (args) => {
-  console.log(args);
-  return <Indicator {...args} />;
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  icon: "warning",
-};
-export const WarningSmall = Template.bind({});
-WarningSmall.args = {
-  icon: "warning",
-  size: "small",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  icon: "error",
-};
-export const ErrorSmall = Template.bind({});
-ErrorSmall.args = {
-  icon: "error",
-  size: "small",
-};
-
-export const Fail = Template.bind({});
-Fail.args = {
-  icon: "fail",
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  icon: "success",
-};
-export const SuccessSmall = Template.bind({});
-SuccessSmall.args = {
-  icon: "success",
-  size: "small",
-};