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

package/src/Filter/FilterField/SelectFilterField.tsx

@@ -1,41 +0,0 @@
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-import React from "react";
-
-import { useFilters } from "../context";
-import useStyles from "../styles";
-import { EventTarget, FilterData } from "../types";
-
-export interface FilterContentProps {
-  filter: FilterData;
-}
-
-export const SelectFilterField: React.FC<FilterContentProps> = ({ filter }) => {
-  const classes = useStyles();
-  const { onChange } = useFilters();
-
-  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={{
-        selectMenu: classes.filterInputInner,
-      }}
-      variant="outlined"
-      onChange={handleChoiceChange}
-      value={filter.value}
-    >
-      {choices!.map((choice) => (
-        <MenuItem key={choice.value} value={choice.value}>
-          {choice.label}
-        </MenuItem>
-      ))}
-    </Select>
-  );
-};
-SelectFilterField.displayName = "SelectFilterField";

package/src/Filter/FilterField/TextFilterField.tsx

@@ -1,36 +0,0 @@
-import TextField from "@material-ui/core/TextField";
-import React from "react";
-
-import { useFilters } from "../context";
-import useStyles from "../styles";
-import { EventTarget, FilterData } from "../types";
-
-export interface FilterContentProps {
-  filter: FilterData;
-}
-
-export const TextFilterField: React.FC<FilterContentProps> = ({ filter }) => {
-  const classes = useStyles();
-  const { onChange } = useFilters();
-
-  const { name } = filter;
-
-  const handleChange = (event: React.ChangeEvent<EventTarget<string>>) =>
-    onChange(name, event.target.value);
-
-  return (
-    <TextField
-      {...filter.options.InputProps}
-      className={classes.filterValue}
-      InputProps={{
-        ...filter.options.InputProps?.InputProps,
-        classes: {
-          input: classes.filterInputInner,
-        },
-      }}
-      onChange={handleChange}
-      value={filter.value}
-    />
-  );
-};
-TextFilterField.displayName = "TextFilterField";

package/src/Filter/FilterMenu.tsx

@@ -1,66 +0,0 @@
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import MenuItem from "@material-ui/core/MenuItem";
-import Paper from "@material-ui/core/Paper";
-import Popper from "@material-ui/core/Popper";
-import Typography from "@material-ui/core/Typography";
-import React from "react";
-
-import { useFilters } from "./context";
-import useStyles from "./styles";
-import { getAvailableFilters } from "./utils";
-
-export type FilterMenuLabels = Record<"header", string>;
-export interface FilterMenuProps {
-  anchorEl: HTMLElement | null;
-  labels: FilterMenuLabels;
-  open: boolean;
-  onClose: () => void;
-}
-
-export const FilterMenu: React.FC<FilterMenuProps> = ({
-  anchorEl,
-  labels,
-  open,
-  onClose,
-}) => {
-  const classes = useStyles();
-  const { filters, toggle } = useFilters();
-
-  const availableFilters = getAvailableFilters(filters);
-  const handleFilterClick = (filterName: string) => {
-    toggle(filterName);
-    onClose();
-  };
-
-  return (
-    <Popper
-      anchorEl={anchorEl}
-      open={open}
-      disablePortal
-      placement="bottom-start"
-    >
-      <ClickAwayListener onClickAway={onClose}>
-        <Paper elevation={20} className={classes.menuPaper}>
-          <div className={classes.menuContent}>
-            <Typography
-              className={classes.menuHeader}
-              color="textSecondary"
-              variant="caption"
-            >
-              {labels.header}
-            </Typography>
-          </div>
-          {availableFilters.map((filter) => (
-            <MenuItem
-              key={filter.name}
-              onClick={() => handleFilterClick(filter.name)}
-            >
-              {filter.label}
-            </MenuItem>
-          ))}
-        </Paper>
-      </ClickAwayListener>
-    </Popper>
-  );
-};
-FilterMenu.displayName = "FilterMenu";

package/src/Filter/context.tsx

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

package/src/Filter/index.ts

@@ -1,4 +0,0 @@
-export * from "./Filter";
-export * from "./FilterBar";
-export * from "./types";
-export * from "./utils";

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

