@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Button/utils.ts

@@ -1,142 +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
-    }
-};
-
+import type { ButtonVariant, ThemeTypes } from "../../types";
+
+
+const getButtonBorderColor = ({
+    theme,
+    strokeColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    strokeColor: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.border.default;
+    }
+    if (strokeColor) {
+        return strokeColor
+    }
+    return theme.colors.border.default;
+};
+
+
+const getButtonTextColor = ({
+    theme,
+    checkVariant,
+    titleColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    checkVariant: (variant: ButtonVariant) => boolean;
+    titleColor: string | undefined;
+    disabled: boolean;
+}) => {
+
+    if (disabled) {
+        return theme.colors.typography.disabled;
+    }
+    else if (titleColor) {
+        return titleColor
+    }
+    else if (checkVariant('outlined')) {
+        return theme.colors.typography.primary;
+    }
+    return theme.colors.brand.onPrimary;
+};
+
+const getButtonBackgroundColor = ({
+    theme,
+    checkVariant,
+    bg,
+    disabled
+}: {
+    theme: ThemeTypes;
+    checkVariant: (variant: ButtonVariant) => boolean;
+    bg: string | undefined;
+    disabled: boolean;
+}) => {
+
+    if (disabled) {
+        return theme.colors.states.disabled;
+    }
+    else if (bg) {
+        return bg
+    }
+    else if (checkVariant('contained')) {
+        return theme.colors.brand.primary;
+    }
+    else if (checkVariant('outlined')) {
+        return 'transparent';
+    }
+    return theme.colors.brand.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

@@ -1,116 +1,118 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { StyleSheet, TouchableWithoutFeedback, Animated, type ViewStyle } from "react-native";
-import { StyledText, StyledView } from "../StyledComponents";
-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 STYLES = useMemo(Styles, []);
-    
-    const scaleVal = useRef(new Animated.Value(1)).current;
-    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 textColor = disabled ? colors.textDisable : colors.textPrimary;
-
-    const dynamicMainContStyles: ViewStyle = {
-        height: verticalScale(size),
-        width: verticalScale(size),
-        borderColor: disabled ? colors.disable : activeBgColor,
-        borderRadius: variant === 'square' ? 5 : verticalScale(size),
-        backgroundColor: bgColor
-    };
-
-    const animatedStyle = {
-        transform: [{ scale: scaleVal }]
-    };
-
-    const animateScale = (toValue: number) => {
-        Animated.spring(scaleVal, {
-            toValue,
-            speed: 20,
-            bounciness: 8,
-            useNativeDriver: true,
-        }).start();
-    };
-    const onUserClick = () => {
-        if (!disableBuiltInState) {
-            onPress?.(!isCheckboxChecked);
-            setIsCheckboxChecked(!isCheckboxChecked);
-        } else {
-            onPress?.(!isChecked);
-        }
-    };
-    return (
-        <StyledView>
-            <TouchableWithoutFeedback
-                onPressIn={() => animateScale(0.8)}
-                onPressOut={() => animateScale(1)}
-                onPress={onUserClick}
-                disabled={disabled}
-            >
-                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
-
-                    <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle]}>
-                        {
-                            (disableBuiltInState ? isChecked : isCheckboxChecked) &&
-                            <Check
-                                color={iconColor ?? colors.iconSecondary}
-                                size={verticalScale(iconSize)}
-                            />
-                        }
-                    </Animated.View>
-                    {
-                        text &&
-                        <StyledText style={textStyle} fs={fs} color={textColor} variant={textVariant} primary>{text}</StyledText>
-                    }
-
-                </StyledView>
-            </TouchableWithoutFeedback>
-        </StyledView>
-    )
-}
-export default CheckBox;
-export type { CheckBoxProps };
-
-const Styles = () => StyleSheet.create({
-    CONTAINER: {
-        flexDirection: 'row',
-        gap: horizontalScale(10),
-        alignItems: 'center',
-    },
-    CHECKBOX_PARENT_CONT: {
-        borderWidth: 0.8,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: verticalScale(7)
-    }
-});
+import { useEffect, useMemo, useRef, useState, type FC } from "react";
+import { StyleSheet, TouchableWithoutFeedback, Animated, type ViewStyle } from "react-native";
+import { StyledText, StyledView } from "../StyledComponents";
+import { useTheme } from "../../hooks";
+import { horizontalScale, verticalScale } from "../../helpers";
+import { Check } from "../../assets/svg";
+import type { CheckBoxProps } from "../../types";
+
+
+const CheckBox: FC<CheckBoxProps> = ({
+    variant = 'square',
+    isChecked = false,
+    defaultValue = false,
+    activeBgColor,
+    inActiveBgColor = 'transparent',
+    iconColor,
+    disableBuiltInState = false,
+    disabled = false,
+    label = 'Checkbox',
+    fScale = 'xs',
+    fs,
+    ff,
+    // size = 22,
+    size = 20,
+    iconSize,
+    containerStyle,
+    labelStyle,
+    checkBoxStyle,
+    onPress,
+}) => {
+    const [isCheckboxChecked, setIsCheckboxChecked] = useState<boolean>(defaultValue);
+
+    useEffect(() => {
+        setIsCheckboxChecked(defaultValue);
+    }, [defaultValue]);
+
+    const STYLES = useMemo(Styles, []);
+
+    const scaleVal = useRef(new Animated.Value(1)).current;
+    const { colors }: any = useTheme();
+    activeBgColor = disabled ? colors.states.disabled : activeBgColor ?? colors.brand.primary;
+    iconSize = iconSize ?? size / 1.5;
+    const bgColor = (!disableBuiltInState && isCheckboxChecked) || (disableBuiltInState && isChecked) ? activeBgColor : inActiveBgColor;
+    const textColor = disabled ? colors.typography.disabled : colors.typography.primary;
+
+    const dynamicMainContStyles: ViewStyle = {
+        height: verticalScale(size),
+        width: verticalScale(size),
+        borderColor: disabled ? colors.border.default : activeBgColor,
+        borderRadius: verticalScale(variant === 'square' ? 5 : size),
+        backgroundColor: bgColor
+    };
+
+    const animatedStyle = {
+        transform: [{ scale: scaleVal }]
+    };
+
+    const animateScale = (toValue: number) => {
+        Animated.spring(scaleVal, {
+            toValue,
+            speed: 20,
+            bounciness: 8,
+            useNativeDriver: true,
+        }).start();
+    };
+    const onUserClick = () => {
+        if (!disableBuiltInState) {
+            onPress?.(!isCheckboxChecked);
+            setIsCheckboxChecked(!isCheckboxChecked);
+        } else {
+            onPress?.(!isChecked);
+        }
+    };
+    return (
+        // <StyledView>
+        <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+
+            <TouchableWithoutFeedback
+                onPressIn={() => animateScale(0.8)}
+                onPressOut={() => animateScale(1)}
+                onPress={onUserClick}
+                disabled={disabled}
+            >
+                <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle]}>
+                    {
+                        (disableBuiltInState ? isChecked : isCheckboxChecked) &&
+                        <Check
+                            color={disabled ? colors.states.disabled : iconColor ?? colors.brand.onPrimary}
+                            size={verticalScale(iconSize)}
+                        />
+                    }
+                </Animated.View>
+            </TouchableWithoutFeedback>
+            {
+                label &&
+                <StyledText style={labelStyle} fs={fs} ff={ff} color={textColor} fScale={fScale}>{label}</StyledText>
+            }
+
+        </StyledView>
+        // </StyledView>
+    )
+}
+export default CheckBox;
+export type { CheckBoxProps };
+
+const Styles = () => StyleSheet.create({
+    CONTAINER: {
+        flexDirection: 'row',
+        gap: horizontalScale(10),
+        alignItems: 'center',
+    },
+    CHECKBOX_PARENT_CONT: {
+        borderWidth: 0.8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: horizontalScale(7)
+    }
+});