@nexara/nativeflow 0.1.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { StyleSheet } from "react-native";
+import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
+import { StyledText, StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import { getButtonColors } from './utils';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { ButtonProps } from '../../types';
+
+
+const Button: React.FC<ButtonProps> = ({
+    variant = 'contained',
+    type = 'flat',
+    fullWidth = false,
+    paddingH = 19,
+    paddingV = 14,
+    bg,
+    br = 5,
+    stroke = 1,
+    strokeColor,
+    titleColor,
+    title = 'Button',
+    titleFS,
+    titleVariant = 'h5',
+    titleFF,
+    size = 50,
+    rippleColor,
+    renderIcon,
+    renderLeftIcon,
+    renderRightIcon,
+    disabled = false,
+    buttonContainerStyle,
+    textStyle,
+    onPress,
+    ...props
+}) => {
+    const theme: any = useTheme();
+
+    const { backgroundColor, buttonTextColor, buttonBorderColor, buttonIconColor } = getButtonColors({
+        theme,
+        variant,
+        bg,
+        titleColor,
+        strokeColor,
+        disabled
+    });
+
+    const STYLES = StyleSheet.create({
+        BUTTON_CONT: {
+            backgroundColor: backgroundColor,
+            borderWidth: variant === 'contained' ? 0 : stroke,
+            borderColor: buttonBorderColor,
+            maxWidth: '100%',
+        },
+        BUTTON_TEXT: {
+            color: buttonTextColor,
+            textAlign: 'center',
+            fontFamily: titleFF ?? '',
+        },
+        FLAT_BTN_CONT: {
+            borderRadius: verticalScale(br),
+            overflow: 'hidden',
+            alignSelf: fullWidth ? 'stretch' : 'flex-start',
+        },
+        FLAT_BUTTON_CONT: {
+            paddingVertical: verticalScale(paddingV),
+            paddingHorizontal: horizontalScale(!fullWidth ? paddingH : 30),
+            borderRadius: verticalScale(br),
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: horizontalScale(10),
+        },
+        ROUND_BUTTON_CONT: {
+            borderRadius: verticalScale(100),
+            height: verticalScale(size),
+            width: verticalScale(size),
+            alignItems: 'center',
+            justifyContent: 'center',
+        }
+    });
+
+    return (
+        <>
+            {type === 'flat' && (
+                <StyledView style={STYLES.FLAT_BTN_CONT}>
+                    <TouchableRipple
+                        onPress={onPress}
+                        rippleColor={rippleColor}
+                        disabled={disabled}
+                        // ref={ref}
+                        {...props}
+                    >
+                        <StyledView style={[STYLES.FLAT_BUTTON_CONT, STYLES.BUTTON_CONT, buttonContainerStyle]}>
+                            {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
+                                <StyledView f={fullWidth ? 1 : undefined}>
+                                    {renderLeftIcon && React.cloneElement(renderLeftIcon, {
+                                        color: buttonIconColor
+                                    })}
+                                </StyledView>
+                            )}
+
+                            <StyledView
+                                flexShrink={1}
+                                f={fullWidth ? 8 : undefined}
+                            >
+                                <StyledText numberOfLines={1} fs={titleFS} variant={titleVariant} style={[STYLES.BUTTON_TEXT, textStyle]}>
+                                    {title}
+                                </StyledText>
+                            </StyledView>
+
+                            {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
+                                <StyledView alignItems='flex-end' f={fullWidth ? 1 : undefined}>
+                                    {renderRightIcon && React.cloneElement(renderRightIcon, {
+                                        color: buttonIconColor
+                                    })}
+                                </StyledView>
+                            )}
+                        </StyledView>
+                    </TouchableRipple>
+                </StyledView>
+            )}
+
+            {type === 'round' && (
+                <StyledView
+                    alignSelf='flex-start'
+                    borderRadius={verticalScale(100)}
+                    overflow='hidden'
+                    style={{
+                        overflow: 'hidden',
+                        borderRadius: verticalScale(100),
+                        alignSelf: 'flex-start'
+                    }}
+                >
+                    <TouchableRipple
+                        onPress={onPress}
+                        rippleColor={rippleColor}
+                        {...props}
+                    >
+                        <StyledView
+                            style={[STYLES.BUTTON_CONT, STYLES.ROUND_BUTTON_CONT, buttonContainerStyle]}
+                        >
+                            {renderIcon}
+                        </StyledView>
+                    </TouchableRipple>
+                </StyledView>
+            )}
+        </>
+    );
+};
+
+export default Button;
+export type { ButtonProps };

