react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.5

package/hooks/useControlledValue.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import useLatest from './useLatest';
+
 type ReturnType<T> = [T, (value: T, ...args: any[]) => void];
 
 type Args<T> = {
@@ -31,21 +33,35 @@ const useControlledValue = <T,>({
 
     const isUncontrolled = useRef(valueProp).current === undefined;
     const [uncontrolledValue, setValue] = useState(value);
+    const valuePropRef = useLatest(valueProp);
+    const onChangeRef = useLatest(onChange);
+    const manipulateValueRef = useLatest(manipulateValue);
+    const uncontrolledValueRef = useLatest(uncontrolledValue);
 
     const updateValue = useCallback(
         (val: T, ...rest: any[]) => {
             if (disabled) return;
 
             if (isUncontrolled) {
-                setValue(manipulateValue(val, uncontrolledValue));
+                setValue(manipulateValueRef.current(val, uncontrolledValueRef.current));
             }
 
-            onChange?.(
-                manipulateValue(val, isUncontrolled ? uncontrolledValue : valueProp),
+            onChangeRef.current?.(
+                manipulateValueRef.current(
+                    val,
+                    isUncontrolled ? uncontrolledValueRef.current : valuePropRef.current,
+                ),
                 ...rest,
             );
         },
-        [disabled, isUncontrolled, manipulateValue, onChange, uncontrolledValue, valueProp],
+        [
+            disabled,
+            isUncontrolled,
+            manipulateValueRef,
+            onChangeRef,
+            uncontrolledValueRef,
+            valuePropRef,
+        ],
     );
 
     useEffect(() => {

package/hooks/useWhatHasUpdated.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo } from 'react';
+
+import useLatest from './useLatest';
+
+const map = new Map();
+
+export const whatHasUpdatedFactory = <T extends Record<string, unknown>>(
+    name: string,
+    prevObject: T,
+    { debug = false, useCached = false } = {},
+) => {
+    const getPrev = () => {
+        if (!map.has(name)) map.set(name, prevObject);
+        return useCached ? map.get(name) : prevObject;
+    };
+
+    const setPrev = (value: T) => {
+        if (useCached) map.set(name, value);
+        else prevObject = value;
+    };
+
+    return (nextObject: T) => {
+        const old = getPrev();
+        const changes = Object.keys({ ...nextObject, ...old }).reduce((all, key) => {
+            const newValue = nextObject?.[key];
+            const oldValue = old[key];
+            if (oldValue === newValue) return all;
+            return { ...all, [key]: { newValue, oldValue } };
+        }, {});
+
+        setPrev(nextObject);
+
+        if (!debug && !Object.keys(changes).length) return;
+        // eslint-disable-next-line no-console
+        console.log('🚨🕵️ UPDATED', name, changes);
+    };
+};
+
+export const useWhatHasUpdated = (name: string, props: Record<string, any>) => {
+    const argRef = useLatest({ name, props });
+    const checkFunc = useMemo(
+        () => whatHasUpdatedFactory(argRef.current.name, argRef.current.props),
+        [argRef],
+    );
+    useEffect(() => {
+        checkFunc(props);
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.3",
+    "version": "0.5.0-beta.5",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -47,10 +47,6 @@
         "color": "^4.2.3",
         "date-fns": "^4.1.0",
         "eventemitter2": "^6.4.9",
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.omitby": "^4.6.0",
         "use-sync-external-store": "^1.2.0"
     },
     "peerDependencies": {
@@ -64,11 +60,6 @@
         "@react-native-documents/picker": "^10.1.2",
         "@types/color": "^3.0.3",
         "@types/jest": "^29.1.2",
-        "@types/lodash": "^4.17.13",
-        "@types/lodash.get": "^4.4.7",
-        "@types/lodash.keyby": "^4.6.7",
-        "@types/lodash.memoize": "^4.1.7",
-        "@types/lodash.omitby": "^4.6.7",
         "@types/react": "~19.1.10",
         "@types/use-sync-external-store": "^1.5.0",
         "react": "19.1.0",

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -10,9 +10,12 @@ import {
     type ShortcutsManagerProps,
 } from './utils';
 
+const defaultScopes: ShortcutsManagerProps['scopes'] = [];
+const defaultShortcuts: Shortcut[] = [];
+
 const _ShortcutsManager = ({ shortcuts, scopes, children }: ShortcutsManagerProps) => {
-    const shortcutsRef = useRef<Shortcut[]>(shortcuts || []);
-    const scopesRef = useRef(scopes);
+    const shortcutsRef = useRef<Shortcut[]>(shortcuts || defaultShortcuts);
+    const scopesRef = useRef(scopes || defaultScopes);
     const parentContextRef = useContext(ShortcutsManagerContext);
 
     const contextValue = useMemo(() => {

package/styles/shadow.ts

@@ -8,7 +8,8 @@ export const inputRange: MD3Elevation[] = [0, 1, 2, 3, 4, 5];
 export const shadowHeight = [0, 1, 2, 4, 6, 8];
 export const shadowRadius = [0, 3, 6, 8, 10, 12];
 
-export default function shadow(elevation: number) {
+export default function shadow(_elevation: number) {
+    const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
     return {
         shadowColor: MD3_SHADOW_COLOR,
         shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,

package/utils/lodash.ts

@@ -1,8 +1,80 @@
-import memoize from 'lodash.memoize';
-export { default as get } from 'lodash.get';
-export { default as keyBy } from 'lodash.keyby';
-export { default as memoize } from 'lodash.memoize';
-export { default as omitBy } from 'lodash.omitby';
+type MemoizeCache<K = any, V = any> = {
+    has(key: K): boolean;
+    get(key: K): V | undefined;
+    set(key: K, value: V): unknown;
+};
+
+type MemoizeFn = {
+    <T extends (...args: any[]) => any>(
+        func: T,
+        resolver?: (...args: Parameters<T>) => any,
+    ): MemoizedFunction<T>;
+    Cache: { new (): MemoizeCache<any, any> };
+};
+
+export interface MemoizedFunction<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): ReturnType<T>;
+    cache: MemoizeCache<any, ReturnType<T>>;
+}
+
+export const memoize: MemoizeFn = ((
+    func: (...args: any[]) => any,
+    resolver?: (...args: any[]) => any,
+) => {
+    if (typeof func !== 'function') {
+        throw new TypeError('Expected a function');
+    }
+    const memoized = function (this: unknown, ...args: any[]) {
+        const key = resolver ? resolver.apply(this, args) : args[0];
+        const { cache } = memoized as MemoizedFunction<typeof func>;
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = func.apply(this, args);
+        cache.set(key, result);
+        return result;
+    } as MemoizedFunction<typeof func>;
+
+    (memoized as MemoizedFunction<typeof func>).cache = new memoize.Cache();
+    return memoized;
+}) as MemoizeFn;
+
+memoize.Cache = Map;
+
+type Iteratee<T> = ((item: T) => string | number | symbol) | keyof T;
+
+export const keyBy = <T extends Record<string, any>>(
+    collection: T[],
+    iteratee: Iteratee<T>,
+): Record<string, T> => {
+    const result: Record<string, T> = {};
+    if (!Array.isArray(collection)) return result;
+
+    const getter = typeof iteratee === 'function' ? iteratee : (item: T) => item[iteratee];
+    for (const item of collection) {
+        const key = getter(item);
+        if (key != null) {
+            result[String(key)] = item;
+        }
+    }
+    return result;
+};
+
+type Predicate = (value: any, key: string) => boolean;
+
+export const omitBy = <T extends Record<string, any>>(
+    object: T,
+    predicate: Predicate,
+): Partial<T> => {
+    if (object == null) return {};
+    const result: Partial<T> = {};
+    for (const [key, value] of Object.entries(object)) {
+        if (!predicate(value, key)) {
+            result[key as keyof T] = value;
+        }
+    }
+    return result;
+};
 
 export const isNil = (value: unknown): value is null | undefined => value == null;
 export const noop = () => {};