react-native-molecules 0.5.0-beta.0

package/components/NavigationRail/utils.ts

@@ -0,0 +1,170 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const navigationRailStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        width: 80,
+        backgroundColor: theme.colors.surface,
+        flexGrow: 1,
+    },
+}));
+
+const navigationRailHeaderStylesDefault = StyleSheet.create({
+    header: {
+        alignItems: 'center',
+    },
+});
+
+const navigationRailContentStylesDefault = StyleSheet.create({
+    root: {
+        flexGrow: 1,
+    },
+});
+
+const navigationRailFooterStylesDefault = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+    },
+});
+
+const navigationRailItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        alignItems: 'center',
+        marginBottom: theme.spacings['3'],
+        _web: {
+            cursor: 'pointer',
+        },
+        variants: {
+            state: {
+                hovered: {},
+                default: {},
+                active: {},
+                activeAndHovered: {},
+            },
+            size: {
+                undefined: {},
+                sm: {},
+                md: {},
+                lg: {},
+            },
+        },
+    },
+
+    iconContainer: {
+        borderRadius: theme.shapes.corner.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'visible',
+
+        _web: {
+            cursor: 'pointer',
+        },
+
+        variants: {
+            state: {
+                hovered: {},
+                default: {},
+                active: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                },
+                activeAndHovered: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                },
+            },
+
+            size: {
+                undefined: {},
+                sm: {
+                    width: 56,
+                    height: 32,
+                },
+                md: {
+                    width: 56,
+                    height: 32,
+                },
+                lg: {
+                    width: 56,
+                    height: 32,
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+        position: 'relative',
+
+        variants: {
+            state: {
+                hovered: {},
+                default: {},
+                active: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+                activeAndHovered: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+        },
+    },
+    badge: {
+        position: 'absolute',
+        bottom: '75%',
+        left: '75%',
+        zIndex: 2,
+    },
+
+    label: {
+        ...theme.typescale.labelMedium,
+        color: theme.colors.onSurfaceVariant,
+        marginTop: theme.spacings['1'],
+        justifyContent: 'center',
+
+        variants: {
+            state: {
+                hovered: {},
+                default: {},
+                active: {
+                    color: theme.colors.onSurface,
+                },
+                activeAndHovered: {
+                    color: theme.colors.onSurface,
+                },
+            },
+        },
+    },
+
+    stateLayer: {
+        borderRadius: theme.shapes.corner.full,
+
+        variants: {
+            state: {
+                active: {},
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
+                },
+                activeAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                default: {},
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    NavigationRail: navigationRailStylesDefault,
+    NavigationRail_Header: navigationRailHeaderStylesDefault,
+    NavigationRail_Content: navigationRailContentStylesDefault,
+    NavigationRail_Footer: navigationRailFooterStylesDefault,
+    NavigationRail_Item: navigationRailItemStylesDefault,
+});
+
+export const navigationRailStyles = getRegisteredMoleculesComponentStyles('NavigationRail');
+export const navigationRailHeaderStyles =
+    getRegisteredMoleculesComponentStyles('NavigationRail_Header');
+export const navigationRailContentStyles =
+    getRegisteredMoleculesComponentStyles('NavigationRail_Content');
+export const navigationRailFooterStyles =
+    getRegisteredMoleculesComponentStyles('NavigationRail_Footer');
+export const navigationRailItemStyles = navigationRailItemStylesDefault;

package/components/NavigationStack/NavigationStack.tsx

@@ -0,0 +1,85 @@
+import {
+    createContext,
+    forwardRef,
+    memo,
+    type ReactElement,
+    useCallback,
+    useImperativeHandle,
+    useMemo,
+    useState,
+} from 'react';
+
+export type Props = {
+    initialRouteName?: string;
+    children: ReactElement | ReactElement[];
+};
+
+export type NavigationStackHandle = {
+    currentRoute: string;
+    push: (route: string) => void;
+    pop: () => void;
+    navigate: (route: string) => void;
+    goBack: () => void;
+};
+
+const NavigationStack = ({ initialRouteName, children }: Props, ref: any) => {
+    const [currentStack, setCurrentStack] = useState<string[]>(() => [
+        initialRouteName ||
+            (
+                (Array.isArray(children)
+                    ? children.find(child => (!!child?.props as any)?.name)
+                    : children
+                )?.props as any
+            )?.name ||
+            '',
+    ]);
+    const currentRoute = currentStack[currentStack.length - 1] || '';
+
+    const push = useCallback((item: string) => {
+        setCurrentStack(prev => [...prev, item]);
+    }, []);
+
+    const pop = useCallback(() => {
+        setCurrentStack(prev => {
+            // we don't want to remove the last item in the stack
+            if (prev.length <= 1) return prev;
+
+            const newStack = [...prev];
+
+            newStack.pop();
+            return newStack;
+        });
+    }, []);
+
+    const contextValue = useMemo(
+        () => ({
+            currentRoute,
+            push,
+            pop,
+            navigate: push,
+            goBack: pop,
+        }),
+        [currentRoute, pop, push],
+    );
+
+    // the ref will get the same methods as the context
+    useImperativeHandle(ref, () => contextValue);
+
+    return (
+        <NavigationStackContext.Provider value={contextValue}>
+            {children}
+        </NavigationStackContext.Provider>
+    );
+};
+
+type NavigationStackContextType = NavigationStackHandle & {};
+
+export const NavigationStackContext = createContext<NavigationStackContextType>({
+    currentRoute: '',
+    push: () => {},
+    pop: () => {},
+    navigate: () => {},
+    goBack: () => {},
+});
+
+export default memo(forwardRef(NavigationStack));

package/components/NavigationStack/NavigationStackItem.tsx

@@ -0,0 +1,60 @@
+import { memo, type ReactElement, useEffect, useRef } from 'react';
+import { Animated, type ViewProps } from 'react-native';
+
+import { navigationStackItemStyles, useNavigation } from './utils';
+
+export type Props = ViewProps & {
+    name: string;
+    children: ReactElement;
+};
+
+const NavigationStackItemContainer = memo(({ name, children, ...rest }: Props) => {
+    const { currentRoute } = useNavigation();
+
+    return (
+        <NavigationStackItem isCurrentRoute={currentRoute === name} children={children} {...rest} />
+    );
+});
+
+const NavigationStackItem = memo(
+    ({
+        isCurrentRoute,
+        children,
+        style,
+        ...rest
+    }: Omit<Props, 'name'> & { isCurrentRoute: boolean }) => {
+        const opacityRef = useRef(new Animated.Value(isCurrentRoute ? 1 : 0));
+
+        useEffect(() => {
+            if (isCurrentRoute) {
+                opacityRef.current.setValue(0);
+            }
+
+            Animated.timing(opacityRef.current, {
+                toValue: isCurrentRoute ? 1 : 0,
+                duration: 250,
+                useNativeDriver: true,
+            }).start();
+        }, [isCurrentRoute, opacityRef]);
+
+        return (
+            <>
+                {isCurrentRoute && (
+                    <Animated.View
+                        style={[
+                            { opacity: opacityRef.current },
+                            navigationStackItemStyles.root,
+                            style,
+                        ]}
+                        {...rest}>
+                        {children}
+                    </Animated.View>
+                )}
+            </>
+        );
+    },
+);
+
+NavigationStackItemContainer.displayName = 'NavigationStack.Item';
+
+export default NavigationStackItemContainer;

package/components/NavigationStack/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import NavigationStackComponent from './NavigationStack';
+import NavigationStackItem from './NavigationStackItem';
+
+export const NavigationStackDefault = Object.assign(NavigationStackComponent, {
+    Item: NavigationStackItem,
+});
+
+registerMoleculesComponents({
+    NavigationStack: NavigationStackDefault,
+});
+
+export const NavigationStack = getRegisteredComponentWithFallback(
+    'NavigationStack',
+    NavigationStackDefault,
+);
+
+export type { NavigationStackHandle, Props as NavigationStackProps } from './NavigationStack';
+export type { Props as NavigationStackItemProps } from './NavigationStackItem';
+export { navigationStackItemStyles, useNavigation, useRoute } from './utils';

package/components/NavigationStack/utils.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { NavigationStackContext } from './NavigationStack';
+
+export const useNavigation = () => {
+    return useContext(NavigationStackContext);
+};
+
+export const useRoute = () => {
+    return useContext(NavigationStackContext).currentRoute;
+};
+
+export const navigationStackItemStyles = StyleSheet.create({
+    root: {},
+});

package/components/Popover/Popover.native.tsx

@@ -0,0 +1,185 @@
+import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { AppState, Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
+
+import { Portal } from '../Portal';
+import {
+    DEFAULT_ARROW_SIZE,
+    popoverDefaultStyles,
+    type PopoverProps,
+    useArrowStyles,
+    usePopover,
+} from './common';
+
+const Popover = ({
+    triggerRef,
+    children,
+    isOpen,
+    onClose,
+    position = 'bottom',
+    align = 'center',
+    style,
+    showArrow = false,
+    arrowSize = DEFAULT_ARROW_SIZE,
+    inverted = false,
+    triggerDimensions,
+    offset = 8,
+    ...rest
+}: PopoverProps) => {
+    const {
+        popoverLayoutRef,
+        targetLayoutRef,
+        actualPositionRef,
+        calculatedPosition,
+        calculateAndSetPosition,
+        handlePopoverLayout,
+    } = usePopover({
+        isOpen,
+        position,
+        align,
+        showArrow,
+        arrowSize,
+        offset,
+    });
+
+    const popoverRef = useRef<View>(null);
+
+    const measureTarget = useCallback(() => {
+        if (triggerRef.current) {
+            triggerRef.current.measure(
+                (
+                    _fx: number,
+                    _fy: number,
+                    width: number,
+                    height: number,
+                    px: number,
+                    py: number,
+                ) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x: px, y: py, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+                () => {
+                    console.error('Failed to measure target element for Popover.');
+                    targetLayoutRef.current = null;
+                    calculateAndSetPosition();
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            measureTarget();
+        }
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const subscription = Dimensions.addEventListener('change', measureTarget);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    useEffect(() => {
+        if (!isOpen || Platform.OS === 'web') return;
+        const handleAppStateChange = (nextAppState: string) => {
+            if (nextAppState === 'active') {
+                setTimeout(measureTarget, 50);
+            }
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    const arrowStyles = useArrowStyles({
+        showArrow,
+        arrowSize,
+        style,
+        calculatedPosition,
+        targetLayoutRef,
+        popoverLayoutRef,
+        actualPositionRef,
+    });
+
+    const popoverStyle = calculatedPosition ?? popoverDefaultStyles;
+    const Wrapper = inverted ? ScopedTheme : Fragment;
+
+    if (!isOpen && popoverStyle.opacity === 0) {
+        return null;
+    }
+
+    const handleOutsidePress = () => {
+        if (isOpen && onClose) {
+            onClose();
+        }
+    };
+
+    return (
+        <Portal>
+            <Wrapper
+                {...(inverted
+                    ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
+                    : ({} as { name: 'light' }))}>
+                <Pressable onPress={handleOutsidePress} style={styles.overlay} />
+
+                <View
+                    ref={popoverRef}
+                    onLayout={handlePopoverLayout}
+                    style={[styles.popoverContainer, style, popoverStyle]}
+                    {...rest}>
+                    {children}
+                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
+                </View>
+            </Wrapper>
+        </Portal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'transparent',
+    },
+    popoverContainer: {
+        ...popoverDefaultStyles,
+        backgroundColor: 'white',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 1)',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 3.84,
+        elevation: 5,
+        zIndex: 100,
+    },
+});
+
+export default memo(Popover);