@a-type/ui 2.0.11 → 2.1.1

package/src/hooks/useStorage.ts

@@ -0,0 +1,107 @@
+import { useEffect, useMemo } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+
+function makeUseStorage(
+	storage: Storage,
+	cache: Record<string, any>,
+	name: string = storage.constructor.name,
+) {
+	return function useStorage<T>(
+		key: string,
+		initialValue: T,
+		writeInitialValue = false,
+	) {
+		// using useMemo to execute synchronous code in render just once.
+		// this hook comes before useLocalStorageCache because we want to load
+		// values into the cache before accessing them.
+		useMemo(() => {
+			if (typeof window === 'undefined') return;
+
+			try {
+				const stored = storage.getItem(key);
+				if (stored) {
+					cache[key] = JSON.parse(stored);
+				}
+			} catch (err) {
+				console.error(`Error loading use-${name} value for ${key}: ${err}`);
+				storage.removeItem(key);
+			}
+		}, [key]);
+		const snapshot = useSnapshot(cache);
+		const storedValue = (snapshot[key] ?? initialValue) as T;
+
+		const hasValue = snapshot[key] !== undefined;
+		useEffect(() => {
+			if (!hasValue && writeInitialValue) {
+				storage.setItem(key, JSON.stringify(initialValue));
+			}
+		}, [hasValue, initialValue, writeInitialValue, key]);
+
+		// Return a wrapped version of useState's setter function that
+		// persists the new value to localStorage. It's throttled to prevent
+		// frequent writes to localStorage, which can be costly.
+		const setValue = useMemo(
+			() =>
+				throttle(
+					(value: T | ((current: T) => T)) => {
+						if (typeof window === 'undefined') return;
+
+						try {
+							// Allow value to be a function so we have same API as useState
+							const valueToStore =
+								value instanceof Function ? value(storedValue) : value;
+							// Save to local storage
+							storage.setItem(key, JSON.stringify(valueToStore));
+							// sync it to other instances of the hook via the global cache
+							cache[key] = valueToStore;
+						} catch (error) {
+							console.error(
+								`Error setting use-${name} value for ${key}: ${value}: ${error}`,
+							);
+							throw new Error('Error setting value');
+						}
+					},
+					300,
+					{ trailing: true, leading: true },
+				),
+			[key, storedValue],
+		) as (value: T | ((current: T) => T)) => void;
+
+		return [storedValue, setValue] as const;
+	};
+}
+
+export const useLocalStorage = makeUseStorage(
+	localStorage,
+	proxy({}),
+	'LocalStorage',
+);
+export const useSessionStorage = makeUseStorage(
+	sessionStorage,
+	proxy({}),
+	'SessionStorage',
+);
+
+function throttle(
+	func: (...args: any[]) => any,
+	wait: number,
+	options?: { trailing?: boolean; leading?: boolean },
+): (...args: any[]) => any {
+	let previous = 0;
+	return function (this: any, ...args: any[]) {
+		const now = Date.now();
+		if (!previous && options?.leading === false) previous = now;
+		const remaining = wait - (now - previous);
+		if (remaining <= 0) {
+			if (options?.trailing === false) previous = now;
+			return func(...args);
+		}
+		if (options?.trailing === false) {
+			return func(...args);
+		}
+		return setTimeout(() => {
+			previous = options?.leading === false ? 0 : Date.now();
+			func(...args);
+		}, remaining);
+	};
+}

package/src/hooks/withProps.tsx

@@ -8,3 +8,15 @@ export const withProps = <T extends {}>(
 		return <Component {...props} {...extras} />;
 	};
 };
+
+type OptionalKeys<T> = {
+	[K in keyof T]-?: undefined extends T[K] ? K : never;
+}[keyof T];
+export const withoutProps = <T extends {}, P extends OptionalKeys<T>>(
+	Component: React.ComponentType<T>,
+	remove: P[],
+) => {
+	return (props: Omit<T, P>) => {
+		return <Component {...(props as any)} />;
+	};
+};

package/src/uno/colors.ts

@@ -7,7 +7,7 @@ export const colorConstants = `
 
 export const dynamicThemeComputedColors = (name: string) => `
 	--color-${name}: oklch(calc(90% - 35% * var(--dyn-source-mode-adjust, 0) - (var(--dyn-mode-sign, 1) * var(--dyn-${name}-base-dim, 0%))) calc(var(--dyn-${name}-sat-mult,1) * (35% - 2% * var(--dyn-source-mode-adjust, 0))) var(--dyn-${name}-source, 0));
-	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.03)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-light: oklch(from var(--color-${name}) calc(l + 0.08 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-dark: oklch(from var(--color-${name}) calc(l - 0.26 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-ink: oklch(from var(--color-${name}) calc(l - 0.45 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));