@saleor/macaw-ui 0.3.2 → 0.5.0

package/src/Sidebar/Sidebar.tsx

@@ -23,7 +23,9 @@ const useStyles = makeStyles(
       paddingBottom: theme.spacing(3),
     },
     logo: {
+      display: "block",
       margin: `36px 0 ${theme.spacing(3)} ${theme.spacing(2.5)}`,
+      color: "inherit",
     },
     root: {
       transition: "width 0.5s ease",
@@ -50,6 +52,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   menuItems,
   toolbar,
   onMenuItemClick,
+  logoHref,
+  linkComponent,
 }) => {
   const classes = useStyles({});
   const { value: isShrunkStr, setValue: setShrink } = useLocalStorage(
@@ -59,6 +63,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const isShrunk = isShrunkStr === "true";
   const { themeType } = useTheme();
 
+  const Link = linkComponent ?? "a";
+
   return (
     <div
       className={clsx(classes.root, {
@@ -66,18 +72,28 @@ export const Sidebar: React.FC<SidebarProps> = ({
       })}
     >
       <div className={classes.float}>
-        <div className={classes.logo}>
+        <Link href={logoHref} className={classes.logo}>
           {themeType === "dark" ? <LogoDark /> : <Logo />}
-        </div>
-        {menuItems.map((menuItem) => (
-          <MenuItem
-            activeId={activeId}
-            isMenuShrunk={isShrunk}
-            menuItem={menuItem}
-            onClick={onMenuItemClick}
-            key={menuItem.ariaLabel}
-          />
-        ))}
+        </Link>
+        {menuItems.map((menuItem) =>
+          linkComponent ? (
+            <MenuItem
+              activeId={activeId}
+              isMenuShrunk={isShrunk}
+              menuItem={menuItem}
+              key={menuItem.ariaLabel}
+              linkComponent={linkComponent}
+            />
+          ) : (
+            <MenuItem
+              activeId={activeId}
+              isMenuShrunk={isShrunk}
+              menuItem={menuItem}
+              onClick={onMenuItemClick}
+              key={menuItem.ariaLabel}
+            />
+          )
+        )}
         {toolbar && <div className={classes.toolbarContainer}>{toolbar}</div>}
         <ExpandButton
           className={classes.expandButton}

package/src/Sidebar/types.ts

@@ -8,11 +8,20 @@ export interface SidebarMenuItem {
   iconSrc?: string;
   url?: string;
   external?: boolean;
+  onClick?: () => void;
 }
 
+export type CustomLinkComponent = React.ForwardRefExoticComponent<{
+  href?: string;
+  onClick?: (...params: any) => void;
+  className?: string;
+}>;
+
 export interface BaseSidebarProps {
   className?: string;
   menuItems: SidebarMenuItem[];
   toolbar?: React.ReactNode;
   onMenuItemClick: (menuItem: SidebarMenuItem) => void;
+  linkComponent?: CustomLinkComponent;
+  logoHref?: string;
 }

package/src/Sidebar/utils.ts

@@ -0,0 +1,23 @@
+import { CustomLinkComponent, SidebarMenuItem } from "./types";
+
+export const getLinkProps = (menuItem: SidebarMenuItem) => {
+  if (menuItem.external) {
+    return { href: menuItem.url, target: "_blank" };
+  }
+  if (menuItem.url) {
+    return {
+      href: menuItem.url,
+    };
+  }
+  return {};
+};
+
+export const getLinkComponent = (
+  menuItem: SidebarMenuItem,
+  customComponent?: CustomLinkComponent
+) => {
+  if (menuItem.external) {
+    return "a";
+  }
+  return customComponent ?? "button";
+};

package/src/SidebarDrawer/MenuItemBtn.tsx

@@ -2,22 +2,24 @@ import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
 
-import { SidebarMenuItem } from "../Sidebar/types";
+import { CustomLinkComponent, SidebarMenuItem } from "../Sidebar/types";
+import { getLinkComponent, getLinkProps } from "../Sidebar/utils";
 import useStyles from "./styles";
 
 export interface MenuItemBtnProps {
   menuItem: SidebarMenuItem;
   onClick: (menuItem: SidebarMenuItem) => void;
+  linkComponent?: CustomLinkComponent;
 }
+
 export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
   menuItem,
   onClick,
+  linkComponent,
 }) => {
   const classes = useStyles();
-  const linkProps = menuItem.external
-    ? { href: menuItem.url, target: "_blank" }
-    : {};
-  const Component = menuItem.external ? "a" : "button";
+  const linkProps = getLinkProps(menuItem);
+  const Component = getLinkComponent(menuItem, linkComponent);
 
   return (
     <Component
@@ -30,7 +32,11 @@ export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
       {menuItem.iconSrc && (
         <SVG className={classes.icon} src={menuItem.iconSrc} />
       )}
-      <Typography aria-label={menuItem.ariaLabel} className={classes.label}>
+      <Typography
+        component="span"
+        aria-label={menuItem.ariaLabel}
+        className={classes.label}
+      >
         {menuItem.label}
       </Typography>
     </Component>

package/src/SidebarDrawer/SidebarDrawer.tsx

@@ -19,6 +19,8 @@ export type SideBarDrawerProps = BaseSidebarProps;
 export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
   menuItems,
   onMenuItemClick,
+  linkComponent,
+  logoHref,
 }) => {
   const [isOpened, setOpened] = React.useState(false);
   const classes = useStyles({});
@@ -43,6 +45,8 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
     });
   };
 
+  const Link = linkComponent ?? "a";
+
   return (
     <>
       <SquareButton onClick={() => setOpened(true)}>
@@ -67,9 +71,9 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
             })}
           >
             <div className={classes.content}>
