react-native-molecules 0.5.0-beta.23 → 0.5.0-beta.25

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);
-    });
-};

package/utils/color.ts

@@ -1,22 +0,0 @@
-import color from 'color';
-
-import { weakMemoized } from './lodash';
-
-export const resolveContrastColor = weakMemoized(
-    (
-        bgColor: string,
-        lightColor: string = '#fff',
-        darkColor: string = '#000',
-        isDarkMode?: boolean,
-    ) => {
-        let isLightColor = !isDarkMode;
-        try {
-            // TODO: Account for transparency.
-            isLightColor = color(bgColor).isLight();
-        } finally {
-            return isLightColor ? darkColor : lightColor;
-        }
-    },
-);
-
-export default color;

package/utils/compare/index.ts

@@ -1,54 +0,0 @@
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function is(x: any, y: any) {
-    // SameValue algorithm
-    if (x === y) {
-        // Steps 1-5, 7-10
-        // Steps 6.b-6.e: +0 != -0
-        return x !== 0 || 1 / x === 1 / y;
-    } else {
-        // Step 6.a: NaN == NaN
-        return x !== x && y !== y;
-    }
-}
-
-/**
- * Performs equality by iterating through keys on an object and returning false
- * when any key has values which are not strictly equal between the arguments.
- * Returns true when the values of all keys are strictly equal.
- */
-export function shallowCompare(objA?: unknown, objB?: unknown) {
-    if (is(objA, objB)) {
-        return true;
-    }
-
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-        return false;
-    }
-
-    const keysA = Object.keys(objA);
-    const keysB = Object.keys(objB);
-
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-
-    // Test for A's keys different from B.
-    for (let i = 0; i < keysA.length; i++) {
-        if (
-            !hasOwnProperty.call(objB, keysA[i]) ||
-            !is(
-                (objA as Record<string, unknown>)[keysA[i]],
-                (objB as Record<string, unknown>)[keysA[i]],
-            )
-        ) {
-            return false;
-        }
-    }
-
-    return true;
-}

package/utils/lodash.ts

@@ -1,121 +0,0 @@
-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 = () => {};
-
-const uniqueIdFactory = () => {
-    let number = Number.MAX_SAFE_INTEGER;
-    return () => number--;
-};
-
-const getUniqueId = uniqueIdFactory();
-const weakMemoize = Object.assign(memoize.bind(null), { Cache: WeakMap });
-const getObjectMemoryAddress = weakMemoize((x: unknown | null) => x && getUniqueId());
-
-export const allArgumentResolver = (...args: unknown[]) =>
-    args
-        .map(x => {
-            const type = typeof x;
-            switch (type) {
-                case 'object':
-                case 'function':
-                    return type.slice(0, 2)! + getObjectMemoryAddress(x);
-                default:
-                    return type.slice(0, 2)! + String(x);
-            }
-        })
-        .join('_');
-
-export const createMemoizedFunction = ({
-    resolver = allArgumentResolver,
-    Cache = Map,
-}: {
-    resolver?: (...args: any[]) => any;
-    Cache?: typeof memoize.Cache;
-} = {}) => {
-    const memo = Object.assign(memoize.bind(null), { Cache });
-    return Object.assign(
-        <T extends (...args: any[]) => any>(func: T, resolverOverwride?: (...args: any[]) => any) =>
-            memo(func, resolverOverwride ?? resolver),
-    );
-};
-
-export const weakMemoized = createMemoizedFunction({
-    Cache: WeakMap,
-});