@nexara/nativeflow 0.1.1

package/src/components/Dialog/DialogBody.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { moderateScale } from '../../helpers/ResponsiveCalculations';
+import type { DialogBodyProps } from '../../types';
+
+
+interface props extends DialogBodyProps {
+    variant?: 'classic' | 'default';
+}
+
+const DialogBody: React.FC<props> = ({
+    variant,
+    scrollEnable = true,
+    containerStyle,
+    children,
+}) => {
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            paddingVertical: variant == 'default' ? moderateScale(16) : 0,
+            paddingHorizontal: moderateScale(variant == 'default' ? 16 : 25),
+            gap: 20,
+        },
+    });
+    return (<>
+
+        <ScrollView scrollEnabled={scrollEnable}>
+            <View style={[STYLES.CONTAINER, containerStyle]} pointerEvents='box-none'>
+                {children}
+            </View>
+        </ScrollView>
+    </>);
+}
+export default DialogBody;
+export type { DialogBodyProps };

package/src/components/Dialog/DialogDescription.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { moderateVerticalScale } from '../../helpers/ResponsiveCalculations';
+import { StyledText } from '../StyledComponents';
+import type { DialogDescriptionProps } from '../../types';
+
+const DialogDescription: React.FC<DialogDescriptionProps> = ({
+    fs,
+    textVariant = 'h5',
+    containerStyle,
+    textStyle,
+    children,
+}) => {
+    const STYLES = StyleSheet.create({
+        TEXT: {
+            color: '#a1a1aa',
+            lineHeight: moderateVerticalScale(13)
+        }
+    });
+    return (<>
+
+        <View style={containerStyle}>
+            <StyledText style={[STYLES.TEXT, textStyle]} variant={textVariant} fs={fs}>{children}</StyledText>
+        </View>
+    </>);
+}
+export default DialogDescription;
+export type { DialogDescriptionProps };

package/src/components/Dialog/DialogFoot.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Stack from '../Stack';
+import { moderateScale } from '../../helpers/ResponsiveCalculations';
+import type { DialogFootProps } from '../../types';
+
+
+interface props extends DialogFootProps {
+    variant?: 'classic' | 'default';
+}
+
+const DialogFoot: React.FC<props> = ({
+    variant,
+    containerStyle,
+    children
+}) => {
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            borderTopWidth: variant === 'default' ? 0.7 : 0,
+            borderColor: '#d4d4d4',
+            padding: moderateScale(variant === 'default' ? 16 : 20),
+            paddingHorizontal: moderateScale(variant === 'default' ? 16 : 25),
+            justifyContent: 'flex-end',
+            gap: moderateScale(15)
+        },
+    });
+    return (<>
+        <Stack.H justify='flex-end' gap={moderateScale(15)} containerStyle={[STYLES.CONTAINER, containerStyle]}>
+            {children}
+        </Stack.H>
+    </>);
+}
+export default DialogFoot;
+export type { DialogFootProps };

package/src/components/Dialog/DialogHead.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { moderateScale } from '../../helpers/ResponsiveCalculations';
+import { X } from '../../assets/svg';
+import { StyledText } from '../StyledComponents';
+import type { DialogHeadProps } from '../../types';
+
+
+interface props extends DialogHeadProps {
+    variant?: 'classic' | 'default';
+}
+
+const DialogHead: React.FC<props> = ({
+    variant = 'default',
+    title = 'Title',
+    textVariant = 'h4',
+    fs,
+    containerStyle,
+    textStyle,
+    children
+}) => {
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            borderBottomWidth: variant == 'default' ? 0.7 : 0,
+            borderColor: '#d4d4d4',
+            padding: moderateScale(variant === 'default' ? 16 : 25),
+            paddingBottom: moderateScale(16),
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+        },
+        HEADER_TEXT: {
+            // fontSize: responsiveFontSize(15),
+            fontWeight: 'bold',
+            color: '#000',
+        }
+    });
+    return (<>
+
+        <View style={[STYLES.CONTAINER, containerStyle]}>
+            <View>
+                <StyledText style={[STYLES.HEADER_TEXT, textStyle]} fs={fs} variant={textVariant}>{title}</StyledText>
+                {children}
+            </View>
+            <TouchableOpacity>
+                <X color='gray' size={moderateScale(20)} />
+            </TouchableOpacity>
+        </View>
+    </>);
+}
+export default DialogHead;
+export type { DialogHeadProps };

