react-native-molecules 0.5.0-beta.0

package/components/TouchableRipple/TouchableRipple.tsx

@@ -0,0 +1,286 @@
+import { Children, forwardRef, memo, type ReactNode, useCallback, useMemo } from 'react';
+import {
+    type GestureResponderEvent,
+    Pressable,
+    type PressableProps,
+    type StyleProp,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { touchableRippleStyles } from './utils';
+
+export type Props = PressableProps & {
+    /**
+     * Whether to render the ripple outside the view bounds.
+     */
+    borderless?: boolean;
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/touchablenativefeedback#background
+     */
+    background?: Object;
+    /**
+     * Whether to start the ripple at the center (Web).
+     */
+    centered?: boolean;
+    /**
+     * Whether to prevent interaction with the touchable.
+     */
+    disabled?: boolean;
+    /**
+     * Function to execute on press. If not set, will cause the touchable to be disabled.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Color of the ripple effect (Android >= 5.0 and Web).
+     */
+    rippleColor?: string;
+    /**
+     * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
+     */
+    underlayColor?: string;
+    /**
+     * Content of the `TouchableRipple`.
+     */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * A wrapper for views that should respond to touches.
+ * Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
+ * On unsupported platforms, it falls back to a highlight effect.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="small" src="screenshots/touchable-ripple.gif" />
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Text, TouchableRipple } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <TouchableRipple
+ *     onPress={() => console.log('Pressed')}
+ *     rippleColor="rgba(0, 0, 0, .32)"
+ *   >
+ *     <Text>Press anywhere</Text>
+ *   </TouchableRipple>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableWithoutFeedback props https://reactnative.dev/docs/touchablewithoutfeedback#props
+ */
+const TouchableRipple = (
+    {
+        style,
+        background: _background,
+        borderless = false,
+        disabled: disabledProp,
+        rippleColor: rippleColorProp,
+        underlayColor: _underlayColor,
+        onPress,
+        children,
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        centered,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    // TODO - enable ripple onLongPress, need to check for mobile as well
+    const disabled = disabledProp || !onPress;
+
+    const componentStyles = touchableRippleStyles;
+
+    const { rippleColor, containerStyle } = useMemo(() => {
+        const { rippleColor: defaultRippleColor } = componentStyles.root;
+
+        return {
+            rippleColor: rippleColorProp || defaultRippleColor,
+            containerStyle: [
+                styles.touchable,
+                { borderRadius: 'inherit' },
+                borderless && styles.borderless,
+                // ...(Platform.OS === 'web' && !disabled ? ({ cursor: 'pointer' } as any) : {}),
+                componentStyles.root,
+                style,
+            ],
+        };
+    }, [borderless, componentStyles.root, rippleColorProp, style]);
+
+    const handlePressIn = useCallback(
+        (e: any) => {
+            onPressInProp?.(e);
+
+            if (disabled) return;
+
+            const button = e.currentTarget;
+            const computedStyle = window.getComputedStyle(button);
+            const dimensions = button.getBoundingClientRect();
+
+            let touchX;
+            let touchY;
+
+            const { changedTouches, touches } = e.nativeEvent;
+            const touch = touches?.[0] ?? changedTouches?.[0];
+
+            // If centered or it was pressed using keyboard - enter or space
+            if (centered || !touch) {
+                touchX = dimensions.width / 2;
+                touchY = dimensions.height / 2;
+            } else {
+                touchX = touch.locationX ?? e.pageX;
+                touchY = touch.locationY ?? e.pageY;
+            }
+
+            // Get the size of the button to determine how big the ripple should be
+            const size = centered
+                ? // If ripple is always centered, we don't need to make it too big
+                  Math.min(dimensions.width, dimensions.height) * 1.25
+                : // Otherwise make it twice as big so clicking on one end spreads ripple to other
+                  Math.max(dimensions.width, dimensions.height) * 2;
+
+            // Create a container for our ripple effect so we don't need to change the parent's style
+            const container = document.createElement('span');
+
+            container.setAttribute('data-paper-ripple', '');
+
+            Object.assign(container.style, {
+                position: 'absolute',
+                pointerEvents: 'none',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                borderTopLeftRadius: computedStyle.borderTopLeftRadius,
+                borderTopRightRadius: computedStyle.borderTopRightRadius,
+                borderBottomRightRadius: computedStyle.borderBottomRightRadius,
+                borderBottomLeftRadius: computedStyle.borderBottomLeftRadius,
+                overflow: centered ? 'visible' : 'hidden',
+            });
+
+            // Create span to show the ripple effect
+            const ripple = document.createElement('span');
+
+            Object.assign(ripple.style, {
+                position: 'absolute',
+                pointerEvents: 'none',
+                backgroundColor: rippleColor,
+                borderRadius: '50%',
+
+                /* Transition configuration */
+                transitionProperty: 'transform opacity',
+                transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
+                transitionTimingFunction: 'linear',
+                transformOrigin: 'center',
+
+                /* We'll animate these properties */
+                transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
+                opacity: '0.5',
+
+                // Position the ripple where cursor was
+                left: `${touchX}px`,
+                top: `${touchY}px`,
+                width: `${size}px`,
+                height: `${size}px`,
+            });
+
+            // Finally, append it to DOM
+            container.appendChild(ripple);
+            button.appendChild(container);
+
+            // rAF runs in the same frame as the event handler
+            // Use double rAF to ensure the transition class is added in next frame
+            // This will make sure that the transition animation is triggered
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    Object.assign(ripple.style, {
+                        transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+                        opacity: '1',
+                    });
+                });
+            });
+        },
+        [onPressInProp, disabled, centered, rippleColor],
+    );
+
+    const handlePressOut = useCallback(
+        (e: any) => {
+            onPressOutProp?.(e);
+
+            if (disabled) return;
+
+            const containers = e.currentTarget.querySelectorAll(
+                '[data-paper-ripple]',
+            ) as HTMLElement[];
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    containers.forEach(container => {
+                        const ripple = container.firstChild as HTMLSpanElement;
+
+                        Object.assign(ripple.style, {
+                            transitionDuration: '250ms',
+                            opacity: 0,
+                        });
+
+                        // Finally remove the span after the transition
+                        setTimeout(() => {
+                            const { parentNode } = container;
+
+                            if (parentNode) {
+                                parentNode.removeChild(container);
+                            }
+                        }, 500);
+                    });
+                });
+            });
+        },
+        [onPressOutProp, disabled],
+    );
+
+    const Component = onPress ? Pressable : View;
+
+    return (
+        <Component
+            {...(onPress ? { role: 'button' } : {})}
+            {...rest}
+            style={containerStyle}
+            ref={ref}
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            disabled={disabled}>
+            {Children.only(children)}
+        </Component>
+    );
+};
+
+/**
+ * Whether ripple effect is supported.
+ */
+TouchableRipple.supported = true;
+
+const styles = StyleSheet.create({
+    touchable: {
+        position: 'relative',
+    },
+    borderless: {
+        overflow: 'hidden',
+    },
+});
+
+export default memo(forwardRef(TouchableRipple));

