@towsila/expo-ui-library 1.10.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.10.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/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/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/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/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 "";
 });