@towsila/expo-ui-library 1.0.0

package/src/context/LocationPermissionProvider.tsx

@@ -0,0 +1,106 @@
+import * as Location from "expo-location";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+  useRef,
+  useState,
+  ReactNode,
+} from "react";
+
+type Coords = {
+  latitude: number;
+  longitude: number;
+} | null;
+
+type LocationPermissionContextType = {
+  granted: boolean | null; // null = still checking
+  coords: Coords;
+  recheck: () => Promise<void>;
+};
+
+const LocationPermissionContext = createContext<
+  LocationPermissionContextType | undefined
+>(undefined);
+
+export const LocationPermissionProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [granted, setGranted] = useState<boolean | null>(null);
+  const [coords, setCoords] = useState<Coords>(null);
+  const subscriptionRef = useRef<Location.LocationSubscription | null>(null);
+
+  const startWatching = useCallback(async () => {
+    subscriptionRef.current?.remove();
+
+    subscriptionRef.current = await Location.watchPositionAsync(
+      {
+        accuracy: Location.Accuracy.Balanced,
+        timeInterval: 5000,
+        distanceInterval: 20,
+      },
+      (location) => {
+        setCoords({
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude,
+        });
+      }
+    );
+  }, []);
+
+  const recheck = useCallback(async () => {
+    const { status } = await Location.getForegroundPermissionsAsync();
+    console.log("CURRENT PERMISSION STATUS:", status);
+    let finalStatus = status;
+    if (status !== "granted") {
+      const { status: newStatus } =
+        await Location.requestForegroundPermissionsAsync();
+      finalStatus = newStatus;
+    }
+
+    const isGranted = finalStatus === "granted";
+    setGranted(isGranted);
+
+    if (isGranted) {
+      try {
+        const initial = await Location.getCurrentPositionAsync({
+          accuracy: Location.Accuracy.Balanced,
+        });
+        setCoords({
+          latitude: initial.coords.latitude,
+          longitude: initial.coords.longitude,
+        });
+      } catch {
+        // watcher below will populate it shortly
+      }
+      await startWatching();
+    }
+  }, [startWatching]);
+
+  useEffect(() => {
+    recheck();
+
+    return () => {
+      subscriptionRef.current?.remove();
+    };
+  }, [recheck]);
+
+  return (
+    <LocationPermissionContext.Provider value={{ granted, coords, recheck }}>
+      {children}
+    </LocationPermissionContext.Provider>
+  );
+};
+
+export const useLocationPermission = () => {
+  const context = useContext(LocationPermissionContext);
+  if (!context) {
+    throw new Error(
+      "useLocationPermission must be used inside LocationPermissionProvider"
+    );
+  }
+  return context;
+};

package/src/context/ThemeContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { useColorScheme } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AppTheme } from "../tokens/themes";
+
+const THEME_KEY = "app_theme_preference";
+
+type ThemeContextValue = {
+  isDark: boolean;
+  scheme: "light" | "dark";
+  colors: AppTheme;
+  toggleTheme: () => void;
+  isLoaded: boolean;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({
+  lightTheme,
+  darkTheme,
+  children,
+}: {
+  lightTheme: AppTheme;
+  darkTheme: AppTheme;
+  children: React.ReactNode;
+}) {
+  const systemScheme = useColorScheme() ?? "light";
+  console.log("RAW useColorScheme() result:", useColorScheme());
+  console.log("systemScheme used:", systemScheme);
+  const [override, setOverride] = useState<"light" | "dark" | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    AsyncStorage.getItem(THEME_KEY).then((saved) => {
+      if (saved === "light" || saved === "dark") setOverride(saved);
+      setIsLoaded(true);
+    });
+  }, []);
+
+  const scheme = override ?? (systemScheme as "light" | "dark");
+  const isDark = scheme === "dark";
+  console.log("ThemeContext — scheme:", scheme, "isDark:", isDark, "lightTheme.background.main:", lightTheme.background.main, "darkTheme.background.main:", darkTheme.background.main);
+
+
+  const toggleTheme = async () => {
+    const next = isDark ? "light" : "dark";
+    setOverride(next);
+    await AsyncStorage.setItem(THEME_KEY, next);
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDark,
+        scheme,
+        colors: isDark ? darkTheme : lightTheme,
+        toggleTheme,
+        isLoaded,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useAppTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useAppTheme must be used inside ThemeProvider");
+  return ctx;
+}

