aport-tools 4.5.0 → 4.6.0

package/src/forms/Stepper.tsx

@@ -0,0 +1,289 @@
+import { ThemeContext } from "aport-themes";
+import React, { useContext, useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Animated,
+  TouchableOpacity,
+  Image,
+} from "react-native";
+import { Text } from "../fonts";
+import { useFormContext } from "./FormContext";
+
+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[];
+}
+
+const Stepper: React.FC<StepperProps> = ({
+  steps,
+  currentStep,
+  presseable = false,
+  onPress,
+  stepStyle = "circular",
+  totalSteps,
+  stepType = "number",
+  icon,
+}) => {
+  const progressAnim = React.useRef(new Animated.Value(0)).current;
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+  const { formValues, handleFormSubmit } = useFormContext();
+  const [errorBack, seterrorBack] = useState(false);
+
+  const handleStepPress = async (stepIndex: number) => {
+    if (!presseable || stepIndex === currentStep) return;
+  
+    const targetStep = stepIndex > currentStep ? currentStep + 1 : currentStep - 1;
+  
+    // Validation is required only when moving forward
+    if (targetStep > currentStep) {
+      const errors = await handleFormSubmit(formValues);
+      if (Object.keys(errors).length > 0) {
+        console.log(`Validation failed at step ${currentStep}. Cannot proceed to step ${targetStep}.`);
+        seterrorBack(true);
+        return; // Stop if current step has errors
+      }
+    }
+  
+    // Update step
+    seterrorBack(false);
+    onPress?.(targetStep);
+  };
+  
+  
+
+  React.useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: currentStep,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  }, [currentStep]);
+
+  React.useEffect(() => {
+    if (stepType === "icon") {
+      if (!icon) {
+        console.error("Stepper: `icon` is required when stepType is 'icon'.");
+      } else if (Array.isArray(icon) && icon.length !== totalSteps) {
+        console.error(
+          `Stepper: Number of icons (${icon.length}) must match totalSteps (${totalSteps}).`
+        );
+      }
+    }
+  }, [stepType, icon, totalSteps]);
+
+  const getSeparatorWidth = (index: number): `${number}%` => {
+    if (currentStep > index && currentStep < index + 1) {
+      // Return the fractional percentage for odd steps
+      return `${((currentStep - index) * 100).toFixed(0)}%` as `${number}%`;
+    }
+    return currentStep > index ? "100%" : "0%";
+  };
+
+  const renderStepContent = (index: number) => {
+    switch (stepType) {
+      case "icon":
+        if (Array.isArray(icon)) {
+          const stepIcon = icon[index];
+          if (typeof stepIcon === "string") {
+            return (
+              <Image
+                source={{ uri: stepIcon }}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          } else {
+            console.error(
+              `Invalid icon value for step ${index}. Expected a string URI.`
+            );
+            return null;
+          }
+        }
+        if (typeof icon === "string") {
+          return (
+            <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;
+
+      case "number":
+      default:
+        return (
+          <Text
+            b
+            typeFont="primary"
+            style={[
+              currentStep >= index
+                ? { color: colors.textButton.hex }
+                : { color: colors.text.hex },
+            ]}
+          >
+            {index + 1}
+          </Text>
+        );
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: totalSteps }, (_, index) => (
+        <React.Fragment key={index}>
+          <TouchableOpacity
+            style={[styles.stepContainer, presseable && { cursor: "pointer" }]}
+            disabled={!presseable}
+            onPress={() => handleStepPress(index)}
+          >
+            <View
+              style={[
+                styles.step,
+                stepStyle === "square" && styles.squareStep,
+                {
+                  backgroundColor:
+                    currentStep >= index
+                      ? !errorBack
+                        ? colors.primary.hex
+                        : colors.error.hex
+                      : colors.body.hex,
+                },
+              ]}
+            >
+              {renderStepContent(index)}
+            </View>
+            {steps && <Text style={styles.stepText}>{steps[index]}</Text>}
+          </TouchableOpacity>
+          {index < totalSteps - 1 && (
+            <View style={styles.separatorContainer}>
+              <View style={styles.separatorBackground} />
+              <Animated.View
+                style={[
+                  styles.separatorProgress,
+                  {
+                    width: getSeparatorWidth(index),
+                    backgroundColor: colors.primary.hex,
+                  },
+                ]}
+              />
+            </View>
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 16,
+  },
+  stepContainer: {
+    alignItems: "center",
+    flex: 1,
+  },
+  step: {
+    width: 30,
+    height: 30,
+    borderRadius: 15, // Default to circular
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4,
+  },
+  squareStep: {
+    borderRadius: 5, // Square shape
+  },
+  stepLabel: {
+    color: "#ffffff",
+    fontWeight: "bold",
+  },
+  stepText: {
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 4,
+  },
+  separatorContainer: {
+    flex: 1,
+    height: 4,
+    marginHorizontal: 8,
+    position: "relative",
+  },
+  separatorBackground: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#aaaaaa",
+    borderRadius: 2,
+  },
+  separatorProgress: {
+    position: "absolute",
+    height: "100%",
+    borderRadius: 2,
+  },
+});
+
+export default Stepper;

package/src/forms/TextArea.tsx

@@ -0,0 +1,91 @@
+// src/forms/TextArea.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'; // Assuming the Text component is exported from fonts
+import ErrorList from './ErrorList';
+import { ThemeContext } from 'aport-themes';
+
+interface TextAreaProps extends TextInputProps {
+  name: string;
+  /**
+   * Optional first value if you want to set values with fetch or dont have empty inputs.
+   */
+  firstValue?: string; // Optional prop for the initial value
+
+  label: string;
+  errors?: string[]; // Optional prop to directly pass errors
+}
+
+const TextArea: React.FC<TextAreaProps> = ({ name, label, errors,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) {
+        setInternalValue(firstValue);
+        setFormValue(name, firstValue, firstValue); // Pass firstValue here
+      } else {
+        setInternalValue(formValues[name] || "");
+      }
+    }
+  },[firstValue]); 
+
+  const handleChange = (text: string) => {
+    setInternalValue(text);
+    setFormValue(name, text);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, {color: colors.text.hex}]}>{label}</Text>
+      <TextInput
+        style={[
+          styles.textArea,
+          style,
+          {backgroundColor: colors.body.hex, color: colors.text.hex, borderColor: formErrors[name] ? colors.error.hex : "#CCC",}
+        ]}
+        value={internalValue}
+        onChangeText={handleChange}
+        placeholder={label}
+        placeholderTextColor={colors.placeHolder.hex} // Can use a lighter version if needed
+        multiline
+        editable={editable}
+        numberOfLines={4}
+        textAlignVertical="top"
+        {...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,
+  },
+  textArea: {
+    height: 100,
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+  },
+});
+
+export default TextArea;

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

