react-native-molecules 0.5.0-beta.0

package/fast-context/index.tsx

@@ -0,0 +1,190 @@
+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/index.tsx

@@ -0,0 +1,5 @@
+export { default as typedMemo } from './typedMemo';
+export {
+    useCurrentIndexStore,
+    default as withKeyboardAccessibility,
+} from './withKeyboardAccessibility';

package/hocs/typedMemo.tsx

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

package/hocs/withKeyboardAccessibility.tsx

@@ -0,0 +1,231 @@
+import {
+    type ComponentType,
+    forwardRef,
+    Fragment,
+    memo,
+    type ReactNode,
+    type RefObject,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+} from 'react';
+import type { FlatList } from 'react-native';
+import type { SectionList } from 'react-native';
+import { Platform } from 'react-native';
+
+import { createFastContext } from '../fast-context';
+import useLatest from '../hooks/useLatest';
+
+export type Store = {
+    currentIndex: number | null;
+};
+
+const defaultValue = { currentIndex: null };
+
+const {
+    useStoreRef,
+    Provider,
+    useContext: useFastContext,
+    useContextValue,
+} = createFastContext<Store>();
+
+const withKeyboardAccessibility = <P extends Record<string, any>>(
+    Component: ComponentType<P>,
+    key: string = 'records',
+    isFlat: boolean = false,
+) =>
+    // @ts-expect-error // TODO - fix ts issues
+    forwardRef(({ enableKeyboardNavigation, onCancel, ...props }: P, ref: any) => {
+        const componentRef = useRef<FlatList | SectionList>(null);
+        const records = props[key] as any[];
+
+        const recordsIndexMap = useMemo(() => {
+            if (!records) return {};
+
+            const flattenRecords = isFlat
+                ? records
+                : records.reduce((acc, item, sectionIndex) => {
+                      return acc.concat(
+                          (item.data || []).map((t: any) => ({ ...t, sectionIndex })),
+                      );
+                  }, [] as any[]);
+
+            return flattenRecords.reduce((acc: Record<number, any>, item: any, i: number) => {
+                acc[i] = item;
+
+                return acc;
+            }, {} as Record<number, any>);
+        }, [records]);
+
+        const length = useMemo(() => {
+            if (!isFlat) {
+                return records.reduce((acc, item) => {
+                    acc += item.data.length;
+                    return acc;
+                }, 0);
+            }
+
+            return records.length;
+        }, [records]);
+
+        const onSelectItem = useCallback(
+            (index: number) => {
+                const selectItem = recordsIndexMap[index];
+
+                if (!selectItem) return props.onSelectionChange?.(props.selection);
+
+                props.onSelectionChange?.(
+                    props.multiple ? [...props.selection, selectItem] : selectItem,
+                );
+            },
+            [props, recordsIndexMap],
+        );
+
+        useImperativeHandle(ref, () => componentRef.current);
+
+        const Wrapper =
+            enableKeyboardNavigation && Platform.OS === 'web' ? AccessibilityWrapper : Fragment;
+
+        const accessibilityWrapperProps =
+            enableKeyboardNavigation && Platform.OS === 'web'
+                ? {
+                      listRef: componentRef as any,
+                      listLength: length,
+                      onSelectItem: onSelectItem,
+                      isFlat,
+                      onCancel,
+                  }
+                : {};
+
+        return (
+            <Provider value={defaultValue}>
+                <Wrapper
+                    {...(accessibilityWrapperProps as Omit<AccessibilityWrapperProps, 'children'>)}>
+                    <Component {...(props as P)} ref={componentRef} />
+                </Wrapper>
+            </Provider>
+        );
+    });
+
+type AccessibilityWrapperProps = {
+    children: ReactNode;
+    listRef: RefObject<FlatList> | RefObject<SectionList>;
+    listLength: number;
+    onSelectItem: (index: number) => void;
+    isFlat: boolean;
+    onCancel?: () => void;
+};
+
+const withPreventDefault =
+    (func: (e: KeyboardEvent) => void, preventDefault = true) =>
+    (e: KeyboardEvent) => {
+        if (preventDefault) e.preventDefault();
+        func(e);
+    };
+
+const AccessibilityWrapper = memo(
+    ({
+        children,
+        listRef,
+        listLength,
+        onSelectItem,
+        isFlat,
+        onCancel,
+    }: AccessibilityWrapperProps) => {
+        const [currentIndex, setStore] = useFastContext(state => state.currentIndex);
+
+        // use the ref here to avoid recreation of the keyToFunctionMap function
+        const { store: currentIndexRef } = useStoreRef();
+
+        const keyToFunctionMap = useMemo(
+            () => ({
+                ArrowUp: withPreventDefault(() =>
+                    setStore(prev => ({
+                        currentIndex:
+                            prev.currentIndex === null || prev.currentIndex === 0
+                                ? listLength - 1
+                                : prev.currentIndex - 1,
+                    })),
+                ),
+                ArrowDown: withPreventDefault(() =>
+                    setStore(prev => ({
+                        currentIndex:
+                            prev.currentIndex === null || prev.currentIndex === listLength - 1
+                                ? 0
+                                : prev.currentIndex + 1,
+                    })),
+                ),
+                Enter: withPreventDefault(e => {
+                    if (currentIndexRef.current.currentIndex === null) return;
+                    e.preventDefault();
+                    onSelectItem(currentIndexRef.current.currentIndex);
+                }, false),
+                Escape: withPreventDefault(e => {
+                    if (currentIndexRef.current.currentIndex === null) onCancel?.();
+                    e.preventDefault();
+                    setStore(() => ({
+                        currentIndex: null,
+                    }));
+                }, false),
+            }),
+            [currentIndexRef, listLength, onCancel, onSelectItem, setStore],
+        );
+
+        const onKeyPress = useCallback(
+            (e: KeyboardEvent) => {
+                const keyFunction = keyToFunctionMap[e.key as keyof typeof keyToFunctionMap];
+
+                if (!keyFunction) return;
+
+                keyFunction(e);
+            },
+            [keyToFunctionMap],
+        );
+
+        const listLengthLatest = useLatest(listLength);
+        useEffect(() => {
+            if (listRef && !!listRef.current) {
+                if (
+                    currentIndex === null ||
+                    currentIndex < 0 ||
+                    currentIndex > listLengthLatest.current - 1
+                )
+                    return;
+
+                if (isFlat) {
+                    (listRef as RefObject<FlatList>).current?.scrollToIndex?.({
+                        index: currentIndex || 0,
+                        animated: false,
+                    });
+                } else {
+                    (listRef as RefObject<SectionList>).current?.scrollToLocation({
+                        animated: false,
+                        sectionIndex: 0,
+                        itemIndex: currentIndex,
+                    });
+                }
+            }
+        }, [currentIndex, isFlat, listRef, listLengthLatest]);
+
+        useEffect(() => {
+            const controller = new AbortController();
+            window.addEventListener('keydown', onKeyPress, {
+                capture: true,
+                signal: controller.signal,
+            } as AddEventListenerOptions);
+
+            return () => {
+                controller.abort();
+            };
+        }, [onKeyPress]);
+
+        return <>{children}</>;
+    },
+);
+
+export const useCurrentIndexStore = useFastContext;
+export const useCurrentIndexStoreValue = useContextValue;
+
+export default withKeyboardAccessibility;

