@fibery/ui-kit 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -8,6 +8,8 @@
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
+    "src/theme-settings.ts",
+    "src/media-query-utils.ts",
     "src/create-inline-theme.ts",
     "src/form-field-loader.tsx",
     "src/ThemeProvider.tsx",

package/src/media-query-utils.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+export function getMediaQueryList(query: string) {
+  // need for test
+  return typeof window !== undefined && window.matchMedia
+    ? window.matchMedia(query)
+    : ({matches: false, addEventListener: noop, removeEventListener: noop} as unknown as MediaQueryList);
+}
+
+export function subscribeOnChange(mediaQueryList: MediaQueryList, cb: (evt: MediaQueryListEvent) => void): () => void {
+  // Safari 13 doesn't support addEventListener here
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", cb);
+    return () => {
+      mediaQueryList.removeEventListener("change", cb);
+    };
+  } else if (mediaQueryList.addListener) {
+    mediaQueryList.addListener(cb);
+    return () => {
+      mediaQueryList.removeListener(cb);
+    };
+  }
+  return noop;
+}

package/src/theme-settings.ts

@@ -0,0 +1,100 @@
+import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
+
+const listenersThemeMode = new Map();
+const listenersThemePreference = new Map();
+
+const themePreferenceKey = "theme-preference";
+
+export type ThemePreference = "dark" | "light" | "auto";
+
+export type ThemeMode = "dark" | "light" | "old";
+
+export function getThemePreference(): ThemePreference {
+  try {
+    const item = localStorage.getItem(themePreferenceKey);
+    if (item === "auto") {
+      return "auto";
+    } else if (item === "dark") {
+      return "dark";
+    } else if (item === "light") {
+      return "light";
+    }
+  } catch (e) {
+    return "auto";
+  }
+  return "auto";
+}
+
+const darkModeQuery = "(prefers-color-scheme: dark)";
+
+function getDarkMediaQuery() {
+  return getMediaQueryList(darkModeQuery);
+}
+
+export function getThemeMode(): ThemeMode {
+  const preference = getThemePreference();
+
+  if (preference === "auto") {
+    return getDarkMediaQuery().matches ? "dark" : "light";
+  } else if (preference === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+
+export function setThemePreference(preference: ThemePreference) {
+  try {
+    if (getThemePreference() !== preference) {
+      localStorage.setItem(themePreferenceKey, preference);
+      listenersThemeMode.forEach((cb) => {
+        cb(getThemeMode());
+      });
+      listenersThemePreference.forEach((cb) => {
+        cb(preference);
+      });
+    }
+  } catch (e) {
+    // skip error
+  }
+}
+
+export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePreference) => void): () => void {
+  listenersThemePreference.set(cb, cb);
+  let currentPref = getThemePreference();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    if (currentPref !== newPref) {
+      currentPref = newPref;
+      cb(newPref);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    listenersThemePreference.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void): () => void {
+  listenersThemeMode.set(cb, cb);
+  let currentPref = getThemePreference();
+  const darkMediaQuery = getDarkMediaQuery();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    if (currentPref !== newPref) {
+      currentPref = newPref;
+      cb(getThemeMode());
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  const unsubscribe = subscribeOnMediaQueryChange(darkMediaQuery, () => {
+    if (getThemePreference() === "auto") {
+      cb(getThemeMode());
+    }
+  });
+  return () => {
+    listenersThemeMode.delete(cb);
+    unsubscribe();
+    window.removeEventListener("storage", storageListener);
+  };
+}