@@ -1,143 +0,0 @@
-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";
-import { labels } from "./labels";
-
-export const Default: Story = () => (
-  <FilterBar
-    labels={labels}
-    onChange={debounce((fd) => console.log(fd), 1000)}
-    onClose={() => undefined}
-  >
-    <Filter
-      name="category"
-      label="Category"
-      type={FilterType.Text}
-      InputProps={{
-        placeholder: "Search by name",
-      }}
-    />
-    <Filter
-      name="availability"
-      label="Availability"
-      type={FilterType.Choice}
-      choices={[
-        { label: "Available", value: "yes" },
-        { label: "Not Available", value: "no" },
-      ]}
-    />
-    <Filter name="name" label="Name" type={FilterType.Text} />
-    <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="price"
-      label="Price"
-      type={FilterType.Range}
-      InputProps={{
-        InputProps: {
-          endAdornment: "USD",
-        },
-      }}
-    />
-  </FilterBar>
-);
-
-const attributeGroup = {
-  label: "Attribute",
-  name: "attribute",
-};
-export const WithInitialState: Story = () => (
-  <FilterBar
-    labels={labels}
-    onChange={debounce((fd) => console.log(fd), 1000)}
-    initial={[
-      {
-        name: "name",
-        value: "Lorem Ipsum",
-        values: null,
-      },
-      {
-        name: "availability",
-        value: "no",
-        values: null,
-      },
-      {
-        name: "status",
-        values: ["published"],
-        value: 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="availability"
-      label="Availability"
-      type={FilterType.Choice}
-      choices={[
-        { label: "Available", value: "yes" },
-        { 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 / Dummy",
-} as Meta;

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

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

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

package/src/Filter/styles.ts

@@ -1,111 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    menuContent: {
-      minWidth: 220,
-      padding: theme.spacing(2),
-    },
-    menuHeader: {
-      textTransform: "uppercase",
-    },
-    menuPaper: {
-      borderRadius: 0,
-    },
-
-    filter: {
-      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,
-      color: theme.palette.primary.contrastText,
-    },
-    filterChipContainer: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: theme.spacing(1),
-    },
-    filterDeleteContainer: {
-      alignItems: "center",
-      columnGap: theme.spacing(2),
-      display: "flex",
-      height: 51,
-      marginLeft: "auto",
-    },
-    filterDelete: {
-      position: "relative",
-      left: 6,
-    },
-    filterName: {
-      width: 180,
-    },
-    filterValue: {
-      "& .MuiSelect-root": {
-        boxSizing: "border-box",
-      },
-      boxSizing: "border-box",
-      minHeight: 51,
-      width: "100%",
-    },
-    filterRange: {
-      width: 115,
-    },
-    filterInputInner: {
-      "&&": {
-        padding: theme.spacing(2),
-      },
-    },
-    filterMultipleValueInputInner: {
-      "&&": {
-        minHeight: 51,
-        padding: theme.spacing(1),
-        paddingRight: theme.spacing(8),
-      },
-    },
-    filterConjunction: {
-      minWidth: 80,
-    },
-    filterValueCheckbox: {
-      paddingLeft: 0,
-    },
-    filterValueSelected: {
-      color: theme.palette.primary.main,
-      fontWeight: 500,
-    },
-    filterRangeLabel: {
-      margin: theme.spacing(0, 1),
-    },
-    filterRangeValueContainer: {
-      display: "flex",
-      alignItems: "center",
-    },
-
-    bar: {
-      minWidth: 100,
-    },
-    barAddBtn: {
-      "& svg": {
-        marginLeft: theme.spacing(1),
-        marginRight: 0,
-      },
-    },
-
-    selectPaper: {
-      borderRadius: 0,
-      marginTop: `calc(48px + ${theme.spacing(1)})`,
-    },
-  }),
-  {
-    name: "Filter",
-  }
-);
-export default useStyles;

package/src/Filter/types.ts

@@ -1,74 +0,0 @@
-import { TextFieldProps } from "@material-ui/core/TextField";
-
-export enum FilterType {
-  Text,
-  Choice,
-  Range,
-  Autocomplete,
-}
-
-export type Choice = Record<"label" | "value", string>;
-
-export interface FilterDetailedOptions {
-  type: FilterType;
-  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;
-  label: string;
-}
-
-export interface FilterValues {
-  value: string | null;
-  values: string[] | null;
-}
-
-export interface FilterState extends FilterValues {
-  active: boolean;
-  range: boolean;
-  sortIndex: number;
-}
-
-export interface FilterData extends FilterOptions, FilterState {
-  options: FilterDetailedOptions;
-}
-
-export interface FilterInput extends FilterValues {
-  name: string;
-}
-
-export interface OnFilterChangeOpts {
-  rangePart?: "min" | "max";
-}
-
-export interface FilterContextType {
-  filters: FilterData[];
-  set: (name: string, filter: Partial<FilterData>) => void;
-  register: (
-    name: string,
-    label: string,
-    options: FilterDetailedOptions
-  ) => void;
-  toggle: (name: string) => void;
-  toggleRange: (name: string) => void;
-  unregister: (name: string) => void;
-  swap: (previousFilterName: string, nextFilterName: string) => void;
-  onChange: (
-    name: string,
-    value: string | string[],
-    opts?: OnFilterChangeOpts
-  ) => void;
-}
-
-export type FilterLabels = Record<"where" | "and" | "is" | "range", string>;
-
-export interface EventTarget<T = unknown> {
-  name?: string;
-  value: T;
-}