@saleor/macaw-ui 0.4.0 → 0.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.2",
   "license": "CC-BY-4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -86,11 +86,12 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@size-limit/preset-small-lib": "^4.10.2",
-    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@types/fuzzaldrin": "^2.1.4",
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.170",
     "@types/lodash-es": "^4.17.5",
@@ -106,8 +107,10 @@
     "esbuild-jest": "^0.5.0",
     "eslint": "^7.32.0",
     "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",
     "hygen": "^6.1.0",
     "jest": "^27.2.4",
     "jest-file": "^1.0.0",
@@ -117,13 +120,14 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-is": "^17.0.2",
     "size-limit": "^4.10.2",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook-dark-mode": "^1.0.9",
     "tslib": "^2.3.1",
     "typescript": "^4.2.4",
     "yargs": "^17.2.1"
   },
   "dependencies": {
     "clsx": "^1.1.1",
+    "downshift": "^6.1.7",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "react-inlinesvg": "^2.3.0"

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,43 @@
+import { MenuItem } from "@material-ui/core";
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { Decorator, GuideDecorator } from "../utils/Decorator";
+import { useMockAutocomplete } from "../utils/useMockAutocomplete";
+import { Autocomplete } from "./Autocomplete";
+import { choices } from "./fixtures";
+
+export const Default: Story = () => {
+  const { results, search } = useMockAutocomplete(choices);
+
+  return (
+    <Autocomplete
+      choices={results}
+      fullWidth
+      label="Employee of the month"
+      onInputChange={search}
+    >
+      {({ highlightedIndex, getItemProps }) =>
+        results.map((choice, choiceIndex) => (
+          <MenuItem
+            selected={highlightedIndex === choiceIndex}
+            {...getItemProps({ item: choice, index: choiceIndex })}
+          >
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </Autocomplete>
+  );
+};
+
+export const Loading: Story = () => (
+  <Autocomplete fullWidth choices={[]} label="Employee of the month" loading>
+    {() => null}
+  </Autocomplete>
+);
+
+export default {
+  decorators: [Decorator, GuideDecorator],
+  title: "Autocomplete / Single choice",
+} as Meta;

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,188 @@
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import Popper, { PopperPlacementType } from "@material-ui/core/Popper";
+import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
+import clsx from "clsx";
+import { useCombobox, UseComboboxGetItemPropsOptions } from "downshift";
+import React from "react";
+
+import { SyntheticChangeEvent } from "../../types/utils";
+import { Choice } from "../Filter";
+import { ChevronIcon } from "../icons";
+import { isScrolledToBottom, useElementScroll } from "../tools";
+import { mergeRefs } from "../utils/mergeRefs";
+import useStyles from "./styles";
+
+export interface AutocompleteProps extends StandardTextFieldProps {
+  children: (data: {
+    getItemProps: (opts: UseComboboxGetItemPropsOptions<Choice>) => any;
+    highlightedIndex: number;
+    inputValue: string;
+  }) => React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  styles?: React.CSSProperties;
+  choices: Choice[];
+  label?: string;
+  loading?: boolean;
+  popperPlacement?: PopperPlacementType;
+  onChange?: (event: SyntheticChangeEvent) => void;
+  onInputChange?: (value: string) => void;
+  onScrollToBottom?: () => void;
+}
+
+export const Autocomplete: React.FC<AutocompleteProps> = ({
+  choices,
+  children,
+  loading,
+  name,
+  InputProps,
+  popperPlacement = "bottom-start",
+  onChange,
+  onInputChange,
+  onScrollToBottom,
+  ...rest
+}) => {
+  const classes = useStyles();
+  const anchor = React.useRef<HTMLDivElement>();
+  const input = React.useRef<HTMLInputElement>();
+
+  const {
+    closeMenu,
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    circularNavigation: false,
+    defaultHighlightedIndex: 0,
+    items: choices,
+    onInputValueChange: ({ inputValue }) => {
+      if (onInputChange) {
+        onInputChange(inputValue ?? "");
+      }
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      closeMenu();
+      if (onChange) {
+        onChange({
+          target: {
+            name: name ?? "",
+            value: selectedItem?.value ?? "",
+          },
+        });
+      }
+    },
+    itemToString: (choice) => choice?.label ?? "",
+    onIsOpenChange: ({ selectedItem, inputValue, isOpen }) => {
+      if (!isOpen && selectedItem && selectedItem?.label !== inputValue) {
+        setInputValue(selectedItem!.label);
+      }
+    },
+  });
+
+  const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
+
+  React.useEffect(() => {
+    if (
+      isOpen &&
+      onScrollToBottom &&
+      dropdownRef &&
+      isScrolledToBottom(dropdownRef, position!, 5)
+    ) {
+      onScrollToBottom();
+    }
+  }, [position?.y, dropdownRef]);
+
+  const labelProps = getLabelProps();
+  const { ref: comboboxDownshiftRef, ...comboboxProps } = getComboboxProps();
+  const { ref: downshiftRef, ...inputProps } = getInputProps({
+    onFocus: () => {
+      if (!isOpen) {
+        input.current?.select();
+        openMenu();
+      }
+    },
+  });
+  const menuProps = getMenuProps({}, { suppressRefError: true });
+
+  React.useEffect(() => {
+    if (
+      isOpen &&
+      onScrollToBottom &&
+      dropdownRef &&
+      isScrolledToBottom(dropdownRef, position!, 5)
+    ) {
+      onScrollToBottom();
+    }
+  }, [position?.y, dropdownRef]);
+
+  return (
+    <>
+      <TextField
+        {...rest}
+        {...comboboxProps}
+        name={name}
+        InputLabelProps={labelProps}
+        ref={mergeRefs(comboboxDownshiftRef, anchor)}
+        InputProps={{
+          ...InputProps,
+          ...inputProps,
+          endAdornment: (
+            <>
+              {loading && (
+                <div className={classes.loader}>
+                  <CircularProgress size={24} />
+                </div>
+              )}
+              <ChevronIcon
+                {...getToggleButtonProps()}
+                type="button"
+                aria-label="toggle menu"
+              />
+            </>
+          ),
+        }}
+        inputProps={{ ref: mergeRefs(downshiftRef, input) }}
+      />
+      <Popper
+        className={clsx(classes.popper, menuProps.className)}
+        open={isOpen}
+        anchorEl={input.current}
+        transition
+        placement={popperPlacement}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "left top" : "left bottom",
+            }}
+          >
+            <Paper
+              className={classes.dropdown}
+              elevation={8}
+              style={{ width: anchor.current?.clientWidth }}
+              {...menuProps}
+              ref={mergeRefs(setAnchor, menuProps.ref)}
+            >
+              {children({
+                highlightedIndex,
+                getItemProps,
+                inputValue,
+              })}
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};

package/src/Autocomplete/fixtures.ts

@@ -0,0 +1,122 @@
+export const choices = [
+  {
+    label: "Hazel, Direct Integration Producer",
+    value: "hazel, direct integration producer",
+  },
+  {
+    label: "Audra, District Functionality Facilitator",
+    value: "audra, district functionality facilitator",
+  },
+  {
+    label: "Emilie, Product Integration Assistant",
+    value: "emilie, product integration assistant",
+  },
+  {
+    label: "Kyla, Central Interactions Director",
+    value: "kyla, central interactions director",
+  },
+  {
+    label: "Vida, Senior Usability Producer",
+    value: "vida, senior usability producer",
+  },
+  {
+    label: "Lonie, Chief Infrastructure Director",
+    value: "lonie, chief infrastructure director",
+  },
+  {
+    label: "Zola, Lead Operations Producer",
+    value: "zola, lead operations producer",
+  },
+  {
+    label: "Angel, District Operations Orchestrator",
+    value: "angel, district operations orchestrator",
+  },
+  {
+    label: "Glenda, Lead Accountability Technician",
+    value: "glenda, lead accountability technician",
+  },
+  {
+    label: "Kayley, National Web Facilitator",
+    value: "kayley, national web facilitator",
+  },
+  {
+    label: "Kali, National Configuration Planner",
+    value: "kali, national configuration planner",
+  },
+  {
+    label: "Lilian, Internal Branding Planner",
+    value: "lilian, internal branding planner",
+  },
+  {
+    label: "Lamar, Dynamic Integration Executive",
+    value: "lamar, dynamic integration executive",
+  },
+  {
+    label: "Leonel, Central Brand Strategist",
+    value: "leonel, central brand strategist",
+  },
+  {
+    label: "Broderick, Chief Division Liaison",
+    value: "broderick, chief division liaison",
+  },
+  {
+    label: "Kavon, Future Marketing Representative",
+    value: "kavon, future marketing representative",
+  },
+  {
+    label: "Sydnee, Corporate Marketing Liaison",
+    value: "sydnee, corporate marketing liaison",
+  },
+  {
+    label: "Jett, Future Data Specialist",
+    value: "jett, future data specialist",
+  },
+  {
+    label: "Theresia, International Tactics Assistant",
+    value: "theresia, international tactics assistant",
+  },
+  {
+    label: "Cesar, Direct Mobility Director",
+    value: "cesar, direct mobility director",
+  },
+  {
+    label: "Madonna, Investor Assurance Executive",
+    value: "madonna, investor assurance executive",
+  },
+  {
+    label: "Ima, Internal Research Facilitator",
+    value: "ima, internal research facilitator",
+  },
+  {
+    label: "Joanne, Investor Identity Coordinator",
+    value: "joanne, investor identity coordinator",
+  },
+  {
+    label: "Gavin, Future Web Assistant",
+    value: "gavin, future web assistant",
+  },
+  {
+    label: "Maverick, Internal Optimization Assistant",
+    value: "maverick, internal optimization assistant",
+  },
+  {
+    label: "Hudson, Regional Branding Representative",
+    value: "hudson, regional branding representative",
+  },
+  {
+    label: "Brooklyn, Human Paradigm Producer",
+    value: "brooklyn, human paradigm producer",
+  },
+  {
+    label: "Gussie, Future Configuration Supervisor",
+    value: "gussie, future configuration supervisor",
+  },
+  {
+    label: "Michel, Corporate Tactics Orchestrator",
+    value: "michel, corporate tactics orchestrator",
+  },
+  {
+    label: "Maxime, Customer Mobility Analyst",
+    value: "maxime, customer mobility analyst",
+  },
+];

package/src/Autocomplete/index.ts

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

package/src/Autocomplete/styles.ts

@@ -0,0 +1,22 @@
+import { zIndex } from "../consts";
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    dropdown: {
+      maxHeight: 220,
+      overflow: "scroll",
+    },
+    loader: {
+      marginRight: theme.spacing(1),
+    },
+    popper: {
+      marginTop: theme.spacing(1),
+      // Places popper above dialogs
+      zIndex: zIndex.popper,
+    },
+  }),
+  { name: "Autocomplete" }
+);
+
+export default useStyles;

