@saleor/macaw-ui 0.2.4

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

@@ -0,0 +1,74 @@
+import { fade } from "@material-ui/core/styles";
+import type { Overrides } from "@material-ui/core/styles/overrides";
+
+import { SaleorThemeColors } from "../types";
+
+export const tableOverrides = (
+  colors: SaleorThemeColors,
+  fontFamily: string
+): Overrides => ({
+  MuiTable: {
+    root: {
+      fontFamily,
+      fontFeatureSettings: '"tnum"',
+    },
+  },
+  MuiTableCell: {
+    body: {
+      fontSize: "1.6rem",
+    },
+    head: {
+      fontSize: "1.4rem",
+      fontWeight: 400,
+      color: colors.font.textDisabled,
+    },
+    paddingCheckbox: {
+      "&:first-child": {
+        padding: "0 12px",
+        width: 72,
+      },
+      "&:not(first-child)": {
+        padding: 0,
+        width: 52,
+      },
+    },
+    root: {
+      "&:first-child": {
+        "&:not($paddingCheckbox)": {
+          paddingLeft: 24 + "px",
+          textAlign: "left" as "left",
+        },
+      },
+      borderBottomColor: colors.paperBorder,
+      padding: "16px 24px",
+    },
+  },
+  MuiTablePagination: {
+    input: {
+      color: colors.primary,
+      fontSize: "1.4rem",
+    },
+  },
+  MuiTableRow: {
+    footer: {
+      "$root$hover&:hover": {
+        background: "none",
+      },
+    },
+    head: {
+      "$root$hover&:hover": {
+        background: "none",
+      },
+    },
+    hover: {
+      "$root&:hover": {
+        backgroundColor: fade(colors.primary, 0.3),
+      },
+    },
+    root: {
+      "&$selected": {
+        backgroundColor: fade(colors.primary, 0.05),
+      },
+    },
+  },
+});

package/src/theme/createSaleorTheme/palette.ts

@@ -0,0 +1,38 @@
+import { SaleorPaletteOptions, SaleorThemeColors } from "./types";
+
+export const createPalette = (
+  colors: SaleorThemeColors
+): SaleorPaletteOptions => ({
+  action: {
+    active: colors.checkbox.default,
+  },
+  alert: colors.alert,
+  background: colors.background,
+  divider: colors.divider,
+  error: {
+    main: colors.error,
+  },
+  primary: {
+    contrastText: "#ffffff",
+    dark: colors.font.textDisabled,
+    main: colors.primary,
+  },
+  secondary: {
+    contrastText: "#ffffff",
+    main: colors.secondary,
+  },
+  success: {
+    main: colors.success,
+  },
+  text: {
+    disabled: colors.font.gray,
+    hint: colors.font.gray,
+    primary: colors.font.default,
+    secondary: colors.font.gray,
+  },
+  textHighlighted: {
+    active: colors.primary,
+    inactive: colors.highlightInactive.default,
+  },
+  type: colors.theme,
+});

package/src/theme/createSaleorTheme/shadows.ts

@@ -0,0 +1,46 @@
+import type { Shadows } from "@material-ui/core/styles/shadows";
+
+const createShadow = (
+  pv: number,
+  pb: number,
+  ps: number,
+  uv: number,
+  ub: number,
+  us: number,
+  av: number,
+  ab: number,
+  as: number
+) =>
+  [
+    `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.2)`,
+    `0 ${uv}px ${ub}px ${us}px rgba(0, 0, 0, 0.14)`,
+    `0 ${av}px ${ab}px ${as}px rgba(0, 0, 0, 0.12)`,
+  ].join(",");
+
+export const shadows: Shadows = [
+  "none",
+  createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0),
+  createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0),
+  createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0),
+  createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1),
+  createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1),
+  createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1),
+  createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2),
+  createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3),
+  createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4),
+  createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4),
+  createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4),
+  createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4),
+  createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4),
+  createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5),
+  createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5),
+  createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5),
+  createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4),
+  createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3),
+  createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1),
+  createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1),
+  createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1),
+  createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2),
+  createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2),
+  createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3),
+];