@@ -1,8 +1,10 @@
+// src/forms/index.ts
+
 export { Input } from './Input';
 export { Form, useFormContext, setFormValueGlobal } from './FormContext';
 export { default as TextArea } from './TextArea';
 export { default as Label } from './Label';
 export { default as ErrorList } from './ErrorList';
 export { InputList } from './InputList';
-export { default as InputCheck } from './InputCheck';
-export { default as InputAttach } from './InputAttach';
+export {default as InputCheck} from './InputCheck';
+export {default as InputAttach} from './InputAttach';

package/src/index.ts

@@ -0,0 +1,6 @@
+// src/index.ts
+
+export * from './buttons'
+export * from './cards';
+export * from './fonts'
+export * from './forms'

package/dist/cards/Card.d.ts

@@ -1,57 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle, 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 declare const Card: React.FC<CardProps>;
-export {};

package/dist/cards/index.d.ts

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

package/dist/components/Button.d.ts

@@ -1,52 +0,0 @@
-import React from 'react';
-/**
- * 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;
-}
-/**
- * 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 declare const Button: React.FC<ButtonProps>;
-export {};

package/dist/defaults/reanimatedWrapper.d.ts

@@ -1,2 +0,0 @@
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-export { Animated as useAnimated, useAnimatedStyle, useSharedValue, withSpring };

package/dist/fonts/Text.d.ts

@@ -1,64 +0,0 @@
-import { ThemeColors, ThemeFonts } from 'aport-themes';
-import React from 'react';
-import { 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';
-    /**
-      * 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;
-    /**
-     * 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 declare const Text: React.FC<CustomTextProps>;
-export {};

package/dist/forms/ErrorList.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface ErrorListProps {
-    errors: string[];
-}
-declare const ErrorList: React.FC<ErrorListProps>;
-export default ErrorList;