package/components/TouchableRipple/index.tsx

@@ -0,0 +1,14 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TouchableRippleDefault from './TouchableRipple';
+
+registerMoleculesComponents({
+    TouchableRipple: TouchableRippleDefault,
+});
+
+export const TouchableRipple = getRegisteredComponentWithFallback(
+    'TouchableRipple',
+    TouchableRippleDefault,
+);
+
+export type { Props as TouchableRippleProps } from './TouchableRipple';
+export { touchableRippleStyles } from './utils';

package/components/TouchableRipple/utils.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const touchableRippleStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        rippleColor: theme.colors.onSurfaceRipple,
+    } as any,
+}));
+
+registerComponentsStyles({
+    TouchableRipple: touchableRippleStylesDefault,
+});
+
+export const touchableRippleStyles = getRegisteredMoleculesComponentStyles('TouchableRipple');

package/components/VerticalDivider/VerticalDivider.tsx

@@ -0,0 +1,99 @@
+import { memo } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    /**
+     *  Top Inset of the Divider.
+     */
+    topInset?: number;
+    /**
+     *  Bottom Inset of the Divider.
+     */
+    bottomInset?: number;
+    /**
+     *  Whether divider should be bolded.
+     */
+    bold?: boolean;
+    /**
+     *  Horizontal spacing of the Divider
+     */
+    spacing?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * A divider is a thin, lightweight separator that groups content in lists and page layouts.
+ *
+ * <div class="screenshots">
+ *  <figure>
+ *    <img class="medium" src="screenshots/divider.png" />
+ *  </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Divider, Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <View>
+ *     <Text>Lemon</Text>
+ *     <Divider />
+ *     <Text>Mango</Text>
+ *     <Divider />
+ *   </View>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const VerticalDivider = ({
+    topInset = 0,
+    bottomInset = 0,
+    spacing = 0,
+    style,
+    bold = false,
+    ...rest
+}: Props) => {
+    verticalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={[
+                verticalDividerStyles.root,
+                style,
+                topInset && { marginTop: topInset },
+                bottomInset && { marginBottom: bottomInset },
+                spacing && { marginHorizontal: spacing },
+            ]}
+        />
+    );
+};
+
+export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        width: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    width: 1,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
+export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+
+export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -0,0 +1,13 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import VerticalDividerDefault from './VerticalDivider';
+
+registerMoleculesComponents({
+    VerticalDivider: VerticalDividerDefault,
+});
+
+export const VerticalDivider = getRegisteredComponentWithFallback(
+    'VerticalDivider',
+    VerticalDividerDefault,
+);
+
+export { type Props as VerticalDividerProps, verticalDividerStyles } from './VerticalDivider';