package/hocs/withPortal.tsx

@@ -0,0 +1,16 @@
+import { type ComponentType } from 'react';
+
+import { Portal } from '../components/Portal';
+
+const withPortal =
+    <T,>(Component: ComponentType<T>) =>
+    (props: T) => {
+        return (
+            <Portal name={'withPortal' + (Component.displayName ?? '')}>
+                {/* @ts-ignore */}
+                <Component {...(props as T)} />
+            </Portal>
+        );
+    };
+
+export default withPortal;

package/hooks/createPsuedoHook.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+export default function createPseudoHook<T>({ events }: { events: string[] }) {
+    return function (ref: React.RefObject<T>, listen: boolean = true) {
+        if (Platform.OS !== 'web') {
+            return false;
+        }
+
+        const [isActive, setActive] = React.useState(false);
+
+        React.useEffect(() => {
+            const [eventIn, eventOut] = events;
+
+            const node = ref?.current;
+            if (!node || !listen) {
+                return;
+            }
+            const resolve = (value: boolean) => {
+                setActive(value);
+            };
+
+            // @ts-ignore
+            const onStart = resolve.bind(this, true);
+            // @ts-ignore
+            const onEnd = resolve.bind(this, false);
+
+            // @ts-ignore
+            node.addEventListener(eventIn, onStart);
+            // @ts-ignore
+            node.addEventListener(eventOut, onEnd);
+
+            // Special case for useActive to respond when the user drags out of the view and releases.
+            if (eventOut === 'mouseup') {
+                document.addEventListener(eventOut, onEnd, false);
+            }
+            return () => {
+                document.removeEventListener(eventOut, onEnd, false);
+                // @ts-ignore
+                node.removeEventListener(eventIn, onStart);
+                // @ts-ignore
+                node.removeEventListener(eventOut, onEnd);
+            };
+            // we only take initial value of listen
+            // eslint-disable-next-line
+        }, [ref]);
+
+        return isActive;
+    };
+}

