aport-tools 4.5.0 → 4.6.0

package/src/forms/FormContext.tsx

@@ -0,0 +1,248 @@
+// src/forms/FormContext.tsx
+
+import React, { createContext, useState, ReactNode, useContext } from 'react';
+import Stepper from './Stepper';
+
+interface FormContextProps {
+  /**
+   * Stores the current form values as an object.
+   * Each key is a form field name and each value is the current value of that field.
+   * Example:
+   * ```ts
+   * formValues = { name: "John", email: "john@example.com" };
+   * ```
+   */
+  formValues: Record<string, any>;
+
+  /**
+   * A function to update a specific form field value.
+   * It takes the `name` of the form field and the new `value` to be set.
+   * and an optional `firstValue` to track the initial value.
+   * Example usage:
+   * ```ts
+   * setFormValue('email', 'newemail@example.com', 'oldemail@example.com');
+   * ```
+   */
+  setFormValue: (name: string, value: any, firstValue?: any) => void;
+
+  /**
+   * Stores the current form errors as an object.
+   * Each key is a form field name and the value is an array of error messages for that field.
+   * Example:
+   * ```ts
+   * errors = { email: ['Email is required', 'Invalid email format'] };
+   * ```
+   */
+  errors: Record<string, string[]>;
+
+  /**
+   * A function to update the errors for all form fields.
+   * It takes an object where each key is a form field name and the value is an array of error messages for that field.
+   * Example usage:
+   * ```ts
+   * setErrors({ email: ['Email is required', 'Invalid email format'] });
+   * ```
+   */
+  setErrors: (errors: Record<string, string[]>) => void;
+
+  /**
+   * A function to trigger the form submission.
+   * It will invoke the `onSubmit` handler and handle form validation errors.
+   * Typically, this function would call `onSubmit` and handle errors by updating the `errors` state.
+   */
+  handleSubmit: () => void;
+
+  handleFormSubmit: (formValues: Record<string, any>) => Promise<Record<string, string[]>>;
+
+}
+
+// Create a ref to hold the global `setFormValue` function
+const globalSetFormValueRef = { current: null as ((name: string, value: any, firstValue?: any) => void) | null };
+
+// Utility to use `setFormValue` globally
+export const setFormValueGlobal = (name: string, value: any, firstValue?: any) => {
+  if (globalSetFormValueRef.current) {
+    globalSetFormValueRef.current(name, value, firstValue);
+  } else {
+    console.warn("setFormValueGlobal was called before the Form was rendered.");
+  }
+};
+
+const FormContext = createContext<FormContextProps | undefined>(undefined);
+
+export const useFormContext = () => {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a Form");
+  }
+  return context;
+};
+
+interface StepperProps {
+  /**
+   * Labels for each step (optional). If provided, these labels will display below each step indicator.
+   * Example: ['Step 1', 'Step 2', 'Step 3']
+   */
+  steps?: string[];
+
+  /**
+   * Current step index (e.g., 0 for step 1, 1 for step 2).
+   * Determines the active step and progress display.
+   */
+  currentStep: number;
+
+  /**
+   * Enables or disables the ability to click on a step to navigate to it.
+   * Default is `false`.
+   */
+  presseable?: boolean;
+
+  /**
+   * Callback function that gets triggered when a step is clicked.
+   * Passes the index of the clicked step as an argument.
+   * Example: (stepIndex) => console.log(`Step ${stepIndex} clicked!`)
+   */
+  onPress?: (stepIndex: number) => void;
+
+  /**
+   * Determines the shape of the step indicator.
+   * Options: 
+   * - `'circular'` (default)
+   * - `'square'`
+   */
+  stepStyle?: "circular" | "square";
+
+  /**
+   * Total number of steps in the stepper.
+   * Must be greater than or equal to 1.
+   */
+  totalSteps: number;
+
+  /**
+   * Type of content displayed inside the step indicator.
+   * Options:
+   * - `'number'` (default): Displays the step index (e.g., 1, 2, 3).
+   * - `'icon'`: Displays a custom icon (requires the `icon` prop).
+   * - `'empty'`: Displays no content inside the step indicator.
+   */
+  stepType?: "number" | "icon" | "empty";
+
+  /**
+   * Custom icon(s) to display inside step indicators when `stepType` is set to `'icon'`.
+   * Accepts:
+   * - A single icon for all steps (ReactNode or string URI).
+   * - An array of icons (ReactNode[] or string[]), one for each step.
+   * Example: ['https://example.com/icon1.png', 'https://example.com/icon2.png']
+   */
+  icon?: React.ReactNode | React.ReactNode[];
+}
+
+interface FormProps {
+  /**
+   * The children elements to render inside the form.
+   * Typically this will be form fields or custom form components.
+   * This prop is required and must be passed as ReactNode(s).
+   */
+  children: React.ReactNode;
+
+  /**
+   * The callback function to handle form submission.
+   * It receives the form values as an object (`values`) and must return a promise 
+   * that resolves to an object containing errors for the form fields.
+   * Example: 
+   * ```ts
+   * const onSubmit = async (values: Record<string, any>) => {
+   *   // handle the submission and return errors if any
+   *   return { fieldName: ['Error message'] };
+   * }
+   * ```
+   * The return value should be an object where the keys are form field names 
+   * and the values are arrays of error messages for those fields.
+   */
+  onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
+
+  /**
+   * Optional stepper configuration for the form.
+   * If provided, it will integrate a stepper component to display form steps.
+   * This is an optional prop, so the form can be used without it.
+   * The `StepperProps` interface will define the expected props for the stepper.
+   */
+  stepper?: StepperProps; // Add stepper prop (optional)
+}
+
+export const Form: React.FC<FormProps> = ({ children, onSubmit, stepper }) => {
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+  const [firstValues, setFirstValues] = useState<Record<string, any>>({}); // Track firstValues
+
+  const setFormValue = (name: string, value: any, firstValue?: any) => {
+    // Update formValues with the latest value
+    setFormValues(prev => ({ ...prev, [name]: value }));
+  
+    // If firstValue exists and is not empty, set it in firstValues
+    if (firstValue !== undefined && firstValue !== null && firstValue !== "") {
+      setFirstValues(prev => ({ ...prev, [name]: firstValue }));
+    }
+  };
+  
+
+  const handleSubmit = async () => {
+    // Filter formValues to include only modified fields
+    const modifiedValues = Object.keys(formValues).reduce((result, key) => {
+      const hasFirstValue = key in firstValues;
+      const isModified = hasFirstValue && formValues[key] !== firstValues[key];
+      const isNewValue = !hasFirstValue;
+  
+      // If the field was modified or is a new value, include it in the modified values
+      if (isModified || isNewValue) {
+        result[key] = formValues[key];
+      } else {
+        // If there were no changes, use the firstValue
+        if (hasFirstValue && firstValues[key] !== undefined) {
+          result[key] = firstValues[key];
+        }
+      }
+      return result;
+    }, {} as Record<string, any>);
+  
+    // Call the onSubmit callback with the modified or firstValues
+    const validationErrors = await onSubmit(modifiedValues);
+  
+    // Set the validation errors in state
+    setErrors(validationErrors);
+  
+    // Prevent submission if there are any errors
+    if (Object.keys(validationErrors).length > 0) {
+      return; // Prevent submission
+    }
+  
+    // If no errors, proceed with form submission (e.g., sending the form data to the server)
+  };
+  
+
+  
+  const handleFormSubmit = async (formValues: Record<string, any>) => {
+    const validationErrors = await onSubmit(formValues);
+    setErrors(validationErrors);
+    return validationErrors;
+  };
+
+
+  return (
+    <FormContext.Provider value={{ formValues, setFormValue, errors, setErrors, handleSubmit, handleFormSubmit }}>
+       {stepper && (
+        <Stepper
+          steps={stepper.steps}
+          currentStep={stepper.currentStep}
+          presseable={stepper.presseable}
+          onPress={stepper.onPress}
+          totalSteps={stepper.totalSteps}
+          stepType={stepper.stepType}
+          icon={stepper.icon}
+          stepStyle={stepper.stepStyle}
+        />
+      )}
+      {children}
+    </FormContext.Provider>
+  );
+};