package/context-bridge/index.tsx

@@ -0,0 +1,87 @@
+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/core/componentsRegistry.ts

@@ -0,0 +1,164 @@
+import EventEmitter, {
+    type ConstructorOptions,
+    type event as Event,
+    type eventNS,
+} from 'eventemitter2';
+import type { ComponentType } from 'react';
+
+interface RepositoryConstructor<T> extends ConstructorOptions {
+    onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
+    name?: string;
+}
+
+let id = Date.now();
+
+export class Repository<T> extends EventEmitter {
+    private registry: Record<string, T> = {};
+    readonly #name!: string;
+
+    readonly #onRegister!: (arg: T, name: string, registery: Record<string, T>) => T;
+
+    get name() {
+        return this.#name;
+    }
+
+    static get uniqueId() {
+        return (id++).toString(36).substring(0, 15);
+    }
+
+    constructor({
+        onRegister = arg => arg,
+        name = Repository.uniqueId,
+        ...options
+    }: RepositoryConstructor<T> = {}) {
+        super(options);
+        this.#onRegister = onRegister;
+        this.#name = name;
+    }
+
+    has = (itemName: string): boolean => {
+        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.
+     */
+    registerOne = <X extends T = T, ItemName extends string = ''>(itemName: ItemName, item: X) => {
+        let updatedItem = this.#onRegister?.(item, itemName, { ...this.registry });
+        if (!updatedItem) updatedItem = item;
+
+        if (this.registry[itemName]) return;
+
+        this.registry = {
+            ...this.registry,
+            [itemName]: updatedItem,
+        };
+
+        this.emit('item_registered', itemName);
+    };
+
+    /**
+     * Register a item with the src.
+     */
+    register = (items: Record<string, any>) => {
+        // let updatedItem = this.#onRegister?.(item, itemName, { ...this.registry });
+        // if (!updatedItem) updatedItem = item;
+
+        Object.keys(items).forEach(itemName => {
+            if (this.registry[itemName]) return;
+            this.registry = {
+                ...this.registry,
+                [itemName]: items[itemName],
+            };
+        });
+    };
+
+    /**
+     * Get all registered module from the registry.
+     */
+    getAll = () => {
+        return this.registry;
+    };
+
+    get = (name: string) => {
+        return this.registry[name];
+    };
+}
+
+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;
+export const registerMoleculesComponents = componentsRepository.register;
+export const registerComponentStyles = componentsStylesRepository.registerOne;
+export const registerComponentsStyles = componentsStylesRepository.register;
+export const registerComponentUtils = componentsUtilsRepository.registerOne;
+export const registerComponentsUtils = componentsUtilsRepository.register;
+
+type RegisterMoleculesConfig = {
+    component: ComponentType<any>;
+    styles?: Record<string, any>;
+    utils?: Record<string, any>;
+};
+
+export const registerMolecules = (molecules: Record<string, RegisterMoleculesConfig>) => {
+    const components: Record<string, ComponentType<any>> = {};
+    const styles: Record<string, Record<string, any>> = {};
+    const utils: Record<string, Record<string, any>> = {};
+
+    Object.entries(molecules).forEach(([name, config]) => {
+        if (config.component) {
+            components[name] = config.component;
+        }
+        if (config.styles) {
+            styles[name] = config.styles;
+        }
+        if (config.utils) {
+            utils[name] = config.utils;
+        }
+    });
+
+    if (Object.keys(components).length) {
+        registerMoleculesComponents(components);
+    }
+    if (Object.keys(styles).length) {
+        registerComponentsStyles(styles);
+    }
+    if (Object.keys(utils).length) {
+        registerComponentsUtils(utils);
+    }
+};
+
+export const getRegisteredMoleculesComponent = componentsRepository.get;
+export const getRegisteredMoleculesComponentStyles = componentsStylesRepository.get;
+export const getRegisteredComponentUtils = componentsUtilsRepository.get;
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultComponent The default component to use as fallback
+ * @returns The registered component or the default component
+ */
+export function getRegisteredComponentWithFallback<T extends ComponentType<any>>(
+    name: string,
+    defaultComponent: T,
+): T {
+    return (getRegisteredMoleculesComponent(name) ?? defaultComponent) as T;
+}

package/core/index.tsx

@@ -0,0 +1,2 @@
+export * from './componentsRegistry';
+export { PortalProvider } from '@gorhom/portal';