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

package/src/DialogHeader/DialogHeader.tsx

@@ -1,41 +0,0 @@
-import DialogTitle from "@material-ui/core/DialogTitle";
-import Typography, { TypographyProps } from "@material-ui/core/Typography";
-import React from "react";
-
-import { CloseIcon } from "../icons";
-import { useStyles } from "./styles";
-
-export interface DialogHeaderProps extends TypographyProps<"h5"> {
-  onClose: () => void;
-}
-
-export const DialogHeader: React.FC<DialogHeaderProps> = ({
-  onClose,
-  children,
-  ...props
-}) => {
-  const classes = useStyles();
-
-  return (
-    <>
-      <DialogTitle
-        className={classes.wrapper}
-        id="alert-dialog-title"
-        disableTypography
-      >
-        <Typography variant="h5" component="h5" {...props}>
-          {children}
-        </Typography>
-        <button
-          className={classes.button}
-          onClick={onClose}
-          aria-label="Close modal"
-          data-test-id="close"
-        >
-          <CloseIcon />
-        </button>
-      </DialogTitle>
-    </>
-  );
-};
-DialogHeader.displayName = "DialogHeader";

package/src/DialogHeader/index.ts

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

package/src/DialogHeader/styles.ts

@@ -1,24 +0,0 @@
-import { makeStyles } from "../theme";
-
-export const useStyles = makeStyles(
-  (theme) => ({
-    button: {
-      "&:hover, &:focus": {
-        color: theme.palette.saleor.active[1],
-      },
-      appearance: "none",
-      border: "none",
-      background: "transparent",
-      color: theme.palette.saleor.main[3],
-      cursor: "pointer",
-      padding: 0,
-      outline: 0,
-    },
-    wrapper: {
-      alignItems: "center",
-      display: "flex",
-      justifyContent: "space-between",
-    },
-  }),
-  { name: "DialogHeader" }
-);

package/src/DialogTable/DialogTable.tsx

@@ -1,23 +0,0 @@
-import Table, { TableProps } from "@material-ui/core/Table";
-import React from "react";
-
-import { useStyles } from "./styles";
-
-export interface DialogTableProps extends TableProps {
-  innerRef?: React.Ref<HTMLTableElement>;
-}
-
-export const DialogTable = React.forwardRef<HTMLDivElement, DialogTableProps>(
-  ({ children, innerRef, ...props }, ref) => {
-    const classes = useStyles();
-
-    return (
-      <div className={classes.wrapper} ref={ref}>
-        <Table ref={innerRef} {...props}>
-          {children}
-        </Table>
-      </div>
-    );
-  }
-);
-DialogTable.displayName = "DialogTable";

package/src/DialogTable/index.ts

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

package/src/DialogTable/styles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from "../theme";
-
-export const useStyles = makeStyles(
-  () => ({
-    wrapper: {
-      overflowY: "scroll",
-      maxHeight: 500,
-    },
-  }),
-  { name: "DialogTable" }
-);

package/src/Filter/Filter.tsx

@@ -1,160 +0,0 @@
-import MenuItem from "@material-ui/core/MenuItem";
-import Select, { SelectProps } from "@material-ui/core/Select";
-import Typography from "@material-ui/core/Typography";
-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";
-import useStyles from "./styles";
-import {
-  EventTarget,
-  FilterDetailedOptions,
-  FilterLabels,
-  FilterOptions,
-  FilterType,
-} from "./types";
-import * as utils from "./utils";
-
-export type FilterProps = FilterOptions & FilterDetailedOptions;
-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;
-
-    return () => unregister(name);
-  }, []);
-
-  React.useEffect(() => {
-    if (
-      registered.current &&
-      options.choices !== undefined &&
-      filter &&
-      difference(options.choices, filter!.options.choices!).length
-    ) {
-      set(name, {
-        options: {
-          ...options,
-          choices: options.choices,
-        },
-      });
-    }
-  }, [options.choices]);
-
-  return null;
-};
-
-export interface FilterRowProps {
-  first: boolean;
-  name: string;
-  labels: FilterLabels;
-}
-export const FilterRow: React.FC<FilterRowProps> = ({
-  first,
-  name,
-  labels,
-}) => {
-  const classes = useStyles();
-  const { filters, toggle, toggleRange, swap } = useFilters();
-
-  const filter = filters.find((filter) => filter.name === name);
-
-  if (!filter?.active) {
-    return null;
-  }
-
-  const availableFilters = utils.getAvailableFilters(filters);
-  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>>) => {
-    const targetFilterName = event.target.value as string;
-
-    swap(name, targetFilterName);
-  };
-
-  const selectProps: SelectProps = {
-    classes: {
-      selectMenu: classes.filterInputInner,
-    },
-    variant: "outlined",
-  };
-
-  return (
-    <div className={classes.filter}>
-      <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} />
-      <div className={classes.filterDeleteContainer}>
-        <IconButton
-          variant="secondary"
-          className={classes.filterDelete}
-          onClick={() => toggle(name)}
-        >
-          <DeleteIcon />
-        </IconButton>
-      </div>
-    </div>
-  );
-};