package/src/theme/createSaleorTheme/types.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/unified-signatures */
+import type { Theme } from "@material-ui/core/styles";
+import type { ThemeOptions } from "@material-ui/core/styles/createMuiTheme";
+import type {
+  Palette,
+  PaletteOptions,
+} from "@material-ui/core/styles/createPalette";
+
+export type AlertPalette = Record<
+  "success" | "error" | "warning" | "info",
+  string
+>;
+export type AlertColors = Record<"paper" | "icon", AlertPalette>;
+interface ExtraPalette {
+  alert: AlertColors;
+  textHighlighted: {
+    active: string;
+    inactive: string;
+  };
+}
+type ExtraPaletteOptions = Partial<ExtraPalette>;
+
+export interface SaleorPalette extends Palette, ExtraPalette {}
+
+export interface SaleorPaletteOptions
+  extends PaletteOptions,
+    ExtraPaletteOptions {}
+
+export interface SaleorSpacing {
+  (): string;
+  (value: number): string;
+  (topBottom: number, rightLeft: number): string;
+  (top: number, rightLeft: number, bottom: number): string;
+  (top: number, right: number, bottom: number, left: number): string;
+}
+
+export interface SaleorTheme extends Omit<Theme, "spacing"> {
+  palette: SaleorPalette;
+  spacing: SaleorSpacing;
+}
+
+export interface SaleorThemeOptions extends ThemeOptions {
+  palette: SaleorPaletteOptions;
+}
+
+export type ThemeType = "light" | "dark";
+
+export type SaleorThemeColors = Record<
+  "primary" | "secondary" | "error" | "paperBorder" | "autofill" | "success",
+  string
+> & {
+  highlightInactive: Record<"default", string>;
+} & {
+  background: Record<"default" | "paper", string>;
+} & {
+  checkbox: Record<"default", string>;
+} & {
+  divider: string;
+} & {
+  font: Record<
+    "default" | "gray" | "button" | "textButton" | "textDisabled",
+    string
+  >;
+} & {
+  gray: Record<"default" | "disabled", string>;
+} & {
+  input: Record<
+    | "default"
+    | "border"
+    | "disabled"
+    | "disabledBackground"
+    | "disabledText"
+    | "error"
+    | "text"
+    | "textHover",
+    string
+  >;
+} & {
+  alert: AlertColors;
+} & {
+  theme: ThemeType;
+};
+
+export type Themes = Record<ThemeType, SaleorThemeColors>;

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export * from "./ThemeProvider";
+export * from "./styles";
+export * from "./themes";
+export * from "./createSaleorTheme";

package/src/theme/styles.ts

