aport-tools 4.4.2 → 4.4.4

package/dist/forms/FormContext.d.ts

@@ -1,24 +1,128 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 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.
+     * Example usage:
+     * ```ts
+     * setFormValue('email', 'newemail@example.com');
+     * ```
+     */
     setFormValue: (name: string, value: 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;
 }
 export declare const useFormContext: () => FormContextProps;
 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;
-    step: number;
+    /**
+     * 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 {
-    children: ReactNode;
+    /**
+     * 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;
 }
 export declare const Form: React.FC<FormProps>;

package/dist/forms/Stepper.d.ts

@@ -1,12 +1,53 @@
 import React from "react";
 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[];
 }
 declare const Stepper: React.FC<StepperProps>;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.4.2 | ISC */
+/*! aport-tools v4.4.4 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
+import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, Image, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Alert, ActivityIndicator } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 import * as ImagePicker from 'expo-image-picker';
 
@@ -212,17 +212,50 @@ var Stepper = function Stepper(_a) {
     switch (stepType) {
       case "icon":
         if (Array.isArray(icon)) {
-          return icon[index]; // Render individual icon for each step
+          var stepIcon = icon[index];
+          if (typeof stepIcon === "string") {
+            return /*#__PURE__*/React.createElement(Image, {
+              source: {
+                uri: stepIcon
+              },
+              style: {
+                width: 24,
+                height: 24
+              },
+              resizeMode: "contain"
+            });
+          } else {
+            console.error("Invalid icon value for step ".concat(index, ". Expected a string URI."));
+            return null;
+          }
         }
-        return icon;
-      // Render the same icon for all steps
+        if (typeof icon === "string") {
+          return /*#__PURE__*/React.createElement(Image, {
+            source: {
+              uri: icon
+            },
+            style: {
+              width: 24,
+              height: 24
+            },
+            resizeMode: "contain"
+          });
+        }
+        console.error("Icon prop must be a string or an array of strings.");
+        return null;
       case "empty":
         return null;
-      // Render nothing inside the step circle
       case "number":
       default:
-        return index + 1;
-      // Default to rendering step numbers
+        return /*#__PURE__*/React.createElement(Text, {
+          b: true,
+          typeFont: "primary",
+          style: [currentStep >= index ? {
+            color: colors.textButton.hex
+          } : {
+            color: colors.text.hex
+          }]
+        }, index + 1);
     }
   };
   return /*#__PURE__*/React.createElement(View, {
@@ -241,10 +274,8 @@ var Stepper = function Stepper(_a) {
         return _onPress && _onPress(index);
       }
     }, /*#__PURE__*/React.createElement(View, {
-      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && {
-        backgroundColor: colors.primary.hex
-      }, {
-        backgroundColor: colors.body.hex
+      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, {
+        backgroundColor: currentStep >= index ? colors.primary.hex : colors.body.hex
       }]
     }, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
       style: styles$9.stepText
@@ -254,7 +285,8 @@ var Stepper = function Stepper(_a) {
       style: styles$9.separatorBackground
     }), /*#__PURE__*/React.createElement(Animated.View, {
       style: [styles$9.separatorProgress, {
-        width: getSeparatorWidth(index)
+        width: getSeparatorWidth(index),
+        backgroundColor: colors.primary.hex
       }]
     }))));
   }));
@@ -307,7 +339,6 @@ var styles$9 = StyleSheet.create({
   separatorProgress: {
     position: "absolute",
     height: "100%",
-    backgroundColor: "#3498db",
     borderRadius: 2
   }
 });
@@ -367,7 +398,7 @@ var Form = function Form(_a) {
     }
   }, stepper && (/*#__PURE__*/React.createElement(Stepper, {
     steps: stepper.steps,
-    currentStep: stepper.step,
+    currentStep: stepper.currentStep,
     presseable: stepper.presseable,
     onPress: stepper.onPress,
     totalSteps: stepper.totalSteps,