@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Stack/VStack.tsx

@@ -1,32 +1,27 @@
-import React, { useMemo } from "react";
-import { verticalScale } from "../../helpers/ResponsiveCalculations";
-import type { VStackProps } from "../../types";
-import { StyledView } from "../StyledComponents";
-import type { ViewStyle } from "react-native";
-
-const VStack: React.FC<VStackProps> = ({
-    children,
-    align,
-    gap = 10,
-    style,
-    ...rest
-}) => {
-
-    const calculatedGap: number = useMemo(() => verticalScale(gap), [gap]);
-
-    const viewProps: ViewStyle = {
-        flexDirection: 'column',
-        alignItems: align,
-        gap: calculatedGap,
-    };
-    return (<>
-        <StyledView
-            style={[viewProps, style]}
-            {...rest}
-        >
-            {children}
-        </StyledView>
-    </>)
-}
-export default VStack;
+import type { FC } from "react";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import type { VStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
+import type { ViewStyle } from "react-native";
+
+const VStack: FC<VStackProps> = ({
+    gap = 10,
+    containerStyle,
+    children,
+    ...rest
+}) => {
+    const viewProps: ViewStyle = {
+        flexDirection: 'column',
+        gap: verticalScale(gap),
+    };
+    return (<>
+        <StyledView
+            style={[viewProps, containerStyle]}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>)
+}
+export default VStack;
 export type { VStackProps };

package/src/components/Stack/index.ts

@@ -1,9 +1,9 @@
-import HStack  from "./HStack";
-import VStack  from "./VStack";
-const Stack = {
-    H: HStack,
-    V: VStack
-};
-export type { HStackProps } from './HStack';
-export type { VStackProps } from './VStack';
+import HStack  from "./HStack";
+import VStack  from "./VStack";
+const Stack = {
+    H: HStack,
+    V: VStack
+};
+export type { HStackProps } from './HStack';
+export type { VStackProps } from './VStack';
 export default Stack;

package/src/components/StyledComponents/StyledText.tsx

@@ -1,41 +1,50 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { responsiveFontSize } from '../../helpers/ResponsiveCalculations';
-import { useTheme } from '../../hooks';
-import type { StyledTextProps } from '../../types';
-
-const StyledText: React.FC<StyledTextProps> = ({
-    variant = 'h5',
-    children,
-    style,
-    ff,
-    fs,
-    tas,
-    fw,
-    color,
-    themeColor,
-    primary,
-    secondary,
-    ...rest
-}) => {
-    const { colors, typography: { variantSizes } }: any = useTheme();
-    return (
-        <Text
-            style={[{
-                fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
-                fontFamily: ff ?? '',
-                textAlign: tas ? 'center' : 'auto',
-                fontWeight: fw ?? 'normal',
-                color: color ?? (themeColor && colors.primary || primary && colors.textPrimary || secondary && colors.textSecondary || colors.textTertiary),
-            },
-                style,
-            ]}
-            {...rest}
-        >
-            {children}
-        </Text>
-    );
-};
-
-export default StyledText;
+import { type FC } from 'react';
+import { Text } from 'react-native';
+import { responsiveFontSize } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import type { StyledTextProps } from '../../types';
+
+const StyledText: FC<StyledTextProps> = ({
+    variant = 'primary',
+    fScale = 'base',
+    children,
+    style,
+    ff,
+    fs,
+    tas,
+    fw,
+    color,
+    themeColor,
+    ...rest
+}) => {
+    const { colors, sizes: { typography: typographyScales } }: any = useTheme();
+
+    const getVariantColor = () => {
+        switch (variant) {
+            case 'secondary': return colors.typography.secondary;
+            case 'tertiary': return colors.typography.tertiary;
+            case 'disabled': return colors.typography.disabled;
+            case 'inverse': return colors.typography.inverse;
+            default: return colors.typography.primary;
+        }
+    };
+    return (
+        <Text
+            style={[{
+                fontSize: responsiveFontSize(fs ?? typographyScales[fScale]),
+                fontFamily: ff ?? '',
+                textAlign: tas ? 'center' : 'auto',
+                fontWeight: fw ?? 'normal',
+                color: color ?? (themeColor && colors.brand.primary || getVariantColor()),
+            },
+                style,
+            ]}
+            {...rest}
+        >
+            {children}
+        </Text>
+    );
+};
+
+export default StyledText;
 export type { StyledTextProps };

package/src/components/StyledComponents/StyledView.tsx

@@ -1,45 +1,45 @@
-import { forwardRef } from 'react';
-import { View } from 'react-native';
-import { useTheme } from '../../hooks';
-import type { StyledViewProps } from '../../types';
-
-
-const StyledView = forwardRef<View, StyledViewProps>(({
-    f,
-    justify,
-    align,
-    fWrap,
-    bg,
-    themeBg = false,
-    h,
-    w,
-    children,
-    style,
-    ...rest
-}, ref) => {
-
-    const theme = useTheme(themeBg);
-
-    return (
-        <View
-            style={[{
-                flex: f,
-                justifyContent: justify,
-                alignItems: align,
-                flexWrap: fWrap,
-                backgroundColor: bg ?? (themeBg ? theme?.colors.secondary : 'transparent'),
-                height: h,
-                width: w,
-            },
-                style
-            ]}
-            {...rest}
-            ref={ref}
-        >
-            {children}
-        </View>
-    );
-});
-
-export default StyledView;
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../hooks';
+import type { StyledViewProps } from '../../types';
+
+
+const StyledView = forwardRef<View, StyledViewProps>(({
+    f,
+    justify,
+    align,
+    fWrap,
+    bg,
+    themeBg = false,
+    h,
+    w,
+    children,
+    style,
+    ...rest
+}, ref) => {
+
+    const theme = useTheme();
+    
+    return (
+        <View
+            style={[{
+                flex: f,
+                justifyContent: justify,
+                alignItems: align,
+                flexWrap: fWrap,
+                backgroundColor: bg ?? (themeBg ? theme?.colors.background.default : 'transparent'),
+                height: h,
+                width: w,
+            },
+                style
+            ]}
+            ref={ref}
+            {...rest}
+        >
+            {children}
+        </View>
+    );
+});
+
+export default StyledView;
 export type { StyledViewProps };

package/src/components/StyledComponents/index.tsx

@@ -1,6 +1,6 @@
-export { default as StyledText } from './StyledText';
-export { default as StyledView } from './StyledView';
-
-
-export type { StyledViewProps } from './StyledView';
+export { default as StyledText } from './StyledText';
+export { default as StyledView } from './StyledView';
+
+
+export type { StyledViewProps } from './StyledView';
 export type { StyledTextProps } from './StyledText';

package/src/components/Surface/Surface.tsx

@@ -1,38 +1,31 @@
-import React from 'react';
-import { StyleSheet} from "react-native";
-import { StyledView } from '../StyledComponents';
-
-
-type SurfaceProps = {
-  
-}
-
-const Surface: React.FC<SurfaceProps> = ({
-  
-}) => {
-
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            height: 100,
-            width: 100,
-            backgroundColor: '#fff',
-            shadowColor: "#000",
-            // shadowOffset: {
-            //     width: 100,
-            //     height: 100,
-            // },
-            // shadowOpacity: 0.43,
-            // shadowRadius: 9.51,
-
-            elevation: 15,
-        }
-    });
-
-    return (<>
-        <StyledView style={STYLES.CONTAINER}>
-
-        </StyledView>
-    </>);
-};
-export default Surface;
-export type { SurfaceProps };
+import type { FC } from 'react';
+import { StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import { verticalScale } from '../../helpers';
+import type { SurfaceProps } from '../../types';
+
+const Surface: FC<SurfaceProps> = ({
+    variant = 'elevated',
+    padding = 10,
+    br = 5,
+    children,
+    ...rest
+}) => {
+
+    const { colors }: any = useTheme();
+    const styles = variant === 'elevated' ? { boxShadow: colors.elevation.level1 } : { borderColor: colors.border.default, borderWidth: 0.5 };
+
+    return (<>
+        <StyledView
+            padding={verticalScale(padding)}
+            borderRadius={verticalScale(br)}
+            bg={colors.background.surface}
+            {...styles}
+            {...rest}
+        >
+            {children}
+        </StyledView>
+    </>);
+};
+export default Surface;
+export type { SurfaceProps };

package/src/components/Switch/Switch.tsx

@@ -1,35 +1,37 @@
-import React from "react";
-import { Switch as NativeSwitch } from "react-native";
-import LightenColorShades from "../../helpers/LightenColorShades";
-import { moderateScale } from "../../helpers/ResponsiveCalculations";
-import { useTheme } from "../../hooks";
-import type { SwitchProps } from "../../types";
-
-const Switch: React.FC<SwitchProps> = ({
-    checked = true,
-    color,
-    disabled = false,
-    size = 0.8,
-    activeTrackColor,
-    inactiveTrackColor = '#808080',
-    onChange,
-    ...rest
-}) => {
-
-    const theme: any = useTheme();
-    const switchColor = disabled ? '#808080' : color ?? theme.colors.primary;
-
-    return (<>
-        <NativeSwitch
-            value={checked}
-            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 50), false: LightenColorShades(inactiveTrackColor, 60) }}
-            thumbColor={switchColor}
-            onValueChange={onChange}
-            style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}
-            disabled={disabled}
-            {...rest}
-        />
-    </>)
-}
-export default Switch;
+import type { FC } from "react";
+import { Switch as NativeSwitch } from "react-native";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from "../../hooks";
+import type { SwitchProps } from "../../types";
+import Color from "color";
+
+const Switch: FC<SwitchProps> = ({
+    checked = true,
+    color,
+    disabled = false,
+    size = 0.9,
+    activeTrackColor,
+    inactiveTrackColor,
+    onChange,
+    ...rest
+}) => {
+
+    const { colors }: any = useTheme();
+    const switchColor = disabled ? colors.states.disabled : color ?? colors.brand.primary;
+    const disabledAndInActiveTrackColor = colors.palette.natural[200];
+    const generateActiveTrackColor = Color(colors.brand.primary).lighten(0).alpha(0.3).rgb().string();
+
+    return (<>
+        <NativeSwitch
+            value={checked}
+            trackColor={{ true: (disabled && disabledAndInActiveTrackColor) || (activeTrackColor ?? generateActiveTrackColor), false: (disabled && disabledAndInActiveTrackColor) || (inactiveTrackColor ?? disabledAndInActiveTrackColor) }}
+            thumbColor={switchColor}
+            onValueChange={onChange}
+            style={{ transform: [{ scaleX: verticalScale(size) }, { scaleY: verticalScale(size) }] }}
+            disabled={disabled}
+            {...rest}
+        />
+    </>)
+}
+export default Switch;
 export type { SwitchProps };