package/src/components/Button/utils.ts

@@ -0,0 +1,142 @@
+import type { ButtonVariant, ThemeTypes } from "../../types";
+
+
+const getButtonBorderColor = ({
+    theme,
+    strokeColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    strokeColor: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.outline;
+    }
+    if (strokeColor) {
+        return strokeColor
+    }
+    return theme.colors.outline;
+};
+
+
+const getButtonTextColor = ({
+    theme,
+    checkVariant,
+    titleColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    checkVariant: (variant: ButtonVariant) => boolean;
+    titleColor: string | undefined;
+    disabled: boolean;
+}) => {
+
+    if (disabled) {
+        return theme.colors.textDisable;
+    }
+    else if (titleColor) {
+        return titleColor
+    }
+    else if (checkVariant('outlined')) {
+        return theme.colors.textPrimary;
+    }
+    return theme.colors.textSecondary;
+};
+
+const getButtonBackgroundColor = ({
+    theme,
+    checkVariant,
+    bg,
+    disabled
+}: {
+    theme: ThemeTypes;
+    checkVariant: (variant: ButtonVariant) => boolean;
+    bg: string | undefined;
+    disabled: boolean;
+}) => {
+
+    if (disabled) {
+        return theme.colors.disable;
+    }
+    else if (bg) {
+        return bg
+    }
+    else if (checkVariant('contained')) {
+        return theme.colors.primary;
+    }
+    else if (checkVariant('outlined')) {
+        return 'transparent';
+    }
+    return theme.colors.primary;
+};
+
+
+const getButtonIconColor = ({
+    theme,
+    checkVariant,
+    disabled,
+}: {
+    theme: ThemeTypes;
+    checkVariant: (variant: ButtonVariant) => boolean;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.iconDisable;
+    } else if (checkVariant('outlined')) {
+        return theme.colors.iconPrimary
+    }
+    return theme.colors.iconSecondary;
+};
+
+const getButtonColors = ({
+    theme,
+    variant,
+    bg,
+    titleColor,
+    strokeColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    variant: ButtonVariant;
+    bg: string | undefined;
+    titleColor: string | undefined;
+    strokeColor: string | undefined;
+    disabled: boolean;
+}) => {
+
+    const checkVariant = (variantToCompare: ButtonVariant) => {
+        return variant === variantToCompare;
+    };
+    const backgroundColor = getButtonBackgroundColor({
+        theme,
+        checkVariant,
+        bg,
+        disabled
+    });
+    const buttonTextColor = getButtonTextColor({
+        theme,
+        checkVariant,
+        titleColor,
+        disabled
+    });
+    const buttonBorderColor = getButtonBorderColor({
+        theme,
+        strokeColor,
+        disabled
+    });
+    const buttonIconColor = getButtonIconColor({
+        checkVariant,
+        theme,
+        disabled
+    });
+
+    return {
+        backgroundColor,
+        buttonTextColor,
+        buttonBorderColor,
+        buttonIconColor
+    }
+};
+
+export { getButtonColors };