package/src/forms/Input.tsx

@@ -0,0 +1,174 @@
+// src/forms/Input.tsx
+
+import React, { useContext, useEffect, useRef, useState } from "react";
+import {
+  TextInput,
+  StyleSheet,
+  View,
+  TextInputProps,
+} from "react-native";
+import { useFormContext } from "./FormContext";
+import { Text } from "../fonts/Text";
+import ErrorList from "./ErrorList";
+import { ThemeContext } from "aport-themes";
+
+/**
+ * Defines the props for the Input component.
+ */
+interface InputProps extends TextInputProps {
+  /**
+   * The unique identifier for the input field, used to manage its state within the form.
+   */
+  name: string;
+
+  /**
+   * Optional first value if you want to set values with fetch or dont have empty inputs.
+   */
+  firstValue?: string | number; // Optional prop for the initial value
+
+  /**
+   * The text label displayed above the input field.
+   */
+  label: string;
+
+  /**
+   * Specifies the type of input and applies corresponding formatting.
+   * - 'phone': Formats input as a phone number (xxx-xxx-xxxx).
+   * - 'id': Converts all input characters to uppercase (useful for IDs, passports).
+   * - 'uppercase': Forces all input characters to uppercase (useful for codes).
+   * - 'numeric': Restricts input to numeric characters only.
+   */
+  inputType?: "phone" | "id" | "uppercase" | "numeric";
+}
+
+/**
+ * Input component that supports labels, error messages, and integrates with the Theme system.
+ *
+ * @param {InputProps} props - Props passed to the component.
+ * @returns {JSX.Element} The rendered Input component.
+ *
+ * @example
+ * <Input
+ *   name="email"
+ *   label="Email"
+ *   keyboardType="email-address"
+ *   inputType="id"
+ * />
+ */
+export const Input: React.FC<InputProps> = ({
+  name,
+  label,
+  inputType,
+  firstValue,
+  editable = true,
+  style,
+  ...rest
+}) => {
+  const { formValues, setFormValue, errors: formErrors } = useFormContext();
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+
+  const [internalValue, setInternalValue] = useState<string>("");
+  const isFirstRender = useRef(true); // Track the first render
+
+  // Initialize the internal value when `firstValue` changes or on first render
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (firstValue !== undefined) {
+        firstValue=firstValue.toString()
+        setInternalValue(firstValue);
+        setFormValue(name, firstValue, firstValue); // Pass firstValue here
+      } else {
+        setInternalValue(formValues[name] || "");
+      }
+    }
+  }, [firstValue]);
+
+  /**
+   * Handles text changes in the input field, applying formatting based on the inputType.
+   *
+   * @param {string} text - The current text input by the user.
+   */
+  const handleChange = (text: string) => {
+    let formattedText = text;
+
+    // Apply different formatting based on inputType
+    switch (inputType) {
+      case "phone":
+        // Remove all non-digit characters
+        formattedText = text.replace(/\D/g, "");
+        // Insert hyphens to format as xxx-xxx-xxxx
+        if (formattedText.length > 3 && formattedText.length <= 6) {
+          formattedText = `${formattedText.slice(0, 3)}-${formattedText.slice(3)}`;
+        } else if (formattedText.length > 6) {
+          formattedText = `${formattedText.slice(0, 3)}-${formattedText.slice(
+            3,
+            6
+          )}-${formattedText.slice(6, 10)}`;
+        }
+        break;
+      case "id":
+      case "uppercase":
+        // Convert all input to uppercase
+        formattedText = text.toUpperCase();
+        break;
+      case "numeric":
+        // Allow only numeric input
+        formattedText = text.replace(/\D/g, "");
+        break;
+      default:
+        break;
+    }
+
+    setInternalValue(formattedText);
+    setFormValue(name, formattedText);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Label */}
+      <Text style={[styles.label, { color: colors.text.hex }]}>{label}</Text>
+
+      {/* Input Field */}
+      <TextInput
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.body.hex,
+            borderColor: formErrors[name] ? colors.error.hex : "#CCC",
+            color: colors.text.hex,
+          },
+          style,
+        ]}
+        value={internalValue}
+        onChangeText={handleChange}
+        placeholder={label}
+        editable={editable}
+        placeholderTextColor={colors.placeHolder.hex} // Can use a lighter version if needed
+        {...rest}
+      />
+
+      {/* Display errors only if form has been submitted and there are errors */}
+      {formErrors[name] && formErrors[name].length > 0 && (
+        <ErrorList errors={formErrors[name]} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 14,
+  },
+  input: {
+    height: 40,
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+  },
+});