package/src/components/TouchableRipple/TouchableRipple.tsx

@@ -1,92 +1,92 @@
-// import React from 'react';
-// import { Pressable, StyleSheet } from "react-native";
-// import type { ViewStyle, StyleProp, PressableProps } from "react-native";
-// import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-// import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-// import { StyledView } from '../StyledComponents';
-
-
-// type TouchableRippleProps = PressableProps & {
-//     rippleColor?: string;
-//     style?: StyleProp<ViewStyle>;
-//     children?: React.ReactNode;
-// }
-
-// const TouchableRipple: React.FC<TouchableRippleProps> = ({
-//     rippleColor = '#b6b6b681',
-//     style,
-//     children,
-//     ...rest
-// }) => {
-
-//     const positionX = useSharedValue(0);
-//     const positionY = useSharedValue(0);
-//     const overlayHeight = useSharedValue(0);
-//     const overlayWidth = useSharedValue(0);
-//     const scale = useSharedValue(0);
-//     const opacity = useSharedValue(1);
-
-//     const STYLES = StyleSheet.create({
-//         OVERLAY: {
-//             position: 'absolute',
-//             top: 0,
-//             left: 0,
-//             zIndex: -1
-//         }
-//     });
-
-//     const effectAnimatedStyle = useAnimatedStyle(() => {
-//         const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
-//         return {
-//             height: radius * 2,
-//             width: radius * 2,
-//             opacity: opacity.value,
-//             borderRadius: radius,
-//             backgroundColor: rippleColor,
-//             transform: [
-//                 { translateX: positionX.value - radius },
-//                 { translateY: positionY.value - radius },
-//                 {
-//                     scale: scale.value
-//                 }
-//             ]
-//         }
-//     });
-
-//     const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
-//         positionX.value = allTouches[0].x;
-//         positionY.value = allTouches[0].y;
-//         opacity.value = 1;
-//         scale.value = 0;
-//         scale.value = withTiming(1, { duration: 600 });
-//     }).onTouchesUp(() => {
-//         opacity.value = withTiming(0, { duration: 800 });
-//     }).onTouchesCancelled(() => {
-//         opacity.value = withTiming(0, { duration: 800 });
-//     }) : Gesture.Simultaneous();
-
-
-//     return (<>
-//         <GestureHandlerRootView style={{ width: '100%' }}>
-//             <GestureDetector gesture={onGesturePress}>
-//                 <Pressable
-//                     {...rest}
-//                 >
-//                     <StyledView
-//                         overflow='hidden'
-//                         onLayout={({ nativeEvent: { layout: { height, width } } }) => {
-//                             overlayHeight.value = height;
-//                             overlayWidth.value = width;
-//                         }}
-//                         style={style}
-//                     >
-//                         {children}
-//                         <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
-//                     </StyledView>
-//                 </Pressable>
-//             </GestureDetector>
-//         </GestureHandlerRootView>
-//     </>);
-// };
-// export default TouchableRipple;
-// export type { TouchableRippleProps };
+// import React from 'react';
+// import { Pressable, StyleSheet } from "react-native";
+// import type { ViewStyle, StyleProp, PressableProps } from "react-native";
+// import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+// import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+// import { StyledView } from '../StyledComponents';
+
+
+// type TouchableRippleProps = PressableProps & {
+//     rippleColor?: string;
+//     style?: StyleProp<ViewStyle>;
+//     children?: React.ReactNode;
+// }
+
+// const TouchableRipple: React.FC<TouchableRippleProps> = ({
+//     rippleColor = '#b6b6b681',
+//     style,
+//     children,
+//     ...rest
+// }) => {
+
+//     const positionX = useSharedValue(0);
+//     const positionY = useSharedValue(0);
+//     const overlayHeight = useSharedValue(0);
+//     const overlayWidth = useSharedValue(0);
+//     const scale = useSharedValue(0);
+//     const opacity = useSharedValue(1);
+
+//     const STYLES = StyleSheet.create({
+//         OVERLAY: {
+//             position: 'absolute',
+//             top: 0,
+//             left: 0,
+//             zIndex: -1
+//         }
+//     });
+
+//     const effectAnimatedStyle = useAnimatedStyle(() => {
+//         const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
+//         return {
+//             height: radius * 2,
+//             width: radius * 2,
+//             opacity: opacity.value,
+//             borderRadius: radius,
+//             backgroundColor: rippleColor,
+//             transform: [
+//                 { translateX: positionX.value - radius },
+//                 { translateY: positionY.value - radius },
+//                 {
+//                     scale: scale.value
+//                 }
+//             ]
+//         }
+//     });
+
+//     const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
+//         positionX.value = allTouches[0].x;
+//         positionY.value = allTouches[0].y;
+//         opacity.value = 1;
+//         scale.value = 0;
+//         scale.value = withTiming(1, { duration: 600 });
+//     }).onTouchesUp(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }).onTouchesCancelled(() => {
+//         opacity.value = withTiming(0, { duration: 800 });
+//     }) : Gesture.Simultaneous();
+
+
+//     return (<>
+//         <GestureHandlerRootView style={{ width: '100%' }}>
+//             <GestureDetector gesture={onGesturePress}>
+//                 <Pressable
+//                     {...rest}
+//                 >
+//                     <StyledView
+//                         overflow='hidden'
+//                         onLayout={({ nativeEvent: { layout: { height, width } } }) => {
+//                             overlayHeight.value = height;
+//                             overlayWidth.value = width;
+//                         }}
+//                         style={style}
+//                     >
+//                         {children}
+//                         <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
+//                     </StyledView>
+//                 </Pressable>
+//             </GestureDetector>
+//         </GestureHandlerRootView>
+//     </>);
+// };
+// export default TouchableRipple;
+// export type { TouchableRippleProps };