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

package/src/theme/themes.ts

@@ -1,184 +0,0 @@
-import { SaleorThemeColors } from "./createSaleorTheme";
-
-export const dark: SaleorThemeColors = {
-  alert: {
-    paper: {
-      error: "#B65757",
-      info: "rgba(250, 250, 250, 1)",
-      success: "rgba(67, 156, 123, 1)",
-      warning: "rgba(183, 138, 72, 1)",
-    },
-    icon: {
-      error: "#FE6E76",
-      info: "#FAFAFA",
-      success: "#A4E8BA",
-      warning: "#FFE6AB",
-    },
-  },
-  highlightInactive: {
-    default: "#78797A",
-  },
-  autofill: "#5D5881",
-  background: {
-    default: "rgba(34, 36, 49, 1)",
-    paper: "rgba(52, 56, 75, 1)",
-  },
-  checkbox: {
-    default: "#FFFFFF",
-  },
-  divider: "#252728",
-  gray: {
-    default: "#202124",
-    disabled: "rgba(32, 33, 36, 0.6)",
-  },
-  active: {
-    1: "#3EA3FF",
-    2: "#388AD6",
-    3: "#3371AD",
-    4: "#2D5783",
-    5: "#283E5A",
-  },
-  main: {
-    1: "rgba(255, 255, 255, 1)",
-    2: "rgba(146, 148, 161, 1)",
-    3: "rgba(118, 120, 135, 1)",
-    4: "rgba(91, 93, 109, 1)",
-    5: "rgba(64, 66, 82, 1)",
-    6: "rgba(38, 40, 55, 1)",
-  },
-  fail: {
-    verydark: "#9F2E2E",
-    dark: "#B65757",
-    mid: "#FEADAD",
-    light: "#FEDEDE",
-  },
-  warning: {
-    verydark: "#97661F",
-    dark: "#B78A48",
-    mid: "#FFE6AB",
-    light: "#FFF4D2",
-  },
-  success: {
-    verydark: "#22805D",
-    dark: "#439C7B",
-    mid: "#A4E8BA",
-    light: "#E6F9F0",
-  },
-  info: {
-    verydark: "#004697",
-    dark: "#105CB3",
-    mid: "#99E6FD",
-    light: "#D2F6FE",
-  },
-  errorAction: {
-    1: "rgba(235, 43, 89, 1)",
-    2: "rgba(235, 43, 89, 0.8)",
-    3: "rgba(235, 43, 89, 0.6)",
-    4: "rgba(235, 43, 89, 0.4)",
-    5: "rgba(235, 43, 89, 0.2)",
-  },
-  generic: {
-    light: "#F1F1F1",
-    mid: "#5B5D6D",
-    dark: "#7C7F7F",
-    verydark: "#252929",
-  },
-
-  border: {
-    paper: "#26293A",
-  },
-  disabled: "#5D6D83",
-  paperBorder: "#252728",
-  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: "#FAFBFA",
-    paper: "#FFFFFF",
-  },
-  checkbox: {
-    default: "#616161",
-  },
-  divider: "#EAEAEA",
-  gray: {
-    default: "#C8C8C8",
-    disabled: "#C0CFE2",
-  },
-  active: {
-    1: "rgba(5, 109, 255, 1)",
-    2: "rgba(55, 138, 255, 1)",
-    3: "rgba(104, 167, 255, 1)",
-    4: "rgba(193, 219, 255, 1)",
-    5: "rgba(230, 240, 255, 1)",
-  },
-  main: {
-    1: "rgba(37, 41, 41, 1)",
-    2: "rgba(81, 84, 84, 1)",
-    3: "rgba(124, 127, 127, 1)",
-    4: "rgba(168, 169, 169, 1)",
-    5: "rgba(211, 212, 212, 1)",
-    6: "rgba(233, 234, 234, 1)",
-  },
-  fail: {
-    verydark: "#9F2E2E",
-    dark: "#B65757",
-    mid: "#FEADAD",
-    light: "#FEDEDE",
-  },
-  warning: {
-    verydark: "#97661F",
-    dark: "#B78A48",
-    mid: "#FFE6AB",
-    light: "#FFF4D2",
-  },
-  success: {
-    verydark: "#22805D",
-    dark: "#439C7B",
-    mid: "#A4E8BA",
-    light: "#E6F9F0",
-  },
-  info: {
-    verydark: "#004697",
-    dark: "#105CB3",
-    mid: "#99E6FD",
-    light: "#D2F6FE",
-  },
-  errorAction: {
-    1: "#B63755",
-    2: "#D36474",
-    3: "#E9878B",
-    4: "#F7B6B2",
-    5: "#FBDDD8",
-  },
-  generic: {
-    light: "#F1F1F1",
-    mid: "#EAEAEA",
-    dark: "#7C7F7F",
-    verydark: "#252929",
-  },
-
-  border: {
-    paper: "rgba(37, 41, 41, 0.1)",
-  },
-  disabled: "rgba(194, 209, 228, 1)",
-  paperBorder: "#EAEAEA",
-  theme: "light",
-};

