@towsila/expo-ui-library 3.2.5 → 3.3.0

package/package.json

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

package/src/components/screens/loginScreen.tsx

@@ -1,17 +1,16 @@
-import  ErrorMessage  from "../ui/error";
-import { textSize, Fonts } from "../../tokens/typography";
-import { useAppTheme } from "../../context/ThemeContext";
-import { useLoginForm } from "../../hooks/useLoginForm";
+
 import {
-  StyleSheet,
  Text, TouchableOpacity, View,
 } from "react-native";
-import TemplatePage from "../reusable/templatePage";
+
+import Input from "../ui/input";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLoginForm } from "../../hooks/useLoginForm";
+import { useLanguage } from "../../context/LanguageContext";
+import ScreenHeader from "../ui/PageTopBar";
 import SharpButton from "../ui/sharpButton";
-import SharpInput from "../ui/sharpInput";
-import Google from "../../assets/icons/google.svg"
+import { Fonts, textSize } from "../../tokens/typography";
 import SharpContainer from "../ui/sharpContainer";
-import {Email, Eye,EyeOff, LockClosed } from "@towsila/icons";
 interface LoginScreenProps {
   title?: string;
   subtitle?: string;
@@ -53,20 +52,17 @@ export default function LoginScreen({
   googleLabel,
   t,
 }: LoginScreenProps) {
-  const { colors, isDark } = useAppTheme();
+  const { colors } = useAppTheme();
   const form = useLoginForm({ onLogin });
-
+  const {isRTL} = useLanguage();
   return (
-    <TemplatePage title={title}
-    subtitle={subtitle}
-    body={
-      <>
-        {errorMessage && <ErrorMessage message={errorMessage} position="center" fontSize={textSize.md} />}
-        <View style={{ marginBottom: 15 }}>
-          <SharpInput
+    <View style={{ flex: 1, paddingHorizontal: 20, paddingTop: 60 ,}}>
+        <ScreenHeader title={title} description={subtitle} />
+    <View style={{ marginBottom: 20, marginTop: 50, padding: 15, borderRadius: 10, gap: 20 }}>
+        <Input
             label={emailLabel}
             value={form.values.email}
-            onChangeText={(text)=>form.setValue("email", text)}
+            onChangeText={(text) => form.setValue("email", text)}
             placeholder={emailPlaceholder}
             keyboardType="email-address"
             error={form.errors.email ? t?.(form.errors.email) : ""}
@@ -75,88 +71,74 @@ export default function LoginScreen({
             textContentType="emailAddress"
             returnKeyType="next"
             onClearError={() => form.clearError("email")}
-            iconLeft={(color)=><Email width={18} height={18} color={color}/>}
-          />
-        </View>
-
-        <View style={{ marginBottom: 20 }}>
-          <SharpInput
+            iconLeft={"mail-outline"} 
+        />
+        <Input
             label={passwordLabel}
             value={form.values.password}
             onChangeText={(value) => form.setValue("password", value)}
             placeholder={passwordPlaceholder}
-            iconRight={form.showPassword ? (color)=><EyeOff width={18} height={18} color={color}/> : (color)=><Eye width={18} height={18} color={color}/>}
+            iconRight={form.showPassword ? "eye-off-outline" : "eye-outline"}
             onPressIconRight={() => form.setShowPassword(!form.showPassword)}
             secureTextEntry={!form.showPassword}
             textContentType="password"
             returnKeyType="done"
             error={form.errors.password ? t?.(form.errors.password) : ""}
             onClearError={() => form.clearError("password")}
-            iconLeft={(color)=><LockClosed width={18} height={18} color={color}/>}
-          />
+            iconLeft={"lock-closed-outline"} 
+        />
+        <View style={{gap:10}}>
+            <SharpButton text={loginButtonLabel} bgColor={colors.primary} onPress={form.handleSubmit} height={50} loading={form.loading} />
+            <TouchableOpacity onPress={onForgotPassword} activeOpacity={0.7} style={{ alignSelf: isRTL ?"flex-start" :"flex-end" }}>
+                <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
+                    {forgotPasswordLabel}
+                </Text>
+            </TouchableOpacity>
         </View>
-
-        <SharpButton text={loginButtonLabel} bgColor={colors.primary} onPress={form.handleSubmit} height={50} loading={form.loading}/>
-
-        <TouchableOpacity onPress={onForgotPassword} activeOpacity={0.7} style={{ alignSelf: "flex-end", marginTop: 14 }}>
-          <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
-            {forgotPasswordLabel}
-          </Text>
-        </TouchableOpacity>
-      </>
-    }
-    footer={
-      <View style={{flex: 1, justifyContent: "space-between"}}>
+    </View>
+    
+    <View style={{ flex: 1, justifyContent: "space-between" }}>
         {(onGoogleLogin) && (
-          <View>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, marginVertical: 20, marginHorizontal: 20 }}>
-              <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
-              <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
-                {dividerLabel}
-              </Text>
-              <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
+            <View>
+                <View style={{ flexDirection: isRTL? "row-reverse": "row", alignItems: "center", gap: 12, marginVertical: 20, marginHorizontal: 20 }}>
+                    <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
+                    <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
+                        {dividerLabel}
+                    </Text>
+                    <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
+                </View>
+                <View style={{ marginHorizontal: 28 }}>
+                    <SharpContainer
+                        bgColor={colors.background.main}
+                        borderColor={colors.text.primary}
+                        height={50}
+                    >
+                        <TouchableOpacity style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 10 }} onPress={onGoogleLogin}>
+                            {/* <Google width={20} height={20} /> */}
+                            <Text style={{
+                                fontSize: textSize.sm,
+                                fontFamily: Fonts.montserrat.semiBold,
+                                color: colors.text.primary,
+                            }}>
+                                {googleLabel}
+                            </Text>
+                        </TouchableOpacity>
+                    </SharpContainer>
+                </View>
             </View>
-            <View style={{marginHorizontal: 28}}>
-            <SharpContainer
-            bgColor={colors.background.main}
-            borderColor={colors.text.primary}
-            height={50}
-          >
-            <TouchableOpacity style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 10 }} onPress={onGoogleLogin}>
-              <Google width={20} height={20} />
-              <Text style={{
-                fontSize: textSize.sm,
-                fontFamily: Fonts.montserrat.semiBold,
-                color: colors.text.primary,
-              }}>
-                {googleLabel}
-              </Text>
-            </TouchableOpacity>
-          </SharpContainer>
-          </View>
-          </View>
         )}
 
