@towsila/expo-ui-library 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.1.1",
+    "@towsila/icons": "^1.0.1",
     "expo-linear-gradient": "*",
     "expo-secure-store": "*",
     "react-native-svg": "*"

package/src/components/screens/forgotPasswordScreen.tsx

@@ -3,7 +3,7 @@ import Input from "../ui/input";
 import "../../utils/inputValidator/customValidator";
 import { useForgotPasswordForm } from "../../hooks/useForgotPasswordForm";
 import SharpInput from "../ui/sharpInput";
-import  MailIcon from "../../assets/customIcons/email.svg";
+import  {Email} from "@towsila/icons";
 
 
 
@@ -47,7 +47,7 @@ export default function ForgotPwScreen({
         placeholder={inputPlaceholder}
         label={inputLabel}
         keyboardType="email-address"
-        iconLeft={(color) => <MailIcon width={18} height={18} color={color}/>}
+        iconLeft={(color) => <Email width={18} height={18} color={color}/>}
         error={form.errors.input}
         autoCapitalize="none"
         autoComplete="email"

package/src/components/screens/loginScreen.tsx

@@ -2,9 +2,7 @@ import  ErrorMessage  from "../ui/error";
 import { textSize, Fonts } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
 import { useLoginForm } from "../../hooks/useLoginForm";
-import { FontAwesome } from "@expo/vector-icons";
 import {
-  Image,
   StyleSheet,
  Text, TouchableOpacity, View,
 } from "react-native";
@@ -13,10 +11,7 @@ import SharpButton from "../ui/sharpButton";
 import SharpInput from "../ui/sharpInput";
 import Google from "../../assets/icons/google.svg"
 import SharpContainer from "../ui/sharpContainer";
-import MailIcon from "../../assets/customIcons/email.svg";
-import EyeIcon from "../../assets/customIcons/eye.svg";
-import EyeOffIcon from "../../assets/customIcons/eye_off.svg";
-import LockIcon from "../../assets/customIcons/lock_closed.svg"
+import {Email, Eye,EyeOff, LockClosed } from "@towsila/icons";
 interface LoginScreenProps {
   title?: string;
   subtitle?: string;
@@ -78,7 +73,7 @@ export default function LoginScreen({
             textContentType="emailAddress"
             returnKeyType="next"
             onClearError={() => form.clearError("email")}
-            iconLeft={(color)=><MailIcon width={18} height={18} color={color}/>}
+            iconLeft={(color)=><Email width={18} height={18} color={color}/>}
           />
         </View>
 
@@ -88,14 +83,14 @@ export default function LoginScreen({
             value={form.values.password}
             onChangeText={(value) => form.setValue("password", value)}
             placeholder={passwordPlaceholder}
-            iconRight={form.showPassword ? (color)=><EyeIcon width={18} height={18} color={color}/> : (color)=><EyeOffIcon width={18} height={18} color={color}/>}
+            iconRight={form.showPassword ? (color)=><Eye width={18} height={18} color={color}/> : (color)=><EyeOff width={18} height={18} color={color}/>}
             onPressIconRight={() => form.setShowPassword(!form.showPassword)}
             secureTextEntry={!form.showPassword}
             textContentType="password"
             returnKeyType="done"
             error={form.errors.password}
             onClearError={() => form.clearError("password")}
-            iconLeft={(color)=><LockIcon width={18} height={18} color={color}/>}
+            iconLeft={(color)=><LockClosed width={18} height={18} color={color}/>}
           />
         </View>
 

package/src/components/screens/onBoarding.tsx

@@ -3,8 +3,7 @@ import PageIndicator from "../ui/pageIndicator";
 import Button from "../ui/button";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
-import Arrow from "../../assets/customIcons/arrow.svg";
-import ArrowDark from "../../assets/customIcons/arrow_dark.svg";
+import {Arrow} from "@towsila/icons";
 import SharpButton from "../ui/sharpButton";
 
 interface OnBoardingProps {

package/src/components/screens/resetPassword.tsx

@@ -1,11 +1,8 @@
 import TemplateSubPage from "../reusable/templateSubPage";
-import Input from "../ui/input";
 import { useResetPasswordForm } from "../../hooks/useResetPasswordForm";
 import PasswordRequirementsCard from "../ui/passwordRequirmentCard";
 import SharpInput from "../ui/sharpInput";
-import  LockIcon from "../../assets/customIcons/lock_closed.svg";
-import  EyeOffIcon from "../../assets/customIcons/eye_off.svg";
-import  EyeIcon from "../../assets/customIcons/eye.svg";
+import  {LockClosed, EyeOff, Eye} from "@towsila/icons";
 
 
 interface ResetPasswordScreenProps {
@@ -61,10 +58,10 @@ export default function ResetPasswordScreen({
           value={form.oldPassword}
           onChangeText={form.setOldPassword}
           placeholder={oldPasswordPlaceholder}
-          iconLeft={(color) => <LockIcon width={18} height={18} color={color} />}
+          iconLeft={(color) => <LockClosed width={18} height={18} color={color} />}
           iconRight={form.showOldPassword
-            ? (color) => <EyeOffIcon width={18} height={18} color={color} />
-            : (color) => <EyeIcon width={18} height={18} color={color} />
+            ? (color) => <EyeOff width={18} height={18} color={color} />
+            : (color) => <Eye width={18} height={18} color={color} />
           }
           onPressIconRight={() => form.setShowOldPassword(!form.showOldPassword)}
           secureTextEntry={!form.showOldPassword}
@@ -79,8 +76,8 @@ export default function ResetPasswordScreen({
         value={form.password}
         onChangeText={form.setPassword}
         placeholder={passwordPlaceholder}
-        iconLeft={(color) => <LockIcon width={18} height={18} color={color}/>}
-        iconRight={form.showPassword ? (color)=><EyeOffIcon width={18} height={18} color={color}/> : (color)=><EyeIcon width={18} height={18} color={color}/>}
+        iconLeft={(color) => <LockClosed width={18} height={18} color={color}/>}
+        iconRight={form.showPassword ? (color)=><EyeOff width={18} height={18} color={color}/> : (color)=><Eye width={18} height={18} color={color}/>}
         onPressIconRight={() => form.setShowPassword(!form.showPassword)}
         secureTextEntry={!form.showPassword}
         textContentType="password"
@@ -101,8 +98,8 @@ export default function ResetPasswordScreen({
         value={form.confirmPassword}
         onChangeText={form.setConfirmPassword}
         placeholder={confirmPasswordPlaceholder}
-        iconLeft={(color) => <LockIcon width={18} height={18} color={color}/>}
-        iconRight={form.showConfirmPassword ? (color)=><EyeOffIcon width={18} height={18} color={color}/> : (color)=><EyeIcon width={18} height={18} color={color}/>}
+        iconLeft={(color) => <LockClosed width={18} height={18} color={color}/>}
+        iconRight={form.showConfirmPassword ? (color)=><EyeOff width={18} height={18} color={color}/> : (color)=><Eye width={18} height={18} color={color}/>}
         onPressIconRight={() => form.setShowConfirmPassword(!form.showConfirmPassword)}
         secureTextEntry={!form.showConfirmPassword}
         textContentType="password"

package/src/components/screens/settingScreen.tsx

@@ -5,7 +5,7 @@ import { textSize, Fonts } from "../../tokens/typography"
 import SharpButton from "../ui/sharpButton";
 import TemplatePage from "../reusable/templatePage";
 import { SharpContainer } from "../..";
-import Arrow from "../../assets/customIcons/arrow.svg";
+import {Arrow} from "@towsila/icons";
 
 interface Props{
     title: string;

package/src/components/ui/PageTopBar.tsx

@@ -1,9 +1,7 @@
 import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
-import { Ionicons } from "@expo/vector-icons";
 import {  Text, TouchableOpacity, View } from "react-native";
-import ArrowBack from "../../assets/customIcons/arrow_back.svg";
-import ArrowBackDark from "../../assets/customIcons/arrow_back_dark.svg";
+import {ArrowBack} from "@towsila/icons";
 
 interface PageProps{
     title: string,

package/src/components/ui/asidebar.tsx

@@ -6,7 +6,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Dimensions } from "react-native";
-import LogoutIcon from "../../assets/customIcons/logout.svg";
+import {Logout} from "@towsila/icons";
 import ThemeToggle from "./themeToggle";
 const SIDEBAR_WIDTH = Dimensions.get("window").width * 0.7;
 
@@ -126,7 +126,7 @@ export default function AsideBar({logo, menu, onLogout, logoutLabel, onNavigate,
                 {/* bottom container */}
                 <View style={{ gap: 16, paddingHorizontal: 16, }}>
                     <TouchableOpacity onPress={onLogout} style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                        <LogoutIcon width={22} height={22} color={colors.semantic.error}/>
+                        <Logout width={22} height={22} color={colors.semantic.error}/>
                         <Text style={{
                             fontFamily: Fonts.montserrat.regular,
                             fontSize: textSize.md,

package/src/components/ui/dynamicForm.tsx

@@ -1,14 +1,11 @@
 import { useState } from "react";
-import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import Input from "./input";
 import { Field } from "../../types/formFields";
 import { useAppTheme } from "../../context/ThemeContext";
 import { validateForm } from "../../utils/inputValidator/registerValidator";
-import { Ionicons } from "@expo/vector-icons";
 import { Fonts, textSize } from "../../tokens/typography";
-import SharpInput from "./sharpInput";
-import Arrow from "../../assets/customIcons/arrow.svg";
-import ArrowBack from "../../assets/customIcons/arrow_back.svg"
+import {Arrow, ArrowBack} from "@towsila/icons";
 interface Props {
   fields: Field[];
   formState: Record<string, string>;

package/src/components/ui/sharpDynamicForm.tsx

@@ -7,10 +7,7 @@ import { validateForm } from "../../utils/inputValidator/registerValidator";
 import { Ionicons } from "@expo/vector-icons";
 import { Fonts, textSize } from "../../tokens/typography";
 import SharpInput from "./sharpInput";
-import Arrow from "../../assets/customIcons/arrow.svg";
-import ArrowBack from "../../assets/customIcons/arrow_back.svg";
-import EyeIcon from "../../assets/customIcons/eye.svg";
-import EyeOffIcon from "../../assets/customIcons/eye_off.svg"
+import {Arrow, ArrowBack, Eye, EyeOff} from "@towsila/icons";
 interface Props {
   fields: Field[];
   formState: Record<string, string>;
@@ -74,8 +71,8 @@ export const SharpDynamicForm: React.FC<Props> = ({
         iconRight={
           field.secureTextEntry
             ? (color) => showPasswordField[field.name]
-            ? <EyeOffIcon width={18} height={18} color={color} />
-            : <EyeIcon width={18} height={18} color={color} />
+            ? <EyeOff width={18} height={18} color={color} />
+            : <Eye width={18} height={18} color={color} />
           : undefined
         }
         placeholder={field.placeholder}

package/src/components/ui/themeToggle.tsx

@@ -1,8 +1,7 @@
 import { useRef, useEffect } from "react";
 import { Animated, TouchableOpacity, View, Text } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
-import LightModeIcon from "../../assets/customIcons/light_mode.svg";
-import DarkModeIcon from "../../assets/customIcons/dark_mode.svg";
+import {LightMode, DarkMode} from "@towsila/icons";
 import { Fonts, textSize } from "../../tokens/typography";
 import Svg, { Path } from "react-native-svg";
 
@@ -31,8 +30,8 @@ export default function ThemeToggle({ label }: TextTheme) {
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
       {isDark
-        ? <DarkModeIcon width={22} height={22} color={colors.text.primary} />
-        : <LightModeIcon width={24} height={24} color={colors.text.primary} />
+        ? <DarkMode width={22} height={22} color={colors.text.primary} />
+        : <LightMode width={24} height={24} color={colors.text.primary} />
       }
 
       {label && (
@@ -87,8 +86,8 @@ export default function ThemeToggle({ label }: TextTheme) {
             elevation: 4,
           }}>
             {isDark
-              ? <LightModeIcon width={20} height={20} color={colors.background.main} />
-              : <DarkModeIcon width={16} height={16} color={colors.background.main} />
+              ? <LightMode width={20} height={20} color={colors.background.main} />
+              : <DarkMode width={16} height={16} color={colors.background.main} />
             }
           </Animated.View>
         </View>

package/src/components/ui/toast.tsx

@@ -8,10 +8,7 @@ import {
 } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
-import CheckMarkIcon from "../../assets/customIcons/checkmark.svg";
-import WarningIcon from "../../assets/customIcons/warning.svg";
-import InformationIcon from "../../assets/customIcons/information.svg";
-import CloseIcon from "../../assets/customIcons/close.svg";
+import {CheckMark, Warning, Information,Close } from "@towsila/icons";
 interface ToastProps {
   visible: boolean;
   message: string;
@@ -74,22 +71,22 @@ export default function Toast({
   success: {
     background: colors.semantic.success,
     text: contentColor,
-    icon: <CheckMarkIcon width={20} height={20} color={contentColor} />,
+    icon: <CheckMark width={20} height={20} color={contentColor} />,
   },
   error: {
     background: colors.semantic.error,
     text:contentColor,
-    icon: <CloseIcon width={20} height={20} color={contentColor}/>,
+    icon: <Close width={20} height={20} color={contentColor}/>,
   },
   warning: {
     background: colors.semantic.warning,
     text: contentColor,
-    icon: <WarningIcon width={20} height={20} color={contentColor}/>,
+    icon: <Warning width={20} height={20} color={contentColor}/>,
   },
   info: {
     background: colors.semantic.border,
     text: contentColor,
-    icon: <InformationIcon width={20} height={20} color={contentColor}/>,
+    icon: <Information width={20} height={20} color={contentColor}/>,
   },
 }[type];
   return (