@towsila/expo-ui-library 3.5.0 → 3.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/screens/signUpScreen.tsx

@@ -1,120 +1,161 @@
-// import { useRouter } from "expo-router";
 import React, { useState } from "react";
-import TemplatePage from "../reusable/templatePage";
-import { Text, TouchableOpacity, View } from "react-native";
-import TermsPopup from "../ui/termsPopup";
-import { Fonts, textSize } from "../../tokens/typography";
-import { useAppTheme } from "../../context/ThemeContext";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Field } from "../../types/formFields";
-import { useFormSubmit } from "../../hooks/useSignup";
-import ErrorMessage from "../ui/error";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+import ScreenHeader from "../ui/PageTopBar";
+import { DynamicForm } from "../ui/dynamicForm";
+import { Fonts, textSize } from "../../tokens/typography";
 import SharpButton from "../ui/sharpButton";
-import { SharpDynamicForm } from "../ui/sharpDynamicForm";
-interface SignupProps{
-title: string;
-subtitle: string;
-formState: Record<string, string>;
-setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
-onSubmit: (formState: Record<string, string>) => Promise<void>;
-onLogin: () => void;
-errorMessage?: string;
-haveAccountLabel: string;
-loginLabel: string;
-buttonLabel: string;
-fields: Field[];
-nextLabel: string;
-backLabel: string;
-generalTerms: string[];
-dialogTitle:string;
-dialogDescription: string;
-dialogButton: string;
-t?: (key: string) => string;
+import TermsPopup from "../ui/termsPopup";
+import { useFormSubmit } from "../../hooks/useSignup";
+
+interface SignupProps {
+  title: string;
+  subtitle: string;
+  formState: Record<string, string>;
+  setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  onSubmit: (formState: Record<string, string>) => Promise<void>;
+  onLogin: () => void;
+  errorMessage?: string;
+  haveAccountLabel: string;
+  loginLabel: string;
+  buttonLabel: string;
+  fields: Field[];
+  nextLabel: string;
+  backLabel: string;
+  generalTerms: string[];
+  dialogTitle: string;
+  dialogDescription: string;
+  dialogButton: string;
+  agreeText?: string;      // "By continuing, you agree to our"
+  termsLinkText?: string;  // "Terms & Privacy"
+  t?: (key: string) => string;
 }
-export default function SignupPage({
-  title, 
-  subtitle,
-  formState, 
-  setFormState, 
-  onSubmit, 
-  onLogin, 
-  errorMessage, 
-  haveAccountLabel, 
-  loginLabel, 
-  buttonLabel, 
-  fields, 
-  nextLabel, 
-  backLabel, 
+
+export default function SignUpScreen({
+  title,
+  formState,
+  setFormState,
+  onSubmit,
+  onLogin,
+  haveAccountLabel,
+  loginLabel,
+  buttonLabel,
+  fields,
+  nextLabel,
+  backLabel,
   generalTerms,
   dialogTitle,
   dialogDescription,
   dialogButton,
+  agreeText = "By continuing, you agree",
+  termsLinkText = "Terms & Privacy",
   t,
 }: SignupProps) {
-   const [showTerms, setShowTerms] = useState(true);
-   const {colors} = useAppTheme();
-   const [isLastStep, setIsLastStep] = useState(false);
+  const [showTerms, setShowTerms] = useState(true);
+  const { colors } = useAppTheme();
+  const { isRTL } = useLanguage();
 
- const {handleSubmit, errors, clearError, loading, setErrors} = useFormSubmit({
+  const { handleSubmit, errors, clearError, loading, setErrors } = useFormSubmit({
     fields,
     formState,
     onSubmit,
-  });    
+  });
+
   return (
-    <TemplatePage 
-    title={title}
-    subtitle={subtitle}
-    body = {
-      <View style={{gap:10}}>
-        {errorMessage && <ErrorMessage message={errorMessage} position="center" fontSize={textSize.md} />}
-       <SharpDynamicForm
-        onStepChange={(step, total) => setIsLastStep(step === total - 1)}
-        fields={fields}
-        formState={formState}
-        setFormState={setFormState}
-        errors={errors}
-        clearError={clearError}
-        nextLabel={nextLabel}
-        backLabel={backLabel}
-        setErrors={setErrors}
-        translator={t}
-       />
-       {isLastStep && (
-       <SharpButton
-            text={buttonLabel}
-            bgColor={colors.primary}
-            onPress={handleSubmit}
-            loading={loading}
-            height={50}
-          />
-       )}
-       <TermsPopup 
-       title={dialogTitle}
-       description={dialogDescription}
-       buttonText={dialogButton}
-       showTerms={showTerms} 
-       generalTerms={generalTerms} 
-       onAgree={()=>setShowTerms(false)}/>
-     </View> 
-    }
-    footer={
-        <View style={{flexDirection: "row",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: 4,
-      marginTop: 15,}}>
-            <Text style={{fontSize: textSize.sm,
-      color: colors.text.secondary,
-      fontFamily: Fonts.montserrat.regular,}}>{haveAccountLabel}</Text>
-            <TouchableOpacity onPress={onLogin}>
-              <Text
-                style={{ fontSize: textSize.sm, fontFamily: Fonts.montserrat.semiBold, color: colors.primary }}
-              >
-                {loginLabel}
-              </Text>
-            </TouchableOpacity>
-          </View>
-    }
-    marginTop={-150}
-    />
+    <View style={{ flex: 1, paddingHorizontal: 25, paddingTop: 50, paddingBottom: 20 }}>
+      {/* Fixed: header */}
+      <ScreenHeader title={title} description={""} />
+
+      {/* Scrollable: everything after the header */}
+      <ScrollView
+        style={{ flex: 1 }}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingBottom: 20 }}
+      >
+        <DynamicForm
+          fields={fields}
+          formState={formState}
+          setFormState={setFormState}
+          errors={errors}
+          clearError={clearError}
+          nextLabel={nextLabel}
+          backLabel={backLabel}
+          setErrors={setErrors}
+          translator={t}
+        />
+
+        {/* Terms notice */}
+        <Text
+          style={{
+            flexDirection: isRTL ? "row" : "row-reverse",
+            textAlign: isRTL? "left" : "right",
+            fontSize: textSize.xs,
+            color: colors.text.secondary,
+            fontFamily: Fonts.montserrat.regular,
+            marginBottom: 40,
+          }}
+        >
+          {agreeText}{" "}
+          <Text
+            onPress={() => setShowTerms(true)}
+            style={{ color: colors.primary, fontFamily: Fonts.montserrat.semiBold, textDecorationLine:"underline" }}
+          >
+            {termsLinkText}
+          </Text>
+        </Text>
+
+        <SharpButton
+          text={buttonLabel}
+          bgColor={colors.primary}
+          onPress={handleSubmit}
+          loading={loading}
+          height={50}
+        />
+
+        <View
+          style={{
+            flexDirection: isRTL ? "row" : "row-reverse",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 4,
+            marginTop: 15,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: textSize.xs,
+              color: colors.text.secondary,
+              fontFamily: Fonts.montserrat.regular,
+            }}
+          >
+            {haveAccountLabel}
+          </Text>
+          <TouchableOpacity onPress={onLogin}>
+            <Text
+              style={{
+                fontSize: textSize.xs,
+                fontFamily: Fonts.montserrat.regular,
+                color: colors.primary,
+              }}
+            >
+              {loginLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+
+      {/* Popup lives outside the scroll */}
+      <TermsPopup
+        title={dialogTitle}
+        description={dialogDescription}
+        buttonText={dialogButton}
+        showTerms={showTerms}
+        generalTerms={generalTerms}
+        onAgree={() => setShowTerms(false)}
+      />
+    </View>
   );
 }

package/src/components/ui/customPopup.tsx

@@ -1,7 +1,8 @@
 import { View, Text, StyleSheet, Modal, Animated, Dimensions, ViewStyle } from "react-native";
-import { useAppTheme } from "../../context/ThemeContext";
-import { textSize, Fonts } from "../../tokens/typography";
 import { useEffect, useRef } from "react";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
 import SharpButton from "./sharpButton";
 
 const { height } = Dimensions.get("window");
@@ -91,7 +92,7 @@ const handleClose = () => {
 };
 
 
-
+const {isRTL} = useLanguage();
 
   return (
     <Modal
@@ -119,6 +120,7 @@ const handleClose = () => {
             fontSize: textSize.xxl,
             color: colors.text.primary,
             marginBottom: 10,
+            textAlign:isRTL ? "left" :"right"
           }}>
             {title}
           </Text>

package/src/components/ui/dynamicForm.tsx

@@ -1,13 +1,12 @@
 import { useState } from "react";
-import { I18nManager, ScrollView, Text, TouchableOpacity, View } from "react-native";
-import Input from "./input";
+import { View } from "react-native";
 import { Field } from "../../types/formFields";
-import { useAppTheme } from "../../context/ThemeContext";
-import { validateForm } from "../../utils/inputValidator/registerValidator";
-import { Fonts, textSize } from "../../tokens/typography";
-import {Arrow, ArrowBack} from "@towsila/icons";
+import Input from "./input";
+
+type KeyedField = Field & { key?: string };
+
 interface Props {
-  fields: Field[];
+  fields: KeyedField[];
   formState: Record<string, string>;
   setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   errors: Record<string, string>;
@@ -16,27 +15,7 @@ interface Props {
   onStepChange?: (step: number, total: number) => void;
   nextLabel?: string;
   backLabel?: string;
-}
-// can i split it into 2 not only move the password if the number of fields is > 4
-function splitIntoSteps(fields: Field[]): Field[][] {
-  const info = fields.filter((f) => f.type !== "password");
-  const security = fields.filter((f) => f.type === "password");
-  const steps: Field[][] = [];
-  
-  if (info.length > 4) {
-    const mid = Math.ceil(info.length / 2);
-    steps.push(info.slice(0, mid));
-    steps.push(info.slice(mid));
-  } else if (info.length > 0) {
-    steps.push(info);
-  }
-  
-  // Add security fields as separate step
-  if (security.length > 0) {
-    steps.push(security);
-  }
-  
-  return steps;
+  translator?: (key: string) => string;
 }
 
 export const DynamicForm: React.FC<Props> = ({
@@ -44,113 +23,60 @@ export const DynamicForm: React.FC<Props> = ({
   formState,
   setFormState,
   errors,
-  setErrors,
   clearError,
-  onStepChange,
-  nextLabel,
-  backLabel,
+  translator,
 }) => {
   const [showPasswordField, setShowPasswordField] = useState<Record<string, boolean>>({});
-  const [currentStep, setCurrentStep] = useState(0);
-  const { colors } = useAppTheme();
-
-  const steps = splitIntoSteps(fields);
-  const totalSteps = steps.length;
-  const stepFields = steps[currentStep] ?? [];
-
-  const goNext = () => {
-    // validate current step fields before proceeding
-    const newErrors = validateForm(stepFields, formState);
-    setErrors((prev) => ({ ...prev, ...newErrors }));
-    if (Object.keys(newErrors).length > 0) return;
 
-    const next = Math.min(currentStep + 1, totalSteps - 1);
-    setCurrentStep(next);
-    onStepChange?.(next, totalSteps);
-  };
+  // Group consecutive fields that share the same `key`
+  const groups = fields.reduce<KeyedField[][]>((acc, field) => {
+    const last = acc[acc.length - 1];
+    if (field.key && last && last[0].key === field.key) {
+      last.push(field);
+    } else {
+      acc.push([field]);
+    }
+    return acc;
+  }, []);
 
-  const goPrev = () => {
-    const prev = Math.max(currentStep - 1, 0);
-    setCurrentStep(prev);
-    onStepChange?.(prev, totalSteps);
-  };
-
-  const renderInput = (field: Field) => (
-    <View key={field.name} style={{ marginBottom: 10 }}>
-      <Input
-        value={formState[field.name] || ""}
-        onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
-        iconLeft={field.icon}
-        iconRight={
-          field.secureTextEntry
-            ? showPasswordField[field.name] ? "eye-off-outline" : "eye-outline"
-            : undefined
-        }
-        placeholder={field.placeholder}
-        onPressIconRight={
-          field.secureTextEntry
-            ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
-            : undefined
-        }
-        secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
-        returnKeyType="next"
-        error={errors[field.name]}
-        onClearError={() => clearError(field.name)}
-        label={field.label}
-      />
-    </View>
+  const renderField = (field: KeyedField) => (
+    <Input
+      value={formState[field.name] || ""}
+      onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
+      iconLeft={field.icon}
+      iconRight={
+        field.secureTextEntry
+          ? showPasswordField[field.name] ? "eye-off-outline" : "eye-outline"
+          : undefined
+      }
+      placeholder={field.placeholder}
+      onPressIconRight={
+        field.secureTextEntry
+          ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
+          : undefined
+      }
+      secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
+      returnKeyType="next"
+      error={errors[field.name] ? translator?.(errors[field.name]) : ""}
+      onClearError={() => clearError(field.name)}
+      label={field.label}
+    />
   );
 
   return (
-    <View style={{ gap: 4, paddingBottom: 20 }}>
-
-      {/* Stepper — only show if more than 1 step */}
-      {totalSteps > 1 && (
-        <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 12 }}>
-          {/* Back arrow */}
-          <View style={{ flex: 1 }}>
-          {currentStep > 0 && backLabel && (
-            <TouchableOpacity onPress={goPrev} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: 6 }}>
-                <ArrowBack width={16} height={16} color={colors.text.secondary} style={[I18nManager.isRTL && { transform: [{ scaleX: -1 }] },]}/>
-                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
-                {backLabel}
-                </Text>
-            </TouchableOpacity>
-          )}
-          </View>
-
-          {/* Pills */}
-          <View style={{ flexDirection: "row", gap: 8 }}>
-            {steps.map((_, i) => (
-              <View key={i} style={{
-                width: i === currentStep ? 28 : 10,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor: i <= currentStep ? colors.primary : colors.text.placeholder + "40",
-              }} />
-            ))}
-          </View>
-          <View style={{ flex: 1 }} />
-        </View>
-      )}
-
-      {/* Fields */}
-        {stepFields.map((f) => renderInput(f))}
-
-      {/* Navigation */}
-      {totalSteps > 1 && (
-        <View style={{ gap: 10, marginTop: 4 }}>
-          {currentStep < totalSteps - 1 && (
-            <TouchableOpacity onPress={goNext} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 6 }}>
-                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
-                {nextLabel}
-                </Text>
-                <Arrow width={16} height={16} color={colors.text.secondary} style={[I18nManager.isRTL && { transform: [{ scaleX: -1 }] },]}/>
-            </TouchableOpacity>
-            )}
-          
+    <View style={{ gap: 4 }}>
+      {groups.map((group) => (
+        <View
+          key={group.map((f) => f.name).join("-")}
+          style={{ flexDirection: "row", gap: 10, marginBottom: 10 }}
+        >
+          {group.map((field) => (
+            <View key={field.name} style={{ flex: 1, minWidth: 0 }}>
+              {renderField(field)}
+            </View>
+          ))}
         </View>
-      )}
+      ))}
     </View>
   );
 };