@@ -0,0 +1,40 @@
+import {
+  makeStyles as muiMakeStyles,
+  useTheme as useMuiTheme,
+} from "@material-ui/core/styles";
+import type {
+  ClassNameMap,
+  Styles,
+  WithStylesOptions,
+} from "@material-ui/styles/withStyles";
+import { useContext } from "react";
+
+import { ThemeContext } from "./context";
+import { SaleorTheme } from "./createSaleorTheme/types";
+import type { SaleorThemeContext } from "./types";
+
+export function makeStyles<
+  Props extends Record<string, any> = {},
+  ClassKey extends string = string
+>(
+  styles: Styles<SaleorTheme, Props, ClassKey>,
+  options?: Omit<WithStylesOptions<SaleorTheme>, "withTheme">
+): keyof Props extends never
+  ? (props?: any) => ClassNameMap<ClassKey>
+  : (props: Props) => ClassNameMap<ClassKey> {
+  return muiMakeStyles(styles, options);
+}
+
+export function useTheme(): SaleorTheme & SaleorThemeContext {
+  const saleorTheme = useMuiTheme<SaleorTheme>();
+  const themeInfo = useContext(ThemeContext);
+
+  if (themeInfo === undefined || saleorTheme === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return {
+    ...saleorTheme,
+    ...themeInfo,
+  };
+}

package/src/theme/themes.ts

@@ -0,0 +1,113 @@
+import { SaleorThemeColors } from "./createSaleorTheme";
+
+export const dark: SaleorThemeColors = {
+  alert: {
+    paper: {
+      error: "#E0444E",
+      info: "#2E2F31",
+      success: "#5DC292",
+      warning: "#E29A2E",
+    },
+    icon: {
+      error: "#FE6E76",
+      info: "#FAFAFA",
+      success: "#5DC292",
+      warning: "#FFB84E",
+    },
+  },
+  highlightInactive: {
+    default: "#78797A",
+  },
+  autofill: "#5D5881",
+  background: {
+    default: "#1D1E1F",
+    paper: "#2E2F31",
+  },
+  checkbox: {
+    default: "#FFFFFF",
+  },
+  divider: "#252728",
+  error: "#C22D74",
+  font: {
+    button: "#202124",
+    default: "#FCFCFC",
+    gray: "#9E9D9D",
+    textButton: "#FFFFFF",
+    textDisabled: "#FCFCFC",
+  },
+  gray: {
+    default: "#202124",
+    disabled: "rgba(32, 33, 36, 0.6)",
+  },
+  input: {
+    border: "#9d9d9d",
+    default: "#25262A",
+    disabled: "#393939",
+    disabledBackground: "#292A2D",
+    disabledText: "#9D9D9D",
+    error: "#8C2054",
+    text: "#FCFCFC",
+    textHover: "#616161",
+  },
+  paperBorder: "#252728",
+  primary: "#13BEBB",
+  secondary: "#21125E",
+  success: "#5DC292",
+  theme: "dark",
+};
+export const light: SaleorThemeColors = {
+  alert: {
+    paper: {
+      error: "#FFD6D9",
+      info: "#FFFFFF",
+      success: "#DFF3E9",
+      warning: "#FFF4E4",
+    },
+    icon: {
+      error: "#FE6E76",
+      info: "#28234A",
+      success: "#5DC292",
+      warning: "#FFB84E",
+    },
+  },
+  highlightInactive: {
+    default: "#C8C8C8",
+  },
+  autofill: "#f4f6c5",
+  background: {
+    default: "#EFF5F8",
+    paper: "#FFFFFF",
+  },
+  checkbox: {
+    default: "#616161",
+  },
+  divider: "#EAEAEA",
+  error: "#FE6D76",
+  font: {
+    button: "#FFFFFF",
+    default: "#3D3D3D",
+    gray: "#616161",
+    textButton: "#06847B",
+    textDisabled: "#616161",
+  },
+  gray: {
+    default: "#C8C8C8",
+    disabled: "rgba(216, 216, 216, 0.3)",
+  },
+
+  input: {
+    border: "#BDBDBD",
+    default: "#FFFFFF",
+    disabled: "#EAEAEA",
+    disabledBackground: "#F4F4F4",
+    disabledText: "#9D9D9D",
+    error: "#8C2054",
+    text: "#3D3D3D",
+    textHover: "#616161",
+  },
+  paperBorder: "#EAEAEA",
+  primary: "#06847B",
+  secondary: "#21125E",
+  success: "#5DC292",
+  theme: "light",
+};

package/src/theme/types.ts

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

package/src/theme/utils.test.ts

@@ -0,0 +1,43 @@
+import { changeColorMeta } from "./utils";
+
+describe("Changing color meta tag", () => {
+  it("works properly if no tag is present", () => {
+    // Given
+    document.head.innerHTML = `
+            <meta name="tag1" content="value1" />
+    `;
+
+    // When
+    changeColorMeta("#FF0000");
+
+    // Then
+    expect(
+      document.querySelector(`head meta[name="tag1"]`)?.getAttribute("content")
+    ).toBe("value1");
+    expect(
+      document
+        .querySelector(`head meta[name="theme-color"]`)
+        ?.getAttribute("content")
+    ).toBe("#FF0000");
+  });
+  it("works properly if tag is present", () => {
+    // Given
+    document.head.innerHTML = `
+        <meta name="tag1" content="value1" />
+        <meta name="theme-color" content="#00FF00" />
+    `;
+
+    // When
+    changeColorMeta("#FF0000");
+
+    // Then
+    expect(
+      document.querySelector(`head meta[name="tag1"]`)?.getAttribute("content")
+    ).toBe("value1");
+    expect(
+      document
+        .querySelector(`head meta[name="theme-color"]`)
+        ?.getAttribute("content")
+    ).toBe("#FF0000");
+  });
+});

package/src/theme/utils.ts

@@ -0,0 +1,13 @@
+export function changeColorMeta(color: string) {
+  const themeColorTag = document.createElement("meta");
+  themeColorTag.setAttribute("content", color);
+  themeColorTag.setAttribute("name", "theme-color");
+
+  const existingColorTag = document.head.querySelector(
+    `meta[name="theme-color"]`
+  );
+  if (existingColorTag) {
+    existingColorTag.remove();
+  }
+  document.head.appendChild(themeColorTag);
+}

package/src/tools/useLocalStorage.ts

@@ -0,0 +1,56 @@
+// Copied directly from
+// https://github.com/dance2die/react-use-localstorage/blob/master/src/index.ts
+// to avoid cjs and esm confusion in jest transformators
+
+import { useCallback, useEffect, useState } from "react";
+
+// FIXME: We also had to tweak return signature because tuples were bugging
+// typescript parser
+// https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined
+// tsdx issue
+// https://github.com/formium/tsdx/issues/926
+export interface UseLocalStorage {
+  value: string;
+  setValue: (value: string) => void;
+}
+export default function useLocalStorage(
+  key: string,
+  initialValue: string = ""
+): UseLocalStorage {
+  const [value, setValue] = useState(
+    () => window.localStorage.getItem(key) || initialValue
+  );
+
+  const setItem = (newValue: string) => {
+    setValue(newValue);
+    window.localStorage.setItem(key, newValue);
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const newValue = window.localStorage.getItem(key);
+    if (value !== newValue) {
+      setValue(newValue || initialValue);
+    }
+  });
+
+  const handleStorage = useCallback(
+    (event: StorageEvent) => {
+      if (event.key === key && event.newValue !== value) {
+        setValue(event.newValue || initialValue);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value, key]
+  );
+
+  useEffect(() => {
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [handleStorage]);
+
+  return {
+    value,
+    setValue: setItem,
+  };
+}

package/src/tools/useWindowScroll.ts

@@ -0,0 +1,26 @@
+// It's only optimized for esm, cjs will remain fat blob
+// Ref https://github.com/formium/tsdx/issues/763
+import { throttle } from "lodash";
+import { useEffect, useState } from "react";
+
+function getPosition() {
+  return {
+    x: window.pageXOffset,
+    y: window.pageYOffset,
+  };
+}
+
+function useWindowScroll() {
+  const [scroll, setScroll] = useState(getPosition);
+
+  useEffect(() => {
+    const handleScroll = throttle(() => setScroll(getPosition()), 100);
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return scroll;
+}
+export default useWindowScroll;

package/src/utils/Decorator.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent } from "@material-ui/core";
+import { StoryFn } from "@storybook/addons";
+import React from "react";
+
+import { ThemeProvider } from "../theme";
+
+export const Decorator = (storyFn: StoryFn<React.ReactNode>) => (
+  <ThemeProvider>
+    <div
+      style={{
+        padding: 24,
+      }}
+    >
+      {storyFn()}
+    </div>
+  </ThemeProvider>
+);
+
+export const GuideDecorator = (storyFn: StoryFn<React.ReactNode>) => (
+  <Card style={{ margin: "auto", width: 600 }}>
+    <CardContent>{storyFn()}</CardContent>
+  </Card>
+);