package/src/forms/InputAttach.tsx

@@ -0,0 +1,184 @@
+// src/components/InputAttach.tsx
+
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { View, TouchableOpacity, Image, StyleSheet, Alert } from "react-native";
+import { useFormContext } from "./FormContext";
+import * as ImagePicker from "expo-image-picker";
+import { Text } from "../fonts";
+import { ThemeContext } from "aport-themes";
+import ErrorList from "./ErrorList";
+
+interface FileData {
+  uri: string;
+  name: string;
+  type: string;
+}
+
+interface InputAttachProps {
+  name: string;
+  type?: string[]; // Accepted file types
+  amount?: number; // Maximum number of files
+  disabled?: boolean; // If the input is pressable
+  placeholder?: string; // Placeholder text
+  firstValue?: FileData[]; // Pre-selected files
+
+}
+
+const InputAttach: React.FC<InputAttachProps> = ({
+  name,
+  type = ["png", "jpg", "jpeg"],
+  amount = 1,
+  disabled = false,
+  placeholder = "Upload an image",
+  firstValue = [],
+}) => {
+  const { setFormValue, errors: formErrors } = useFormContext();
+  const [selectedFiles, setSelectedFiles] = useState<FileData[]>([]);
+
+  // Ref to track initialization
+  const isInitialized = useRef(false);
+
+  // Sync firstValue with selectedFiles when it changes
+  useEffect(() => {
+    if (!isInitialized.current) {
+      setSelectedFiles(firstValue);
+      setFormValue(name, firstValue, firstValue); // Pass firstValue here
+      isInitialized.current = true;
+    }
+  }, [firstValue, name, setFormValue]);
+
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+
+  const pickImage = async () => {
+    if (disabled) return;
+
+    const permissionResult =
+      await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!permissionResult.granted) {
+      Alert.alert(
+        "Permission Required",
+        "We need access to your photos to upload images."
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"], // Updated usage
+      allowsEditing: true,
+      allowsMultipleSelection: amount > 1,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      const selectedAssets = result.assets || [result]; // Handle different return formats
+      const newFiles: FileData[] = selectedAssets.map((asset) => ({
+        uri: asset.uri,
+        name: asset.fileName || "unknown.jpg",
+        type: asset.mimeType || "image/jpeg",
+      }));
+
+      // Validate file types
+      const invalidFiles = newFiles.filter(
+        (file) => !type.some((ext) => file.name.toLowerCase().endsWith(ext))
+      );
+      if (invalidFiles.length > 0) {
+        Alert.alert(
+          "Invalid File Type",
+          `Please upload files of type: ${type.join(", ")}`
+        );
+        return;
+      }
+
+      // Check max amount
+      if (selectedFiles.length + newFiles.length > amount) {
+        Alert.alert("Limit Exceeded", `You can upload up to ${amount} files.`);
+        return;
+      }
+
+      const updatedFiles = [...selectedFiles, ...newFiles].slice(0, amount);
+      setSelectedFiles(updatedFiles);
+      setFormValue(name, updatedFiles); // Update form context
+    }
+  };
+
+  const removeFile = (index: number) => {
+    const updatedFiles = selectedFiles.filter((_, i) => i !== index);
+    setSelectedFiles(updatedFiles);
+    setFormValue(name, updatedFiles); // Update form context
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, { color: colors.text.hex }]}>
+        {placeholder}
+      </Text>
+      <View style={styles.fileContainer}>
+        {selectedFiles.map((file, index) => (
+          <View key={index} style={styles.fileItem}>
+            <Image source={{ uri: file.uri }} style={styles.imagePreview} />
+            <TouchableOpacity
+              onPress={() => removeFile(index)}
+              style={[
+                styles.removeButton,
+                { backgroundColor: colors.error.hex },
+              ]}
+            >
+              <Text style={styles.removeButtonText}>X</Text>
+            </TouchableOpacity>
+          </View>
+        ))}
+        {selectedFiles.length < amount && (
+          <TouchableOpacity
+            onPress={pickImage}
+            style={[
+              styles.addButton,
+              {
+                backgroundColor: colors.body.hex,
+                borderColor: formErrors[name] && colors.error.hex,
+              },
+            ]}
+            disabled={disabled}
+          >
+            <Text
+              style={[styles.addButtonText, { color: colors.placeHolder.hex }]}
+            >+</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      {formErrors[name] && formErrors[name].length > 0 && (
+        <ErrorList errors={formErrors[name]} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { marginVertical: 10 },
+  label: { marginTop: 5 },
+  fileContainer: { flexDirection: "row", flexWrap: "wrap", gap: 10 },
+  fileItem: { position: "relative", width: 100, height: 100, marginRight: 10 },
+  imagePreview: { width: "100%", height: "100%", borderRadius: 5 },
+  removeButton: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: 20,
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+  },
+  removeButtonText: { color: "#fff", fontWeight: "bold" },
+  addButton: {
+    width: 100,
+    height: 100,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 5,
+  },
+  addButtonText: { fontSize: 24 },
+  error: { marginTop: 5 },
+});
+
+export default InputAttach;