@saleor/macaw-ui 0.4.0 → 0.5.2

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

@@ -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"
@@ -42,7 +45,8 @@ export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
           <div className={classes.filterChipContainer}>
             {typedValues.map((value) => (
               <Chip className={classes.filterChip} key={value}>
-                {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");
   }
 

package/src/Filter/{Filter.stories.tsx → stories/Filter.stories.tsx}

@@ -2,18 +2,10 @@ import { Meta, Story } from "@storybook/react";
 import { debounce } from "lodash";
 import React from "react";
 
-import { Filter } from "./Filter";
-import { FilterBar } from "./FilterBar";
-import { FilterType } from "./types";
-
-const labels = {
-  addButton: "Add Filter",
-  header: "Filters",
-  where: "Where",
-  and: "and",
-  is: "is",
-  range: "between",
-};
+import { Filter } from "../Filter";
+import { FilterBar } from "../FilterBar";
+import { FilterType } from "../types";
+import { labels } from "./labels";
 
 export const Default: Story = () => (
   <FilterBar
@@ -63,6 +55,11 @@ export const Default: Story = () => (
     />
   </FilterBar>
 );
+
+const attributeGroup = {
+  label: "Attribute",
+  name: "attribute",
+};
 export const WithInitialState: Story = () => (
   <FilterBar
     labels={labels}
@@ -78,6 +75,11 @@ export const WithInitialState: Story = () => (
         value: "no",
         values: null,
       },
+      {
+        name: "status",
+        values: ["published"],
+        value: null,
+      },
     ]}
     onClose={() => undefined}
   >
@@ -101,9 +103,41 @@ export const WithInitialState: Story = () => (
         { label: "Not Available", value: "no" },
       ]}
     />
+    <Filter
+      name="status"
+      label="Status"
+      type={FilterType.Choice}
+      default="scheduled"
+      choices={[
+        { label: "Published", value: "published" },
+        { label: "Scheduled for publishing", value: "scheduled" },
+        { label: "Not Published", value: "unpublished" },
+      ]}
+      multiple
+    />
+    <Filter
+      name="color"
+      label="Color"
+      group={attributeGroup}
+      type={FilterType.Choice}
+      choices={[
+        { label: "Green", value: "green" },
+        { label: "Red", value: "red" },
+      ]}
+    />
+    <Filter
+      name="size"
+      label="Size"
+      group={attributeGroup}
+      type={FilterType.Choice}
+      choices={[
+        { label: "XL", value: "xl" },
+        { label: "L", value: "l" },
+      ]}
+    />
   </FilterBar>
 );
 
 export default {
-  title: "Filter",
+  title: "Filter / Dummy",
 } as Meta;

package/src/Filter/stories/FilterInteractive.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, Story } from "@storybook/react";
+import { debounce } from "lodash";
+import React from "react";
+
+import { useMockAutocomplete } from "../../utils/useMockAutocomplete";
+import { Filter } from "../Filter";
+import { FilterBar } from "../FilterBar";
+import { FilterType } from "../types";
+import { labels } from "./labels";
+
+const choices = [
+  { label: "Awesome Chair", value: "awesome chair" },
+  { label: "Ergonomic Chair", value: "ergonomic chair" },
+  { label: "Fantastic Bacon", value: "fantastic bacon" },
+  { label: "Fantastic Gloves", value: "fantastic gloves" },
+  { label: "Fantastic Hat", value: "fantastic hat" },
+  { label: "Fantastic Pants", value: "fantastic pants" },
+  { label: "Generic Bacon", value: "generic bacon" },
+  { label: "Gorgeous Bacon", value: "gorgeous bacon" },
+  { label: "Handcrafted Chair", value: "handcrafted chair" },
+  { label: "Handmade Computer", value: "handmade computer" },
+  { label: "Handmade Pizza", value: "handmade pizza" },
+  { label: "Incredible Shirt", value: "incredible shirt" },
+  { label: "Incredible Soap", value: "incredible soap" },
+  { label: "Incredible Table", value: "incredible table" },
+  { label: "Intelligent Hat", value: "intelligent hat" },
+  { label: "Intelligent Mouse", value: "intelligent mouse" },
+  { label: "Intelligent Sausages", value: "intelligent sausages" },
+  { label: "Licensed Chair", value: "licensed chair" },
+  { label: "Practical Hat", value: "practical hat" },
+  { label: "Practical Shoes", value: "practical shoes" },
+  { label: "Refined Ball", value: "refined ball" },
+  { label: "Refined Table", value: "refined table" },
+  { label: "Rustic Cheese", value: "rustic cheese" },
+  { label: "Rustic Shoes", value: "rustic shoes" },
+  { label: "Sleek Car", value: "sleek car" },
+  { label: "Small Ball", value: "small ball" },
+  { label: "Small Bike", value: "small bike" },
+  { label: "Tasty Gloves", value: "tasty gloves" },
+  { label: "Tasty Table", value: "tasty table" },
+  { label: "Unbranded Gloves", value: "unbranded gloves" },
+];
+
+export const Autocomplete: Story = () => {
+  const { results, search } = useMockAutocomplete(choices);
+
+  return (
+    <FilterBar
+      labels={labels}
+      onChange={debounce((fd) => console.log(fd), 1000)}
+      initial={[
+        {
+          name: "name",
+          value: "Lorem Ipsum",
+          values: null,
+        },
+        {
+          name: "product",
+          value: choices[0].value,
+          values: null,
+        },
+      ]}
+      onClose={() => undefined}
+    >
+      <Filter name="name" label="Name" type={FilterType.Text} />
+      <Filter
+        name="price"
+        label="Price"
+        type={FilterType.Range}
+        InputProps={{
+          InputProps: {
+            endAdornment: "USD",
+          },
+        }}
+      />
+      <Filter
+        name="product"
+        label="Product"
+        type={FilterType.Autocomplete}
+        choices={results}
+        onInputChange={search}
+      />
+      <Filter
+        name="references"
+        label="Product references"
+        type={FilterType.Autocomplete}
+        multiple
+        choices={results}
+        onInputChange={search}
+      />
+    </FilterBar>
+  );
+};
+
+export default {
+  title: "Filter / Interactive",
+} as Meta;

