react-native-molecules 0.5.0-beta.22 → 0.5.0-beta.24

package/hooks/useContrastColor.ts

@@ -1,8 +1,7 @@
+import { resolveContrastColor } from '@react-native-molecules/utils/helpers/resolveContrastColor';
 import { useMemo } from 'react';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { resolveContrastColor } from '../utils/color';
-
 export const useContrastColor = (bgColor: string, lightColor?: string, darkColor?: string) => {
     const isDarkMode = useUnistyles().theme.dark;
 

package/hooks/useFilePicker.tsx

@@ -1,3 +1,4 @@
+import { isNil, omitBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
 import {
@@ -5,7 +6,6 @@ import {
     type DocumentPickerOptions,
     type DocumentResult,
 } from '../utils/DocumentPicker';
-import { isNil, omitBy } from '../utils/lodash';
 
 export const useFilePicker = (options: DocumentPickerOptions) => {
     const openFilePicker = useCallback(

package/hooks/useHandleNumberFormat.tsx

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { usePrevious } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 
 import { formatNumberWithMask, normalizeToNumberString } from '../utils';
-import { isNil } from '../utils/lodash';
-import usePrevious from './usePrevious';
 
 export type NumberMaskConfig = {
     prefix?: string;

package/hooks/useMediaQuery.tsx

@@ -1,8 +1,7 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-import { isNil } from '../utils/lodash';
-
 type Query = {
     maxWidth?: number;
     minWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.22",
+    "version": "0.5.0-beta.24",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -9,7 +9,8 @@
         "components/DatePickerInline/store.tsx",
         "components/List/context.tsx",
         "components/Select/context.tsx",
-        "components/TimePicker/context.tsx"
+        "components/TimePicker/context.tsx",
+        "components/Popover/common.ts"
     ],
     "files": [
         "components",
@@ -48,6 +49,7 @@
         "perf": "npx reassure"
     },
     "dependencies": {
+        "@react-native-molecules/utils": "workspace:^",
         "@gorhom/portal": "^1.0.14",
         "@radix-ui/react-compose-refs": "^1.1.2",
         "@react-native-vector-icons/feather": "^12.4.0",
@@ -89,30 +91,5 @@
         "test-cases/node_modules",
         "dist",
         "cache"
-    ],
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "rootDir": "src"
-                }
-            ]
-        ]
-    }
+    ]
 }

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { memo, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import EventsManager from '../EventsManager';
 import type { Shortcut } from '../types';
 import {

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { ReactNode } from 'react';
 
-import { createFastContext } from '../../fast-context';
 import type { Scope, Shortcut } from '../types';
 
 export type ShortcutsManagerContextType = {

package/shortcuts-manager/useSetScopes/useSetScopes.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager/utils';
 import type { Scope } from '../types';
 

package/shortcuts-manager/useShortcut/useShortcut.tsx

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

package/utils/extractTextStyles.ts

@@ -1,7 +1,6 @@
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
 import type { TextStyle } from 'react-native';
 
-import { memoize } from './lodash';
-
 const textStyleProps = [
     'color',
     'fontFamily',

package/utils/formatNumberWithMask/formatNumberWithMask.ts

@@ -1,5 +1,6 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+
 import { createNumberMask, type CreateNumberMaskProps } from '../createNumberMask';
-import { isNil } from '../lodash';
 import { formatWithMask } from './formatWithMask';
 
 export type FormatNumberWithMaskProps = CreateNumberMaskProps & {

package/utils/index.ts

@@ -1,7 +1,5 @@
 export { addEventListener, addListener } from './addEventListener';
 export { BackgroundContext } from './backgroundContext';
-export { default as color, resolveContrastColor } from './color';
-export * from './compare';
 export { default as composeEventHandlers } from './composeEventHandlers';
 export { createNumberMask, type CreateNumberMaskProps } from './createNumberMask';
 export * from './createSyntheticEvent';
@@ -16,5 +14,4 @@ export {
     normalizeToNumberString,
     type NormalizeToNumberStringProps,
 } from './normalizeToNumberString';
-export { Repository } from './repository';
 export * from './resolveStateVariant';

package/utils/normalizeToNumberString/normalizeToNumberString.ts

@@ -1,4 +1,4 @@
-import { isNil } from '../lodash';
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 
 export type NormalizeToNumberStringProps = {
     text: string;

package/context-bridge/index.tsx

@@ -1,87 +0,0 @@
-import type { ComponentType, Context as ContextType, PropsWithChildren } from 'react';
-import { Fragment, useContext, useId, useMemo, useRef, useState } from 'react';
-
-import typedMemo from '../hocs/typedMemo';
-import { Repository } from '../utils/repository';
-
-// https://github.com/pmndrs/its-fine/blob/main/src/index.tsx
-// In development, React will warn about using contexts between renderers.
-// Hide the warning because its-fine fixes this issue
-// https://github.com/facebook/react/pull/12779
-function wrapContext<T>(context: React.Context<T>): React.Context<T> {
-    try {
-        return Object.defineProperties(context, {
-            _currentRenderer: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-            _currentRenderer2: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-        });
-    } catch (_) {
-        return context;
-    }
-}
-
-export const createContextBridge = <T extends object>(
-    bridgeName: string,
-    Wrapper: ComponentType<T>,
-    contexts: ContextType<any>[] = [],
-) => {
-    const respository = new Repository<ContextType<any>[]>({
-        name: bridgeName,
-        onRegister: (arg, name, registry) => {
-            return [registry[name] ?? [], arg].flat();
-        },
-    });
-
-    return {
-        registerContextToBridge: (updatedContexts: ContextType<any> | ContextType<any>[]) => {
-            respository.register(
-                'contexts',
-                ([] as ContextType<any>[])
-                    .concat(updatedContexts)
-                    .map(context => wrapContext(context)),
-            );
-        },
-        BridgedComponent: typedMemo((props: PropsWithChildren<T> & { name?: string }) => {
-            const { name, ...rest } = props;
-            const contextValuesRef = useRef<any[]>([]);
-
-            const id = useId();
-
-            const [allContexts] = useState(() =>
-                Array.from(new Set([...contexts, ...Object.values(respository.getAll()).flat()])),
-            );
-
-            for (const i in allContexts) {
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                contextValuesRef.current[i] = useContext(allContexts[i]);
-            }
-
-            const content = useMemo(() => {
-                return allContexts.reduce((acc, Context, currentIndex) => {
-                    return (
-                        <Context.Provider value={contextValuesRef.current[currentIndex]}>
-                            {acc}
-                        </Context.Provider>
-                    );
-                }, <>{props.children}</>);
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-            }, [...contextValuesRef.current, allContexts, props.children]);
-
-            const _key = name ? name + id : id;
-            return (
-                <Wrapper name={name} {...(rest as T)}>
-                    <Fragment key={_key}>{content}</Fragment>
-                </Wrapper>
-            );
-        }),
-    };
-};

package/fast-context/index.tsx

@@ -1,190 +0,0 @@
-import {
-    type Context,
-    createContext,
-    type ReactNode,
-    type RefObject,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
-
-import typedMemo from '../hocs/typedMemo';
-import { usePrevious } from '../hooks';
-import { shallowCompare } from '../utils';
-
-type StoreDataType = Record<string, any>;
-
-type SelectorOutputType<IStore, SelectorOutput> = (store: IStore) => SelectorOutput;
-
-type UseStoreDataReturnType<T> = {
-    get: () => T;
-    set: (value: (prev: T) => Partial<T>) => void;
-    store: RefObject<T>;
-    subscribe: (callback: () => void) => () => void;
-};
-
-const useStoreData = <IStore extends StoreDataType>(
-    value: IStore,
-    defaultValue: IStore | null,
-    watch: boolean = false,
-): UseStoreDataReturnType<IStore> => {
-    const store = useRef<IStore>({ ...defaultValue, ...(value as IStore) });
-    const watchRef = useRef(watch);
-
-    const get = useCallback(() => store.current, [store]);
-
-    const subscribers = useRef(new Set<() => void>());
-
-    const set = useCallback(
-        (callback: (prev: IStore) => Partial<IStore>) => {
-            store.current = { ...store.current, ...callback(store.current) };
-            subscribers.current.forEach(subscriber => subscriber());
-        },
-        [store],
-    );
-
-    const subscribe = useCallback((callback: () => void) => {
-        subscribers.current.add(callback);
-
-        return () => subscribers.current.delete(callback);
-    }, []);
-
-    /** The effect is required to trigger the updates on the consumers */
-    useEffect(() => {
-        if (!watchRef.current) return;
-        set(prev => ({ ...prev, ...value }));
-    }, [set, value]);
-
-    /**
-     * Cases:
-     * 1. when the value updates, we want the data to be updated immediately
-     * 2. the data stored in store.current may not be current with regards to the parent and the parent must have dropped the references related to the data.
-     * 3. because store.current is a ref, on watch and change, if we update store.current, no side-effect introduced.
-     */
-    if (usePrevious(value).current !== value && watchRef.current) {
-        store.current = { ...store.current, ...value };
-    }
-
-    return useMemo(
-        () => ({
-            get,
-            set,
-            subscribe,
-            store,
-        }),
-        [get, set, subscribe],
-    );
-};
-
-export const createFastContext = <T extends StoreDataType = {}>(
-    defaultValue: T | null = null,
-    watch: boolean = false,
-) => {
-    const context = createContext<UseStoreDataReturnType<T> | null>(null);
-
-    return {
-        /**
-         * using the value from here will never cause a rerender as context is based on refs.
-         */
-        useStoreRef: createUseRefContext(context),
-
-        /**
-         *
-         * the value is memoized and thus changing the value will have no effect.
-         * use key prop to unmount and remount if necessary. alternatively use set from the context to update the value.
-         *
-         */
-        Provider: createProvider<T>(
-            context as Context<UseStoreDataReturnType<T>>,
-            defaultValue,
-            watch,
-        ),
-
-        /**
-         *
-         * @param selector
-         * @param equalityCheck
-         * @returns tuple, first item is return value of the selector and the second item is setter
-         *
-         */
-        useContext: <SelectorOutput,>(
-            selector: SelectorOutputType<T, SelectorOutput>,
-            equalityCheck = shallowCompare,
-        ) => useStore(context as Context<UseStoreDataReturnType<T>>, selector, equalityCheck),
-
-        /**
-         *
-         * @param selector
-         * @param equalityCheck
-         * @returns return value of the selector
-         *
-         */
-        useContextValue: <SelectorOutput,>(
-            selector: SelectorOutputType<T, SelectorOutput>,
-            equalityCheck = shallowCompare,
-        ) => useStoreValue(context as Context<UseStoreDataReturnType<T>>, selector, equalityCheck),
-        /**
-         * context of the store. Useful for ContextBridge
-         */
-        Context: context,
-    };
-};
-
-export const createProvider = <T extends Record<string, any> = {}>(
-    StoreContext: Context<UseStoreDataReturnType<T>>,
-    defaultValue: T | null,
-    watch: boolean,
-) =>
-    typedMemo(({ value, children }: { value: T; children: ReactNode }) => {
-        return (
-            <StoreContext.Provider value={useStoreData<T>(value, defaultValue, watch) as any}>
-                {children}
-            </StoreContext.Provider>
-        );
-    });
-
-export const createUseRefContext = <T,>(_Context: Context<UseStoreDataReturnType<T> | null>) => {
-    return () => {
-        const value = useContext<UseStoreDataReturnType<T> | null>(_Context);
-        if (value === null)
-            throw 'Fast Context requires the value to be wrapped in a Provider with a value.';
-
-        return value;
-    };
-};
-
-export const useStore = <IStore extends StoreDataType, SelectorOutput>(
-    _Context: Context<UseStoreDataReturnType<IStore>>,
-    selector: SelectorOutputType<IStore, SelectorOutput>,
-    equalityFn = Object.is,
-): [SelectorOutput, (value: (prev: IStore) => Partial<IStore>) => void] => {
-    const store = useContext(_Context);
-    if (!store) {
-        throw new Error('Store not found');
-    }
-
-    const state = useSyncExternalStoreWithSelector(
-        store.subscribe,
-        () => {
-            return store.get();
-        },
-        undefined,
-        snapshot => {
-            return selector(snapshot);
-        },
-        equalityFn,
-    );
-
-    return [state, store.set];
-};
-
-export const useStoreValue = <IStore extends StoreDataType, SelectorOutput>(
-    _Context: Context<UseStoreDataReturnType<IStore>>,
-    selector: SelectorOutputType<IStore, SelectorOutput>,
-    equalityFn = Object.is,
-) => {
-    return useStore(_Context, selector, equalityFn)[0];
-};

package/hocs/typedMemo.tsx

@@ -1,5 +0,0 @@
-import { memo } from 'react';
-
-const typedMemo: <T>(c: T) => T = memo;
-
-export default typedMemo;

package/hooks/useControlledValue.tsx

@@ -1,84 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import useLatest from './useLatest';
-
-type ReturnType<T> = [T, (value: T, ...args: any[]) => void];
-
-type Args<T> = {
-    value?: T;
-    defaultValue?: T;
-    onChange?: (value: T, ...args: any[]) => any;
-    disabled?: boolean;
-    manipulateValue?: (value: T | undefined, prevValue: T | undefined) => T;
-};
-
-const defaultManipulateValue = (val: any) => val;
-
-const useControlledValue = <T,>({
-    value: valueProp,
-    defaultValue,
-    disabled = false,
-    onChange,
-    manipulateValue = defaultManipulateValue,
-}: Args<T>): ReturnType<T> => {
-    const value = useMemo(
-        () =>
-            valueProp !== undefined
-                ? manipulateValue(valueProp, undefined)
-                : manipulateValue(defaultValue, undefined),
-        [defaultValue, manipulateValue, valueProp],
-    );
-
-    const hasWarnedRef = useRef(false);
-
-    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(manipulateValueRef.current(val, uncontrolledValueRef.current));
-            }
-
-            onChangeRef.current?.(
-                manipulateValueRef.current(
-                    val,
-                    isUncontrolled ? uncontrolledValueRef.current : valuePropRef.current,
-                ),
-                ...rest,
-            );
-        },
-        [
-            disabled,
-            isUncontrolled,
-            manipulateValueRef,
-            onChangeRef,
-            uncontrolledValueRef,
-            valuePropRef,
-        ],
-    );
-
-    useEffect(() => {
-        if (hasWarnedRef.current) return;
-        hasWarnedRef.current = true;
-
-        if (valueProp !== undefined && isUncontrolled) {
-            console.warn(
-                'Trying to change the value from uncontrolled to controlled can lead to inconsistencies',
-            );
-        }
-    }, [isUncontrolled, valueProp]);
-
-    return useMemo(
-        () => [isUncontrolled ? uncontrolledValue : value, updateValue],
-        [isUncontrolled, uncontrolledValue, updateValue, value],
-    );
-};
-
-export default useControlledValue;

package/hooks/useLatest.tsx

@@ -1,9 +0,0 @@
-import { useRef } from 'react';
-
-const useLatest = <T,>(value: T) => {
-    const ref = useRef(value);
-    ref.current = value;
-    return ref;
-};
-
-export default useLatest;

package/hooks/useMergedRefs.ts

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-
-import { mergeRefs } from '../utils';
-import useLatest from './useLatest';
-
-export const useMergedRefs: typeof mergeRefs = refs => {
-    const latestRefs = useLatest(refs);
-    return useCallback(
-        value => {
-            mergeRefs(latestRefs.current)(value);
-        },
-        [latestRefs],
-    );
-};

package/hooks/usePrevious.ts

@@ -1,13 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const usePrevious = <T>(value: T) => {
-    const ref = useRef<T>(value);
-
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-
-    return ref;
-};
-
-export default usePrevious;

package/hooks/useToggle.tsx

@@ -1,24 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-const useToggle = (initialState = false) => {
-    const [state, setState] = useState<boolean>(initialState);
-
-    const toggle = useCallback(() => setState(prevState => !prevState), []);
-
-    const handleClose = useCallback(() => setState(false), [setState]);
-
-    const handleOpen = useCallback(() => setState(true), [setState]);
-
-    return useMemo(
-        () => ({
-            state,
-            onToggle: toggle,
-            setState,
-            handleOpen,
-            handleClose,
-        }),
-        [state, toggle, setState, handleOpen, handleClose],
-    );
-};
-
-export default useToggle;

package/hooks/useWhatHasUpdated.tsx

@@ -1,48 +0,0 @@
-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);
-    });
-};