-              <div className={classes.logo}>
+              <Link href={logoHref} className={classes.logo}>
                 {themeType === "dark" ? <LogoDark /> : <Logo />}
-              </div>
+              </Link>
               {menuItems.map((menuItem) => (
                 <MenuItemBtn
                   menuItem={menuItem}
@@ -78,6 +82,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
                       ? () => handleMenuItemWithChildrenClick(menuItem)
                       : handleMenuItemClick
                   }
+                  linkComponent={linkComponent}
                   key={menuItem.ariaLabel}
                 />
               ))}
@@ -104,6 +109,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
                         menuItem={subMenuItem}
                         onClick={handleMenuItemClick}
                         key={subMenuItem.ariaLabel}
+                        linkComponent={linkComponent}
                       />
                     );
                   }

package/src/SwitchSelector/SwitchSelector.stories.tsx

@@ -0,0 +1,63 @@
+import { Typography } from "@material-ui/core";
+import { Meta, Story } from "@storybook/react";
+import React, { useState } from "react";
+
+import { SwitchSelector } from "./SwitchSelector";
+import { SwitchSelectorButton } from "./SwitchSelectorButton";
+import useGuideStyles from "../utils/guideStyles";
+
+type SwitchSelectorButtonOptions = {
+  label: string | React.ReactNode;
+  value: string;
+};
+
+const INITIAL_TAB = "op2";
+
+const OPTIONS: SwitchSelectorButtonOptions[] = [
+  { label: "Option 1", value: "op1" },
+  { label: "Option 2", value: "op2" },
+  { label: "Option 3", value: "op3" },
+  { label: "Option 4", value: "op4" },
+];
+
+const DefaultStory: React.FC = () => {
+  const guideClasses = useGuideStyles();
+  const [active, setActive] = useState(INITIAL_TAB);
+
+  const currentTab = OPTIONS.find((option) => option.value === active);
+
+  return (
+    <div>
+      <Typography className={guideClasses.headline} variant="h1">
+        Switch Selector
+      </Typography>
+      <Typography className={guideClasses.paragraph} component="p">
+        Switch Selector has the functionality of a radio button group. It is
+        used to change an active tab to toggle context.
+      </Typography>
+      <div>
+        <SwitchSelector>
+          {OPTIONS.map(({ label, value }) => (
+            <SwitchSelectorButton
+              value={value}
+              onClick={() => setActive(value)}
+              activeTab={active}
+            >
+              {label}
+            </SwitchSelectorButton>
+          ))}
+        </SwitchSelector>
+
+        <div style={{ marginTop: "2em" }}>
+          <Typography>{`You have selected ${currentTab?.label}`}</Typography>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = () => <DefaultStory />;
+
+export default {
+  title: "Switch selector",
+} as Meta;

package/src/SwitchSelector/SwitchSelector.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { makeStyles } from "..";
+
+const useStyles = makeStyles((theme) => ({
+  switchSelector: {
+    border: `1px solid ${theme.palette.saleor.main[5]}`,
+    padding: "6px",
+    borderRadius: 4,
+    width: "fit-content",
+  },
+}));
+
+export const SwitchSelector: React.FC<{}> = ({ children }) => {
+  const classes = useStyles();
+
+  return <div className={classes.switchSelector}>{children}</div>;
+};
+
+SwitchSelector.displayName = "SwitchSelector";

package/src/SwitchSelector/SwitchSelectorButton.tsx

@@ -0,0 +1,59 @@
+import clsx from "clsx";
+import React from "react";
+import { Button, makeStyles } from "..";
+
+interface SwitchSelectorButtonProps {
+  value: string;
+  activeTab?: string;
+  onClick: () => void;
+}
+
+const useSwitchSelectorButtonStyles = makeStyles((theme) => ({
+  root: {
+    color: "#77738C",
+    background: "none",
+    borderColor: "transparent",
+    cursor: "pointer",
+
+    "&:not(:first-child)": {
+      marginLeft: theme.spacing(1),
+    },
+
+    "&:hover": {
+      backgroundColor: theme.palette.common.white,
+      color: theme.palette.saleor.active[1],
+      border: `1px solid ${theme.palette.saleor.active[1]}`,
+    },
+
+    "&:active": {
+      backgroundColor: theme.palette.saleor.active[5],
+    },
+  },
+  buttonSelected: {
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.saleor.active[1],
+  },
+}));
+
+export const SwitchSelectorButton: React.FC<SwitchSelectorButtonProps> = ({
+  onClick,
+  value,
+  children,
+  activeTab,
+}) => {
+  const classes = useSwitchSelectorButtonStyles();
+
+  return (
+    <Button
+      key={value}
+      onClick={onClick}
+      className={clsx(classes.root, {
+        [classes.buttonSelected]: value === activeTab,
+      })}
+    >
+      {children}
+    </Button>
+  );
+};
+
+SwitchSelectorButton.displayName = "SwitchSelectorButton";

package/src/SwitchSelector/index.ts

@@ -0,0 +1,2 @@
+export * from "./SwitchSelector";
+export * from "./SwitchSelectorButton";

package/src/index.tsx

@@ -32,4 +32,7 @@ export * from "./OffsettedList";
 export * from "./List";
 export * from "./NavigationCard";
 export * from "./Pill";
-export * from "./CircleIndicator"
+export * from "./CircleIndicator";
+export * from "./SwitchSelector";
+export * from "./Autocomplete";
+export * from "./MultipleValueAutocomplete";

package/src/theme/ThemeProvider.tsx

@@ -30,12 +30,17 @@ export interface ThemeProviderProps {
    * Saleor's Dashboard. Use with caution.
    */
   overrides?: Partial<Theme>;
+  /**
+   * Enables server side rendering.
+   */
+  ssr?: boolean;
 }
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   children,
   defaultTheme = "light",
   palettes = {},
   overrides = {},
+  ssr = false,
 }) => {
   const { value: themeTypeName, setValue: setThemeType } = useLocalStorage(
     localStorageKeys.theme,
@@ -66,6 +71,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     <ThemeContext.Provider
       value={{
         themeType,
+        ssr,
         sendThemeToExtension,
         setTheme: setThemeType,
       }}

package/src/theme/createSaleorTheme/createSaleorTheme.tsx

@@ -149,6 +149,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
               backgroundColor: colors.main[1],
             },
             backgroundColor: colors.main[1],
+            outline: 0,
           },
         },
       },