-        <View style={{ flexDirection: "row", justifyContent: "center", gap: 4, marginBottom: 40 }}>
-          <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
-            {noAccountLabel}
-          </Text>
-          <TouchableOpacity onPress={onSignUp} activeOpacity={0.7}>
-            <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
-              {signUpLabel}
+        <View style={{ flexDirection: "row", justifyContent: "center", gap: 4, marginBottom: 70 }}>
+            <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
+                {noAccountLabel}
             </Text>
-          </TouchableOpacity>
+            <TouchableOpacity onPress={onSignUp} activeOpacity={0.7}>
+                <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
+                    {signUpLabel}
+                </Text>
+            </TouchableOpacity>
         </View>
-      </View>
-    }
-    />
+    </View>
+    </View>
   );
-}
-
-
-const styles = StyleSheet.create({
-  socialIcons:{
-    alignItems: "center", 
-    justifyContent: "center"
-  }
-})
+}

package/src/components/ui/PageTopBar.tsx

@@ -8,7 +8,7 @@ import { useLanguage } from "../../context/LanguageContext";
 interface PageProps{
     title: string,
     description: string;
-    onBack: ()=>void;
+    onBack?: ()=>void;
 }
 
 export default function ScreenHeader({title, description, onBack}:PageProps){

package/src/components/ui/input.tsx

@@ -1,15 +1,16 @@
 import React, { useState, ComponentProps } from "react";
 import { StyleProp, Text, TextInput, TextInputProps, View, ViewProps } from "react-native";
-import { useAppTheme } from "../../context/ThemeContext";
-import { textSize, Fonts } from "../../tokens/typography";
 import { Ionicons } from "@expo/vector-icons";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
 import ErrorMessage from "./error";
 interface InputProps extends TextInputProps {
   value: string;
   onChangeText: (text: string) => void;
   placeholder: string;
-  iconLeft?: ComponentProps<typeof Ionicons>["name"];
-  iconRight?: ComponentProps<typeof Ionicons>["name"];
+  iconLeft?: ComponentProps<typeof Ionicons>["name"] ;
+  iconRight?: ComponentProps<typeof Ionicons>["name"] ;
   onPressIconRight?: () => void;
   error?: string;
   label?:string;
@@ -17,6 +18,8 @@ interface InputProps extends TextInputProps {
   style?: StyleProp<ViewProps>;
   labelFontFamily?: string;
   textFontFamily?: string;
+  prefix?: React.ReactNode;
+  bgColor?:string;
 }
 
 export default function Input({
@@ -32,10 +35,13 @@ export default function Input({
   onClearError,
   labelFontFamily = Fonts.montserrat.semiBold,
   textFontFamily = Fonts.montserrat.regular,
+  prefix,
+  bgColor,
   ...rest
 }: InputProps) {
   const { colors } = useAppTheme();
   const [focused, setFocused] = useState(false);
+  const {isRTL} = useLanguage();
   return (
     <View style={[style, {marginBottom: 4}]}>
       {label &&  (
@@ -43,7 +49,8 @@ export default function Input({
           color: colors.text.primary, 
           fontSize: textSize.xs, 
           fontFamily: labelFontFamily, 
-          marginBottom: 6, 
+          marginBottom: 6,
+          textAlign: isRTL ? "left" :"right" 
         }}>
           {label}
         </Text>
@@ -56,11 +63,11 @@ export default function Input({
           size={18}
           color={error ? colors.semantic.error : focused ? colors.primary : colors.text.secondary}
           style={{
-              position: "absolute",
-              left: 14,
-              top: "50%",
-              transform: [{ translateY: -9 }],
-              zIndex: 1,
+            position: "absolute",
+            [isRTL ? "left" : "right"]: 14,
+            top: "50%",
+            transform: [{ translateY: -9 }],
+            zIndex: 1,
             }}
           />
         )}
@@ -82,18 +89,23 @@ export default function Input({
             height: 50,
             borderRadius: 10,
             fontSize: textSize.sm,
-            backgroundColor: colors.background.main,
+            backgroundColor: bgColor,
             color: colors.text.primary,
             fontFamily: textFontFamily,
-            paddingLeft: iconLeft ? 42 : 16,
-            paddingRight: iconRight ? 42 : 16,
+
+            direction: isRTL ? "rtl" : "ltr",
+            textAlign: isRTL ? "right" : "left",
+
+            paddingStart: iconLeft ? 42 : 16,
+            paddingEnd: iconRight ? 42 : 16,
+
             borderColor: error
-              ? colors.semantic.error
-              : focused
-              ? colors.primary
-              : colors.semantic.border,
-            borderWidth: error ? 1 : focused ? 1.5 : 0.5,
-          }}
+                ? colors.semantic.error
+                : focused
+                ? colors.primary
+                : colors.semantic.border,
+            borderWidth: error ? 1.5 : focused ? 1.5 : 1,
+            }}
           {...rest}
         />
         {/* icon right */}
@@ -104,17 +116,17 @@ export default function Input({
             color={colors.text.secondary}
             onPress={onPressIconRight}
             style={{
-              position: "absolute",
-              right: 14,
-              top: "50%",
-              transform: [{ translateY: -9 }],
-              zIndex: 1,
-            }}
+                position: "absolute",
+                [isRTL ? "right" : "left"]: 14,
+                top: "50%",
+                transform: [{ translateY: -9 }],
+                zIndex: 1,
+                }}
           />
         )}
       </View>
       {error &&  (
-        <ErrorMessage message={error}/>
+        <ErrorMessage message={error} position={isRTL ? "left" : "right"}/>
       )}
     </View>
   );

package/src/components/ui/toast.tsx

@@ -105,7 +105,7 @@ export default function Toast({
               backgroundColor: toastStyle.background,
               opacity,
               transform: [{ translateY }],
-              flexDirection: isRTL ? "row-reverse" : "row",
+              flexDirection: isRTL ? "row" : "row-reverse",
             },
           ]}
         >