package/src/hooks/useCountdown.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect, useCallback } from "react";
+
+export function useCountdown(initialSeconds: number) {
+  const [count, setCount] = useState(initialSeconds);
+
+  useEffect(() => {
+    if (count <= 0) return;
+
+    const timer = setInterval(() => {
+      setCount((prev) => (prev <= 1 ? 0 : prev - 1));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [count]);
+
+  const reset = useCallback((seconds: number = initialSeconds) => {
+    setCount(seconds);
+  }, [initialSeconds]);
+
+  return { count, reset };
+}

package/src/hooks/useForgotPasswordForm.ts

@@ -0,0 +1,46 @@
+// import { useState } from "react";
+// import { FieldConfig } from "../types/validateForm";
+// import { validateForm } from "../utils/inputValidator/registerValidator";
+// import "../utils/inputValidator/customValidator";
+
+import { useForm } from "./useForm";
+
+// export function useForgotPasswordForm({
+//   onSubmit,
+// }: {
+//   onSubmit: (input: string) => Promise<void>;
+// }) {
+//   const [input, setInput] = useState("");
+//   const [errors, setErrors] = useState<Record<string, string>>({});
+
+//   const fields: FieldConfig[] = [
+//     { name: "input", type: "email", label: "Email" },
+//   ];
+
+//   const clearError = (field: string) => {
+//     setErrors((prev) => ({ ...prev, [field]: "" }));
+//   };
+
+//   const handleSubmit = async () => {
+//     const newErrors = validateForm(fields, { input });
+//     setErrors(newErrors);
+//     if (Object.keys(newErrors).length > 0) return;
+
+//     await onSubmit(input);
+//     setInput("");
+//   };
+
+//   return {
+//     input, setInput,
+//     errors, clearError,
+//     handleSubmit,
+//   };
+// }
+
+export function useForgotPasswordForm({ onSubmit }: { onSubmit: (input: string) => Promise<void> }) {
+  return useForm({
+    initialValues: { input: "" },
+    fields: [{ name: "input", type: "email", label: "Email" }],
+    onSubmit: async (values) => onSubmit(values.input),
+  });
+}

package/src/hooks/useForm.ts

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { validateForm } from "../utils/inputValidator/registerValidator";
+import { FieldConfig } from "../types/validateForm";
+
+interface UseFormProps<T extends Record<string, string>> {
+  initialValues: T;
+  fields: FieldConfig[];
+  onSubmit: (values: T) => Promise<void>;
+}
+
+export function useForm<T extends Record<string, string>>({
+  initialValues,
+  fields,
+  onSubmit,
+}: UseFormProps<T>) {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  const setValue = (key: keyof T, value: string) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const clearError = (field: string) => {
+    setErrors((prev) => ({ ...prev, [field]: "" }));
+  };
+
+  const handleSubmit = async () => {
+    const newErrors = validateForm(fields, values);
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return;
+    setLoading(true);
+    try {
+      await onSubmit(values);
+      setValues(initialValues);
+    } catch (err: any) {
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    values,
+    setValue,
+    errors,
+    clearError,
+    handleSubmit,
+    loading,
+    setErrors,
+  };
+}

package/src/hooks/useLoginForm.ts

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { useForm } from "./useForm";
+
+export function useLoginForm({
+  onLogin,
+}: {
+  onLogin: (email: string, password: string) => Promise<void>;
+}) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const form = useForm({
+    initialValues: { email: "", password: "" },
+    fields: [
+      { name: "email", type: "email", required: true },
+      { name: "password", type: "password", required: true, minLength: 8 },
+    ],
+    onSubmit: async (values) => onLogin(values.email, values.password),
+  });
+
+  return {
+    ...form,
+    showPassword,
+    setShowPassword,
+  };
+}

package/src/hooks/useResetPasswordForm.ts

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { FieldConfig } from "../types/validateForm";
+import { validateForm } from "../utils/inputValidator/registerValidator";
+import "../utils/inputValidator/customValidator";
+
+export function useResetPasswordForm({
+  onReset,
+  includeOldPassword = false,
+}: {
+  onReset: (password: string, oldPassword?: string) => Promise<void>;
+  includeOldPassword?: boolean;
+}) {
+  const [oldPassword, setOldPassword] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  const clearError = (field: string) => {
+    setErrors((prev) => ({ ...prev, [field]: "" }));
+  };
+
+  const handleSubmit = async () => {
+    const fields: FieldConfig[] = [
+      ...(includeOldPassword ? 
+      [{ name: "oldPassword", type: "password", label: "Old Password" }] : []),
+      { name: "password", type: "password", label: "Password" },
+      { name: "confirmPassword", type: "confirmPassword", label: "Confirm Password" },
+    ];
+
+    const formValues = {
+      ...(includeOldPassword ? { oldPassword } : {}),
+      password,
+      confirmPassword,
+    };
+    const newErrors = validateForm(fields, formValues);
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return;
+    setLoading(true);
+    try{
+      await onReset(password, includeOldPassword ? oldPassword : undefined);
+      setOldPassword("");
+      setPassword("");
+      setConfirmPassword("");
+    }catch(err:any){
+      throw err;
+    }finally{
+      setLoading(false);
+    }
+    
+  };
+
+  const passwordChecks = [
+    password.length >= 8,
+    /[a-zA-Z]/.test(password),
+    /[0-9]/.test(password),
+    /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  ];
+
+  return {
+    oldPassword, setOldPassword,
+    password, setPassword,
+    confirmPassword, setConfirmPassword,
+    showOldPassword, setShowOldPassword,
+    showPassword, setShowPassword,
+    showConfirmPassword, setShowConfirmPassword,
+    errors, clearError,
+    handleSubmit,
+    passwordChecks,
+    loading,
+  };
+}

package/src/hooks/useSignup.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { validateForm } from "../utils/inputValidator/registerValidator";
+import { Field } from "../types/formFields";
+
+type UseFormSubmitProps = {
+  fields: Field[];
+  formState: Record<string, string>;
+  onSubmit: (formState: Record<string, string>) => Promise<void>;
+};
+
+export const useFormSubmit = ({ fields, formState, onSubmit }: UseFormSubmitProps) => {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    const newErrors = validateForm(fields, formState);
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return;
+    setLoading(true);
+    try {
+      await onSubmit(formState);
+    } catch (error: any) {
+      console.error("Signup error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearError = (name: string) => {
+    setErrors((prev) => ({ ...prev, [name]: "" }));
+  };
+
+  return { handleSubmit, loading, errors, clearError, setErrors };
+};

package/src/hooks/useSubmitReport.ts

@@ -0,0 +1,47 @@
+// import { useState } from "react";
+// import { validateForm } from "../utils/inputValidator/registerValidator";
+// import { FieldConfig } from "../types/validateForm";
+
+import { useForm } from "./useForm";
+
+// export function useSubmitReport({onSubmit}: {onSubmit:(target: string, reason: string)=>Promise<void>}){
+//     const [target, setTarget] = useState("");
+//     const [reason, setReason] = useState("");
+//     const [errors, setErrors] = useState<Record<string, string>>({});
+
+//     const fields:FieldConfig[] = [
+//         {name:"target", type:"text", required:true},
+//         {name:"reason", type:"text", required:true}
+//     ];
+//     const clearError = (field: string)=>{
+//         setErrors((prev)=>({...prev, [field]:""}))
+//     }
+//     const handleSubmit = async() => {
+//         const newErrors = validateForm(fields, {target, reason});
+//         setErrors(newErrors);
+//         if (Object.keys(newErrors).length > 0) return;
+//         try{
+//             await onSubmit(target, reason);
+//             setTarget("");
+//             setReason("");
+//         }catch (err: any){
+//             throw err;
+//         }
+//     }
+//     return{
+//         target, setTarget,
+//         reason, setReason,
+//         errors, setErrors, 
+//         handleSubmit, clearError
+//     }
+// }
+export function useSubmitReport({onSubmit}:{onSubmit:(target: string, reason: string) => Promise<void>}){
+    return useForm({
+        initialValues:{target:"", reason: ""},
+        fields:[
+            {name:"target", type:"text",label:"Target", required:true},
+            {name:"reason", type:"text",label:"Reason", required:true}
+        ],
+        onSubmit: async(values) => onSubmit(values.target, values.reason)
+    });
+}

package/src/hooks/useUpdateUser.tsx

@@ -0,0 +1,81 @@
+// import { useState } from "react";
+// import { validateForm } from "../utils/inputValidator/registerValidator";
+
+// const fields = [
+//   { name: "firstname", type: "text", label: "Firstname" },
+//   { name: "lastname", type: "text", label: "Lastname" },
+//   { name: "phone", type: "phone", label: "Phone" },
+// ];
+// export function useUpdateUser({
+//   onUpdate
+// }: {
+//   onUpdate: (formData: Record<string, string>) => Promise<void>
+// }){
+//     const [loading, setLoading] = useState(false);
+//     const [errors, setErrors] = useState<Record<string, string>>({});
+//     const clearError = (field: string) => {
+//         setErrors((prev) => ({ ...prev, [field]: "" }));
+//     };
+
+//     const handleUpdate = async (formData: Record<string, any>) => {
+//     const newErrors = validateForm(fields, formData);
+//     setErrors(newErrors);
+//     if (Object.keys(newErrors).length > 0) return;
+
+//     setLoading(true);
+//     try {
+//       await onUpdate(formData);
+//     } catch (err: any) {
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   return {
+//     loading,
+//     errors,
+//     clearError,
+//     handleUpdate,
+//   };
+// }
+
+
+import { useState } from "react";
+import { validateForm } from "../utils/inputValidator/registerValidator";
+import { FieldConfig } from "../types/validateForm";
+
+type UseUpdateUserProps = {
+  fields: FieldConfig[];
+  formState: Record<string, string>;
+  onUpdate: (formState: Record<string, string>) => Promise<void>;
+};
+
+export const useUpdateUser = ({ 
+  fields, 
+  formState, 
+  onUpdate,
+}: UseUpdateUserProps) => {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  const handleUpdate = async () => {
+    const newErrors = validateForm(fields, formState);
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return;
+    
+    setLoading(true);
+    try {
+      await onUpdate(formState);
+    } catch (err: any) {
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearError = (name: string) => {
+    setErrors((prev) => ({ ...prev, [name]: "" }));
+  };
+
+  return { handleUpdate, loading, errors, clearError, setErrors };
+};

package/src/icons/index.ts

@@ -0,0 +1,36 @@
+export { default as MailIcon } from "../assets/customIcons/email.svg";
+export { default as LockIcon } from "../assets/customIcons/lock_closed.svg";
+export { default as EyeIcon } from "../assets/customIcons/eye.svg";
+export { default as EyeOffIcon } from "../assets/customIcons/eye_off.svg";
+export { default as ArrowIcon } from "../assets/customIcons/arrow.svg";
+export { default as ArrowBackIcon } from "../assets/customIcons/arrow_back.svg";
+export { default as PhoneIcon } from "../assets/customIcons/phone.svg";
+export {default as PersonIcon} from "../assets/customIcons/person.svg";
+// export {default as HelpDarkIcon} from "../assets/customIcons/help_dark.svg";
+// export {default as HelpLightIcon} from "../assets/customIcons/help_light.svg";
+// export {default as HomeDarkIcon} from "../assets/customIcons/home_dark.svg";
+// export {default as HomeLightIcon} from "../assets/customIcons/home_light.svg";
+// export {default as SettingsDarkIcon} from "../assets/customIcons/settings_dark.svg";
+// export {default as SettingsLightIcon} from "../assets/customIcons/settings_light.svg";
+// export {default as ProfileLightIcon} from "../assets/customIcons/profile_light.svg";
+// export {default as ProfileDarkIcon} from "../assets/customIcons/profile_dark.svg";
+export {default as HomeIcon} from "../components/icons/homeIcon";
+export {default as ProfileIcon} from "../components/icons/profileIcon";
+export {default as SettingsIcon} from "../components/icons/settingsIcon";
+export {default as ChatIcon} from "../components/icons/chatIcon";
+export {default as LogoutIcon} from "../assets/customIcons/logout.svg";
+export {default as LightModeIcon} from "../assets/customIcons/light_mode.svg";
+export {default as DarkModeIcon} from "../assets/customIcons/dark_mode.svg";
+export {default as HumbergerIcon} from "../assets/customIcons/humberger.svg";
+export {default as ShieldIcon} from "../assets/customIcons/shield.svg";
+export {default as DocumentIcon} from "../assets/customIcons/document.svg";
+export {default as InformationIcon} from "../assets/customIcons/information.svg";
+export {default as WarningIcon} from "../assets/customIcons/warning.svg";
+export {default as SuccessDark} from "../assets/customIcons/phone_dark.svg";
+export {default as SuccessLight} from "../assets/customIcons/phone_light.svg";
+export {default as TrashIcon} from "../assets/customIcons/trash.svg";
+export {default as CheckMarkIcon} from "../assets/customIcons/checkmark.svg";
+export {default as BanIcon} from "../assets/customIcons/ban.svg";
+export {default as BanImage} from "../components/icons/ban";
+export {default as TruckForbiddenLight} from "../assets/customIcons/light_suspended.svg";
+export {default as TruckForbiddenDark} from "../assets/customIcons/dark_suspended.svg";

package/src/index.ts

@@ -0,0 +1,62 @@
+export {default as OnBoarding} from './components/screens/onBoarding';
+export type {AppTheme} from './tokens/themes';
+export { ThemeProvider, useAppTheme } from "./context/ThemeContext";
+export { Fonts, textSize } from "./tokens/typography";
+export {default as Button} from "./components/ui/button";
+export {default as PageIndicator} from "./components/ui/pageIndicator";
+export type {Language} from "./context/LanguageContext";
+export { LanguageProvider, useLanguage } from "./context/LanguageContext";
+export { validateForm, registerValidator } from "./utils/inputValidator/registerValidator";
+export type { FieldConfig } from "./types/validateForm";
+export { default as LoginScreen } from "./components/screens/loginScreen";
+export { useLoginForm } from "./hooks/useLoginForm";
+export {default as Input} from "./components/ui/input";
+export {default as ErrorMessage} from "./components/ui/error";
+export {default as PageTopBar} from "./components/ui/PageTopBar";
+export {default as ForgotPwScreen} from "./components/screens/forgotPasswordScreen";
+export {useForgotPasswordForm} from "./hooks/useForgotPasswordForm";
+export {default as TemplateSubPage} from "./components/reusable/templateSubPage";
+export {default as OTPInput} from "./components/ui/OTPInput"
+export {default as VerificationCodeScreen} from "./components/screens/VerificationCodeScreen";
+export {useCountdown} from "./hooks/useCountdown";
+export {default as ResetPasswordScreen} from "./components/screens/resetPassword";
+export {useResetPasswordForm} from "./hooks/useResetPasswordForm";
+export {default as PasswordRequirementCard} from "./components/ui/passwordRequirmentCard";
+export {default as SuccessDialog} from "./components/ui/successDialog";
+export { LocationPermissionProvider, useLocationPermission } from "./context/LocationPermissionProvider";
+export {createApiClient} from "./service/createApi";
+export {default as CustomPopUp} from "./components/ui/customPopup";
+export {default as TermsPopup} from "./components/ui/termsPopup";
+export {default as SignUpScreen} from "./components/screens/signUpScreen";
+export {DynamicForm} from "./components/ui/dynamicForm";
+export {Field} from "./types/formFields";
+export {default as TemplatePage} from "./components/reusable/templatePage";
+export {useFormSubmit} from "./hooks/useSignup";
+export {Menu} from "./types/menu";
+export {LanguageType} from "./types/language";
+export {default as LanguageSelect} from "./components/ui/languageSelect";
+export {default as AsideBar} from './components/ui/asidebar';
+export {default as SplashScreen} from "./components/screens/splashScreen";
+export {default as SharpButton} from "./components/ui/sharpButton";
+export {default as SharpContainer} from "./components/ui/sharpContainer";
+export {SharpDynamicForm} from "./components/ui/sharpDynamicForm";
+export {default as SharpInput} from "./components/ui/sharpInput";
+export {default as SharpOtpInput} from "./components/ui/sharpOtpInput";
+export * from "./icons";
+export {IconType} from "./types/icon";
+export {default as ThemeToggle} from "./components/ui/themeToggle";
+export {Settings} from "./types/settingsFields";
+export {groupSettings} from "./utils/helpers/groupSettings";
+export {default as SettingsScreen} from "./components/screens/settingScreen";
+export {useUpdateUser} from "./hooks/useUpdateUser";
+export {default as LegalScreen} from "./components/screens/LegalScreen";
+export {default as AddReportScreen} from "./components/screens/AddReportScreen";
+export {useSubmitReport} from "./hooks/useSubmitReport";
+export {default as SharpSelect} from "./components/ui/sharpSelect";
+export {useForm} from "./hooks/useForm";
+export {default as AboutScreen} from "./components/screens/aboutScreen";
+export {default as Badge} from "./components/ui/badge";
+export {default as WarningModel} from "./components/ui/warningModel";
+export {default as Toast} from "./components/ui/toast";
+export {default as AccountStatusScreen} from "./components/screens/AccountStatusScreen";
+export {sendEmail} from "./service/sendEmail";