@nexara/nativeflow 0.1.8 → 0.1.10

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.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
-    }
-}
+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';

package/src/constants/theme.ts

@@ -1,33 +1,33 @@
-type DefaultThemeType = {
-    THEME_PRIMARY_COLOR: string;
-    THEME_SECONDARY_COLOR: string;
-    TEXT_PRIMARY_COLOR: string;
-    TEXT_SECONDARY_COLOR: string;
-    TEXT_TARTARY_COLOR: string;
-    INPUT_BACKGROUND_COLOR: string;
-    INPUT_STROKE_COLOR: string;
-    INPUT_PLACEHOLDER_COLOR: string;
-    DISABLE: string;
-    DANGER: string;
-    SUCCESS: string;
-    WARNING: string;
-}
-
-export const DefaultTheme: DefaultThemeType = {
-    THEME_PRIMARY_COLOR: '#fff',
-    THEME_SECONDARY_COLOR: '#000',
-    TEXT_PRIMARY_COLOR: '#000',
-    TEXT_SECONDARY_COLOR: '#64748B',
-    TEXT_TARTARY_COLOR: '#fff',
-    INPUT_BACKGROUND_COLOR: '#fff',
-    INPUT_STROKE_COLOR: '#cbd5e1',
-    INPUT_PLACEHOLDER_COLOR: '#D3D3D3',
-    DISABLE: '#8080805e',
-    DANGER: '#ED2939',
-    SUCCESS: '#32CD32',
-    WARNING: '#ffbf00',
-
-
-
-
+type DefaultThemeType = {
+    THEME_PRIMARY_COLOR: string;
+    THEME_SECONDARY_COLOR: string;
+    TEXT_PRIMARY_COLOR: string;
+    TEXT_SECONDARY_COLOR: string;
+    TEXT_TARTARY_COLOR: string;
+    INPUT_BACKGROUND_COLOR: string;
+    INPUT_STROKE_COLOR: string;
+    INPUT_PLACEHOLDER_COLOR: string;
+    DISABLE: string;
+    DANGER: string;
+    SUCCESS: string;
+    WARNING: string;
+}
+
+export const DefaultTheme: DefaultThemeType = {
+    THEME_PRIMARY_COLOR: '#fff',
+    THEME_SECONDARY_COLOR: '#000',
+    TEXT_PRIMARY_COLOR: '#000',
+    TEXT_SECONDARY_COLOR: '#64748B',
+    TEXT_TARTARY_COLOR: '#fff',
+    INPUT_BACKGROUND_COLOR: '#fff',
+    INPUT_STROKE_COLOR: '#cbd5e1',
+    INPUT_PLACEHOLDER_COLOR: '#D3D3D3',
+    DISABLE: '#8080805e',
+    DANGER: '#ED2939',
+    SUCCESS: '#32CD32',
+    WARNING: '#ffbf00',
+
+
+
+
 }

package/src/constants/typographySizes.ts

@@ -1,20 +1,20 @@
-type typographySizeTypes = {
-    [key: string]: number
-}
-
-const typographySizes: Record<string, number> = {
-    xxs: 10,
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 24,
-    '2xl': 28,
-    '3xl': 32,
-    '4xl': 36,
-    '5xl': 45,
-    '6xl': 57,
-}
-
-export default typographySizes;
+type typographySizeTypes = {
+    [key: string]: number
+}
+
+const typographySizes: Record<string, number> = {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 24,
+    '2xl': 28,
+    '3xl': 32,
+    '4xl': 36,
+    '5xl': 45,
+    '6xl': 57,
+}
+
+export default typographySizes;
 export type { typographySizeTypes };

package/src/helpers/CalculateGridSize.ts

@@ -1,26 +1,26 @@
-import deviceScreenSizeCategory from './DeviceSizeCategory';
-
-interface DeviceCategory {
-    size: string;
-    value: number;
-}
-
-const getGridValue = (propsSizeObj: Record<string, number>, windowWidth: number | undefined) => {
-    const propsSizeArray: [string, number][] = Object.entries(propsSizeObj);
-    let screenSizeCategory: DeviceCategory = deviceScreenSizeCategory(windowWidth);
-    let gridValue: number = 0;
-    if (!propsSizeObj[screenSizeCategory.size]) {
-        const arrIndex = propsSizeArray.findIndex(([size]) => size === screenSizeCategory.size);
-        for (let index = arrIndex - 1; index >= 0; index--) {
-            if (propsSizeArray[index]?.[1]) {
-                gridValue = propsSizeArray[index]?.[1] as number;
-                break;
-            }
-        }
-    } else {
-        gridValue = propsSizeObj[screenSizeCategory.size] as number;
-    }
-    return gridValue;
-}
-
+import deviceScreenSizeCategory from './DeviceSizeCategory';
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const getGridValue = (propsSizeObj: Record<string, number>, windowWidth: number | undefined) => {
+    const propsSizeArray: [string, number][] = Object.entries(propsSizeObj);
+    const screenSizeCategory: DeviceCategory = deviceScreenSizeCategory(windowWidth);
+    let gridValue: number = 0;
+    if (!propsSizeObj[screenSizeCategory.size]) {
+        const arrIndex = propsSizeArray.findIndex(([size]) => size === screenSizeCategory.size);
+        for (let index = arrIndex - 1; index >= 0; index--) {
+            if (propsSizeArray[index]?.[1]) {
+                gridValue = propsSizeArray[index]?.[1] as number;
+                break;
+            }
+        }
+    } else {
+        gridValue = propsSizeObj[screenSizeCategory.size] as number;
+    }
+    return gridValue;
+}
+
 export default getGridValue;

package/src/helpers/DeviceSizeCategory.ts

@@ -1,22 +1,22 @@
-import { Dimensions } from "react-native";
-import { BreakPoints } from "../constants";
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
-interface DeviceCategory {
-    size: string;
-    value: number;
-}
-
-const deviceScreenSizeCategory = (windowWidth: number = SCREEN_WIDTH): DeviceCategory => {
-    if (windowWidth >= BreakPoints.xl) {
-        return { size: 'xl', value: BreakPoints.xl };
-    } else if (windowWidth >= BreakPoints.lg) {
-        return { size: 'lg', value: BreakPoints.xl };
-    } else if (windowWidth >= BreakPoints.md) {
-        return { size: 'md', value: BreakPoints.md };
-    } else if (windowWidth >= BreakPoints.sm) {
-        return { size: 'sm', value: BreakPoints.sm };
-    }
-    return { size: 'xs', value: BreakPoints.xs };
-}
+import { Dimensions } from "react-native";
+import { BreakPoints } from "../constants";
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const deviceScreenSizeCategory = (windowWidth: number = SCREEN_WIDTH): DeviceCategory => {
+    if (windowWidth >= BreakPoints.xl) {
+        return { size: 'xl', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.lg) {
+        return { size: 'lg', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.md) {
+        return { size: 'md', value: BreakPoints.md };
+    } else if (windowWidth >= BreakPoints.sm) {
+        return { size: 'sm', value: BreakPoints.sm };
+    }
+    return { size: 'xs', value: BreakPoints.xs };
+}
 export default deviceScreenSizeCategory;