aport-tools 4.4.3 → 4.4.5

package/dist/forms/FormContext.d.ts

@@ -1,24 +1,129 @@
-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;
+    handleFormSubmit: (formValues: Record<string, any>) => Promise<Record<string, string[]>>;
 }
 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,4 +1,4 @@
-/*! aport-tools v4.4.3 | ISC */
+/*! aport-tools v4.4.5 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
 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';
@@ -175,7 +175,7 @@ var Stepper = function Stepper(_a) {
     currentStep = _a.currentStep,
     _b = _a.presseable,
     presseable = _b === void 0 ? false : _b,
-    _onPress = _a.onPress,
+    onPress = _a.onPress,
     _c = _a.stepStyle,
     stepStyle = _c === void 0 ? "circular" : _c,
     totalSteps = _a.totalSteps,
@@ -185,6 +185,30 @@ var Stepper = function Stepper(_a) {
   var progressAnim = React.useRef(new Animated.Value(0)).current;
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
+  var _e = useFormContext(),
+    formValues = _e.formValues,
+    handleFormSubmit = _e.handleFormSubmit;
+  var handleStepPress = function handleStepPress(stepIndex) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var errors;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!presseable || stepIndex === currentStep) return [2 /*return*/];
+            return [4 /*yield*/, handleFormSubmit(formValues)];
+          case 1:
+            errors = _a.sent();
+            if (Object.keys(errors).length > 0) {
+              console.log("Validation failed. Cannot proceed to step", stepIndex);
+              return [2 /*return*/]; // Prevent step change
+            }
+            // Proceed to change step
+            onPress === null || onPress === void 0 ? void 0 : onPress(stepIndex);
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
   React.useEffect(function () {
     Animated.timing(progressAnim, {
       toValue: currentStep,
@@ -248,10 +272,13 @@ var Stepper = function Stepper(_a) {
       case "number":
       default:
         return /*#__PURE__*/React.createElement(Text, {
-          style: {
-            fontSize: 16,
-            fontWeight: "bold"
-          }
+          b: true,
+          typeFont: "primary",
+          style: [currentStep >= index ? {
+            color: colors.textButton.hex
+          } : {
+            color: colors.text.hex
+          }]
         }, index + 1);
     }
   };
@@ -268,13 +295,11 @@ var Stepper = function Stepper(_a) {
       }],
       disabled: !presseable,
       onPress: function onPress() {
-        return _onPress && _onPress(index);
+        return handleStepPress(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
@@ -387,22 +412,39 @@ var Form = function Form(_a) {
       });
     });
   };
+  var handleFormSubmit = function handleFormSubmit(formValues) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var validationErrors;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4 /*yield*/, onSubmit(formValues)];
+          case 1:
+            validationErrors = _a.sent();
+            setErrors(validationErrors);
+            return [2 /*return*/, validationErrors];
+        }
+      });
+    });
+  };
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {
       formValues: formValues,
       setFormValue: setFormValue,
       errors: errors,
       setErrors: setErrors,
-      handleSubmit: handleSubmit
+      handleSubmit: handleSubmit,
+      handleFormSubmit: handleFormSubmit
     }
   }, stepper && (/*#__PURE__*/React.createElement(Stepper, {
     steps: stepper.steps,
-    currentStep: stepper.step,
+    currentStep: stepper.currentStep,
     presseable: stepper.presseable,
     onPress: stepper.onPress,
     totalSteps: stepper.totalSteps,
     stepType: stepper.stepType,
-    icon: stepper.icon
+    icon: stepper.icon,
+    stepStyle: stepper.stepStyle
   })), children);
 };