react-native-molecules 0.5.0-beta.0 → 0.5.0-beta.10

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = Omit<ViewProps, 'children'> & {
     /**
@@ -21,7 +21,6 @@ export type Props = Omit<ViewProps, 'children'> & {
      *  Horizontal spacing of the Divider
      */
     spacing?: number;
-    style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -70,9 +69,9 @@ const VerticalDivider = ({
             style={[
                 verticalDividerStyles.root,
                 style,
-                topInset && { marginTop: topInset },
-                bottomInset && { marginBottom: bottomInset },
-                spacing && { marginHorizontal: spacing },
+                topInset ? { marginTop: topInset } : undefined,
+                bottomInset ? { marginBottom: bottomInset } : undefined,
+                spacing ? { marginHorizontal: spacing } : undefined,
             ]}
         />
     );
@@ -93,7 +92,9 @@ export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
-export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
 
 export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import VerticalDividerDefault from './VerticalDivider';
 
-registerMoleculesComponents({
-    VerticalDivider: VerticalDividerDefault,
-});
-
 export const VerticalDivider = getRegisteredComponentWithFallback(
     'VerticalDivider',
     VerticalDividerDefault,

package/core/componentsRegistry.ts

@@ -1,18 +1,13 @@
-import EventEmitter, {
-    type ConstructorOptions,
-    type event as Event,
-    type eventNS,
-} from 'eventemitter2';
 import type { ComponentType } from 'react';
 
-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;
 
@@ -29,9 +24,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;
     }
@@ -40,11 +33,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.
      */
@@ -58,8 +46,6 @@ export class Repository<T> extends EventEmitter {
             ...this.registry,
             [itemName]: updatedItem,
         };
-
-        this.emit('item_registered', itemName);
     };
 
     /**
@@ -92,17 +78,14 @@ export class Repository<T> extends EventEmitter {
 
 export const componentsRepository = new Repository<Record<string, any>>({
     name: 'Components_Repository',
-    maxListeners: 0,
 });
 
 export const componentsStylesRepository = new Repository<Record<string, any>>({
     name: 'Components_Styles_Repository',
-    maxListeners: 0,
 });
 
 export const componentsUtilsRepository = new Repository<Record<string, any>>({
     name: 'Components_Utils_Repository',
-    maxListeners: 0,
 });
 
 export const registerMoleculesComponent = componentsRepository.registerOne;
@@ -162,3 +145,32 @@ export function getRegisteredComponentWithFallback<T extends ComponentType<any>>
 ): T {
     return (getRegisteredMoleculesComponent(name) ?? defaultComponent) as T;
 }
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultStyles The default styles to use as fallback
+ * @returns The registered styles or the default styles
+ */
+export function getRegisteredComponentStylesWithFallback<T extends unknown>(
+    name: string,
+    defaultStyles: T,
+): T {
+    return (getRegisteredMoleculesComponentStyles(name) ?? defaultStyles) as T;
+}
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultUtils The default utils to use as fallback
+ * @returns The registered utils or the default utils
+ */
+export function getRegisteredComponentUtilsWithFallback<T extends unknown>(
+    name: string,
+    defaultUtils: T,
+    key?: string,
+): T {
+    return key
+        ? (((getRegisteredComponentUtils(name) as Record<string, any>)?.[key] ?? defaultUtils) as T)
+        : ((getRegisteredComponentUtils(name) ?? defaultUtils) as T);
+}

package/hocs/withPortal.tsx

@@ -6,7 +6,7 @@ const withPortal =
     <T,>(Component: ComponentType<T>) =>
     (props: T) => {
         return (
-            <Portal name={'withPortal' + (Component.displayName ?? '')}>
+            <Portal>
                 {/* @ts-ignore */}
                 <Component {...(props as T)} />
             </Portal>

package/hooks/index.tsx

@@ -2,7 +2,6 @@
 
 export * from './useActionState';
 export * from './useActive';
-export { default as useBreakpoints } from './useBreakpoints';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
 export { default as useControlledValue } from './useControlledValue';

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/useSubcomponents.tsx

@@ -1,14 +1,23 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { Children, type FC, isValidElement, useMemo } from 'react';
 
 export type UseSubcomponentsProps<T extends string> = {
-    children: ReactElement | ReactElement[];
+    children: ReactNode;
     /**
      * array of displayName as string
      * */
     allowedChildren: T[];
+    /**
+     * If true, also returns the remaining children that don't match any of the allowedChildren
+     * in a `rest` property
+     */
+    includeRest?: boolean;
 };
 
+export type UseSubcomponentsResult<T extends string, IncludeRest extends boolean = false> = {
+    [key in T]: ReactElement[];
+} & (IncludeRest extends true ? { rest: ReactNode[] } : {});
+
 /**
  *  This will return an object with the displayNames as the property names
  *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
@@ -19,41 +28,66 @@ export type UseSubcomponentsProps<T extends string> = {
  *    Drawer_Footer: [],
  *    DrawerItem: [],
  *  }
+ *
+ *  If includeRest is true, also returns:
+ *  {
+ *    ...above,
+ *    rest: [remaining children that don't match allowedChildren]
+ *  }
  *  */
-const useSubcomponents = <T extends string = string>({
+function useSubcomponents<T extends string = string, IncludeRest extends boolean = false>({
     children,
     allowedChildren,
-}: UseSubcomponentsProps<T>) => {
+    includeRest,
+}: UseSubcomponentsProps<T> & { includeRest?: IncludeRest }): UseSubcomponentsResult<
+    T,
+    IncludeRest
+> {
     return useMemo(() => {
         // this will create properties with default empty array values even if they don't exist in the children
-        const defaultContext = allowedChildren.reduce((context, childName) => {
-            return {
-                ...context,
-                [childName]: [],
-            };
-        }, {}) as {
-            [key in T]: ReactElement[];
-        };
+        const defaultContext = allowedChildren.reduce(
+            (context, childName) => {
+                return {
+                    ...context,
+                    [childName]: [],
+                };
+            },
+            includeRest ? { rest: [] as ReactNode[] } : {},
+        ) as UseSubcomponentsResult<T, IncludeRest>;
 
-        return Children.map(children, child => child).reduce((context, child) => {
-            if (!isValidElement(child)) return context;
+        const childArray = Children.toArray(children);
 
-            if (
-                !allowedChildren.find(name => name === ((child.type as FC).displayName as string))
-            ) {
+        return childArray.reduce((context, child) => {
+            if (!isValidElement(child)) {
+                // Non-element children go to rest if includeRest is enabled
+                if (includeRest) {
+                    return {
+                        ...context,
+                        rest: [...(context as any).rest, child],
+                    };
+                }
                 return context;
             }
 
-            const name = (child.type as FC).displayName as T;
+            const displayName = (child.type as FC)?.displayName as string | undefined;
 
-            if (!name) return context;
+            if (!displayName || !allowedChildren.includes(displayName as T)) {
+                // Unmatched elements go to rest if includeRest is enabled
+                if (includeRest) {
+                    return {
+                        ...context,
+                        rest: [...(context as any).rest, child],
+                    };
+                }
+                return context;
+            }
 
             return {
                 ...context,
-                [name]: [...context[name], child],
+                [displayName]: [...(context as any)[displayName], child],
             };
         }, defaultContext);
-    }, [allowedChildren, children]);
-};
+    }, [allowedChildren, children, includeRest]);
+}
 
 export default useSubcomponents;

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.0",
+    "version": "0.5.0-beta.10",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -42,40 +42,37 @@
     },
     "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-svg": ">=12.1.0",
         "react-native-unistyles": "^3.0.15",
-        "react-native-web": "~0.21.1"
+        "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-reanimated": "~4.1.1",
         "react-native-unistyles": "^3.0.15",
         "react-native-web": "~0.21.1"
     },

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/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,7 +1,8 @@
-import type { Scope, Shortcut } from '../types';
-import { createFastContext } from '../../fast-context';
 import type { ReactNode } from 'react';
 
+import { createFastContext } from '../../fast-context';
+import type { Scope, Shortcut } from '../types';
+
 export type ShortcutsManagerContextType = {
     shortcuts: Record<string, Shortcut>;
     scopes: Record<string, Scope>;

package/shortcuts-manager/useShortcut/index.tsx

@@ -1,2 +1,2 @@
-export { default as useShortcut } from './useShortcut';
 export * from './types';
+export { default as useShortcut } from './useShortcut';

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
-import useLatest from '../../hooks/useLatest';
 
+import useLatest from '../../hooks/useLatest';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
 import type { ShortcutEventDetail } from '../types';
 import { calculateShortcutEventName } from '../utils';

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 = () => {};