@towsila/expo-ui-library 3.4.0 → 3.5.1

package/package.json

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

package/src/components/screens/signUpScreen.tsx

@@ -1,120 +1,134 @@
-// 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 { Field } from "../../types/formFields";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
 import { useFormSubmit } from "../../hooks/useSignup";
-import ErrorMessage from "../ui/error";
+import { ScrollWithIndicator } from "../ui/scrollIndicator";
+import { DynamicForm } from "../ui/dynamicForm";
 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 { Fonts, textSize } from "../../tokens/typography";
+
+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;
+  appLogo?: React.ReactNode;
 }
-export default function SignupPage({
-  title, 
-  subtitle,
-  formState, 
-  setFormState, 
-  onSubmit, 
-  onLogin, 
-  errorMessage, 
-  haveAccountLabel, 
-  loginLabel, 
-  buttonLabel, 
-  fields, 
-  nextLabel, 
-  backLabel, 
+
+export default function SignUpScreen({
+  formState,
+  setFormState,
+  onSubmit,
+  onLogin,
+  haveAccountLabel,
+  loginLabel,
+  buttonLabel,
+  fields,
+  nextLabel,
+  backLabel,
   generalTerms,
   dialogTitle,
   dialogDescription,
   dialogButton,
   t,
+  appLogo,
 }: SignupProps) {
-   const [showTerms, setShowTerms] = useState(true);
-   const {colors} = useAppTheme();
-   const [isLastStep, setIsLastStep] = useState(false);
-
- const {handleSubmit, errors, clearError, loading, setErrors} = useFormSubmit({
+  const [showTerms, setShowTerms] = useState(true);
+  const { colors } = useAppTheme();
+const {isRTL} = useLanguage();
+  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, paddingVertical: 40 }}>
+      {/* Fixed: logo */}
+      <View style={{ alignItems: "center" }}>{appLogo}</View>
+
+      {/* Scrollable: form only, with vertical progress indicator */}
+      <ScrollWithIndicator
+        keyboardShouldPersistTaps="handled"
+      >
+        <DynamicForm
+          fields={fields}
+          formState={formState}
+          setFormState={setFormState}
+          errors={errors}
+          clearError={clearError}
+          nextLabel={nextLabel}
+          backLabel={backLabel}
+          setErrors={setErrors}
+          translator={t}
+        />
+      </ScrollWithIndicator>
+
+      {/* Fixed: button + login link */}
+      <View style={{ gap: 2, paddingTop: 20 }}>
+        <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
+          style={{
+            flexDirection:isRTL ? "row":"row-reverse",
+            justifyContent:isRTL ? "flex-end" :"flex-start",
+            alignItems: "center",
+            gap: 4,
+            marginTop: 5,
+          }}
+        >
+          <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.semiBold,
+                color: colors.primary,
+              }}
+            >
+              {loginLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </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,11 +1,7 @@
 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";
 interface Props {
   fields: Field[];
   formState: Record<string, string>;
@@ -16,67 +12,24 @@ interface Props {
   onStepChange?: (step: number, total: number) => void;
   nextLabel?: string;
   backLabel?: string;
+  translator?: (key: string) => 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;
-}
 
 export const DynamicForm: React.FC<Props> = ({
   fields,
   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);
-  };
-
-  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 }}>
+  return (
+    <View style={{ gap: 4, paddingBottom: 20 }}>
+        {fields.map((field) => 
+        <View key={field.name} style={{ marginBottom: 10 }}>
       <Input
         value={formState[field.name] || ""}
         onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
@@ -94,63 +47,12 @@ export const DynamicForm: React.FC<Props> = ({
         }
         secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
         returnKeyType="next"
-        error={errors[field.name]}
+        error={errors[field.name] ? translator?.(errors[field.name]) : ""}
         onClearError={() => clearError(field.name)}
         label={field.label}
       />
     </View>
-  );
-
-  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>
-      )}
+        )}
     </View>
   );
 };

package/src/components/ui/scrollIndicator.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  LayoutChangeEvent,
+  ScrollViewProps,
+  View,
+} from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+
+interface Props extends ScrollViewProps {
+  trackWidth?: number;
+  trackLength?: number;
+  children: React.ReactNode;
+}
+
+const IDLE_OPACITY = 0.45;
+
+export const ScrollWithIndicator: React.FC<Props> = ({
+  children,
+  trackWidth = 5,
+  trackLength = 200,
+  style,
+  contentContainerStyle,
+  ...rest
+}) => {
+  const { colors } = useAppTheme();
+  const { isRTL } = useLanguage();
+
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const fade = useRef(new Animated.Value(IDLE_OPACITY)).current;
+  const awake = useRef(false);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [viewH, setViewH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+
+  const scrollable = viewH > 0 && contentH > viewH + 1;
+
+  // short fixed-length track instead of full height
+  const trackH = Math.min(trackLength, viewH);
+  const thumbH = scrollable
+    ? Math.min(trackH * 0.7, Math.max(24, (viewH / contentH) * trackH))
+    : 0;
+  const maxScroll = Math.max(contentH - viewH, 1);
+  const maxThumb = Math.max(trackH - thumbH, 1);
+
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, maxThumb],
+    extrapolate: "clamp",
+  });
+
+  // brighter while scrolling, softer when idle
+  const wake = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (!awake.current) {
+      awake.current = true;
+      Animated.timing(fade, { toValue: 1, duration: 120, useNativeDriver: true }).start();
+    }
+    hideTimer.current = setTimeout(() => {
+      awake.current = false;
+      Animated.timing(fade, { toValue: IDLE_OPACITY, duration: 400, useNativeDriver: true }).start();
+    }, 900);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    };
+  }, []);
+
+  return (
+    <View style={[{ flex: 1, flexDirection: isRTL ? "row" : "row-reverse" }, style]}>
+      <Animated.ScrollView
+        {...rest}
+        style={{ flex: 1 }}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={10}
+        onLayout={(e: LayoutChangeEvent) => setViewH(e.nativeEvent.layout.height)}
+        onContentSizeChange={(_, h) => setContentH(h)}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: true, listener: wake }
+        )}
+      >
+        {children}
+      </Animated.ScrollView>
+
+      {scrollable && (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            {
+              width: trackWidth,
+              height: trackH,
+              alignSelf: "center",
+              opacity: fade,
+            },
+            isRTL ? { marginLeft: 15 } : { marginRight: 15 },
+          ]}
+        >
+          {/* soft track */}
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              width: trackWidth,
+              borderRadius: trackWidth / 2,
+              backgroundColor: colors.primary,
+              opacity: 0.15,
+            }}
+          />
+          {/* thumb */}
+          <Animated.View
+            style={{
+              width: trackWidth,
+              height: thumbH,
+              borderRadius: trackWidth / 2,
+              backgroundColor: colors.primary,
+              transform: [{ translateY }],
+            }}
+          />
+        </Animated.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>

package/src/index.ts

@@ -67,4 +67,5 @@ export {useArrivalDetection} from "./hooks/useArrivalDetection";
 export {default as Toggle} from "./components/ui/toggle";
 export {default as BackIcon} from "./components/ui/backIcon";
 export {default as SuccessScreen} from "./components/screens/sucessScreen";
-export {default as AnimatedSuccessIcon} from "./components/ui/AnimatedSuccessIcon";
+export {default as AnimatedSuccessIcon} from "./components/ui/AnimatedSuccessIcon";
+export {ScrollWithIndicator} from "./components/ui/scrollIndicator"