@saleor/macaw-ui 0.5.2 → 0.6.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.2",
+  "version": "0.6.2",
   "license": "CC-BY-4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -34,7 +34,7 @@
     "start": "concurrently -n w: npm:watch-* --prefix-colors=green,blue",
     "build": "npm run build-esb && npm run build-tsc",
     "test": "jest",
-    "lint": "npx eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix ; npx prettier --check \"src/**/*.@(tsx|ts|jsx|js)\" --write",
+    "lint": "eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix ; prettier --check \"src/**/*.@(tsx|ts|jsx|js)\" --write",
     "prepare": "npm run build",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -42,6 +42,13 @@
     "build-storybook": "build-storybook",
     "release": "np",
     "chromatic": "npx chromatic --exit-zero-on-changes --skip 'dependabot/**'",
+    "generate-icons:32": "svgr --no-dimensions --no-prettier --out-dir src/icons/32x32 -- src/assets/icons/32x32/",
+    "generate-icons:24": "svgr --no-dimensions --no-prettier --out-dir src/icons/24x24 -- src/assets/icons/24x24/",
+    "generate-icons:20": "svgr --no-dimensions --no-prettier --out-dir src/icons/20x20 -- src/assets/icons/20x20/",
+    "generate-icons:indicator": "svgr --no-dimensions --no-prettier --config-file .svgrrc-nomaterial.js --out-dir src/icons/indicator -- src/assets/icons/indicator/",
+    "generate-icons": "npm run optimise-icons && npm run generate-icons:32 && npm run generate-icons:24 && npm run generate-icons:20 && npm run generate-icons:indicator && npm run lint",
+    "optimise-icons": "svgo -r -f src/assets/icons",
+    "optimise-icons:remove-color": "svgo --config svgo-colors.config.js",
     "generate-icon": "hygen icon new",
     "build-icons": "node scripts/icons.js"
   },
@@ -50,7 +57,8 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "react": "^16.8.0 || ^17.0.0",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
   "np": {
     "yarn": false
@@ -72,7 +80,7 @@
   "size-limit": [
     {
       "path": "dist/cjs/index.js",
-      "limit": "85 KB"
+      "limit": "100 KB"
     },
     {
       "path": "dist/esm/index.js",
@@ -86,11 +94,14 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@size-limit/preset-small-lib": "^4.10.2",
+    "@storybook/addon-controls": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.4.22",
+    "@storybook/addon-storysource": "^6.4.22",
     "@storybook/addons": "^6.4.22",
     "@storybook/react": "^6.4.22",
+    "@svgr/cli": "^6.2.1",
     "@types/fuzzaldrin": "^2.1.4",
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.170",
@@ -109,23 +120,25 @@
     "eslint-plugin-simple-import-sort": "^5.0.3",
     "eslint-plugin-storybook": "^0.5.10",
     "faker": "^5.5.3",
-    "husky": "^7.0.0",
     "fuzzaldrin": "^2.1.0",
+    "husky": "^7.0.0",
     "hygen": "^6.1.0",
     "jest": "^27.2.4",
     "jest-file": "^1.0.0",
     "np": "^7.5.0",
-    "prettier": "^2.4.1",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "prettier": "^2.6.2",
     "react-is": "^17.0.2",
     "size-limit": "^4.10.2",
     "storybook-dark-mode": "^1.0.9",
+    "svgo": "^2.8.0",
     "tslib": "^2.3.1",
     "typescript": "^4.2.4",
     "yargs": "^17.2.1"
   },
   "dependencies": {
+    "@floating-ui/react-dom-interactions": "^0.5.0",
     "clsx": "^1.1.1",
     "downshift": "^6.1.7",
     "lodash": "^4.17.21",

package/src/CircleIndicator/CircleIndicator.tsx

@@ -11,6 +11,8 @@ export interface CircleIndicatorProps {
   color: CircleIndicatorColor;
 }
 
+/**
+ * @deprecated use IndicatorCircle component instead */
 export const CircleIndicator: React.FC<CircleIndicatorProps> = ({ color }) => {
   const { themeType } = useTheme();
   const classes = useStyles();

package/src/Filter/FilterField/MultipleValueAutocompleteFilterField.tsx

@@ -11,50 +11,51 @@ export interface FilterContentProps {
   filter: FilterData;
 }
 
-export const MultipleValueAutocompleteFilterField: React.FC<FilterContentProps> =
-  ({ filter }) => {
-    const classes = useStyles();
-    const { onChange } = useFilters();
+export const MultipleValueAutocompleteFilterField: React.FC<
+  FilterContentProps
+> = ({ filter }) => {
+  const classes = useStyles();
+  const { onChange } = useFilters();
 
-    const { name, options } = filter;
+  const { name, options } = filter;
 
-    if (options.choices === undefined) {
-      throw new Error("FilterType.Autocomplete must be used with choices prop");
-    }
-    if (options.onInputChange === undefined) {
-      throw new Error(
-        "FilterType.Autocomplete must be used with onInputChange prop"
-      );
-    }
+  if (options.choices === undefined) {
+    throw new Error("FilterType.Autocomplete must be used with choices prop");
+  }
+  if (options.onInputChange === undefined) {
+    throw new Error(
+      "FilterType.Autocomplete must be used with onInputChange prop"
+    );
+  }
 
-    const handleChoiceChange = (event: SyntheticChangeEvent<string[]>) =>
-      onChange(name, event.target.value);
+  const handleChoiceChange = (event: SyntheticChangeEvent<string[]>) =>
+    onChange(name, event.target.value);
 
-    return (
-      <MultipleValueAutocomplete
-        className={classes.filterValue}
-        choices={options.choices!}
-        InputProps={{
-          classes: {
-            root: classes.filterMultipleValueInputInner,
-          },
-        }}
-        onChange={handleChoiceChange}
-        onInputChange={options.onInputChange}
-        value={filter.values}
-      >
-        {({ choices: filteredChoices, getItemProps, highlightedIndex }) =>
-          filteredChoices.map((choice, choiceIndex) => (
-            <MenuItem
-              selected={highlightedIndex === choiceIndex}
-              {...getItemProps({ item: choice, index: choiceIndex })}
-            >
-              {choice.label}
-            </MenuItem>
-          ))
-        }
-      </MultipleValueAutocomplete>
-    );
-  };
+  return (
+    <MultipleValueAutocomplete
+      className={classes.filterValue}
+      choices={options.choices!}
+      InputProps={{
+        classes: {
+          root: classes.filterMultipleValueInputInner,
+        },
+      }}
+      onChange={handleChoiceChange}
+      onInputChange={options.onInputChange}
+      value={filter.values}
+    >
+      {({ choices: filteredChoices, getItemProps, highlightedIndex }) =>
+        filteredChoices.map((choice, choiceIndex) => (
+          <MenuItem
+            selected={highlightedIndex === choiceIndex}
+            {...getItemProps({ item: choice, index: choiceIndex })}
+          >
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </MultipleValueAutocomplete>
+  );
+};
 MultipleValueAutocompleteFilterField.displayName =
   "MultipleValueAutocompleteFilterField";

package/src/Indicator/Circle.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,49 @@
+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",
+};

package/src/Indicator/Indicator.tsx

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,63 @@
+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

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

package/src/Indicator/styles.ts

@@ -0,0 +1,61 @@
+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" }
+);