@saleor/macaw-ui 0.3.1 → 0.3.2

package/src/theme/ThemeProvider.tsx

@@ -60,7 +60,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   useEffect(() => {
     sendThemeToExtension();
     changeColorMeta(theme.palette.background.default);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeType]);
 
   return (

package/src/theme/createSaleorTheme/createSaleorTheme.tsx

@@ -86,8 +86,8 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
         root: {
           overflowX: undefined,
           overflowY: undefined,
-          padding: `24px 0px`,
-          margin: `0px 24px`,
+          padding: "24px 0px",
+          margin: "0px 24px",
         },
       },
       MuiDialogContentText: {

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

@@ -122,7 +122,7 @@ export const inputOverrides = (
           backgroundColor: colors.background.default,
           color: colors.main[3],
         },
-        boxShadow: `0 0 0 0 transparent !important`,
+        boxShadow: "0 0 0 0 transparent !important",
         backgroundColor: colors.background.default,
       },
       "&$error": {

package/src/theme/utils.test.ts

@@ -12,11 +12,11 @@ describe("Changing color meta tag", () => {
 
     // Then
     expect(
-      document.querySelector(`head meta[name="tag1"]`)?.getAttribute("content")
+      document.querySelector('head meta[name="tag1"]')?.getAttribute("content")
     ).toBe("value1");
     expect(
       document
-        .querySelector(`head meta[name="theme-color"]`)
+        .querySelector('head meta[name="theme-color"]')
         ?.getAttribute("content")
     ).toBe("#FF0000");
   });
@@ -32,11 +32,11 @@ describe("Changing color meta tag", () => {
 
     // Then
     expect(
-      document.querySelector(`head meta[name="tag1"]`)?.getAttribute("content")
+      document.querySelector('head meta[name="tag1"]')?.getAttribute("content")
     ).toBe("value1");
     expect(
       document
-        .querySelector(`head meta[name="theme-color"]`)
+        .querySelector('head meta[name="theme-color"]')
         ?.getAttribute("content")
     ).toBe("#FF0000");
   });

package/src/theme/utils.ts

@@ -4,7 +4,7 @@ export function changeColorMeta(color: string) {
   themeColorTag.setAttribute("name", "theme-color");
 
   const existingColorTag = document.head.querySelector(
-    `meta[name="theme-color"]`
+    'meta[name="theme-color"]'
   );
   if (existingColorTag) {
     existingColorTag.remove();

package/src/tools/useLocalStorage.ts

@@ -4,6 +4,8 @@
 
 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
@@ -18,19 +20,22 @@ export default function useLocalStorage(
   initialValue: string = ""
 ): UseLocalStorage {
   const [value, setValue] = useState(
-    () => window.localStorage.getItem(key) || initialValue
+    () => (isWindowDefined && window.localStorage.getItem(key)) || initialValue
   );
 
   const setItem = (newValue: string) => {
     setValue(newValue);
-    window.localStorage.setItem(key, newValue);
+    if (isWindowDefined) {
+      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);
+    if (isWindowDefined) {
+      const newValue = window.localStorage.getItem(key);
+      if (value !== newValue) {
+        setValue(newValue || initialValue);
+      }
     }
   });
 
@@ -40,13 +45,15 @@ export default function useLocalStorage(
         setValue(event.newValue || initialValue);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [value, key]
   );
 
   useEffect(() => {
-    window.addEventListener("storage", handleStorage);
-    return () => window.removeEventListener("storage", handleStorage);
+    if (isWindowDefined) {
+      window.addEventListener("storage", handleStorage);
+      return () => window.removeEventListener("storage", handleStorage);
+    }
+    return;
   }, [handleStorage]);
 
   return {