package/src/components/Dialog/index.ts

@@ -0,0 +1,11 @@
+export { default as Dialog } from './Dialog';
+export { default as DialogHead } from './DialogHead';
+export { default as DialogBody } from './DialogBody';
+export { default as DialogFoot } from './DialogFoot';
+export { default as DialogDescription } from './DialogDescription';
+
+export type { DialogProps } from './Dialog';
+export type { DialogHeadProps } from './DialogHead';
+export type { DialogBodyProps } from './DialogBody';
+export type { DialogFootProps } from './DialogFoot';
+export type { DialogDescriptionProps } from './DialogDescription';

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import { StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+
+
+type DividerProps = {
+    thickness?: number;
+    style?: StyleProp<ViewStyle>
+    color?: string;
+}
+
+const Divider: React.FC<DividerProps> = ({
+    thickness = 0.2,
+    // color = '#DCDBDB',
+    color,
+    style
+}) => {
+
+    const theme = useTheme();
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            borderWidth: thickness,
+            borderColor: color ?? theme?.colors.dividerColor
+        }
+    });
+
+    return (<>
+        <StyledView style={[STYLES.CONTAINER, style]} />
+    </>);
+};
+export default Divider;
+export type { DividerProps };

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from "react-native";
+import { getGridValue } from '../../helpers';
+import { useConditionalWindowDimension } from '../../hooks';
+import type { GridProps } from '../../types';
+
+const Grid: React.FC<GridProps> = ({
+    container = false,
+    item = false,
+    spacing = 0,
+    spacingH = 0,
+    spacingV = 0,
+    size = 12,
+    xs = 12,
+    sm = 0,
+    md = 0,
+    lg = 0,
+    xl = 0,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+    container = !item;
+    xs = Math.min(xs, 12);
+    sm = Math.min(sm, 12);
+    md = Math.min(md, 12);
+    lg = Math.min(lg, 12);
+    xl = Math.min(xl, 12);
+
+    const { width: windowWidth } = useConditionalWindowDimension(item);
+
+    const calculatedGridValue: number = item ? useMemo(() => getGridValue({
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+    }, windowWidth), [windowWidth, xs, sm, md, lg, xl]) : 12;
+
+    const STYLES = StyleSheet.create({
+        MAIN_CONT: {
+            width: item ? `${((calculatedGridValue / size) * 100)}%` : "100%",
+            flexDirection: 'row',
+            flexWrap: container ? 'wrap' : 'nowrap',
+            paddingHorizontal: spacingH,
+            paddingVertical: spacingV,
+            gap: spacing,
+            // flexShrink:1
+        },
+    });
+    return (<>
+        <View
+            style={[STYLES.MAIN_CONT, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </View>
+    </>);
+};
+export default Grid;
+export type { GridProps };

package/src/components/Header/Header.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { moderateScale, moderateVerticalScale, responsiveFontSize } from '../../helpers/ResponsiveCalculations';
+import { StyledText } from '../StyledComponents';
+import { DefaultTheme } from '../../constants/theme';
+
+type HeaderProps = {
+    title?: string;
+    titleSize?: number;
+    titleColor?: string;
+    titleAlignment?: "center" | "auto" | "left" | "right" | "justify";
+    bg?: string;
+    renderRightIcon?: () => JSX.Element;
+    renderLeftIcon?: () => JSX.Element;
+    isBack?: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({
+    title = 'Header',
+    titleSize = 13,
+    titleColor = DefaultTheme.TEXT_TARTARY_COLOR,
+    titleAlignment = 'center',
+    bg = '#000',
+    renderRightIcon,
+    renderLeftIcon,
+}) => {
+
+    const Styles = StyleSheet.create({
+        MAIN_CONT: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: moderateVerticalScale(13),
+            paddingHorizontal: moderateScale(10),
+            backgroundColor: bg,
+            gap: moderateScale(10)
+        },
+        TEXT: {
+            fontSize: titleSize && responsiveFontSize(titleSize),
+            textAlign: titleAlignment,
+            color: titleColor
+            // fontFamily: FONTS_STYLES.POPPINS_SEMI_BOLD
+        },
+        RIGHT_ICON: {
+            flexGrow: renderRightIcon && 0.1
+        },
+        LEFT_ICON: {
+            flexGrow: renderLeftIcon && 0.1,
+            alignItems: 'flex-end'
+        }
+    });
+
+    // const navigation = useNavigation();
+
+    return (<>
+        <View style={Styles.MAIN_CONT}>
+            <View style={Styles.RIGHT_ICON}>
+                {renderLeftIcon &&
+                    <TouchableOpacity
+                    // onPress={() => navigation.goBack()}
+                    >
+                        {
+                            renderLeftIcon()
+                        }
+                    </TouchableOpacity>
+                }
+            </View>
+            <View style={{ flex: 1 }}>
+                <StyledText primary style={Styles.TEXT} tas>{title}</StyledText>
+            </View>
+            <View style={Styles.LEFT_ICON}>
+                {
+                    renderRightIcon &&
+                    renderRightIcon()
+                }
+            </View>
+        </View>
+    </>);
+}
+export default Header;
+export type { HeaderProps };

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from "../../hooks";
+
+
+type IconProps = {
+    renderIcon: JSX.Element;
+    color?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+    renderIcon,
+    color
+}) => {
+    const theme = useTheme(!color && !renderIcon?.props.color);
+
+    return (<>
+        {React.cloneElement(renderIcon as React.ReactElement<any>,
+            {
+                ...renderIcon?.props,
+                size: verticalScale(renderIcon?.props?.size ?? 15),
+                color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
+            }
+        )}
+    </>)
+}
+export default Icon;
+export type { IconProps };

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { PressableProps } from "react-native";
+import { StyledView } from "../StyledComponents";
+import TouchableRipple from "../TouchableRipple/TouchableRipple";
+import Icon from "../Icon/Icon";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+
+
+type IconButtonProps = PressableProps & {
+    rippleColor?: string;
+    children?: ReactNode;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+    rippleColor,
+    children,
+    ...rest
+}) => {
+
+    return (<>
+        <StyledView style={{ alignSelf: 'flex-start' }}>
+            <TouchableRipple
+                rippleColor={rippleColor}
+                style={{ borderRadius: 100, padding: verticalScale(8) }}
+                {...rest}
+            >
+                <Icon
+                    renderIcon={React.cloneElement(children as React.ReactElement<any>)}
+                />
+            </TouchableRipple>
+        </StyledView>
+    </>)
+}
+export default IconButton;
+export type { IconButtonProps };

package/src/components/Link/Link.tsx

@@ -0,0 +1,31 @@
+import type React from "react";
+import { StyledText } from "../StyledComponents";
+import { Linking, TouchableOpacity } from "react-native";
+import { useCallback } from "react";
+
+
+type props = {
+    title: string;
+    href: string;
+}
+
+const Link: React.FC<props> = ({
+    title = '',
+    href
+}) => {
+    const onUserPress = useCallback(async () => {
+        const supported = await Linking.canOpenURL(href);
+        if (supported) {
+            await Linking.openURL(href);
+        }
+    }, []);
+    return (<>
+        <TouchableOpacity onPress={onUserPress}>
+            <StyledText variant='h5' color='#0000FF'
+                style={{ includeFontPadding: false, alignItems: 'baseline', borderBottomColor: '#0000FF', borderBottomWidth: 1, alignSelf: 'flex-start', padding: 0, margin: 0, lineHeight: undefined, flexShrink: 1, textAlignVertical: 'bottom', }}
+            >{title}</StyledText>
+        </TouchableOpacity>
+    </>)
+}
+
+export default Link;

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useRef, useCallback, useEffect, } from "react";
+import { StyleSheet, Pressable, View, ScrollView } from "react-native";
+import { StyledView } from "../StyledComponents";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Portal from "../Portal/Portal";
+import { positionCalculations } from "./calculations";
+import type { menuLayoutTypes, anchorLayoutTypes } from "./calculations";
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import type { MenuProps } from "../../types";
+
+const Menu: React.FC<MenuProps> = ({
+    placement = 'top',
+    anchor,
+    disableBuiltInState = false,
+    isOpen = false,
+    onRequestOpen,
+    onRequestClose,
+    onSelect,
+    style,
+    children
+}) => {
+
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+    const anchorLayoutRef = useRef<anchorLayoutTypes>({ pageY: 0, pageX: 0, height: 0, width: 0 });
+    const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
+    const buttonRef = useRef<View | null>(null);
+    const scaleSharedValue = useSharedValue(0.5);
+    const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
+
+    useEffect(() => {
+        if ((disableBuiltInState && isOpen) || isVisible) {
+            scaleSharedValue.value = withTiming(1, { duration: 150 });
+        } else {
+            scaleSharedValue.value = 0;
+        }
+    }, [isOpen, isVisible]);
+
+    const measureLayout = useCallback(() => {
+        return new Promise((resolve) => {
+            buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+                anchorLayoutRef.current = { pageY, pageX, height, width };
+                resolve(true);
+            });
+        });
+    }, []);
+
+    const onOpen = async () => {
+        await measureLayout();
+        if (disableBuiltInState) {
+            onRequestOpen?.();
+        } else {
+            setIsVisible(true);
+        }
+    }
+
+    const onClose = () => {
+        if (disableBuiltInState) {
+            onRequestClose?.();
+        } else {
+            setIsVisible(false);
+        }
+    }
+
+    const renderChildren = (useCallback(() => {
+        return (<ScrollView>
+            {React.Children?.toArray(children).map((e) => {
+                return React.cloneElement(e as React.ReactElement, {
+                    onPress: () => {
+                        (e as React.ReactElement)?.props?.onPress?.();
+                        onSelect?.((e as React.ReactElement)?.props?.name);
+                        onClose();
+                    }
+                });
+            })}
+        </ScrollView>)
+
+    }, [children]))();
+
+    const scale: number = disableBuiltInState ? Number(isOpen) : Number(isVisible);
+    const pointerEvent = (isVisible && !disableBuiltInState) || (isOpen && disableBuiltInState) ? 'auto' : 'none';
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            // width: horizontalScale(130),
+            shadowColor: "#000",
+            backgroundColor: '#fff',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.23,
+            shadowRadius: 2.62,
+            elevation: 4,
+            position: 'absolute',
+            left: positions.left,
+            top: positions.top,
+            borderRadius: 5,
+            maxHeight: 400,
+            minWidth: horizontalScale(150),
+            paddingVertical: verticalScale(5)
+        }
+    });
+
+    const menuAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ scale: scaleSharedValue.value }],
+            opacity: scaleSharedValue.value
+        }
+    });
+
+    return (<>
+
+        <Portal
+            name='Menu'
+        >
+            <Pressable
+                style={[StyleSheet.absoluteFill, { transform: [{ scale }] }]}
+                pointerEvents={pointerEvent}
+                onPress={onClose}>
+                <Animated.View
+                    onStartShouldSetResponder={() => true}
+                    style={[STYLES.CONTAINER, menuAnimatedStyle, style]}
+                    onLayout={({ nativeEvent: { layout: { height, width } } }) => menuLayoutRef.current = { width, height }}
+                >
+                    {renderChildren}
+                </Animated.View>
+            </Pressable>
+        </Portal>
+
+        <StyledView alignItems='flex-start'>
+            <View ref={buttonRef} onLayout={measureLayout}>
+                {anchor && React.cloneElement(anchor, { onPress: onOpen })}
+            </View>
+        </StyledView>
+
+    </>)
+}
+export default Menu;
+export type { MenuProps };

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { StyledView } from "../StyledComponents";
+import { horizontalScale, moderateScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import type { MenuItemProps } from "../../types";
+
+const MenuItem: React.FC<MenuItemProps> = ({
+    // paddingV = 12,
+    // paddingH = 12,
+    paddingV = 11,
+    paddingH = 17,
+    gap = 12,
+    style,
+    children,
+    ...rest
+}) => {
+
+    return (<>
+        <TouchableOpacity
+            {...rest}
+        >
+            <StyledView
+                paddingHorizontal={horizontalScale(paddingH)}
+                paddingVertical={verticalScale(paddingV)}
+                flexDirection='row'
+                align="center"
+                gap={moderateScale(gap)}
+                style={style}
+            >
+                {children}
+            </StyledView>
+        </TouchableOpacity>
+    </>)
+}
+export default MenuItem;
+export type { MenuItemProps };

package/src/components/Menu/MenuItemLabel.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyledText } from "../StyledComponents";
+import type { MenuItemLabelProps } from "../../types";
+
+const MenuItemLabel: React.FC<MenuItemLabelProps> = ({
+    fs,
+    style,
+    children,
+    textVariant = 'h5',
+    ...rest
+}) => {
+
+    return (<>
+        <StyledText
+            fs={fs}
+            variant={textVariant}
+            color="#000"
+            numberOfLines={1}
+            flexShrink={1}
+            {...rest}
+        >
+            {children}
+        </StyledText>
+    </>)
+}
+export default MenuItemLabel;
+export type { MenuItemLabelProps };