package/src/Filter/FilterBar.tsx

@@ -1,135 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import CardHeader from "@material-ui/core/CardHeader";
-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";
-import useStyles from "./styles";
-import {
-  FilterData,
-  FilterDetailedOptions,
-  FilterInput,
-  FilterLabels,
-  OnFilterChangeOpts,
-} from "./types";
-import * as utils from "./utils";
-
-export interface FilterBarProps {
-  initial?: FilterInput[];
-  labels: Record<"header" | "addButton", string> &
-    FilterMenuLabels &
-    FilterLabels;
-  onChange: (filterData: FilterData[]) => void;
-  onClose: () => void;
-}
-
-export const FilterBar: React.FC<FilterBarProps> = React.forwardRef(
-  ({ children, initial = [], labels, onChange: changeCb, onClose }, ref) => {
-    const classes = useStyles();
-    const [filterData, setFilterData] = React.useState<FilterData[]>([]);
-    const [menuOpen, setMenuOpen] = React.useState(false);
-    const button = React.useRef(null);
-
-    utils.validate(filterData);
-
-    const register = (
-      name: string,
-      label: string,
-      options: FilterDetailedOptions
-    ) =>
-      setFilterData((fd) => utils.register(fd, name, label, initial, options));
-    const onChange = (
-      name: string,
-      value: string | string[],
-      opts?: OnFilterChangeOpts
-    ) => setFilterData((fd) => utils.change(fd, name, value, opts));
-    const toggle = (name: string) =>
-      setFilterData((fd) => utils.toggle(fd, name));
-    const toggleRange = (name: string) =>
-      setFilterData((fd) => utils.toggleRange(fd, name));
-    const unregister = (name: string) =>
-      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))
-      );
-    const swap = (previousFilterName: string, nextFilterName: string) =>
-      setFilterData((fd) => utils.swap(fd, previousFilterName, nextFilterName));
-
-    const availableFilters = utils.getAvailableFilters(filterData);
-
-    React.useEffect(
-      () => changeCb(utils.getActiveFilters(filterData)),
-      [filterData]
-    );
-
-    return (
-      <FilterContext.Provider
-        value={{
-          filters: filterData,
-          register,
-          set,
-          toggle,
-          toggleRange,
-          unregister,
-          swap,
-          onChange,
-        }}
-      >
-        {children}
-        <Card className={classes.bar} ref={ref} elevation={8}>
-          <CardHeader
-            title={labels.header}
-            action={
-              <IconButton variant="secondary" onClick={onClose}>
-                <CloseIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <div>
-              {utils
-                .getActiveFilters(filterData)
-                .sort((a, b) => (a.sortIndex > b.sortIndex ? 1 : -1))
-                .map((filter, filterIndex) => (
-                  <FilterRow
-                    key={filter.name}
-                    first={filterIndex === 0}
-                    labels={labels}
-                    name={filter.name}
-                  />
-                ))}
-            </div>
-            {!!availableFilters.length && (
-              <>
-                <Button
-                  className={classes.barAddBtn}
-                  color="text"
-                  variant="secondary"
-                  ref={button}
-                  onClick={() => setMenuOpen(true)}
-                >
-                  {labels.addButton}
-                  <PlusIcon />
-                </Button>
-              </>
-            )}
-            <FilterMenu
-              anchorEl={button.current}
-              labels={labels}
-              open={menuOpen}
-              onClose={() => setMenuOpen(false)}
-            />
-          </CardContent>
-        </Card>
-      </FilterContext.Provider>
-    );
-  }
-);
-FilterBar.displayName = "FilterBar";
-export default FilterBar;