package/src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { StyledText, StyledView } from "../StyledComponents";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { useTheme } from "../../hooks";
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import { Check } from "../../assets/svg";
+import type { CheckBoxProps } from "../../types";
+
+
+const CheckBox: React.FC<CheckBoxProps> = ({
+    variant = 'square',
+    isChecked = false,
+    defaultValue = false,
+    activeBgColor,
+    inActiveBgColor = 'transparent',
+    iconColor,
+    disableBuiltInState = false,
+    disabled = false,
+    text,
+    fs,
+    textVariant = 'h6',
+    size = 20,
+    iconSize,
+    containerStyle,
+    textStyle,
+    checkBoxStyle,
+    onPress,
+}) => {
+    const [isCheckboxChecked, setIsCheckboxChecked] = useState<boolean>(defaultValue);
+
+    useEffect(() => {
+        setIsCheckboxChecked(defaultValue);
+    }, [defaultValue]);
+
+    const scaleVal = useSharedValue(1);
+    const { colors }: any = useTheme();
+    activeBgColor = disabled ? colors.disable : activeBgColor ?? colors.primary;
+    iconSize = iconSize ?? size / 1.5;
+    const bgColor = (!disableBuiltInState && isCheckboxChecked) || (disableBuiltInState && isChecked) ? activeBgColor : inActiveBgColor;
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            flexDirection: 'row',
+            gap: horizontalScale(10),
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+        },
+        CHECKBOX_PARENT_CONT: {
+            height: verticalScale(size),
+            width: verticalScale(size),
+            borderWidth: 0.8,
+            borderColor: disabled ? colors.disable : activeBgColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: variant === 'square' ? 5 : verticalScale(size),
+            padding: verticalScale(7),
+            backgroundColor: bgColor,
+        }
+    });
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scaleVal.value }]
+    }));
+
+    const onUserClick = () => {
+        if (!disableBuiltInState) {
+            onPress?.(!isCheckboxChecked);
+            setIsCheckboxChecked(!isCheckboxChecked);
+        } else {
+            onPress?.(!isChecked);
+        }
+    };
+    return (<>
+        <TouchableWithoutFeedback
+            onPressIn={() => scaleVal.value = withSpring(0.8)}
+            onPressOut={() => scaleVal.value = withSpring(1)}
+            onPress={onUserClick}
+            disabled={disabled}
+        >
+            <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+
+                <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, checkBoxStyle, animatedStyle]}>
+                    {
+                        (disableBuiltInState ? isChecked : isCheckboxChecked) &&
+                        <Check
+                            color={iconColor ?? colors.iconSecondary}
+                            size={verticalScale(iconSize)}
+                        />
+                    }
+                </Animated.View>
+                {
+                    text &&
+                    <StyledText style={textStyle} fs={fs} variant={textVariant} primary>{text}</StyledText>
+                }
+
+            </StyledView>
+        </TouchableWithoutFeedback>
+    </>)
+}
+export default CheckBox;
+export type { CheckBoxProps };

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StyleSheet, Pressable, TouchableOpacity } from 'react-native';
+import { StyledText, StyledView } from '../StyledComponents';
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from '../../hooks';
+import { getChipColors } from './utils';
+import type { ChipProps } from '../../types';
+
+const Chip: React.FC<ChipProps> = ({
+    title = 'Chip',
+    bg,
+    titleColor,
+    fs,
+    br = 7,
+    gap = 7,
+    paddingV = 9,
+    paddingH = 13,
+    stroke = 0.9,
+    strokeColor,
+    rippleColor,
+    disabled = false,
+    renderLeftIcon,
+    renderRightIcon,
+    containerStyle,
+    textStyle,
+    ...props
+}) => {
+
+    const theme: any = useTheme();
+
+    const { buttonTextColor, buttonBorderColor, backgroundColor } = getChipColors({
+        theme,
+        bg,
+        titleColor,
+        strokeColor,
+        disabled
+    });
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderWidth: stroke,
+            borderColor: buttonBorderColor,
+            backgroundColor: backgroundColor,
+            borderRadius: verticalScale(br),
+            paddingVertical: verticalScale(paddingV),
+            paddingHorizontal: horizontalScale(paddingH),
+            gap: horizontalScale(gap)
+        },
+        TEXT: {
+            color: buttonTextColor,
+        }
+    });
+    return (<>
+        <StyledView alignSelf='flex-start'>
+            <Pressable
+                android_ripple={{
+                    color: rippleColor,
+                }}
+                {...props}
+                disabled={disabled}
+            >
+                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+                    {
+                        renderLeftIcon &&
+                        <TouchableOpacity
+                            disabled={disabled}
+                        >
+                            {renderLeftIcon}
+                        </TouchableOpacity>
+                    }
+                    <StyledText primary variant='h5' fs={fs} style={[STYLES.TEXT, textStyle]}>{title}</StyledText>
+                    {
+                        renderRightIcon &&
+                        <TouchableOpacity
+                            disabled={disabled}
+                        >
+                            {renderRightIcon}
+                        </TouchableOpacity>
+                    }
+                </StyledView>
+
+            </Pressable>
+        </StyledView>
+    </>);
+}
+export default Chip;
+export type { ChipProps };

package/src/components/Chip/utils.ts

