@towsila/expo-ui-library 1.0.0

package/src/service/createApi.ts

@@ -0,0 +1,57 @@
+import * as SecureStore from "expo-secure-store";
+
+type ApiClientConfig = {
+  baseUrl: string;
+  accessTokenKey?: string; // SecureStore key for access token
+  refreshTokenKey?: string; // SecureStore key for refresh token
+  /**
+   * Called when a 401 is received. Should perform the refresh call,
+   * store the new tokens, and return the new access token (or null/throw on failure).
+   * Left to each app since refresh endpoints/payloads can differ.
+   */
+  onRefreshToken: () => Promise<string | null>;
+};
+
+export function createApiClient(config: ApiClientConfig) {
+  const {
+    baseUrl,
+    accessTokenKey = "access_token",
+    onRefreshToken,
+  } = config;
+
+  async function apiRequest(path: string, options: RequestInit = {}) {
+    const token = await SecureStore.getItemAsync(accessTokenKey);
+
+    const res = await fetch(`${baseUrl}${path}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...options.headers,
+      },
+    });
+
+    if (res.status === 401) {
+      const newToken = await onRefreshToken();
+
+      if (!newToken) {
+        // refresh failed — return the original 401 response so the
+        // caller's existing error handling (res.ok checks) still works
+        return res;
+      }
+
+      return await fetch(`${baseUrl}${path}`, {
+        ...options,
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${newToken}`,
+          ...options.headers,
+        },
+      });
+    }
+
+    return res;
+  }
+
+  return { apiRequest };
+}

package/src/service/sendEmail.ts

@@ -0,0 +1,11 @@
+import { Linking } from "react-native";
+
+export const sendEmail = async (email:string) => {
+
+        const url = `mailto:${email}`;
+
+        const canOpen = await Linking.canOpenURL(url);
+        if (canOpen) {
+            await Linking.openURL(url);
+        }
+};

package/src/tokens/themes.ts

@@ -0,0 +1,19 @@
+export type AppTheme = {
+    primary: string,
+    text: {
+        primary: string,
+        secondary: string,
+        placeholder: string,
+    },
+    background: {
+        main: string,
+        card: string,
+    },
+    semantic: {
+      border: string,
+      accent: string,
+      success: string,
+      warning: string,
+      error: string,
+    },
+}

package/src/tokens/typography.ts

@@ -0,0 +1,16 @@
+export const Fonts = {
+  montserrat: {
+    regular: "Montserrat_400Regular",
+    semiBold: "Montserrat_600SemiBold",
+    bold: "Montserrat_700Bold",
+  },
+};
+
+export const textSize = {
+  xs: 13,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+};

package/src/types/formFields.ts

@@ -0,0 +1,13 @@
+import { Ionicons } from "@expo/vector-icons";
+
+export type Field ={
+    name : string;
+    placeholder: string;
+    textContentType: string;
+    secureTextEntry?: boolean;
+    icon?: keyof typeof Ionicons.glyphMap;
+    label:string;
+    type?: string;
+    svgIcon?: (color: string) => React.ReactNode;
+    [key: string]: any;
+};

package/src/types/icon.ts

@@ -0,0 +1,6 @@
+export type IconType={
+    width?: number;
+    height?:number;
+    fillColor?: string;
+    borderColor?: string;
+}

package/src/types/language.ts

@@ -0,0 +1,7 @@
+import { ImageSourcePropType } from "react-native";
+import {Language} from "../context/LanguageContext"
+export type LanguageType = {
+    code: Language;
+    name: string;
+    logo: ImageSourcePropType;
+}

package/src/types/menu.ts

@@ -0,0 +1,9 @@
+import { Ionicons } from "@expo/vector-icons";
+
+export type Menu = {
+  icon?: keyof typeof Ionicons.glyphMap;
+  iconActive?: keyof typeof Ionicons.glyphMap;
+  iconSvg?: (color: string)=>React.ReactNode;
+  name: string;
+  link: string;
+}

package/src/types/settingsFields.tsx

@@ -0,0 +1,9 @@
+export interface Settings {
+  id: string;
+  title: string;
+  iconLeft: React.ReactNode;
+  iconRight?: React.ReactNode;
+  route?: string;        // for navigation
+  isDarkModeToggle?: boolean; // marks the special dark mode row
+  category?: number; //give the fields that will be grouped in the same categorie the same number
+}