@@ -162,7 +163,6 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
           "&$selected, &$selected:focus, &$selected:hover": {
             backgroundColor: [colors.active[5], "!important"] as any,
             color: colors.active[1],
-            fontWeight: 700,
           },
           "&:hover": {
             backgroundColor: [colors.active[5], "!important"] as any,
@@ -170,6 +170,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
           "@media(min-width: 600px)": {
             minHeight: 48,
           },
+          cursor: "pointer",
         },
       },
       MuiSelect: {

package/src/theme/createSaleorTheme/overrides/controls.ts

@@ -137,7 +137,8 @@ export const controlOverrides = (
         },
       },
       height: 48,
-      width: 72,
+      padding: "12px 16px",
+      width: 80,
     },
     switchBase: {
       "&$checked": {
@@ -157,6 +158,8 @@ export const controlOverrides = (
     thumb: {
       boxShadow: "none",
       height: 14,
+      left: 4,
+      position: "relative",
       width: 14,
     },
     track: {

package/src/theme/createSaleorTheme/overrides/inputs.ts

@@ -171,7 +171,7 @@ export const inputOverrides = (
       backgroundColor: colors.background.paper,
       transition: "box-shadow 200ms",
       top: 0,
-      fontWeight: 500,
+      fontWeight: 400,
     },
     notchedOutline: {
       // It's so much easier to put it here with important tag rather than

package/src/theme/themes.ts

@@ -160,7 +160,7 @@ export const light: SaleorThemeColors = {
     5: "#FBDDD8",
   },
 
-  disabled: "#CCDDDD",
+  disabled: "#C2D1E4",
   paperBorder: "#EAEAEA",
   theme: "light",
 };

package/src/theme/types.ts

@@ -2,6 +2,7 @@ import { ThemeType } from "./createSaleorTheme";
 
 export interface SaleorThemeContext {
   themeType: ThemeType;
+  ssr: boolean;
   sendThemeToExtension: () => void;
   setTheme: (theme: ThemeType) => void;
 }

package/src/tools/useTextWidth.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+export function useTextWidth(
+  font: string
+): [number, Dispatch<SetStateAction<string>>] {
+  const [text, setText] = useState("");
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = font;
+    const { width: newWidth } = context.measureText(text);
+    canvas.remove();
+
+    setWidth(newWidth + 8);
+  }, [text, font]);
+
+  return [width, setText];
+}

package/src/utils/guideStyles.ts

@@ -38,6 +38,11 @@ const useStyles = makeStyles(
       padding: theme.spacing(3),
       rowGap: theme.spacing(3),
     },
+    gridCell: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: theme.spacing(3),
+    },
   }),
   { name: "Guide" }
 );

package/src/utils/mergeRefs.ts

@@ -0,0 +1,14 @@
+import type { Ref } from "react";
+
+export function mergeRefs<T>(...refs: Ref<T>[]) {
+  return (node: T) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        // ref.current is typed as readonly
+        (ref as any).current = node;
+      }
+    }
+  };
+}

package/src/utils/useMockAutocomplete.ts

@@ -0,0 +1,37 @@
+import { score } from "fuzzaldrin";
+import { sortBy } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+
+const pageSize = 10;
+
+export function useMockAutocomplete(
+  choices: Array<Record<"label" | "value", string>>
+) {
+  const [query, setQuery] = useState("");
+  const [slice, setSlice] = useState(pageSize);
+  const results = useMemo(
+    () =>
+      sortBy(
+        choices.map((choice) => ({
+          ...choice,
+          score: -score(choice.label, query),
+        })),
+        "score"
+      ).slice(0, slice),
+    [query]
+  );
+
+  useEffect(() => {
+    setSlice(pageSize);
+  }, [query]);
+
+  const search = (query: string) => setTimeout(() => setQuery(query), 300);
+
+  const more = () => setSlice((s) => s + pageSize);
+
+  return {
+    search,
+    results,
+    more,
+  };
+}