@towsila/expo-ui-library 1.9.0 → 2.0.0

package/package.json

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

package/src/components/screens/AddReportScreen.tsx

@@ -20,6 +20,7 @@ interface ReportProps {
   error?: string;
   textLabel?: string;
   selectLabel?:string;
+  t?: (key: string) => string;
 }
 
 export default function AddReport({
@@ -33,6 +34,7 @@ export default function AddReport({
   error,
   textLabel,
   selectLabel,
+  t,
 }: ReportProps) {
   const form = useSubmitReport({ onSubmit });
   const { colors } = useAppTheme();
@@ -90,7 +92,7 @@ export default function AddReport({
   );
 })}
         </View>
-        {form.errors.target && <ErrorMessage message={form.errors.target} />}
+        {form.errors.target && <ErrorMessage message={t?.(form.errors.target) || form.errors.target} />}
       </View>
 
       {/* Details textarea */}
@@ -109,7 +111,7 @@ export default function AddReport({
           numberOfLines={4}
           textAlignVertical="top"
           height={100}
-          error={form.errors.reason}
+          error={form.errors.reason ? t?.(form.errors.reason) : ""}
           onClearError={() => form.clearError("reason")}
           bgColor={colors.background.main}
         />

package/src/components/screens/VerificationCodeScreen.tsx

@@ -1,5 +1,5 @@
 import {  useState } from "react";
-import { Text, TouchableOpacity } from "react-native";
+import { I18nManager, Text, TouchableOpacity } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { textSize, Fonts} from "../../tokens/typography";
 import TemplateSubPage from "../reusable/templateSubPage";
@@ -17,6 +17,7 @@ interface VerificationCodeScreenProps {
   resendBtn?:string;
   onBack: ()=>void;
   loading?: boolean;
+  unit?: string;
 }
 
 export default function VerificationCodeScreen({
@@ -30,6 +31,7 @@ export default function VerificationCodeScreen({
   onBack,
   loading,
   resendBtn="Resend Code",
+  unit,
 }: VerificationCodeScreenProps) {
   const { colors } = useAppTheme();
   const [code, setCode] = useState("");
@@ -52,7 +54,7 @@ export default function VerificationCodeScreen({
       <SharpOtpInput length={4} onChange={setCode} />
       {count !== 0 ? (
         <Text style={{ textAlign: "center", color: colors.text.placeholder, fontSize: textSize.xs, fontFamily: Fonts.montserrat.regular}}>
-          {resendText}: {count} seconds
+          {resendText}: {count} {unit}
         </Text>
       ) : (
         <TouchableOpacity onPress={handleResend}>

package/src/components/screens/forgotPasswordScreen.tsx

@@ -15,6 +15,7 @@ interface ForgetPwScreenProps {
   inputLabel?:string;
   inputPlaceholder: string;
   onBack: ()=>void;
+  t?: (key:string) => string;
 }
 
 export default function ForgotPwScreen({
@@ -26,6 +27,7 @@ export default function ForgotPwScreen({
   inputLabel,
   inputPlaceholder,
   onBack,
+  t,
 }: ForgetPwScreenProps) {
 
   const form  = useForgotPasswordForm({onSubmit});
@@ -47,7 +49,7 @@ export default function ForgotPwScreen({
         label={inputLabel}
         keyboardType="email-address"
         iconLeft={(color) => <Email width={18} height={18} color={color}/>}
-        error={form.errors.input}
+        error={form.errors.input ? t?.(form.errors.input) : ""}
         autoCapitalize="none"
         autoComplete="email"
         textContentType="emailAddress"

package/src/components/screens/loginScreen.tsx

@@ -30,6 +30,7 @@ interface LoginScreenProps {
   noAccountLabel?: string;
   signUpLabel?: string;
   googleLabel?: string;
+  t?: (key: string) => string;
 }
 
 export default function LoginScreen({
@@ -50,6 +51,7 @@ export default function LoginScreen({
   noAccountLabel = "Don't have an account?",
   signUpLabel = "Create one",
   googleLabel,
+  t,
 }: LoginScreenProps) {
   const { colors, isDark } = useAppTheme();
   const form = useLoginForm({ onLogin });
@@ -67,7 +69,7 @@ export default function LoginScreen({
             onChangeText={(text)=>form.setValue("email", text)}
             placeholder={emailPlaceholder}
             keyboardType="email-address"
-            error={form.errors.email}
+            error={form.errors.email ? t?.(form.errors.email) : ""}
             autoCapitalize="none"
             autoComplete="email"
             textContentType="emailAddress"
@@ -88,7 +90,7 @@ export default function LoginScreen({
             secureTextEntry={!form.showPassword}
             textContentType="password"
             returnKeyType="done"
-            error={form.errors.password}
+            error={form.errors.password ? t?.(form.errors.password) : ""}
             onClearError={() => form.clearError("password")}
             iconLeft={(color)=><LockClosed width={18} height={18} color={color}/>}
           />

package/src/components/screens/onBoarding.tsx

@@ -4,6 +4,7 @@ import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
 import {Arrow} from "@towsila/icons";
 import SharpButton from "../ui/sharpButton";
+import { I18nManager } from "react-native";
 
 interface OnBoardingProps {
   onSkip: () => void;
@@ -48,7 +49,15 @@ export default function OnBoarding({
           >
             {skipLabel}
           </Text>
-            <Arrow width={20} height={20} color={colors.text.primary} style={styles.skipIcon}/>
+          <Arrow
+            width={20}
+            height={20}
+            color={colors.text.primary}
+            style={[
+              styles.skipIcon,
+              I18nManager.isRTL && { transform: [{ scaleX: -1 }] },
+            ]}
+          />        
         </TouchableOpacity>
       </View>
 

package/src/components/screens/resetPassword.tsx

@@ -21,6 +21,7 @@ interface ResetPasswordScreenProps {
   includeOldPassword?: boolean;
   onReset: (password: string, oldPassword?: string) => Promise<void>;
   errorMessage?: string;
+  t?: (key: string) => string;
 }
 
 export default function ResetPasswordScreen({
@@ -39,6 +40,7 @@ export default function ResetPasswordScreen({
   includeOldPassword = false,
   onReset,
   errorMessage,
+  t,
 }: ResetPasswordScreenProps) {
   const form = useResetPasswordForm({ onReset , includeOldPassword});
 
@@ -67,7 +69,7 @@ export default function ResetPasswordScreen({
           secureTextEntry={!form.showOldPassword}
           textContentType="password"
           returnKeyType="next"
-          error={form.errors.oldPassword}
+          error={form.errors.oldPassword ? t?.(form.errors.oldPassword) : ""}
           onClearError={() => form.clearError("oldPassword")}
         />
       )}
@@ -82,7 +84,7 @@ export default function ResetPasswordScreen({
         secureTextEntry={!form.showPassword}
         textContentType="password"
         returnKeyType="next"
-        error={form.errors.password}
+        error={form.errors.password ? t?.(form.errors.password) : ""}
         onClearError={() => form.clearError("password")}
       />
       {cardItems && (
@@ -104,7 +106,7 @@ export default function ResetPasswordScreen({
         secureTextEntry={!form.showConfirmPassword}
         textContentType="password"
         returnKeyType="done"
-        error={form.errors.confirmPassword}
+        error={form.errors.confirmPassword ? t?.(form.errors.confirmPassword) : ""}
         onClearError={() => form.clearError("confirmPassword")}
       />
     </TemplateSubPage>

package/src/components/screens/signUpScreen.tsx

@@ -28,6 +28,7 @@ generalTerms: string[];
 dialogTitle:string;
 dialogDescription: string;
 dialogButton: string;
+t?: (key: string) => string;
 }
 export default function SignupPage({
   title, 
@@ -46,7 +47,8 @@ export default function SignupPage({
   generalTerms,
   dialogTitle,
   dialogDescription,
-  dialogButton
+  dialogButton,
+  t,
 }: SignupProps) {
    const [showTerms, setShowTerms] = useState(true);
    const {colors} = useAppTheme();
@@ -74,6 +76,7 @@ export default function SignupPage({
         nextLabel={nextLabel}
         backLabel={backLabel}
         setErrors={setErrors}
+        translator={t}
        />
        {isLastStep && (
        <SharpButton

package/src/components/ui/PageTopBar.tsx

@@ -1,6 +1,6 @@
 import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
-import {  Text, TouchableOpacity, View } from "react-native";
+import {  I18nManager, Text, TouchableOpacity, View } from "react-native";
 import {ArrowBack} from "@towsila/icons";
 
 interface PageProps{
@@ -18,7 +18,7 @@ export default function PageTopBar({title, description, onBack}:PageProps){
                 flexDirection: "row", 
                 alignItems: "center", marginBottom: 10 }}>
                 <TouchableOpacity onPress={onBack}>
-                    <ArrowBack width={24} height={24} color={colors.text.primary}/>
+                    <ArrowBack width={24} height={24} color={colors.text.primary} style={[I18nManager.isRTL && { transform: [{ scaleX: -1 }] },]}/>
                 </TouchableOpacity>
                 <Text style={{ flex: 1, textAlign: "center", color: colors.text.primary, fontSize: textSize.xxl, fontFamily: Fonts.montserrat.bold }}>
                     {title}

package/src/components/ui/sharpDynamicForm.tsx

@@ -16,6 +16,7 @@ interface Props {
   onStepChange?: (step: number, total: number) => void;
   nextLabel?: string;
   backLabel?: string;
+  translator?: (key: string) => string;
 }
 
 function splitIntoSteps(fields: Field[]): Field[][] {
@@ -49,6 +50,7 @@ export const SharpDynamicForm: React.FC<Props> = ({
   onStepChange,
   nextLabel,
   backLabel,
+  translator,
 }) => {
   const [showPasswordField, setShowPasswordField] = useState<Record<string, boolean>>({});
   const [currentStep, setCurrentStep] = useState(0);
@@ -96,7 +98,7 @@ export const SharpDynamicForm: 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}
       />

package/src/components/ui/sharpInput.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import { Text, TextInput, TextInputProps, View, StyleSheet, TouchableOpacity } from "react-native";
+import { Text, TextInput, TextInputProps, View, StyleSheet, TouchableOpacity, I18nManager } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { textSize, Fonts } from "../../tokens/typography";
 import ErrorMessage from "./error";
 import SharpContainer from "./sharpContainer";
+
 interface InputProps extends TextInputProps {
   value: string;
   onChangeText: (text: string) => void;
@@ -44,76 +45,61 @@ export default function SharpInput({
     return colors.semantic.border; // default border color
   };
 
-  return (
-    <View style={{ marginBottom: 4 }}>
-      {label && (
-        <Text
-          style={{
-            color: colors.text.primary,
-            fontSize: textSize.xs,
-            fontFamily: Fonts.montserrat.semiBold,
-            marginBottom: 6,
-          }}
-        >
-          {label}
-        </Text>
-      )}
 
-      {/* Sharp container wraps the input + icons */}
-      <SharpContainer
-        height={height}
-        bgColor={bgColor ?? colors.background.main}
-        borderColor={getBorderColor()} // dynamic border
-        
-      >
-        <View style={styles.inputWrapper}>
-          {iconLeft && (
-            <View style={styles.iconLeft}>
-              {iconLeft(getBorderColor())}
-            </View>
-          )}
-          {prefix && (
-            <View style={styles.prefix}>
-              {prefix}
-            </View>
-          )}
+return (
+  <View style={{ marginBottom: 4 }}>
+    {label && (
+      <Text style={{ color: colors.text.primary, fontSize: textSize.xs, fontFamily: Fonts.montserrat.semiBold, marginBottom: 6 }}>
+        {label}
+      </Text>
+    )}
 
-          <TextInput
-            value={value}
-            onChangeText={(text) => {
-              onChangeText(text);
-              if (error) onClearError?.();
-            }}
-            placeholder={placeholder}
-            placeholderTextColor={colors.text.secondary}
-            onFocus={() => {
-              setFocused(true);
-              if (error) onClearError?.();
-            }}
-            onBlur={() => setFocused(false)}
-            style={[
-              styles.input,
-              {
-                color: colors.text.primary,
-                paddingLeft: iconLeft ? 42 : 16,
-                paddingRight: iconRight ? 42 : 16,
-                backgroundColor: "transparent", // let SharpContainer handle background
-              },
-            ]}
-            {...rest}
-          />
+    <SharpContainer height={height} bgColor={bgColor ?? colors.background.main} borderColor={getBorderColor()}>
+      <View style={styles.inputWrapper}>
+        {iconLeft && (
+          <View style={styles.iconSlot}>
+            {iconLeft(getBorderColor())}
+          </View>
+        )}
 
-          {iconRight && (
-            <TouchableOpacity onPress={onPressIconRight} style={styles.iconRight}>
-              {iconRight(colors.semantic.border)}
-            </TouchableOpacity>
-          )}
-        </View>
-      </SharpContainer>
+        {prefix && (
+          <View style={styles.prefix}>
+            {prefix}
+          </View>
+        )}
+
+        <TextInput
+          value={value}
+          onChangeText={(text) => {
+            onChangeText(text);
+            if (error) onClearError?.();
+          }}
+          placeholder={placeholder}
+          placeholderTextColor={colors.text.secondary}
+          onFocus={() => { setFocused(true); if (error) onClearError?.(); }}
+          onBlur={() => setFocused(false)}
+          style={[
+            styles.input,
+            {
+              color: colors.text.primary,
+              backgroundColor: "transparent",
+              textAlign: I18nManager.isRTL ? "right" : "left",
+            },
+          ]}
+          {...rest}
+        />
 
-      {error && <ErrorMessage message={error} />}
-    </View>
-  );
+        {iconRight && (
+          <TouchableOpacity onPress={onPressIconRight} style={styles.iconSlot}>
+            {iconRight(colors.semantic.border)}
+          </TouchableOpacity>
+        )}
+      </View>
+    </SharpContainer>
+
+    {error && <ErrorMessage message={error} />}
+  </View>
+);
 }
 
 const styles = StyleSheet.create({
@@ -121,17 +107,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 4, // small inner padding
-  },
-  iconLeft: {
-    position: "absolute",
-    left: 14,
-    zIndex: 1,
   },
-  iconRight: {
-    position: "absolute",
-    right: 14,
-    zIndex: 1,
+  iconSlot: {
+    paddingHorizontal: 12,
+    justifyContent: "center",
+    alignItems: "center",
   },
   input: {
     flex: 1,
@@ -143,6 +123,7 @@ const styles = StyleSheet.create({
   prefix:{
     flexDirection: "row",
     gap: 4,
-    alignItems:"center"
+    alignItems:"center",
+    paddingStart: 14,
   }
 });

package/src/utils/inputValidator/customValidator.ts

@@ -2,30 +2,29 @@ import { registerValidator } from "../../utils/inputValidator/registerValidator"
 
 registerValidator("text", (value, field) => {
   if (field.required !== false && !value.trim())
-    return `${field.label ?? field.name} is required`;
+    return "errors.required";
   return "";
 });
 
 registerValidator("email", (value) => {
-  if (!value.trim()) return "Email is required";
+  if (!value.trim()) return "errors.required";
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  if (!emailRegex.test(value.trim())) return "Invalid email address";
+  if (!emailRegex.test(value.trim())) return "errors.email";
   return "";
 });
 
 registerValidator("password", (value, field, formState) => {
-  if (!value) return "Please enter a password";
-  if (value.length < 8) return "Password must be at least 8 characters";
-   if (field.name === "confirmPassword" && value !== formState["password"]) {
-    console.log("PASSWORD MISMATCH:", value, "!==", formState["password"]); // ✓ Add this
-    return "Passwords do not match";
+  if (!value) return "errors.required";
+  if (value.length < 8) return "errors.passwordShort";
+  if (field.name === "confirmPassword" && value !== formState["password"]) {
+    return "errors.passwordMismatch";
   }
   return "";
 });
 
 registerValidator("phone", (value, field) => {
-  if (!value.trim()) return `${field.label ?? "Phone"} is required`;
+  if (!value.trim()) return "errors.required";
   const phoneRegex = /^0[567]\d{8}$/;
-  if (!phoneRegex.test(value.trim())) return "Invalid phone number";
+  if (!phoneRegex.test(value.trim())) return "errors.phoneInvalid";
   return "";
 });