aport-tools 4.5.0 → 4.6.0

package/package.json

@@ -1,28 +1,25 @@
 {
   "name": "aport-tools",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Aport mobile Tools with modern and minimalistic design",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "react-native": "dist/index.js",
-  "source": "src/index.ts",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./buttons": "./dist/buttons/index.js",
-    "./theme": "./dist/theme/index.js",
-    "./cards": "./dist/cards/index.js",
-    "./fonts": "./dist/fonts/index.js",
-    "./forms": "./dist/forms/index.js"
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./*": "./src/*"
   },
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
+    "build": "tsc --noEmit", 
     "prepare": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf dist .turbo node_modules/.cache .parcel-cache .expo .next .output .yalc .npm _site"
   },
   "keywords": [
     "react-native",
@@ -36,30 +33,16 @@
   "author": "EvansGxz",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.0",
-    "@types/react": "^18.3.10",
-    "@types/react-native": "^0.73.0",
-    "react-native-reanimated": "^3.10.1",
-    "rollup": "^4.22.5",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "@types/react": "19.0.0",
+    "@types/react-native": "^0.79.0",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
     "aport-themes": "^1.0.6",
     "expo-image-picker": "^16.0.2",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-native": ">=0.60",
-    "react-native-reanimated": "^3.6.1"
-  },
-  "dependencies": {
+    "react": "19.0.0",
+    "react-native": "0.79.0",
+    "react-native-reanimated": "^3.17.5"
   }
 }

package/src/cards/Card.tsx

@@ -0,0 +1,129 @@
+// src/cards/Card.tsx
+
+import { ThemeContext } from 'aport-themes';
+import React, { useContext } from 'react';
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  Platform,
+  TouchableOpacity,
+  GestureResponderEvent,
+} from 'react-native';
+
+/**
+ * Interface for the props that the Card component accepts.
+ */
+interface CardProps {
+  /**
+   * Content to be rendered inside the Card.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Style to be applied to the Card container.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Function to call when the Card is pressed.
+   */
+  onPress?: (event: GestureResponderEvent) => void;
+
+  /**
+   * Whether the Card is pressable. Defaults to false.
+   */
+  pressable?: boolean;
+
+  /**
+   * Border radius of the Card. Defaults to 12.
+   */
+  borderRadius?: number;
+
+  /**
+   * Elevation of the Card (Android only).
+   */
+  elevation?: number;
+
+  /**
+   * Shadow properties for iOS.
+   */
+  shadowProps?: {
+    shadowColor?: string;
+    shadowOffset?: { width: number; height: number };
+    shadowOpacity?: number;
+    shadowRadius?: number;
+  };
+}
+
+/**
+ * Card component that adapts its styles based on the current theme.
+ * Supports dynamic styling, shadows, and press animations.
+ *
+ * @param children - The content to be displayed inside the Card.
+ * @param style - Additional styles to apply to the Card.
+ * @param onPress - Function to execute when the Card is pressed.
+ * @param pressable - Determines if the Card is pressable. Defaults to false.
+ * @param borderRadius - Border radius of the Card. Defaults to 12.
+ * @param elevation - Elevation for Android shadow. Overrides default.
+ * @param shadowProps - Custom shadow properties for iOS. Overrides defaults.
+ */
+export const Card: React.FC<CardProps> = ({
+    children,
+    style,
+    onPress,
+    pressable = false,
+    borderRadius = 12,
+    elevation = 4,
+    shadowProps = {},
+  }) => {
+    const { theme } = useContext(ThemeContext);
+    const { colors } = theme;
+  
+    // Animation state for pressable effect
+    // Default shadow styles (improved platform-specific handling)
+    const defaultShadow = Platform.select({
+      ios: {
+        shadowColor: shadowProps?.shadowColor || colors.text.hex, // Defaulting to theme text color
+        shadowOffset: shadowProps?.shadowOffset || { width: 0, height: 2 },
+        shadowOpacity: shadowProps?.shadowOpacity || 0.1,
+        shadowRadius: shadowProps?.shadowRadius || 4,
+      },
+      android: {
+        elevation: elevation, // Only applies to Android
+      },
+    });
+  
+    const cardStyles = [
+      styles.container,
+      { borderRadius, backgroundColor: colors.background.hex },
+      defaultShadow, // Dynamic shadows based on platform
+      style, // External styles
+    ];
+  
+    return pressable ? (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={onPress}
+       
+        style={cardStyles}
+      >
+        
+          {children}
+      </TouchableOpacity>
+    ) : (
+      <View style={cardStyles}>
+        {children}
+      </View>
+    );
+  };
+  
+  const styles = StyleSheet.create({
+    container: {
+      padding: 16,
+      borderRadius: 12,
+      // Shadows handled dynamically with platform logic
+    },
+  });
+

package/src/cards/index.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/src/components/Button.tsx

@@ -0,0 +1,180 @@
+// src/components/Button.tsx
+
+import React, { useMemo, useContext } from 'react';
+import { Text, ViewStyle, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { useFormContext } from '../forms';
+import { ThemeColors, ThemeContext } from 'aport-themes';
+
+/**
+ * Interface for the props that the Button component accepts.
+ */
+interface ButtonProps {
+  /**
+   * If true, the button is disabled and not pressable.
+   */
+  disabled?: boolean;
+
+  /**
+   * If true, the button expands to full width of its container.
+   */
+  isFullWidth?: boolean;
+
+  /**
+   * Text content of the button.
+   */
+  children?: string;
+
+  /**
+   * Function to call when the button is pressed.
+   */
+  onPress?: () => void;
+
+  /**
+   * If true, the button has rounded corners.
+   */
+  rounded?: boolean;
+
+  /**
+   * Custom border radius value. Overrides the `rounded` prop if provided.
+   */
+  borderRadius?: number;
+
+  /**
+   * Specifies the button type for styling. Can be 'submit', 'button', or 'cancel'.
+   */
+  type?: 'submit' | 'button' | 'cancel';
+
+  /**
+   * If true, a loading spinner is shown and the button is disabled.
+   */
+  loading?: boolean;
+}
+
+/**
+ * Determines the styles based on the button type and whether it is disabled.
+ *
+ * @param type - The type of the button ('submit', 'button', 'cancel').
+ * @param disabled - Whether the button is disabled.
+ * @param themeColors - The theme colors.
+ * @returns The computed style for the button.
+ */
+function typeStyles(
+  type?: string,
+  disabled?: boolean,
+  themeColors?: ThemeColors
+): ViewStyle {
+  switch (type) {
+    case 'submit':
+      return {
+        backgroundColor: `rgba(${themeColors?.primary.rgb.r}, ${themeColors?.primary.rgb.g}, ${themeColors?.primary.rgb.b}, ${
+          disabled ? 0.5 : 1
+        })`,
+        borderWidth: 2,
+        borderColor: themeColors?.primary.hex,
+      };
+    case 'button':
+      return {
+        backgroundColor: themeColors?.primary.hex,
+        borderColor: themeColors?.secondary.hex,
+        opacity: disabled ? 0.5 : 1,
+        borderWidth: 2,
+      };
+    case 'cancel':
+      return {
+        backgroundColor: themeColors?.background.hex,
+        borderWidth: 0,
+      };
+    default:
+      return {};
+  }
+}
+
+/**
+ * Button component that adapts its styles based on the current theme.
+ * Supports dynamic styling, full-width option, rounded corners, and different types.
+ *
+ * @param disabled - If true, the button is disabled and not pressable.
+ * @param isFullWidth - If true, the button expands to full width of its container.
+ * @param children - Text content of the button.
+ * @param onPress - Function to call when the button is pressed.
+ * @param rounded - If true, the button has rounded corners.
+ * @param borderRadius - Custom border radius value. Overrides the `rounded` prop if provided.
+ * @param type - Specifies the button type for styling ('submit', 'button', 'cancel').
+ */
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  disabled = false,
+  type = 'button',
+  rounded = true,
+  borderRadius = 30,
+  isFullWidth = false,
+  loading = false,
+  onPress,
+}) => {
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+
+  const computedStyles = useMemo(() => {
+    return StyleSheet.flatten([
+      styles.button,
+      typeStyles(type, disabled, colors),
+      rounded && { borderRadius },
+      isFullWidth && { width: '100%' },
+      (disabled || loading) && styles.disabled,
+    ]);
+  }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
+
+  const textColor = useMemo(() => {
+    return type === "cancel" ? { color: colors.text.hex } : { color: colors.textButton.hex };
+  }, [type, colors]);
+
+ // Safely try to access handleSubmit from the form context
+ const formContext = (() => {
+  try {
+    return useFormContext();
+  } catch {
+    return null;
+  }
+})();
+
+const handlePress = () => {
+  if (type === 'submit' && formContext?.handleSubmit) {
+    console.log("Its submit type");
+    
+    formContext.handleSubmit();
+  } else if (onPress) {
+    onPress();
+  }
+};
+
+
+  return (
+    <TouchableOpacity
+      style={computedStyles as ViewStyle}
+      disabled={disabled || loading}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      {loading ? ( // Show loading spinner if loading
+        <ActivityIndicator size="small" color={colors.textButton.hex} />
+      ) : (
+        <Text style={textColor}>
+          {Array.isArray(children) ? children.join('').toUpperCase() : children?.toUpperCase()}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});
+

package/src/fonts/Text.tsx

@@ -0,0 +1,137 @@
+// src/fonts/Text.tsx
+
+import { ThemeColors, ThemeContext, ThemeFonts } from 'aport-themes';
+import React, { useContext } from 'react';
+import { Text as RNText, StyleSheet, TextProps, TextStyle } from 'react-native';
+
+interface CustomTextProps extends TextProps {
+    /**
+   * Content to be displayed inside the Text component.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Size of the text. Defaults to 14.
+   */
+  size?: number;
+
+  /**
+   * If true, applies bold styling to the text.
+   */
+  b?: boolean;
+
+  /**
+   * If true, applies italic styling to the text.
+   */
+  i?: boolean;
+
+  /**
+   * If true, applies underline styling to the text.
+   */
+  u?: boolean;
+
+  /**
+   * Paragraph alignment. Can be 'left', 'center', or 'right'. Defaults to 'left'.
+   */
+  align?: 'left' | 'center' | 'right' | 'justify'; // Paragraph alignment
+
+ /**
+   * Text type. Defaults to 'text'. Should match the keys in ThemeColors.
+   * This restricts type to known color keys like 'primary', 'error', etc.
+   */
+ type?: keyof ThemeColors;
+ 
+ /**
+   * Text font type. Defaults to 'body'. Should match the keys in ThemeFonts.
+   * This restricts type to known fonts keys like 'primary', 'secundary', etc.
+   */
+ typeFont?: keyof ThemeFonts;  // <-- New prop to select font type
+
+  /**
+   * Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
+   */
+  h?: 0 | 1 | 2 | 3;
+
+  /**
+   * Additional styles to apply to the Text component.
+   */
+  style?: TextStyle | TextStyle[];
+}
+
+/**
+ * A dynamic Text component that supports HTML-like formatting.
+ * Integrates with the Theme system for consistent styling.
+ *
+ * @param children - The content to be displayed inside the Text component.
+ * @param size - Size of the text. Defaults to 'medium'.
+ * @param b - If true, applies bold styling.
+ * @param i - If true, applies italic styling.
+ * @param type - Type of Text component. Defaults to 'text'.
+ * @param typeFont - Type of Font component. Defaults to 'body'.
+ * @param u - If true, applies underline styling.
+ * @param align - Paragraph alignment. Defaults to 'left'.
+ * @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
+ * @param style - Additional styles to apply.
+ */
+export const Text: React.FC<CustomTextProps> = ({
+  children,
+  size = 14,
+  b = false,
+  i = false,
+  u = false,
+  align = 'left',
+  type = 'text',
+  typeFont = 'body',
+  h = 0,
+  style,
+}) => {
+  const { theme } = useContext(ThemeContext);
+  const { colors, fonts } = theme;
+
+  // Determine font family and size based on 'typeFont'
+  const fontSettings = fonts[typeFont] || fonts.body;
+  const fontFamily = fontSettings.fontFamily;
+  let fontSize = fontSettings.fontSize || size;
+
+    // Calculate header size based on 'h' prop
+    if (h === 1) fontSize = 32;
+    else if (h === 2) fontSize = 24;
+    else if (h === 3) fontSize = 18;
+  
+  // Define font weight based on bold prop
+  const fontWeight = b ? '700' : fontSettings.fontWeight || '400';
+
+  // Define font style based on italic prop
+  const fontStyle = i ? 'italic' : 'normal';
+
+  // Define text decoration based on underline prop
+  const textDecorationLine = u ? 'underline' : 'none';
+
+  // Define text alignment
+  const textAlign: TextStyle['textAlign'] = align;
+  // Map the 'type' prop to the correct color from the theme
+  const textColor = colors[type]?.hex || colors.text.hex;
+  
+  // Combine all styles
+  const textStyles: TextStyle = {
+    fontSize,
+    fontWeight,
+    fontFamily,
+    fontStyle,
+    textDecorationLine,
+    textAlign,
+    color: textColor,
+  };
+
+ 
+  return (
+    <RNText style={[textStyles, style]}>
+      {children}
+    </RNText>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Define any default styles if needed
+});
+

package/{dist/fonts/index.d.ts → src/fonts/index.ts}

@@ -1 +1,2 @@
 export { Text } from "./Text";
+

package/src/forms/ErrorList.tsx

@@ -0,0 +1,47 @@
+// src/forms/ErrorList.tsx
+
+import React, { useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text } from '../fonts/Text';
+import { ThemeContext } from 'aport-themes';
+
+interface ErrorListProps {
+  errors: string[];
+}
+
+const ErrorList: React.FC<ErrorListProps> = ({ errors }) => {
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+
+  return (
+    <View style={styles.container}>
+      {errors.map((error, index) => (
+        <View key={index} style={styles.errorItem}>
+          <Text style={[styles.bullet, { color: colors.error.hex }]}>•</Text>
+          <Text style={[styles.errorText, { color: colors.error.hex }]}>{error}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 4,
+  },
+  errorItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 2,
+  },
+  bullet: {
+    marginRight: 4,
+    fontSize: 12,
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 12,
+  },
+});
+
+export default ErrorList;

package/src/forms/FORMDOC.md

@@ -0,0 +1,87 @@
+Input Component Documentation
+File Path
+src/forms/Input.tsx
+
+Description
+The Input component is a versatile and reusable form input field designed to handle various input types with built-in validation and error display functionalities. It integrates seamlessly with the theme system to adapt its styles based on the current theme (light or dark). The component supports automatic formatting for specific input types such as phone numbers and identification fields, enhancing user experience and ensuring data consistency.
+
+Component Overview
+Labels: Displays a label above the input field.
+Error Handling: Shows a list of error messages below the input field when validation fails.
+Input Types: Supports different input formats (phone, id, uppercase, numeric) with automatic formatting.
+Theming: Adapts styles based on the active theme, utilizing the body color for backgrounds in dark mode.
+Controlled Component: Manages its state through the FormContext, allowing centralized form management.
+Props
+Prop Type Required Description
+name string Yes The unique identifier for the input field, used to manage its state within the form.
+label string Yes The text label displayed above the input field.
+inputType 'phone' | 'id' | 'uppercase' | 'numeric' No Specifies the type of input and applies corresponding formatting. Defaults to standard text input.
+style TextInputProps['style'] No Additional styles to customize the appearance of the TextInput component.
+...rest TextInputProps No Spread any additional TextInput props to allow further customization and flexibility.
+
+Supported inputType Values
+phone: Formats the input as a phone number (xxx-xxx-xxxx), automatically inserting hyphens.
+id: Converts all input characters to uppercase, suitable for identification numbers like IDs, passports, and visas.
+uppercase: Forces all input characters to uppercase, useful for fields like license plates or certain codes.
+numeric: Restricts input to numeric characters only, ideal for fields like ZIP codes, ages, or any numerical data.
+Usage Example
+tsx
+Copy code
+// ExampleUsage.tsx
+
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { Form } from './forms/FormContext';
+import { Input } from './forms/Input';
+import { Button } from '../components/Button';
+
+const MyFormScreen: React.FC = () => {
+const handleFormSubmit = async (formValues: Record<string, any>) => {
+const errors: Record<string, string[]> = {};
+
+    // Validate the 'name' field
+    if (!formValues.name) {
+      errors.name = ['Name is required'];
+    }
+
+    // Validate the 'email' field
+    if (!formValues.email) {
+      errors.email = ['Email is required'];
+    } else {
+      if (formValues.email.length < 4) {
+        errors.email = [...(errors.email || []), 'Email is too short'];
+      }
+      if (!formValues.email.includes('@')) {
+        errors.email = [...(errors.email || []), 'Email must include @'];
+      }
+    }
+
+    // Validate the 'phone' field
+    if (!formValues.phone) {
+      errors.phone = ['Phone is required'];
+    }
+
+    // Return validation errors if any exist
+    return errors;
+
+};
+
+return (
+<ScrollView>
+<Form onSubmit={handleFormSubmit}>
+<View style={{ padding: 16 }}>
+<Input name="name" label="First Name" inputType="uppercase" />
+<Input name="lastName" label="Last Name" inputType="uppercase" />
+<Input name="email" label="Email" keyboardType="email-address" inputType="id" />
+<Input name="phone" label="Phone" keyboardType="number-pad" maxLength={12} inputType="phone" />
+
+          {/* Form submit button */}
+          <Button type="submit">Submit</Button>
+        </View>
+      </Form>
+    </ScrollView>
+
+);
+};
+
+export default MyFormScreen;

package/{dist/forms/Form.d.ts → src/forms/Form.tsx}

@@ -1 +1,3 @@
+// src/forms/Form.tsx
+
 export { Form, useFormContext, setFormValueGlobal } from './FormContext';