package/src/components/Menu/calculations.ts

@@ -0,0 +1,34 @@
+export type anchorLayoutTypes = {
+    pageY: number;
+    pageX: number;
+    height: number;
+    width: number;
+}
+export type menuLayoutTypes = {
+    height: number;
+    width: number;
+}
+
+const positionCalculations = ((anchorLayoutRef: anchorLayoutTypes, menuLayoutRef: menuLayoutTypes, placement: any) => {
+    let positionValues = { top: 0, bottom: 0, left: 0, right: 0 };
+
+    if (anchorLayoutRef.pageX < menuLayoutRef.width) {
+        positionValues.left = anchorLayoutRef.pageX + anchorLayoutRef.width;
+    } else {
+        positionValues.left = anchorLayoutRef.pageX - menuLayoutRef.width;
+    }
+    // else if (anchorLayoutRef.current.pageX + menuLayoutRef.current.width > SCREEN_WIDTH) {
+    //     positionValues.left = anchorLayoutRef.current.pageX - menuLayoutRef.current.width;
+    // }
+
+    if (placement === 'top') {
+        positionValues.top = anchorLayoutRef.pageY;
+    } else if (placement === 'bottom') {
+        positionValues.top = (anchorLayoutRef.pageY - menuLayoutRef.height) + anchorLayoutRef.height;
+    }
+    return positionValues;
+});
+
+export {
+    positionCalculations,
+} 

package/src/components/Menu/index.ts

@@ -0,0 +1,8 @@
+export { default as Menu } from './Menu';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuItemLabel } from './MenuItemLabel';
+
+
+export type { MenuProps } from './Menu';
+export type { MenuItemProps } from './MenuItem';
+export type { MenuItemLabelProps } from './MenuItemLabel';