package/src/Backlink/Backlink.tsx

@@ -8,18 +8,18 @@ import { useTheme } from "../theme";
 import { useBacklink } from "./context";
 import useStyles from "./styles";
 
-export interface AppHeaderProps extends LayoutButtonProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onClick: () => void;
-}
+export type BacklinkProps<T extends React.ElementType> =
+  LayoutButtonProps<T> & {
+    children: React.ReactNode;
+    disabled?: boolean;
+  };
 
-export const Backlink: React.FC<AppHeaderProps> = ({
+export const Backlink = <T extends React.ElementType>({
   children,
   disabled,
   onClick,
   ...props
-}) => {
+}: BacklinkProps<T>) => {
   const { ssr } = useTheme();
   const classes = useStyles();
   const anchor = useBacklink();

package/src/Backlink/styles.ts

@@ -15,7 +15,7 @@ const useStyles = makeStyles(
     root: {
       alignItems: "center",
       cursor: "pointer",
-      display: "flex",
+      display: "inline-flex",
       marginTop: theme.spacing(0.5),
       [theme.breakpoints.down("sm")]: {
         margin: theme.spacing(4, 0, 0, 0),

package/src/Chip/styles.ts

@@ -3,12 +3,13 @@ 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: `3px ${theme.spacing(2)}`,
+      padding: theme.spacing(0, 2),
       gap: "4px",
       lineHeight: 1,
       minHeight: theme.spacing(4),

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>
   );
 };