package/src/components/ui/termsPopup.tsx

@@ -1,7 +1,8 @@
 import { ScrollView, Text, View } from "react-native";
 import CustomPopUp from "./customPopup";
-import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+import { Fonts, textSize } from "../../tokens/typography";
 
 interface TermsPopupProps{
     showTerms: boolean;
@@ -13,6 +14,7 @@ interface TermsPopupProps{
 }
 export default function TermsPopup({showTerms, generalTerms, onAgree, title, description, buttonText}: TermsPopupProps){
     const {colors} = useAppTheme();
+    const {isRTL} =  useLanguage();
     return (
     <CustomPopUp
         visible={showTerms}
@@ -23,6 +25,7 @@ export default function TermsPopup({showTerms, generalTerms, onAgree, title, des
             fontSize: textSize.sm,
             color: colors.text.secondary,
             marginBottom: 4,
+            textAlign:isRTL ? "left" :"right"
           }}>
             {description}
           </Text>
@@ -34,7 +37,7 @@ export default function TermsPopup({showTerms, generalTerms, onAgree, title, des
             showsVerticalScrollIndicator={false}
           >
             {generalTerms.map((term: string, i: number) => (
-              <View key={i} style={{ flexDirection: "row", gap: 8, marginBottom: 8 }}>
+              <View key={i} style={{ flexDirection: isRTL ? "row" : "row-reverse", gap: 8, marginBottom: 8 }}>
                 <Text style={{ color: colors.primary }}>•</Text>
                 <Text style={{
                   fontFamily: Fonts.montserrat.regular,
@@ -42,6 +45,7 @@ export default function TermsPopup({showTerms, generalTerms, onAgree, title, des
                   color: colors.text.secondary,
                   flex: 1,
                   lineHeight: 20,
+                  textAlign:isRTL ? "left" :"right"
                 }}>
                   {term}
                 </Text>