@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/UserInput/UserInput.tsx

@@ -1,133 +1,136 @@
-import { forwardRef, useMemo } from 'react';
-import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
-import type { TextStyle } from 'react-native';
-import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
-import { useTheme } from '../../hooks';
-import { StyledText, StyledView } from '../StyledComponents';
-import type { UserInputProps } from '../../types';
-import generateColors from './generateColors';
-
-const UserInput = forwardRef<TextInput, UserInputProps>(({
-    variant = 'standard',
-    label,
-    bg,
-    br = 10,
-    stroke = 1,
-    labelColor,
-    textVariant = {
-        label: 'h5',
-        inputText: 'h5',
-        helperText: 'h6',
-    },
-    inputTextColor,
-    strokeColor,
-    cursorColor,
-    placeholderColor,
-    inputFs = 13,
-    labelFs,
-    helperTextFS,
-    placeholder = 'Please enter...',
-    disabled = false,
-    isError = false,
-    helperText = '',
-    multiline = false,
-    renderLeftIcon,
-    renderRightIcon,
-    styles,
-    ...rest
-}, ref) => {
-
-    const theme: any = useTheme();
-
-    const STYLES = useMemo(Styles, []);
-
-    const {
-        computedCursorColor,
-        computedPlaceholderColor,
-        computedLabelColor
-    } = useMemo(() => generateColors(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
-
-    const dynamicStyles = {
-        INPUT_CONT: {
-            alignItems: multiline ? 'flex-start' : 'center' as ViewStyle['alignItems'],
-            backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
-            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
-            borderWidth: variant === 'standard' ? 0 : stroke,
-            borderBottomWidth: stroke,
-            borderRadius: verticalScale(br),
-            height: multiline ? undefined : verticalScale(48),
-            paddingVertical: multiline ? horizontalScale(10) : undefined,
-        },
-        INPUT: {
-            color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
-            //@ts-ignore
-            fontSize: responsiveFontSize(theme.typography.variantSizes[textVariant.inputText] ?? inputFs),
-            textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
-            minHeight: multiline ? 100 : undefined,
-            maxHeight: multiline ? 150 : undefined,
-        },
-        ERROR_HELPER_TEXT: {
-            color: theme.colors.error,
-        }
-    };
-
-    return (<>
-        <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
-            {
-                label &&
-                <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
-            }
-            <StyledView
-                style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
-            >
-                {
-                    renderLeftIcon
-                }
-                <TextInput
-                    ref={ref}
-                    style={[STYLES.INPUT, dynamicStyles.INPUT, styles?.input]}
-                    placeholder={placeholder}
-                    placeholderTextColor={computedPlaceholderColor}
-                    editable={!disabled}
-                    multiline={multiline}
-                    cursorColor={computedCursorColor}
-                    {...rest}
-                />
-                {
-                    renderRightIcon
-                }
-            </StyledView>
-            {
-                (isError && helperText) &&
-                <StyledText
-                    variant={textVariant?.helperText}
-                    fs={helperTextFS}
-                    style={[
-                        STYLES.ERROR_HELPER_TEXT,
-                        dynamicStyles.ERROR_HELPER_TEXT,
-                        styles?.helperText
-                    ]}
-                >
-                    {helperText}
-                </StyledText>
-            }
-        </StyledView>
-    </>)
-});
-export default UserInput;
-export type { UserInputProps };
-
-const Styles = () => StyleSheet.create({
-    INPUT_CONT: {
-        flexDirection: 'row',
-        paddingHorizontal: horizontalScale(14),
-        gap: horizontalScale(10),
-    },
-    INPUT: {
-        padding: 0,
-        flex: 1,
-    },
-    ERROR_HELPER_TEXT: {
-        paddingHorizontal: 5
-    }
+import { forwardRef, useMemo, useState } from 'react';
+import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import { StyledText, StyledView } from '../StyledComponents';
+import type { UserInputProps } from '../../types';
+import generateColors from './generateColors';
+
+const UserInput = forwardRef<TextInput, UserInputProps>(({
+    variant = 'standard',
+    label,
+    bg,
+    br = 10,
+    stroke = 1,
+    labelColor,
+    textScale = {
+        label: 'sm',
+        inputText: 'sm',
+        helperText: 'xs',
+    },
+    inputTextColor,
+    strokeColor,
+    cursorColor,
+    placeholderColor,
+    inputFs,
+    labelFs,
+    helperTextFS,
+    placeholder = 'Please enter...',
+    disabled = false,
+    isError = false,
+    helperText,
+    multiline = false,
+    renderLeftIcon,
+    renderRightIcon,
+    styles,
+    ...rest
+}, ref) => {
+
+    const [isFocused, setIsFocused] = useState(false);
+
+    const theme: any = useTheme();
+    const STYLES = useMemo(Styles, []);
+
+    const {
+        computedCursorColor,
+        computedPlaceholderColor,
+        computedLabelColor
+    } = useMemo(() => generateColors(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
+
+    const dynamicStyles = {
+        INPUT_CONT: {
+            alignItems: multiline ? 'flex-start' : 'center' as ViewStyle['alignItems'],
+            backgroundColor: disabled && theme.colors.states.disabled || isFocused && theme.colors.states.focus || (bg ?? theme.colors.background.default),
+            borderColor: isError && theme.colors.semantic.danger || isFocused && theme.colors.brand.primary || (strokeColor ?? theme.colors.border.default),
+            borderWidth: variant === 'standard' ? 0 : stroke,
+            borderBottomWidth: stroke,
+            borderRadius: verticalScale(br),
+            height: multiline ? undefined : verticalScale(47),
+            paddingVertical: multiline ? horizontalScale(10) : undefined,
+        },
+        INPUT: {
+            color: disabled ? theme.colors.typography.disabled : isError ? theme.colors.semantic.danger : inputTextColor ?? theme.colors.typography.primary,
+            //@ts-ignore
+            fontSize: responsiveFontSize(inputFs ?? theme.sizes.typography[textScale.inputText]),
+            textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
+            minHeight: multiline ? 100 : undefined,
+            maxHeight: multiline ? 150 : undefined,
+        },
+        ERROR_HELPER_TEXT: {
+            color: theme.colors.semantic.danger,
+        }
+    };
+
+    return (<>
+        <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
+            {
+                label &&
+                <StyledText fScale={textScale?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
+            }
+            <StyledView
+                style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
+            >
+                {
+                    renderLeftIcon
+                }
+                <TextInput
+                    ref={ref}
+                    style={[STYLES.INPUT, dynamicStyles.INPUT, styles?.input]}
+                    placeholder={placeholder}
+                    placeholderTextColor={computedPlaceholderColor}
+                    editable={!disabled}
+                    multiline={multiline}
+                    cursorColor={computedCursorColor}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
+                    {...rest}
+                />
+                {
+                    renderRightIcon
+                }
+            </StyledView>
+            {
+                (isError && helperText) &&
+                <StyledText
+                    fScale={textScale?.helperText}
+                    fs={helperTextFS}
+                    style={[
+                        STYLES.ERROR_HELPER_TEXT,
+                        dynamicStyles.ERROR_HELPER_TEXT,
+                        styles?.helperText
+                    ]}
+                >
+                    {helperText}
+                </StyledText>
+            }
+        </StyledView>
+    </>)
+});
+export default UserInput;
+export type { UserInputProps };
+
+const Styles = () => StyleSheet.create({
+    INPUT_CONT: {
+        flexDirection: 'row',
+        paddingHorizontal: horizontalScale(14),
+        gap: horizontalScale(10),
+    },
+    INPUT: {
+        padding: 0,
+        flex: 1,
+    },
+    ERROR_HELPER_TEXT: {
+        paddingHorizontal: 5
+    }
 });

package/src/components/UserInput/UserInputV2.tsx

@@ -1,132 +1,132 @@
-import React, { type JSX } from 'react';
-import { StyleSheet, View } from 'react-native';
-import type { TextInputProps, ViewStyle, TextStyle } from "react-native";
-import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
-import { useTheme } from '../../hooks';
-import { StyledText } from '../StyledComponents';
-
-
-type UserInputV2Props = TextInputProps & {
-    variant?: 'outlined' | 'standard' | 'filled';
-    label?: string;
-    bg?: string;
-    br?: number;
-    stroke?: number;
-    labelColor?: string;
-    textColor?: string;
-    strokeColor?: string;
-    cursorColor?: string;
-    placeholderTextColor?: string;
-    fs?: number;
-    labelFs?: number;
-    placeholder?: string;
-    isError?: boolean;
-    isDisabled?: boolean;
-    multiline?: boolean;
-    renderLeftIcon?: () => JSX.Element;
-    renderRightIcon?: () => JSX.Element;
-    inputContStyle?: ViewStyle | ViewStyle[];
-    inputStyle?: TextStyle | TextStyle[];
-    containerStyle?: ViewStyle | ViewStyle[];
-    labelStyle?: TextStyle | TextStyle[];
-}
-
-
-const UserInputV2: React.FC<UserInputV2Props> = ({
-    variant = 'outlined',
-    // label,
-    bg = 'transparent',
-    br = 5,
-    stroke = 1,
-    labelColor,
-    textColor,
-    strokeColor,
-    // cursorColor,
-    // placeholderTextColor,
-    fs = 12,
-    labelFs = 12,
-    // placeholder = 'Enter Your...',
-    isDisabled = false,
-    isError,
-    multiline = false,
-    renderLeftIcon,
-    renderRightIcon,
-    inputContStyle,
-    // inputStyle,
-    containerStyle,
-    // labelStyle,/
-}) => {
-
-    const theme: any = useTheme();
-
-    // const cursor = isError ? theme.colors.error : cursorColor ?? theme.colors.cursorColor;
-    // const placeholderColor = placeholderTextColor ?? theme.colors.placeholderColor
-
-    const STYLES = StyleSheet.create({
-        INPUT: {
-            color: isDisabled ? theme.colors.textDisable : isError ? theme.colors.error : textColor ?? theme.colors.textPrimary,
-            fontSize: responsiveFontSize(fs),
-            textAlignVertical: multiline ? 'top' : 'center',
-            padding: 0
-        },
-        LABEL: {
-            color: isError ? theme.colors.error : labelColor ?? theme.colors.textPrimary,
-            fontSize: responsiveFontSize(labelFs),
-            fontWeight: 'bold'
-        },
-        INPUT_CONT: {
-            flexDirection: 'row',
-            alignItems: multiline ? 'flex-start' : 'center',
-            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
-            height: multiline ? 'auto' : verticalScale(45),
-            backgroundColor: isDisabled ? theme.colors.disable : bg ?? 'transparent',
-            borderWidth: variant === 'standard' ? 0 : stroke,
-            borderBottomWidth: stroke,
-            paddingHorizontal: horizontalScale(15),
-            paddingVertical: multiline ? verticalScale(10) : 0,
-            borderRadius: verticalScale(br),
-            gap: horizontalScale(15),
-        },
-    });
-    const viewProps = {
-        gap: verticalScale(4),
-        ...containerStyle
-    };
-    return (<>
-        <View {...viewProps}>
-            {/* {
-                label &&
-                <View>
-                    <Text style={{ ...STYLES.LABEL, ...labelStyle }}>{label}</Text>
-                </View>
-            } */}
-            <View
-                style={{ ...STYLES.INPUT_CONT, ...inputContStyle }}
-            >
-                {
-                    renderLeftIcon && renderLeftIcon()
-                }
-                <View
-                    style={{ flex: 1, alignSelf: 'center' }}
-                >
-                    {/* <TextInput
-                        style={{ ...STYLES.INPUT, ...inputStyle }}
-                        placeholder={placeholder}
-                        placeholderTextColor={placeholderColor}
-                        editable={!isDisabled}
-                        multiline={multiline}
-                        cursorColor={cursor}
-                        {...rest}
-                    /> */}
-                    <StyledText>Email</StyledText>
-                </View>
-                {
-                    renderRightIcon && renderRightIcon()
-                }
-            </View>
-        </View>
-    </>)
-}
-export default UserInputV2;
-export type { UserInputV2Props };
-
+import React, { type JSX } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { TextInputProps, ViewStyle, TextStyle } from "react-native";
+import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import { StyledText } from '../StyledComponents';
+
+
+type UserInputV2Props = TextInputProps & {
+    variant?: 'outlined' | 'standard' | 'filled';
+    label?: string;
+    bg?: string;
+    br?: number;
+    stroke?: number;
+    labelColor?: string;
+    textColor?: string;
+    strokeColor?: string;
+    cursorColor?: string;
+    placeholderTextColor?: string;
+    fs?: number;
+    labelFs?: number;
+    placeholder?: string;
+    isError?: boolean;
+    isDisabled?: boolean;
+    multiline?: boolean;
+    renderLeftIcon?: () => JSX.Element;
+    renderRightIcon?: () => JSX.Element;
+    inputContStyle?: ViewStyle | ViewStyle[];
+    inputStyle?: TextStyle | TextStyle[];
+    containerStyle?: ViewStyle | ViewStyle[];
+    labelStyle?: TextStyle | TextStyle[];
+}
+
+
+const UserInputV2: React.FC<UserInputV2Props> = ({
+    variant = 'outlined',
+    // label,
+    bg = 'transparent',
+    br = 5,
+    stroke = 1,
+    labelColor,
+    textColor,
+    strokeColor,
+    // cursorColor,
+    // placeholderTextColor,
+    fs = 12,
+    labelFs = 12,
+    // placeholder = 'Enter Your...',
+    isDisabled = false,
+    isError,
+    multiline = false,
+    renderLeftIcon,
+    renderRightIcon,
+    inputContStyle,
+    // inputStyle,
+    containerStyle,
+    // labelStyle,/
+}) => {
+
+    const theme: any = useTheme();
+
+    // const cursor = isError ? theme.colors.error : cursorColor ?? theme.colors.cursorColor;
+    // const placeholderColor = placeholderTextColor ?? theme.colors.placeholderColor
+
+    const STYLES = StyleSheet.create({
+        INPUT: {
+            color: isDisabled ? theme.colors.textDisable : isError ? theme.colors.error : textColor ?? theme.colors.textPrimary,
+            fontSize: responsiveFontSize(fs),
+            textAlignVertical: multiline ? 'top' : 'center',
+            padding: 0
+        },
+        LABEL: {
+            color: isError ? theme.colors.error : labelColor ?? theme.colors.textPrimary,
+            fontSize: responsiveFontSize(labelFs),
+            fontWeight: 'bold'
+        },
+        INPUT_CONT: {
+            flexDirection: 'row',
+            alignItems: multiline ? 'flex-start' : 'center',
+            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
+            height: multiline ? 'auto' : verticalScale(45),
+            backgroundColor: isDisabled ? theme.colors.disable : bg ?? 'transparent',
+            borderWidth: variant === 'standard' ? 0 : stroke,
+            borderBottomWidth: stroke,
+            paddingHorizontal: horizontalScale(15),
+            paddingVertical: multiline ? verticalScale(10) : 0,
+            borderRadius: verticalScale(br),
+            gap: horizontalScale(15),
+        },
+    });
+    const viewProps = {
+        gap: verticalScale(4),
+        ...containerStyle
+    };
+    return (<>
+        <View {...viewProps}>
+            {/* {
+                label &&
+                <View>
+                    <Text style={{ ...STYLES.LABEL, ...labelStyle }}>{label}</Text>
+                </View>
+            } */}
+            <View
+                style={{ ...STYLES.INPUT_CONT, ...inputContStyle }}
+            >
+                {
+                    renderLeftIcon && renderLeftIcon()
+                }
+                <View
+                    style={{ flex: 1, alignSelf: 'center' }}
+                >
+                    {/* <TextInput
+                        style={{ ...STYLES.INPUT, ...inputStyle }}
+                        placeholder={placeholder}
+                        placeholderTextColor={placeholderColor}
+                        editable={!isDisabled}
+                        multiline={multiline}
+                        cursorColor={cursor}
+                        {...rest}
+                    /> */}
+                    <StyledText>Email</StyledText>
+                </View>
+                {
+                    renderRightIcon && renderRightIcon()
+                }
+            </View>
+        </View>
+    </>)
+}
+export default UserInputV2;
+export type { UserInputV2Props };
+

package/src/components/UserInput/generateColors.ts

@@ -1,14 +1,14 @@
-import type { ThemeTypes } from "../../types";
-
-
-const generateColors = (theme: ThemeTypes, isError: boolean, cursorColor?: string, placeholderColor?: string, labelColor?: string) => {
-    const computedCursorColor = isError ? theme.colors.error : (cursorColor ?? theme.colors.cursorColor);
-    const computedPlaceholderColor = placeholderColor ?? theme.colors.placeholderColor;
-    const computedLabelColor = isError ? theme.colors.error : labelColor ?? theme.colors.textTertiary;
-    return {
-        computedCursorColor,
-        computedPlaceholderColor,
-        computedLabelColor
-    }
-}
+import type { ThemeTypes } from "../../types";
+
+
+const generateColors = (theme: ThemeTypes, isError: boolean, cursorColor?: string, placeholderColor?: string, labelColor?: string) => {
+    const computedCursorColor = isError ? theme.colors.semantic.danger : (cursorColor ?? theme.colors.brand.primary);
+    const computedPlaceholderColor = placeholderColor ?? theme.colors.typography.tertiary;
+    const computedLabelColor = isError ? theme.colors.semantic.danger : labelColor ?? theme.colors.typography.primary;
+    return {
+        computedCursorColor,
+        computedPlaceholderColor,
+        computedLabelColor
+    }
+}
 export default generateColors;

package/src/constants/breakPoints.ts

@@ -1,18 +1,18 @@
-type BreakPointsType = {
-    xs: number,
-    sm: number,
-    md: number,
-    lg: number,
-    xl: number,
-}
-
-const BreakPoints: BreakPointsType = {
-    xs: 0,
-    sm: 360,
-    md: 600,
-    lg: 768,
-    xl: 960
-}
-
-export default BreakPoints;
+type BreakPointsType = {
+    xs: number,
+    sm: number,
+    md: number,
+    lg: number,
+    xl: number,
+}
+
+const BreakPoints: BreakPointsType = {
+    xs: 0,
+    sm: 360,
+    md: 600,
+    lg: 768,
+    xl: 960
+}
+
+export default BreakPoints;
 export type { BreakPointsType };

package/src/constants/dialogSizes.ts

@@ -1,12 +1,12 @@
-import type { dialogSizesTypes } from "../types/common.type";
-
-
-const dialogSizes: dialogSizesTypes = {
-    xs: 60,
-    sm: 70,
-    md: 80,
-    lg: 90,
-    full: 100
-};
-
+import type { dialogSizesTypes } from "../types/common.type";
+
+
+const dialogSizes: dialogSizesTypes = {
+    xs: 60,
+    sm: 70,
+    md: 80,
+    lg: 90,
+    full: 100
+};
+
 export default dialogSizes;

package/src/constants/index.ts

@@ -1,3 +1,3 @@
-export { default as dialogSizes } from './dialogSizes';
-export { default as typographySizes } from './typographySizes';
+export { default as dialogSizes } from './dialogSizes';
+export { default as typographySizes } from './typographySizes';
 export { default as BreakPoints } from './breakPoints';