package/src/types/svg.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React from "react";
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}

package/src/types/validateForm.ts

@@ -0,0 +1,8 @@
+export type FieldConfig = {
+  name: string;
+  required?: boolean;
+  type?: string;
+  minLength?: number;
+  maxLength?: number;
+  label?: string;
+};

package/src/utils/helpers/groupSettings.ts

@@ -0,0 +1,21 @@
+import { Settings } from "../../types/settingsFields";
+
+export function groupSettings(fields: Settings[]) {
+  const ungrouped: Settings[] = [];
+  const grouped: Map<number, { items: Settings[] }> = new Map();
+
+  fields.forEach((field) => {
+    if (field.category === undefined) {
+      ungrouped.push(field);
+    } else {
+      if (!grouped.has(field.category)) {
+        grouped.set(field.category, {
+          items: [],
+        });
+      }
+      grouped.get(field.category)!.items.push(field);
+    }
+  });
+
+  return { ungrouped, groups: Array.from(grouped.values()) };
+}

package/src/utils/inputValidator/customValidator.ts

@@ -0,0 +1,36 @@
+import { registerValidator } from "../../utils/inputValidator/registerValidator";
+
+registerValidator("text", (value, field) => {
+  if (field.required !== false && !value.trim())
+    return `${field.label ?? field.name} is required`;
+  return "";
+});
+
+registerValidator("email", (value) => {
+  if (!value.trim()) return "Email is required";
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(value.trim())) return "Invalid email address";
+  return "";
+});
+
+registerValidator("password", (value, field) => {
+  const min = field.minLength ?? 8;
+  if (!value) return "Password is required";
+  if (value.length < min) return `Password must be at least ${min} characters`;
+  if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) return "Password must contain at least one special character";
+  return "";
+});
+
+registerValidator("confirmPassword", (value, _, formState) => {
+  if (!value) return "Please confirm your password";
+  if (value.length < 8) return "Password must be at least 8 characters";
+  if (value !== formState["password"]) return "Passwords do not match";
+  return "";
+});
+
+registerValidator("phone", (value, field) => {
+  if (!value.trim()) return `${field.label ?? "Phone"} is required`;
+  const phoneRegex = /^0[567]\d{8}$/;
+  if (!phoneRegex.test(value.trim())) return "Invalid phone number";
+  return "";
+});

package/src/utils/inputValidator/generalTerms.ts

@@ -0,0 +1,19 @@
+// General (all users)
+
+
+
+export const serviceTerms:string[] = [
+   "You must be at least 18 years old",
+  "You must provide a valid email and an active Algerian phone number",
+    "All information must be accurate and up to date",
+    "You are solely responsible for the confidentiality of your login credentials",
+    "Any fraudulent or abusive use will result in immediate account suspension or deletion",
+    "Disputes are subject to the jurisdiction of Algiers courts, under Algerian law",
+    "Your location is only shared with the Provider after your explicit confirmation",
+"You must provide accurate and up-to-date information about your qualifications, experience, and services",
+"You get a free 30-day trial — no payment info required",
+" Subscriptions start at 5,000 DA/month (Basic) or 10,000 DA/month (Premium)",
+"You are solely responsible for the quality, safety, and legality of your services",
+"Any false information about your capabilities or availability leads to immediate suspension",
+"Annual subscriptions are non-refundable after 14 days",
+];

package/src/utils/inputValidator/registerValidator.ts

@@ -0,0 +1,31 @@
+import { FieldConfig } from "../../types/validateForm";
+type FormState = Record<string, string>;
+export type ValidatorFn = (value: string, field: FieldConfig, formState: FormState) => string;
+
+const validatorRegistry: Record<string, ValidatorFn> = {};
+
+export function registerValidator(type: string, fn: ValidatorFn): void {
+  validatorRegistry[type] = fn;
+}
+
+export function validateForm(
+  fields: FieldConfig[],
+  formState: FormState
+): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  fields.forEach((field) => {
+    const type = field.type ?? "text";
+    const validator = validatorRegistry[type];
+
+    if (!validator) {
+      console.warn(`No validator registered for type: "${type}"`);
+      return;
+    }
+
+    const error = validator(formState[field.name] ?? "", field, formState);
+    if (error) errors[field.name] = error;
+  });
+
+  return errors;
+}