@olenbetong/synergi-react 0.6.8 → 0.6.10

package/es/{synergi-react/src/index.d.ts → index.d.ts}

@@ -10,6 +10,4 @@ export { Spinner, SpinnerProps } from "./Spinner/index.js";
 export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
 export { useTranslation } from "./useTranslation/index.js";
 export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
-export { useDebounce } from "../../appframe-react/src/useDebounce.js";
-export { usePersistedSetting } from "./usePersistedSetting.js";
-export { useSearchParamState } from "./useSearchParamState.js";
+export { useDebounce, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/es/{synergi-react/src/index.js → index.js}

@@ -10,6 +10,4 @@ export { Spinner } from "./Spinner/index.js";
 export { SplitContainer } from "./SplitContainer/index.js";
 export { useTranslation } from "./useTranslation/index.js";
 export { ValueToggle } from "./ValueToggle/index.js";
-export { useDebounce } from "../../appframe-react/src/useDebounce.js";
-export { usePersistedSetting } from "./usePersistedSetting.js";
-export { useSearchParamState } from "./useSearchParamState.js";
+export { useDebounce, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -69,6 +69,7 @@
   "sideEffects": false,
   "dependencies": {
     "@olenbetong/appframe-core": "^2.0.4",
+    "@olenbetong/appframe-react": "^1.7.0",
     "clsx": "^1.1.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.0"
@@ -87,5 +88,5 @@
   "devDependencies": {
     "replace-in-files": "^3.0.0"
   },
-  "gitHead": "7f8a2f0cdee9760e0dec88bca8db0db0d32a704d"
+  "gitHead": "1f5871ab497f4e232d35cc3940181e7679b2c6fd"
 }

package/src/index.ts

@@ -22,6 +22,4 @@ export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
 
 export { useTranslation } from "./useTranslation/index.js";
 export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
-export { useDebounce } from "../../appframe-react/src/useDebounce.js";
-export { usePersistedSetting } from "./usePersistedSetting.js";
-export { useSearchParamState } from "./useSearchParamState.js";
+export { useDebounce, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/es/appframe-react/src/useDebounce.d.ts

@@ -1,8 +0,0 @@
-/**
- * Returns a debounced version of the given value.
- *
- * @param value
- * @param delay
- * @returns
- */
-export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/appframe-react/src/useDebounce.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-/**
- * Returns a debounced version of the given value.
- *
- * @param value
- * @param delay
- * @returns
- */
-export function useDebounce(value, delay = 300) {
-    let [debouncedValue, setValue] = useState(value);
-    useEffect(() => {
-        let timeout = setTimeout(() => setValue(value), delay);
-        return () => clearTimeout(timeout);
-    }, [delay, value]);
-    return debouncedValue;
-}

package/es/synergi-react/src/useDebounce.d.ts

@@ -1,9 +0,0 @@
-/**
- * Returns a debounced version of the given value.
- *
- * @param value
- * @param delay
- * @returns
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/synergi-react/src/useDebounce.js

@@ -1,17 +0,0 @@
-import { useEffect, useState } from "react";
-/**
- * Returns a debounced version of the given value.
- *
- * @param value
- * @param delay
- * @returns
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export function useDebounce(value, delay = 300) {
-    let [debouncedValue, setValue] = useState(value);
-    useEffect(() => {
-        let timeout = setTimeout(() => setValue(value), delay);
-        return () => clearTimeout(timeout);
-    }, [delay, value]);
-    return debouncedValue;
-}

package/es/synergi-react/src/usePersistedSetting.d.ts

@@ -1,7 +0,0 @@
-/**
- * On mount, load the persisted state from Indexed DB, and if the persisted
- * layout version matches, restore the layout. Then listen to changes to the
- * state, and store the latest version in Indexed DB.
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export declare function usePersistedSetting<T = unknown>(key: string, defaultValue: T): [T, (newValue: T) => void];

package/es/synergi-react/src/usePersistedSetting.js

@@ -1,53 +0,0 @@
-import mitt from "mitt";
-import localforage from "localforage";
-import { useSyncExternalStore } from "react";
-const settingsStore = localforage.createInstance({
-    name: `AfUserSettings.${af.userSession.login}`,
-});
-class SettingsCache {
-    #mitt;
-    #cache = {};
-    constructor() {
-        this.#mitt = mitt();
-        // Load all article user settings even if the setting is not needed yet.
-        // This ways the persisted state can be restored faster after the initial
-        // page load.'
-        settingsStore.keys().then((keys) => Promise.allSettled(keys
-            .filter((key) => key.startsWith(af.article.id))
-            .map((storeKey) => settingsStore.getItem(storeKey).then((storedValue) => {
-            let key = storeKey.replace(`${af.article.id}.`, "");
-            if (storedValue !== undefined && this.#cache[key] === undefined) {
-                this.setItem(key, storedValue);
-            }
-        }))));
-    }
-    setItem(key, value) {
-        this.#cache[key] = value;
-        this.#mitt.emit("change", { key, value });
-        let storeKey = `${af.article.id}.${key}`;
-        settingsStore.setItem(storeKey, value);
-    }
-    getItem(key) {
-        return this.#cache[key];
-    }
-    listen(setting, callback) {
-        function handler({ key, value }) {
-            if (setting === key) {
-                callback(value);
-            }
-        }
-        this.#mitt.on("change", handler);
-        return () => this.#mitt.off("change", handler);
-    }
-}
-const settingsCache = new SettingsCache();
-/**
- * On mount, load the persisted state from Indexed DB, and if the persisted
- * layout version matches, restore the layout. Then listen to changes to the
- * state, and store the latest version in Indexed DB.
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export function usePersistedSetting(key, defaultValue) {
-    let value = useSyncExternalStore((onChange) => settingsCache.listen(key, () => onChange()), () => settingsCache.getItem(key) ?? defaultValue);
-    return [value, (newValue) => settingsCache.setItem(key, newValue)];
-}

package/es/synergi-react/src/useSearchParamState.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-declare type SearchParamValue = string | null;
-/**
- * A hook that wraps useState, and keeps the state value synced with
- * a search parameter.
- *
- * @param {string} key They key used to store the value in the search parameters
- * @param {SearchParamValue} fallbackValue Default value for the state. Only used if the search parameters do not contains a value for the key parameter
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export declare function useSearchParamState(key: string, fallbackValue?: SearchParamValue | (() => SearchParamValue), multiple?: false): [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>];
-export declare function useSearchParamState(key: string, fallbackValue: string[] | (() => string[]), multiple: true): [string[], React.Dispatch<React.SetStateAction<string[]>>];
-export {};

package/es/synergi-react/src/useSearchParamState.js

@@ -1,42 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-export function useSearchParamState(key, fallbackValue, multiple = false) {
-    let defaultRef = useRef(multiple ? [] : null);
-    let [value, setValue] = useState(() => {
-        let params = new URLSearchParams(window.location.search);
-        let value = multiple ? params.getAll(key) : params.get(key);
-        // Even if we don't use the default value here, we want to keep it for later
-        // so we can see if the default value is the active value. If that's the case,
-        // we remove the parameter from the search parameters.
-        if (typeof fallbackValue === "function") {
-            defaultRef.current = fallbackValue();
-        }
-        else {
-            defaultRef.current = fallbackValue ?? (multiple ? [] : null);
-        }
-        if (!value) {
-            return defaultRef.current;
-        }
-        return value;
-    });
-    useEffect(() => {
-        let params = new URLSearchParams(window.location.search);
-        if (multiple) {
-            params.delete(key);
-            value.forEach((v) => params.append(key, v));
-        }
-        else if (value && value !== defaultRef.current) {
-            params.set(key, String(value));
-        }
-        else {
-            params.delete(key);
-        }
-        let newPath = window.location.pathname;
-        let paramString = params.toString();
-        if (paramString.length) {
-            newPath += "?" + paramString;
-        }
-        window.history.replaceState({ path: newPath }, "", newPath);
-    }, [key, value]);
-    // @ts-ignore i give up
-    return [value, setValue];
-}

package/src/useDebounce.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * Returns a debounced version of the given value.
- * 
- * @param value 
- * @param delay 
- * @returns 
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export function useDebounce<T>(value: T, delay = 300) {
-  let [debouncedValue, setValue] = useState(value);
-
-  useEffect(() => {
-    let timeout = setTimeout(() => setValue(value), delay);
-
-    return () => clearTimeout(timeout);
-  }, [delay, value]);
-
-  return debouncedValue;
-}

package/src/usePersistedSetting.ts

@@ -1,78 +0,0 @@
-import mitt, { Emitter, Handler } from "mitt";
-import localforage from "localforage";
-import { useSyncExternalStore } from "react";
-
-const settingsStore = localforage.createInstance({
-  name: `AfUserSettings.${af.userSession.login}`,
-});
-
-class SettingsCache {
-  #mitt: Emitter<{ change: { key: string; value: unknown } }>;
-  #cache: Record<string, unknown> = {};
-
-  constructor() {
-    this.#mitt = mitt();
-    // Load all article user settings even if the setting is not needed yet.
-    // This ways the persisted state can be restored faster after the initial
-    // page load.'
-    settingsStore.keys().then((keys) =>
-      Promise.allSettled(
-        keys
-          .filter((key) => key.startsWith(af.article.id))
-          .map((storeKey) =>
-            settingsStore.getItem(storeKey).then((storedValue) => {
-              let key = storeKey.replace(`${af.article.id}.`, "");
-
-              if (storedValue !== undefined && this.#cache[key] === undefined) {
-                this.setItem(key, storedValue);
-              }
-            })
-          )
-      )
-    );
-  }
-
-  setItem(key: string, value: unknown) {
-    this.#cache[key] = value;
-    this.#mitt.emit("change", { key, value });
-
-    let storeKey = `${af.article.id}.${key}`;
-    settingsStore.setItem(storeKey, value);
-  }
-
-  getItem(key: string): unknown {
-    return this.#cache[key];
-  }
-
-  listen(setting: string, callback: Handler<unknown>) {
-    function handler({ key, value }: { key: string; value: unknown }) {
-      if (setting === key) {
-        callback(value);
-      }
-    }
-
-    this.#mitt.on("change", handler);
-
-    return () => this.#mitt.off("change", handler);
-  }
-}
-
-const settingsCache = new SettingsCache();
-
-/**
- * On mount, load the persisted state from Indexed DB, and if the persisted
- * layout version matches, restore the layout. Then listen to changes to the
- * state, and store the latest version in Indexed DB.
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export function usePersistedSetting<T = unknown>(
-  key: string,
-  defaultValue: T
-): [T, (newValue: T) => void] {
-  let value = useSyncExternalStore(
-    (onChange) => settingsCache.listen(key, () => onChange()),
-    () => (settingsCache.getItem(key) as T) ?? defaultValue
-  );
-
-  return [value, (newValue: T) => settingsCache.setItem(key, newValue)];
-}

package/src/useSearchParamState.ts

@@ -1,78 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-type SearchParamValue = string | null;
-
-/**
- * A hook that wraps useState, and keeps the state value synced with
- * a search parameter.
- *
- * @param {string} key They key used to store the value in the search parameters
- * @param {SearchParamValue} fallbackValue Default value for the state. Only used if the search parameters do not contains a value for the key parameter
- * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
- */
-export function useSearchParamState(
-  key: string,
-  fallbackValue?: SearchParamValue | (() => SearchParamValue),
-  multiple?: false
-): [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>];
-export function useSearchParamState(
-  key: string,
-  fallbackValue: string[] | (() => string[]),
-  multiple: true
-): [string[], React.Dispatch<React.SetStateAction<string[]>>];
-export function useSearchParamState(
-  key: string,
-  fallbackValue?:
-    | string[]
-    | SearchParamValue
-    | (() => SearchParamValue)
-    | (() => string[]),
-  multiple: boolean = false
-):
-  | [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>]
-  | [string[], React.Dispatch<React.SetStateAction<string[]>>] {
-  let defaultRef = useRef<SearchParamValue | string[]>(multiple ? [] : null);
-  let [value, setValue] = useState<SearchParamValue | string[]>(() => {
-    let params = new URLSearchParams(window.location.search);
-    let value = multiple ? params.getAll(key) : params.get(key);
-
-    // Even if we don't use the default value here, we want to keep it for later
-    // so we can see if the default value is the active value. If that's the case,
-    // we remove the parameter from the search parameters.
-    if (typeof fallbackValue === "function") {
-      defaultRef.current = fallbackValue();
-    } else {
-      defaultRef.current = fallbackValue ?? (multiple ? [] : null);
-    }
-
-    if (!value) {
-      return defaultRef.current;
-    }
-
-    return value;
-  });
-
-  useEffect(() => {
-    let params = new URLSearchParams(window.location.search);
-
-    if (multiple) {
-      params.delete(key);
-      (value as string[]).forEach((v) => params.append(key, v));
-    } else if (value && value !== defaultRef.current) {
-      params.set(key, String(value));
-    } else {
-      params.delete(key);
-    }
-
-    let newPath = window.location.pathname;
-    let paramString = params.toString();
-    if (paramString.length) {
-      newPath += "?" + paramString;
-    }
-
-    window.history.replaceState({ path: newPath }, "", newPath);
-  }, [key, value]);
-
-  // @ts-ignore i give up
-  return [value, setValue];
-}