package/src/theme/types.ts

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

package/src/theme/utils.test.ts

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

@@ -1,13 +0,0 @@
-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/index.ts

@@ -1,2 +0,0 @@
-export * from "./useElementScroll";
-export * from "./useWindowScroll";

package/src/tools/useElementScroll.ts

@@ -1,83 +0,0 @@
-import { throttle } from "lodash";
-import { useCallback, useEffect, useState } from "react";
-
-export type Position = Record<"x" | "y", number>;
-
-function getPosition<T extends HTMLElement>(
-  anchor?: T | null
-): Position | undefined {
-  if (anchor) {
-    return {
-      x: anchor.scrollLeft,
-      y: anchor.scrollTop,
-    };
-  }
-  return undefined;
-}
-
-export function isScrolledToBottom(
-  anchor: HTMLElement,
-  position: Position,
-  offset: number = 0
-) {
-  return !!anchor && position
-    ? position.y + anchor.clientHeight + offset >= anchor.scrollHeight
-    : undefined;
-}
-
-export function isScrolledToTop(
-  anchor: HTMLElement,
-  position: Position,
-  offset: number = 0
-) {
-  return !!anchor && position ? position.y <= offset : undefined;
-}
-
-export interface UseElementScrollOpts<T extends HTMLElement> {
-  anchor: T | null;
-  position: Position | undefined;
-}
-
-export interface UseElementScroll<T extends HTMLElement>
-  extends UseElementScrollOpts<T> {
-  setAnchor: React.Dispatch<T | null>;
-}
-
-export function useElementScroll<T extends HTMLElement>(): UseElementScroll<T> {
-  const [anchorEl, setAnchorEl] = useState<T | null>(null);
-  const [scroll, setScroll] = useState(getPosition(anchorEl));
-
-  useEffect(() => {
-    if (!!anchorEl) {
-      const recalcScrollPos = throttle(
-        () => setScroll(getPosition(anchorEl)),
-        100
-      );
-      anchorEl.addEventListener("scroll", recalcScrollPos);
-      const resizeObserver = new ResizeObserver(recalcScrollPos);
-      resizeObserver.observe(anchorEl);
-
-      return () => {
-        anchorEl.removeEventListener("scroll", recalcScrollPos);
-        resizeObserver.disconnect();
-      };
-    }
-
-    // Silence eslint's complaining about not all code returning value
-    return;
-  }, [anchorEl]);
-
-  useEffect(() => {
-    setTimeout(() => setScroll(getPosition(anchorEl)), 100);
-  }, [anchorEl]);
-
-  const setAnchor = useCallback((el) => {
-    setAnchorEl(el);
-  }, []);
-
-  return {
-    setAnchor,
-    anchor: anchorEl,
-    position: scroll,
-  };
-}

package/src/tools/useLocalStorage.ts

@@ -1,63 +0,0 @@
-// 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";
-
-import { isWindowDefined } from "../consts";
-
-// 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(
-    () => (isWindowDefined && window.localStorage.getItem(key)) || initialValue
-  );
-
-  const setItem = (newValue: string) => {
-    setValue(newValue);
-    if (isWindowDefined) {
-      window.localStorage.setItem(key, newValue);
-    }
-  };
-
-  useEffect(() => {
-    if (isWindowDefined) {
-      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);
-      }
-    },
-    [value, key]
-  );
-
-  useEffect(() => {
-    if (isWindowDefined) {
-      window.addEventListener("storage", handleStorage);
-      return () => window.removeEventListener("storage", handleStorage);
-    }
-    return;
-  }, [handleStorage]);
-
-  return {
-    value,
-    setValue: setItem,
-  };
-}

