@saleor/macaw-ui 0.3.2 → 0.5.0

package/src/Chip/ChipSwatch.tsx

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

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

package/src/Chip/private/ColorSwatch.tsx

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

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

@@ -2,9 +2,9 @@ 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 = () => {
@@ -16,7 +16,7 @@ const StoryWrapper: React.FC = () => {
         Circle Indicators
       </Typography>
       <Typography className={guideClasses.paragraph} component="p">
-        Circle Indicators represent status of a certain element. 
+        Circle Indicators represent status of a certain element.
       </Typography>
       <div style={{ display: "flex", gap: "24px" }}>
         <div
@@ -30,10 +30,10 @@ const StoryWrapper: React.FC = () => {
             padding: 24,
           }}
         >
-        Error <CircleIndicator color="error" />
-        Warning <CircleIndicator color="warning" />
-        Success <CircleIndicator color="success" />
-        Info <CircleIndicator color="info" />
+          Error <CircleIndicator color="error" />
+          Warning <CircleIndicator color="warning" />
+          Success <CircleIndicator color="success" />
+          Info <CircleIndicator color="info" />
         </div>
       </div>
     </div>

package/src/CircleIndicator/index.ts

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

package/src/Filter/Filter.tsx

@@ -1,10 +1,10 @@
-import IconButton from "@material-ui/core/IconButton";
 import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
+import Select, { SelectProps } from "@material-ui/core/Select";
 import Typography from "@material-ui/core/Typography";
-import { difference } from "lodash";
+import { difference, uniqBy } from "lodash";
 import React from "react";
 
+import { IconButton } from "../IconButton";
 import { DeleteIcon } from "../icons";
 import { useFilters } from "./context";
 import { FilterContent } from "./FilterContent";
@@ -19,9 +19,16 @@ import {
 import * as utils from "./utils";
 
 export type FilterProps = FilterOptions & FilterDetailedOptions;
-export const Filter: React.FC<FilterProps> = ({ name, label, ...options }) => {
-  const { register, set, unregister } = useFilters();
+export const Filter: React.FC<FilterProps> = ({
+  name: nameProp,
+  label,
+  ...options
+}) => {
+  const name = utils.getFilterName(nameProp, options);
+  const { filters, register, set, unregister } = useFilters();
   const registered = React.useRef(false);
+  const filter = filters.find((fd) => fd.name === name);
+
   React.useEffect(() => {
     register(name, label, options);
     registered.current = true;
@@ -33,7 +40,8 @@ export const Filter: React.FC<FilterProps> = ({ name, label, ...options }) => {
     if (
       registered.current &&
       options.choices !== undefined &&
-      difference(options.choices, options.choices).length
+      filter &&
+      difference(options.choices, filter!.options.choices!).length
     ) {
       set(name, {
         options: {
@@ -58,7 +66,7 @@ export const FilterRow: React.FC<FilterRowProps> = ({
   labels,
 }) => {
   const classes = useStyles();
-  const { filters, toggle, toggleRange } = useFilters();
+  const { filters, toggle, toggleRange, swap } = useFilters();
 
   const filter = filters.find((filter) => filter.name === name);
 
@@ -67,50 +75,86 @@ export const FilterRow: React.FC<FilterRowProps> = ({
   }
 
   const availableFilters = utils.getAvailableFilters(filters);
-  const options = [filter, ...availableFilters];
+  const options = uniqBy(
+    [filter.options.group ?? filter, ...availableFilters],
+    "name"
+  );
+  const groupOptions = [
+    filter,
+    ...filters.filter(
+      (f) =>
+        f.name !== filter.name &&
+        f.options.group?.name === filter.options.group?.name &&
+        !f.active
+    ),
+  ];
 
   const change = (event: React.ChangeEvent<EventTarget<unknown>>) => {
-    toggle(name);
-    toggle(event.target.value as string);
+    const targetFilterName = event.target.value as string;
+
+    swap(name, targetFilterName);
+  };
+
+  const selectProps: SelectProps = {
+    classes: {
+      selectMenu: classes.filterInputInner,
+    },
+    variant: "outlined",
   };
 
   return (
     <div className={classes.filter}>
-      <Typography className={classes.filterConjunction}>
-        {first ? labels.where : labels.and}
-      </Typography>
-      <Select
-        className={classes.filterName}
-        classes={{
-          selectMenu: classes.filterInputInner,
-        }}
-        variant="outlined"
-        onChange={change}
-        value={filter.name}
-      >
-        {options.map((option) => (
-          <MenuItem key={option.name} value={option.name}>
-            {option.label}
-          </MenuItem>
-        ))}
-      </Select>
-      <Select
-        disabled={filter.options.type !== FilterType.Range}
-        className={classes.filterRange}
-        classes={{
-          selectMenu: classes.filterInputInner,
-        }}
-        variant="outlined"
-        value={filter.range.toString()}
-        onChange={() => toggleRange(name)}
-      >
-        <MenuItem value="false">{labels.is}</MenuItem>
-        <MenuItem value="true">{labels.range}</MenuItem>
-      </Select>
+      <div className={classes.filterOptions}>
+        <Typography className={classes.filterConjunction}>
+          {first ? labels.where : labels.and}
+        </Typography>
+        <Select
+          {...selectProps}
+          className={classes.filterName}
+          onChange={change}
+          value={filter.options.group?.name ?? filter.name}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.name} value={option.name}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </Select>
+        {!!filter.options.group && (
+          <Select
+            {...selectProps}
+            className={classes.filterName}
+            onChange={change}
+            value={filter.name}
+          >
+            {groupOptions.map((option) => (
+              <MenuItem key={option.name} value={option.name}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        )}
+        <Select
+          {...selectProps}
+          disabled={filter.options.type !== FilterType.Range}
+          className={classes.filterRange}
+          value={filter.range.toString()}
+          onChange={() => toggleRange(name)}
+        >
+          <MenuItem value="false">{labels.is}</MenuItem>
+          <MenuItem value="true">{labels.range}</MenuItem>
+        </Select>
+      </div>
       <FilterContent filter={filter} labels={labels} />
-      <IconButton className={classes.filterDelete} onClick={() => toggle(name)}>
-        <DeleteIcon />
-      </IconButton>
+      <div className={classes.filterDeleteContainer}>
+        <IconButton
+          variant="secondary"
+          className={classes.filterDelete}
+          onClick={() => toggle(name)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </div>
     </div>
   );
 };

package/src/Filter/FilterBar.tsx

@@ -1,11 +1,11 @@
-import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import CardHeader from "@material-ui/core/CardHeader";
-import IconButton from "@material-ui/core/IconButton";
-import Close from "@material-ui/icons/Close";
 import React from "react";
 
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { CloseIcon, PlusIcon } from "../icons";
 import { FilterContext } from "./context";
 import { FilterRow } from "./Filter";
 import { FilterMenu, FilterMenuLabels } from "./FilterMenu";
@@ -56,8 +56,10 @@ export const FilterBar: React.FC<FilterBarProps> = React.forwardRef(
       setFilterData((fd) => fd.filter((filter) => filter.name !== name));
     const set = (name: string, filter: Partial<FilterData>) =>
       setFilterData((fd) =>
-        fd.map((f) => (f.name === name ? { ...f, filter } : f))
+        fd.map((f) => (f.name === name ? { ...f, ...filter } : f))
       );
+    const swap = (previousFilterName: string, nextFilterName: string) =>
+      setFilterData((fd) => utils.swap(fd, previousFilterName, nextFilterName));
 
     const availableFilters = utils.getAvailableFilters(filterData);
 
@@ -75,16 +77,17 @@ export const FilterBar: React.FC<FilterBarProps> = React.forwardRef(
           toggle,
           toggleRange,
           unregister,
+          swap,
           onChange,
         }}
       >
         {children}
-        <Card className={classes.bar} ref={ref} elevation={20}>
+        <Card className={classes.bar} ref={ref} elevation={8}>
           <CardHeader
             title={labels.header}
             action={
-              <IconButton onClick={onClose}>
-                <Close />
+              <IconButton variant="secondary" onClick={onClose}>
+                <CloseIcon />
               </IconButton>
             }
           />
@@ -105,11 +108,14 @@ export const FilterBar: React.FC<FilterBarProps> = React.forwardRef(
             {!!availableFilters.length && (
               <>
                 <Button
-                  color="primary"
+                  className={classes.barAddBtn}
+                  color="text"
+                  variant="secondary"
                   ref={button}
                   onClick={() => setMenuOpen(true)}
                 >
-                  + {labels.addButton}
+                  {labels.addButton}
+                  <PlusIcon />
                 </Button>
               </>
             )}

package/src/Filter/FilterContent.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
+import { AutocompleteFilterField } from "./FilterField/AutocompleteFilterField";
 import { MultipleSelectFilterField } from "./FilterField/MultipleSelectFilterField";
+import { MultipleValueAutocompleteFilterField } from "./FilterField/MultipleValueAutocompleteFilterField";
 import { RangeFilterField } from "./FilterField/RangeFilterField";
 import { SelectFilterField } from "./FilterField/SelectFilterField";
 import { TextFilterField } from "./FilterField/TextFilterField";
@@ -18,7 +20,12 @@ export const FilterContent: React.FC<FilterContentProps> = ({
   const { options, range } = filter;
   const { type, multiple } = options;
 
-  if (type === FilterType.Choice) {
+  if (type === FilterType.Autocomplete) {
+    if (multiple) {
+      return <MultipleValueAutocompleteFilterField filter={filter} />;
+    }
+    return <AutocompleteFilterField filter={filter} />;
+  } else if (type === FilterType.Choice) {
     if (multiple) {
       return <MultipleSelectFilterField filter={filter} />;
     }

package/src/Filter/FilterField/AutocompleteFilterField.tsx

@@ -0,0 +1,61 @@
+import MenuItem from "@material-ui/core/MenuItem";
+import React from "react";
+
+import { SyntheticChangeEvent } from "../../../types/utils";
+import { Autocomplete } from "../../Autocomplete/Autocomplete";
+import { useFilters } from "../context";
+import useStyles from "../styles";
+import { FilterData } from "../types";
+
+export interface FilterContentProps {
+  filter: FilterData;
+}
+
+export const AutocompleteFilterField: React.FC<FilterContentProps> = ({
+  filter,
+}) => {
+  const classes = useStyles();
+  const { onChange } = useFilters();
+
+  const { name, options } = filter;
+  const { choices } = options;
+
+  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) =>
+    onChange(name, event.target.value);
+
+  return (
+    <Autocomplete
+      className={classes.filterValue}
+      choices={options.choices!}
+      InputProps={{
+        classes: {
+          input: classes.filterInputInner,
+        },
+      }}
+      onChange={handleChoiceChange}
+      onInputChange={options.onInputChange}
+      value={filter.values}
+    >
+      {({ getItemProps, highlightedIndex }) =>
+        choices!.map((choice, choiceIndex) => (
+          <MenuItem
+            selected={highlightedIndex === choiceIndex}
+            {...getItemProps({ item: choice, index: choiceIndex })}
+          >
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </Autocomplete>
+  );
+};
+AutocompleteFilterField.displayName = "AutocompleteFilterField";

package/src/Filter/FilterField/MultipleSelectFilterField.tsx

@@ -1,10 +1,10 @@
 import Checkbox from "@material-ui/core/Checkbox";
-import Chip from "@material-ui/core/Chip";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select from "@material-ui/core/Select";
 import clsx from "clsx";
 import React from "react";
 
+import { Chip } from "../../Chip";
 import { useFilters } from "../context";
 import useStyles from "../styles";
 import { EventTarget, FilterData } from "../types";
@@ -18,6 +18,9 @@ export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
 }) => {
   const classes = useStyles();
   const { onChange } = useFilters();
+  const [displayValues] = React.useState(
+    filter.options.displayValues || filter.options.choices
+  );
 
   const { name, options } = filter;
   const { choices } = options;
@@ -29,7 +32,7 @@ export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
     <Select
       className={classes.filterValue}
       classes={{
-        root: classes.filterInputInner,
+        root: classes.filterMultipleValueInputInner,
       }}
       multiple
       variant="outlined"
@@ -41,7 +44,10 @@ export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
         return (
           <div className={classes.filterChipContainer}>
             {typedValues.map((value) => (
-              <Chip className={classes.filterChip} key={value} label={value} />
+              <Chip className={classes.filterChip} key={value}>
+                {displayValues?.find((dv) => dv.value === value)?.label ??
+                  value}
+              </Chip>
             ))}
           </div>
         );

package/src/Filter/FilterField/MultipleValueAutocompleteFilterField.tsx

@@ -0,0 +1,60 @@
+import MenuItem from "@material-ui/core/MenuItem";
+import React from "react";
+
+import { SyntheticChangeEvent } from "../../../types/utils";
+import { MultipleValueAutocomplete } from "../../MultipleValueAutocomplete";
+import { useFilters } from "../context";
+import useStyles from "../styles";
+import { FilterData } from "../types";
+
+export interface FilterContentProps {
+  filter: FilterData;
+}
+
+export const MultipleValueAutocompleteFilterField: React.FC<FilterContentProps> =
+  ({ filter }) => {
+    const classes = useStyles();
+    const { onChange } = useFilters();
+
+    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"
+      );
+    }
+
+    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>
+    );
+  };
+MultipleValueAutocompleteFilterField.displayName =
+  "MultipleValueAutocompleteFilterField";

package/src/Filter/context.tsx

@@ -5,7 +5,7 @@ import { FilterContextType } from "./types";
 export const FilterContext = createContext<FilterContextType | null>(null);
 export const useFilters = (): FilterContextType => {
   const ctx = useContext(FilterContext);
-  if (ctx === undefined) {
+  if (!ctx) {
     throw new Error("useFilters must be used within a FilterContext");
   }