package/hooks/index.tsx

@@ -0,0 +1,29 @@
+// export { usePortal } from '@gorhom/portal';
+
+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';
+export * from './useFocus';
+export {
+    type NumberMaskConfig,
+    default as useHandleNumberFormat,
+    type UseHandleNumberFormatProps,
+} from './useHandleNumberFormat';
+export * from './useHover';
+export * from './useKeyboardDismissable';
+export { default as useLatest } from './useLatest';
+export { useMediaQuery } from './useMediaQuery';
+export { useMergedRefs } from './useMergedRefs';
+export { default as usePrevious } from './usePrevious';
+export * from './useQueryFilter';
+export {
+    default as useSearchable,
+    type UseSearchableProps,
+    useSearchInputProps,
+} from './useSearchable';
+export { default as useSubcomponents, type UseSubcomponentsProps } from './useSubcomponents';
+export * from './useTheme';
+export { default as useToggle } from './useToggle';

package/hooks/useActionState.native.tsx

@@ -0,0 +1,22 @@
+import { type RefObject, useRef } from 'react';
+
+export type UseActionStateProps = {
+    pressed?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    actionsToListen?: ('pressed' | 'hovered' | 'focused')[];
+};
+
+export const useActionState = (
+    props: UseActionStateProps & { ref?: RefObject<any> | React.ForwardedRef<any> } = {},
+) => {
+    const ref = useRef(null);
+    const actionsRef = (props.ref ?? ref) as RefObject<any>;
+
+    return {
+        actionsRef,
+        hovered: false,
+        pressed: false,
+        focused: false,
+    };
+};

package/hooks/useActionState.tsx

@@ -0,0 +1,34 @@
+import { type RefObject, useRef } from 'react';
+
+import { useActive } from './useActive';
+import { useFocus } from './useFocus';
+import { useHover } from './useHover';
+
+export type UseActionStateProps = {
+    pressed?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    actionsToListen?: ('press' | 'hover' | 'focus')[];
+};
+
+export const useActionState = (
+    props: UseActionStateProps & { ref?: RefObject<any> | React.ForwardedRef<any> } = {},
+) => {
+    const ref = useRef(null);
+    const actionsRef = (
+        (props.ref as any)?.current === undefined ? ref : props.ref
+    ) as RefObject<any>;
+    const hovered =
+        useHover(actionsRef, props.actionsToListen?.includes('hover')) || !!props.hovered;
+    const pressed =
+        useActive(actionsRef, props.actionsToListen?.includes('press')) || !!props.pressed;
+    const focused =
+        useFocus(actionsRef, props.actionsToListen?.includes('focus')) || !!props.focused;
+
+    return {
+        actionsRef,
+        hovered,
+        pressed,
+        focused,
+    };
+};

package/hooks/useActive.tsx

@@ -0,0 +1,5 @@
+import createPseudoHook from './createPsuedoHook';
+
+export const useActive = createPseudoHook({
+    events: ['mousedown', 'mouseup'],
+});

package/hooks/useBreakpoints.tsx

@@ -0,0 +1,7 @@
+import { useTheme } from './useTheme';
+
+const useBreakpoints = () => {
+    return useTheme().grid.breakpoints;
+};
+
+export default useBreakpoints;

package/hooks/useColorMode.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
+
+import { type ColorMode, resolveColorMode } from '../utils/resolveColorMode';
+
+const useColorMode = () => {
+    const themeName = useUnistyles().theme.dark ? 'dark' : 'light';
+    return useMemo(
+        () => ({
+            colorMode: resolveColorMode(themeName as ColorMode),
+            setColorMode: UnistylesRuntime.setTheme,
+        }),
+        [themeName],
+    );
+};
+
+export default useColorMode;

package/hooks/useContrastColor.ts

@@ -0,0 +1,15 @@
+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;
+
+    return useMemo(
+        () => resolveContrastColor(bgColor, lightColor, darkColor, isDarkMode),
+        [bgColor, lightColor, darkColor, isDarkMode],
+    );
+};
+
+export default useContrastColor;