react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.11

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.1",
+    "version": "0.5.0-beta.11",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -42,41 +42,38 @@
     },
     "dependencies": {
         "@gorhom/portal": "^1.0.14",
+        "@radix-ui/react-compose-refs": "^1.1.2",
         "@react-native-vector-icons/feather": "^12.4.0",
         "@react-native-vector-icons/material-design-icons": "^12.4.0",
         "color": "^4.2.3",
         "date-fns": "^4.1.0",
         "eventemitter2": "^6.4.9",
-        "lodash.debounce": "^4.0.8",
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.omitby": "^4.6.0",
+        "flubber": "^0.4.2",
         "use-sync-external-store": "^1.2.0"
     },
     "peerDependencies": {
         "@react-native-documents/picker": "^10.1.2",
         "react": "19.1.0",
         "react-native": "0.81.4",
-        "react-native-unistyles": "^3.0.15",
-        "react-native-web": "~0.21.1"
+        "react-native-svg": ">=12.1.0",
+        "react-native-unistyles": "^3.0.22",
+        "react-native-web": "~0.21.1",
+        "react-native-reanimated": ">=4.0.0",
+        "react-native-redash": ">=18.0.0"
     },
     "devDependencies": {
+        "@types/flubber": "^0.4.0",
+        "react-native-svg": "^15.10.1",
         "@react-native-documents/picker": "^10.1.2",
         "@types/color": "^3.0.3",
         "@types/jest": "^29.1.2",
-        "@types/lodash": "^4.17.13",
-        "@types/lodash.debounce": "^4.0.7",
-        "@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",
         "react-native": "0.81.4",
         "react-native-builder-bob": "^0.17.1",
-        "react-native-unistyles": "^3.0.15",
+        "react-native-reanimated": "~4.1.1",
+        "react-native-unistyles": "^3.0.22",
         "react-native-web": "~0.21.1"
     },
     "eslintIgnore": [

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/styles/themes/LightTheme.tsx

@@ -25,7 +25,7 @@ export const generateLightThemeColors = (
         error: palette.error40,
         errorContainer: palette.error90,
         onPrimary: palette.primary100,
-        onPrimaryContainer: palette.primary10,
+        onPrimaryContainer: palette.primary30,
         onSecondary: palette.secondary100,
         onSecondaryContainer: palette.secondary10,
         onTertiary: palette.tertiary100,

package/utils/extractPropertiesFromStyles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+// TODO - abstract this
+export function extractPropertiesFromStyles(
+    _objectsArray: Record<string, any>,
+    propertiesToExtract: string[],
+) {
+    const extracted: Record<string, any> = {};
+
+    const objectsArray = StyleSheet.flatten(_objectsArray);
+
+    for (let i = objectsArray.length - 1; i >= 0; i--) {
+        const obj = objectsArray[i];
+
+        for (const prop of propertiesToExtract) {
+            if (!obj) continue;
+            if (prop in obj) {
+                // @ts-ignore
+                extracted[prop] = obj[prop];
+            }
+        }
+    }
+
+    return extracted;
+}

package/utils/lodash.ts

@@ -1,9 +1,80 @@
-import memoize from 'lodash.memoize';
-export { default as debounce } from 'lodash.debounce';
-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 = () => {};

package/utils/repository.ts

@@ -1,19 +1,11 @@
-import EventEmitter, {
-    type ConstructorOptions,
-    type event as Event,
-    type eventNS,
-} from 'eventemitter2';
-
-import { debounce } from './lodash';
-
-interface RepositoryConstructor<T> extends ConstructorOptions {
+interface RepositoryConstructor<T> {
     onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
     name?: string;
 }
 
 let id = Date.now();
 
-export class Repository<T> extends EventEmitter {
+export class Repository<T> {
     private registry: Record<string, T> = {};
     readonly #name!: string;
 
@@ -30,9 +22,7 @@ export class Repository<T> extends EventEmitter {
     constructor({
         onRegister = arg => arg,
         name = Repository.uniqueId,
-        ...options
     }: RepositoryConstructor<T> = {}) {
-        super(options);
         this.#onRegister = onRegister;
         this.#name = name;
     }
@@ -41,11 +31,6 @@ export class Repository<T> extends EventEmitter {
         return !!this.registry[itemName];
     };
 
-    emit(event: eventNS | Event, ...values: any[]) {
-        event = typeof event === 'string' ? `${this.#name}::event` : event;
-        return super.emit(event, ...values);
-    }
-
     /**
      * Register a item with the src.
      */
@@ -57,8 +42,6 @@ export class Repository<T> extends EventEmitter {
             ...this.registry,
             [itemName]: updatedItem,
         };
-
-        this.emit('item_registered', itemName);
     };
 
     /**
@@ -67,37 +50,4 @@ export class Repository<T> extends EventEmitter {
     getAll = () => {
         return this.registry;
     };
-
-    /**
-     * Register a listener to the module registry.
-     * Return value returns a function that removes the listener.
-     */
-    listen = (
-        callback: (events: string[]) => void,
-        { throttle = 100 }: { throttle?: number } = {},
-    ) => {
-        let cached: string[] = [];
-
-        const wrappedCallback = () => {
-            callback(cached);
-            cached = [];
-        };
-
-        const debouncedCallback = !throttle
-            ? wrappedCallback
-            : debounce(wrappedCallback, Math.abs(throttle), {
-                  trailing: true,
-                  leading: false,
-              });
-
-        const handledCallback = (itemName: string) => {
-            cached.push(itemName);
-            debouncedCallback();
-        };
-
-        this.on('item_registered', handledCallback);
-        return () => {
-            this.off('item_registered', handledCallback);
-        };
-    };
 }

package/hooks/useSearchable.tsx

@@ -1,74 +0,0 @@
-import { type ReactElement, useCallback, useMemo } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import {
-    TextInput,
-    type TextInputElementProps,
-    type TextInputProps,
-} from '../components/TextInput';
-import useControlledValue from './useControlledValue';
-
-export interface UseSearchableProps {
-    searchable?: boolean;
-    onQueryChange?: (search: string) => void;
-    query?: string;
-    searchInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
-}
-
-const useSearchInputProps = (props?: Partial<TextInputProps>) => {
-    const onChange = props?.onChangeText;
-    const onPressClear = useCallback(() => {
-        onChange?.('');
-    }, [onChange]);
-
-    const right = useCallback(
-        ({ color, forceFocus }: TextInputElementProps) => (
-            <IconButton
-                name={props?.value ? 'close-circle-outline' : 'magnify'}
-                onPress={props?.value ? onPressClear : forceFocus}
-                color={color}
-            />
-        ),
-        [onPressClear, props?.value],
-    );
-
-    return useMemo(
-        () => (props?.right === undefined ? props : { right, ...props }),
-        [props, right],
-    );
-};
-
-const useSearchable = ({
-    searchable,
-    onQueryChange,
-    query,
-    searchInputProps,
-}: UseSearchableProps = {}): ReactElement<TextInputProps> | null => {
-    const [value, onValueChange] = useControlledValue({
-        value: query || '',
-        defaultValue: '', // to disable the useControlledValue inside TextInput
-        onChange: onQueryChange,
-        disabled: !searchable,
-    });
-
-    const props = useSearchInputProps(
-        useMemo(
-            () => ({
-                ...searchInputProps,
-                value,
-                onChangeText: onValueChange,
-            }),
-            [onValueChange, searchInputProps, value],
-        ),
-    );
-
-    return useMemo(() => {
-        if (!searchable || !onQueryChange) return null;
-
-        return <TextInput {...props} />;
-    }, [onQueryChange, props, searchable]);
-};
-
-export { useSearchInputProps };
-
-export default useSearchable;