package/src/Filter/stories/labels.ts

@@ -0,0 +1,8 @@
+export const labels = {
+  addButton: "Add Filter",
+  header: "Filters",
+  where: "Where",
+  and: "and",
+  is: "is",
+  range: "between",
+};

package/src/Filter/styles.ts

@@ -14,11 +14,16 @@ const useStyles = makeStyles(
     },
 
     filter: {
-      alignItems: "center",
+      alignItems: "flex-start",
       display: "flex",
       columnGap: theme.spacing(2),
       marginBottom: theme.spacing(2),
     },
+    filterOptions: {
+      alignItems: "center",
+      columnGap: theme.spacing(2),
+      display: "flex",
+    },
     filterChip: {
       borderRadius: 8,
       background: theme.palette.primary.main,
@@ -26,17 +31,30 @@ const useStyles = makeStyles(
     },
     filterChipContainer: {
       display: "flex",
-      columnGap: theme.spacing(1),
+      flexWrap: "wrap",
+      gap: theme.spacing(1),
     },
-    filterDelete: {
+    filterDeleteContainer: {
+      alignItems: "center",
+      columnGap: theme.spacing(2),
+      display: "flex",
+      height: 51,
       marginLeft: "auto",
     },
+    filterDelete: {
+      position: "relative",
+      left: 6,
+    },
     filterName: {
       width: 180,
     },
     filterValue: {
-      height: 51,
-      width: 400,
+      "& .MuiSelect-root": {
+        boxSizing: "border-box",
+      },
+      boxSizing: "border-box",
+      minHeight: 51,
+      width: "100%",
     },
     filterRange: {
       width: 115,
@@ -46,6 +64,13 @@ const useStyles = makeStyles(
         padding: theme.spacing(2),
       },
     },
+    filterMultipleValueInputInner: {
+      "&&": {
+        minHeight: 51,
+        padding: theme.spacing(1),
+        paddingRight: theme.spacing(8),
+      },
+    },
     filterConjunction: {
       minWidth: 80,
     },
@@ -65,7 +90,13 @@ const useStyles = makeStyles(
     },
 
     bar: {
-      minWidth: 600,
+      minWidth: 100,
+    },
+    barAddBtn: {
+      "& svg": {
+        marginLeft: theme.spacing(1),
+        marginRight: 0,
+      },
     },
 
     selectPaper: {

package/src/Filter/types.ts

@@ -4,14 +4,20 @@ export enum FilterType {
   Text,
   Choice,
   Range,
+  Autocomplete,
 }
 
+export type Choice = Record<"label" | "value", string>;
+
 export interface FilterDetailedOptions {
   type: FilterType;
-  choices?: Array<Record<"label" | "value", string>>;
+  choices?: Choice[];
   default?: string;
   multiple?: boolean;
   InputProps?: Partial<TextFieldProps>;
+  group?: Record<"label" | "name", string>;
+  displayValues?: Choice[];
+  onInputChange?: (value: string) => void;
 }
 export interface FilterOptions {
   name: string;
@@ -52,6 +58,7 @@ export interface FilterContextType {
   toggle: (name: string) => void;
   toggleRange: (name: string) => void;
   unregister: (name: string) => void;
+  swap: (previousFilterName: string, nextFilterName: string) => void;
   onChange: (
     name: string,
     value: string | string[],

package/src/Filter/utils.ts

@@ -1,4 +1,4 @@
-import { uniqBy } from "lodash";
+import { sortBy, uniqBy } from "lodash";
 
 import {
   FilterData,
@@ -8,8 +8,36 @@ import {
   OnFilterChangeOpts,
 } from "./types";
 
-export function getAvailableFilters(filterData: FilterData[]) {
-  return filterData.filter((filter) => !filter.active);
+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);
@@ -107,15 +135,29 @@ export function change(
   );
 }
 
+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 = filterData.find((filter) => filter.name === name)!;
+  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 === name
+    filter.name === filterName
       ? {
           ...filter,
           active: !filter.active,
@@ -148,3 +190,27 @@ export function toggleRange(
       : 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
+  );
+}