@@ -0,0 +1,96 @@
+import type { ThemeTypes } from "../../types";
+
+const getBorderColor = ({
+    theme,
+    strokeColor,
+    disabled,
+}: {
+    theme: ThemeTypes;
+    strokeColor: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.disable;
+    }
+    if (strokeColor) {
+        return strokeColor
+    }
+    return theme.colors.outline;
+};
+
+
+const getTextColor = ({
+    theme,
+    titleColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    titleColor: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.textDisable;
+    }
+    else if (titleColor) {
+        return titleColor;
+    }
+    return theme.colors.textTertiary;
+};
+
+const getBgColor = ({
+    theme,
+    bg,
+    disabled
+}: {
+    theme: ThemeTypes;
+    bg: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.disable;
+    }
+    else if (bg) {
+        return bg
+    }
+    return theme.colors.chipBgColor;
+};
+
+const getChipColors = ({
+    theme,
+    bg,
+    titleColor,
+    strokeColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    bg: string | undefined;
+    titleColor: string | undefined;
+    strokeColor: string | undefined;
+    disabled: boolean;
+}) => {
+
+
+    const backgroundColor = getBgColor({
+        theme,
+        bg,
+        disabled
+    });
+    const buttonTextColor = getTextColor({
+        theme,
+        titleColor,
+        disabled
+    });
+    const buttonBorderColor = getBorderColor({
+        theme,
+        strokeColor,
+        disabled,
+    });
+
+    return {
+        backgroundColor,
+        buttonTextColor,
+        buttonBorderColor
+    }
+};
+
+export { getChipColors };

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,116 @@
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import type { ReactElement } from "react";
+import { Keyboard, BackHandler } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring } from 'react-native-reanimated';
+import { dialogSizes } from '../../constants';
+import Portal from '../Portal/Portal';
+import type { DialogProps, DialogRefProps } from '../../types';
+
+
+const Dialog = forwardRef<DialogRefProps, DialogProps>(({
+    variant = 'default',
+    // isVisible = false,
+    size = 'lg',
+    fullScreen,
+    backdropColor = 'rgba(0, 0, 0, 0.5)',
+    animationDuration = 800,
+    onClose,
+    children,
+}, ref) => {
+
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const scale = useSharedValue(0.8);
+    const opacity = useSharedValue(0);
+
+    useEffect(() => {
+        opacity.value = withTiming(dialogVisible ? 1 : 0);
+        scale.value = withSpring(dialogVisible ? 1 : 0.8,
+            {
+                duration: animationDuration,
+                dampingRatio: 0.6,
+                stiffness: 36,
+                overshootClamping: false,
+                restDisplacementThreshold: 0.01,
+                restSpeedThreshold: 0.01,
+            }
+        );
+    }, [dialogVisible]);
+
+    useEffect(() => {
+        BackHandler.addEventListener('hardwareBackPress', hardwareBackPress)
+        return () => BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);
+    }, [dialogVisible]);
+
+    const hardwareBackPress = () => {
+        onClose?.();
+        setDialogVisible(false);
+        return dialogVisible;
+    };
+    useImperativeHandle(ref, () => ({
+        open: () => setDialogVisible(true),
+        close: () => setDialogVisible(false)
+    }));
+
+    const backdropAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: backdropColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+            opacity: opacity.value
+        }
+    });
+    const modalContAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            backgroundColor: '#fff',
+            borderRadius: 5,
+            width: `${dialogSizes[size]}%`,
+            borderWidth: 1,
+            borderColor: '#d4d4d4',
+            minHeight: fullScreen ? '100%' : 'auto',
+            maxHeight: fullScreen ? '100%' : '80%',
+            opacity: opacity.value,
+            transform: [{
+                scale: scale.value
+            }],
+        }
+    });
+    const renderChildrenWithVariant = () => {
+        return React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return cloneElement(child as ReactElement<any>, { variant });
+            }
+            return child;
+        });
+    };
+
+    const handleStartShouldSetResponder = (): boolean => {
+        Keyboard.dismiss();
+        onClose?.();
+        setDialogVisible(false);
+        return true;
+    };
+
+    return (<>
+        <Portal name='dialog'>
+            <Animated.View
+                style={backdropAnimatedStyle}
+                pointerEvents={dialogVisible ? 'auto' : 'none'}
+                onStartShouldSetResponder={handleStartShouldSetResponder}
+            >
+                <Animated.View
+                    style={modalContAnimatedStyle}
+                    onStartShouldSetResponder={() => true}
+                >
+                    {renderChildrenWithVariant()}
+                </Animated.View>
+            </Animated.View>
+        </Portal>
+    </>);
+});
+export default Dialog;
+export type { DialogProps };