@saleor/macaw-ui 0.3.2 → 0.5.0

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

package/src/IconButton/IconButton.tsx

@@ -5,6 +5,7 @@ import MuiIconButton, {
 import clsx from "clsx";
 import React from "react";
 
+import { UserInteraction } from "../../types/utils";
 import useStyles from "./styles";
 
 export type IconButtonProps<T extends React.ElementType = "button"> = Omit<
@@ -13,12 +14,20 @@ export type IconButtonProps<T extends React.ElementType = "button"> = Omit<
 > & {
   error?: boolean;
   hoverOutline?: boolean;
+  state?: UserInteraction;
   variant?: "primary" | "secondary";
 };
 
 export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
   (
-    { className, error, hoverOutline = true, variant = "primary", ...props },
+    {
+      className,
+      error,
+      hoverOutline = true,
+      variant = "primary",
+      state = "default",
+      ...props
+    },
     ref
   ) => {
     const classes = useStyles();
@@ -29,6 +38,10 @@ export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
           ref={ref}
           className={clsx(classes.secondary, className, {
             [classes.hoverOutline]: hoverOutline && !props.disabled,
+            [classes.hover]: state === "hover" && !props.disabled,
+            [classes.active]: state === "active" && !props.disabled,
+            [classes.error]: error,
+            [classes.disabledError]: error && props.disabled,
           })}
           disableRipple
           {...props}
@@ -39,7 +52,9 @@ export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
     return (
       <MuiIconButton
         ref={ref}
-        className={clsx(className, {
+        className={clsx(classes.primary, className, {
+          [classes.hover]: state === "hover" && !props.disabled,
+          [classes.active]: state === "active" && !props.disabled,
           [classes.error]: error,
           [classes.disabledError]: error && props.disabled,
         })}

package/src/IconButton/partials.ts

@@ -3,7 +3,7 @@ import type { SaleorThemeColors } from "..";
 // Extracting it to separate file to avoid circular imports
 export function getSecondaryButtonStyles(colors: SaleorThemeColors) {
   return {
-    "&:hover, &.Mui-focusVisible": {
+    "&:hover, &.Mui-focusVisible, &$hover, &$active": {
       color: colors.active[1],
     },
     "&:disabled": {

package/src/IconButton/styles.ts

@@ -3,17 +3,49 @@ import { getSecondaryButtonStyles } from "./partials";
 
 const useStyles = makeStyles(
   (theme) => ({
+    primary: {
+      "&:hover, &.Mui-focusVisible, &$hover, &$active": {
+        color: theme.palette.saleor.active[1],
+        borderColor: theme.palette.saleor.active[1],
+      },
+      "&:active, &$active": {
+        background: theme.palette.saleor.active[5],
+      },
+    },
+    secondary: getSecondaryButtonStyles(theme.palette.saleor),
+    hoverOutline: {
+      "&$secondary": {
+        "&:hover, &:focus-visible, &$hover": {
+          background: theme.palette.saleor.active[5],
+          borderColor: theme.palette.saleor.active[4],
+        },
+        "&:active, &$active": {
+          background: theme.palette.saleor.active[4],
+        },
+      },
+    },
     error: {
-      "&&": {
-        "&:hover, &.Mui-focusVisible": {
+      "&&&": {
+        "&:hover, &.Mui-focusVisible, &$hover": {
           borderColor: theme.palette.saleor.errorAction[1],
           color: theme.palette.saleor.errorAction[1],
         },
-        "&:active": {
+        "&:active, &$active": {
           background: theme.palette.saleor.errorAction[5],
+          color: theme.palette.saleor.errorAction[1],
+          borderColor: theme.palette.saleor.errorAction[2],
+        },
+        "&$secondary": {
+          "&:hover, &.Mui-focusVisible, &$hover": {
+            background: theme.palette.saleor.errorAction[5],
+          },
+          "&:active, &$active": {
+            background: theme.palette.saleor.errorAction[4],
+            color: theme.palette.saleor.errorAction[1],
+          },
         },
       },
-      borderColor: theme.palette.saleor.errorAction[4],
+
       color: theme.palette.saleor.errorAction[2],
     },
     disabledError: {
@@ -22,18 +54,8 @@ const useStyles = makeStyles(
         color: theme.palette.saleor.errorAction[5],
       },
     },
-    secondary: getSecondaryButtonStyles(theme.palette.saleor),
-    hoverOutline: {
-      "&$secondary": {
-        "&:hover,&:focus-visible": {
-          background: theme.palette.saleor.active[5],
-          borderColor: theme.palette.saleor.active[4],
-        },
-        "&:active": {
-          background: theme.palette.saleor.active[4],
-        },
-      },
-    },
+    active: {},
+    hover: {},
   }),
   {
     name: "IconButton",

package/src/MultipleValueAutocomplete/MultipleValueAutocomplete.stories.tsx

@@ -0,0 +1,76 @@
+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 { choices } from "./fixtures";
+import { MultipleValueAutocomplete } from "./MultipleValueAutocomplete";
+
+export const Default: Story = () => {
+  const { results, search } = useMockAutocomplete(choices);
+
+  return (
+    <MultipleValueAutocomplete
+      fullWidth
+      choices={results}
+      label="Employees of the month"
+      onInputChange={search}
+      onChange={console.log}
+    >
+      {({ choices, getItemProps }) =>
+        choices.map((choice, choiceIndex) => (
+          <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </MultipleValueAutocomplete>
+  );
+};
+
+export const Loading: Story = () => (
+  <MultipleValueAutocomplete
+    fullWidth
+    choices={[]}
+    label="Employees of the month"
+    loading
+  >
+    {({ choices, getItemProps }) =>
+      choices.map((choice, choiceIndex) => (
+        <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+          {choice.label}
+        </MenuItem>
+      ))
+    }
+  </MultipleValueAutocomplete>
+);
+
+export const WithInitialState: Story = () => {
+  const { results, search, more } = useMockAutocomplete(choices);
+
+  return (
+    <MultipleValueAutocomplete
+      fullWidth
+      choices={results}
+      label="Employees of the month"
+      onInputChange={search}
+      initialValue={[results[1], results[4]]}
+      onScrollToBottom={more}
+      onChange={console.log}
+    >
+      {({ choices, getItemProps }) =>
+        choices.map((choice, choiceIndex) => (
+          <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </MultipleValueAutocomplete>
+  );
+};
+
+export default {
+  decorators: [Decorator, GuideDecorator],
+  title: "Autocomplete / Multiple choices",
+} as Meta;