package/src/Filter/FilterContent.tsx

@@ -1,40 +0,0 @@
-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";
-import { FilterData, FilterLabels, FilterType } from "./types";
-
-export interface FilterContentProps {
-  filter: FilterData;
-  labels: FilterLabels;
-}
-
-export const FilterContent: React.FC<FilterContentProps> = ({
-  filter,
-  labels,
-}) => {
-  const { options, range } = filter;
-  const { type, multiple } = options;
-
-  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} />;
-    }
-
-    return <SelectFilterField filter={filter} />;
-  } else if (type === FilterType.Range && range) {
-    return <RangeFilterField filter={filter} labels={labels} />;
-  }
-
-  return <TextFilterField filter={filter} />;
-};
-FilterContent.displayName = "FilterContent";

package/src/Filter/FilterField/AutocompleteFilterField.tsx

@@ -1,61 +0,0 @@
-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,78 +0,0 @@
-import Checkbox from "@material-ui/core/Checkbox";
-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";
-
-export interface FilterContentProps {
-  filter: FilterData;
-}
-
-export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
-  filter,
-}) => {
-  const classes = useStyles();
-  const { onChange } = useFilters();
-  const [displayValues] = React.useState(
-    filter.options.displayValues || filter.options.choices
-  );
-
-  const { name, options } = filter;
-  const { choices } = options;
-
-  const handleChoiceChange = (event: React.ChangeEvent<EventTarget>) =>
-    onChange(name, event.target.value as string);
-
-  return (
-    <Select
-      className={classes.filterValue}
-      classes={{
-        root: classes.filterMultipleValueInputInner,
-      }}
-      multiple
-      variant="outlined"
-      onChange={handleChoiceChange}
-      value={filter.values}
-      renderValue={(values) => {
-        const typedValues = values as string[];
-
-        return (
-          <div className={classes.filterChipContainer}>
-            {typedValues.map((value) => (
-              <Chip className={classes.filterChip} key={value}>
-                {displayValues?.find((dv) => dv.value === value)?.label ??
-                  value}
-              </Chip>
-            ))}
-          </div>
-        );
-      }}
-    >
-      {choices!.map((choice) => {
-        const active = filter.values!.includes(choice.value);
-
-        return (
-          <MenuItem
-            key={choice.value}
-            className={clsx({
-              [classes.filterValueSelected]: active,
-            })}
-            value={choice.value}
-          >
-            <Checkbox
-              checked={active}
-              className={classes.filterValueCheckbox}
-            />
-            {choice.label}
-          </MenuItem>
-        );
-      })}
-    </Select>
-  );
-};
-MultipleSelectFilterField.displayName = "MultipleSelectFilterField";

package/src/Filter/FilterField/MultipleValueAutocompleteFilterField.tsx

@@ -1,61 +0,0 @@
-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/FilterField/RangeFilterField.tsx

@@ -1,51 +0,0 @@
-import TextField, { TextFieldProps } from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import clsx from "clsx";
-import React from "react";
-
-import { useFilters } from "../context";
-import useStyles from "../styles";
-import { EventTarget, FilterData, FilterLabels } from "../types";
-
-export interface FilterContentProps {
-  filter: FilterData;
-  labels: FilterLabels;
-}
-
-export const RangeFilterField: React.FC<FilterContentProps> = ({
-  filter,
-  labels,
-}) => {
-  const classes = useStyles();
-  const { onChange } = useFilters();
-
-  const { name } = filter;
-
-  const handleChange = (event: React.ChangeEvent<EventTarget<string>>) =>
-    onChange(name, event.target.value, {
-      rangePart: event.target.name as "min" | "max",
-    });
-
-  const props: Partial<TextFieldProps> = {
-    ...filter.options.InputProps,
-    InputProps: {
-      classes: {
-        input: classes.filterInputInner,
-      },
-      type: "number",
-      ...filter.options.InputProps?.InputProps,
-    },
-    onChange: handleChange,
-  };
-
-  return (
-    <div
-      className={clsx(classes.filterValue, classes.filterRangeValueContainer)}
-    >
-      <TextField {...props} name="min" value={filter.values![0]} />
-      <Typography className={classes.filterRangeLabel}>{labels.and}</Typography>
-      <TextField {...props} name="max" value={filter.values![1]} />
-    </div>
-  );
-};
-RangeFilterField.displayName = "RangeFilterField";