package/src/tools/useTextWidth.ts

@@ -1,20 +0,0 @@
-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/tools/useWindowScroll.ts

@@ -1,25 +0,0 @@
-// 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,
-  };
-}
-
-export 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;
-}

package/src/utils/Decorator.tsx

@@ -1,25 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import React from "react";
-import { useDarkMode } from "storybook-dark-mode";
-
-import { ThemeProvider } from "../theme";
-
-export const Decorator = (storyFn: any) => (
-  <ThemeProvider defaultTheme={useDarkMode() ? "dark" : "light"}>
-    <div
-      style={{
-        isolation: "isolate",
-        padding: 24,
-      }}
-    >
-      {storyFn()}
-    </div>
-  </ThemeProvider>
-);
-
-export const GuideDecorator = (storyFn: any) => (
-  <Card style={{ margin: "auto", width: 800 }}>
-    <CardContent>{storyFn()}</CardContent>
-  </Card>
-);

package/src/utils/guideStyles.ts

@@ -1,49 +0,0 @@
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    code: {
-      background: theme.palette.saleor.active[5],
-      display: "inline",
-      fontFamily: "monospace",
-      padding: "2px 4px",
-    },
-    headline: {
-      marginBottom: theme.spacing(6),
-    },
-    paragraph: {
-      margin: theme.spacing(3, 0),
-    },
-    sectionHeader: {
-      margin: theme.spacing(3, 0),
-    },
-    grid: {
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      columnGap: theme.spacing(3),
-    },
-    border: {
-      borderRadius: 4,
-      border: "1px dashed #7B61FF",
-    },
-    cell: {
-      "&:not(:last-child)": {
-        marginBottom: theme.spacing(3),
-      },
-      alignItems: "center",
-      border: "1px dashed #7B61FF",
-      borderRadius: 4,
-      display: "flex",
-      flexDirection: "column",
-      padding: theme.spacing(3),
-      rowGap: theme.spacing(3),
-    },
-    gridCell: {
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-      gap: theme.spacing(3),
-    },
-  }),
-  { name: "Guide" }
-);
-export default useStyles;

package/src/utils/mergeRefs.ts

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

package/src/utils/useListStory.ts

@@ -1,79 +0,0 @@
-import { useState } from "react";
-
-interface TableDataRow {
-  name: string;
-  calories: number;
-}
-const data: TableDataRow[] = [
-  {
-    name: "Baked Potato",
-    calories: 93,
-  },
-  {
-    name: "French Fries",
-    calories: 312,
-  },
-  {
-    name: "Cheddar",
-    calories: 403,
-  },
-  {
-    name: "Brie",
-    calories: 334,
-  },
-  {
-    name: "Feta",
-    calories: 264,
-  },
-  {
-    name: "Ricotta",
-    calories: 264,
-  },
-];
-
-export function useListStory(initialRowsPerPage: number = 2) {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(initialRowsPerPage);
-  const [selected, setSelected] = useState([data[0].name, data[2].name]);
-
-  const hasNextPage = (page + 1) * rowsPerPage < data.length;
-  const hasPreviousPage = page > 0;
-
-  const isRowSelected = (name: string) =>
-    !!selected.find((selected) => selected === name);
-  const toggleRow = (name: string) => {
-    if (isRowSelected(name)) {
-      setSelected(selected.filter((row) => row !== name));
-    } else {
-      setSelected([...selected, name]);
-    }
-  };
-  const toggleAll = () => {
-    if (data.length === selected.length) {
-      setSelected([]);
-    } else {
-      setSelected(data.map((row) => row.name));
-    }
-  };
-
-  const nextPage = () => setPage(page + 1);
-  const previousPage = () => setPage(page - 1);
-
-  const pageData = data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
-
-  return {
-    data,
-    pageData,
-    page,
-    nextPage,
-    previousPage,
-    hasNextPage,
-    hasPreviousPage,
-    rowsPerPage,
-    setRowsPerPage,
-    selected,
-    isRowSelected,
-    toggleRow,
-    toggleAll,
-  };
-}

package/src/utils/useMockAutocomplete.ts

@@ -1,37 +0,0 @@
-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,
-  };
-}