@towsila/expo-ui-library 1.0.0

package/src/components/ui/successDialog.tsx

@@ -0,0 +1,97 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+} from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+import CustomPopUp from "./customPopup";
+
+interface SuccessDialogProps {
+  visible: boolean;
+  title: string;
+  description: string;
+  buttonText?: string;
+  onButtonPress?: () => void;
+  image?: React.ReactNode;
+}
+
+export default function SuccessDialog({
+  visible,
+  title,
+  description,
+  buttonText,
+  onButtonPress,
+  image,
+}: SuccessDialogProps) {
+  const { colors } = useAppTheme();
+  const styles = createStyles(colors);
+
+  return (
+    <CustomPopUp 
+      visible={visible} 
+      body={
+        <>
+            {image && <View style={styles.imageWrapper}>{image}</View>}
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+        </>
+      }
+      agreeText={buttonText}
+      onAgree={onButtonPress}
+      />
+    );
+
+}
+
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    overlay: {
+      flex: 1,
+      justifyContent: "flex-end",
+    },
+    backdrop: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: "rgba(0,0,0,0.45)",
+    },
+    sheet: {
+      width: "100%",
+      minHeight: "50%",
+      backgroundColor: colors.background.card,
+      borderTopLeftRadius: 10,
+      borderTopRightRadius: 10,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      paddingHorizontal: 24,
+      paddingTop: 15,
+      paddingBottom: 36,
+    //   alignItems: "center",
+      justifyContent: "center",
+    },
+    handle: {
+      width: 40,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.text.placeholder,
+      opacity: 0.35,
+      alignSelf: "center",
+    },
+    imageWrapper: {
+    alignSelf: "center",
+      marginBottom: 20,
+    },
+    title: {
+      fontSize: textSize.xxl,
+      fontFamily: Fonts.montserrat.semiBold,
+      color: colors.text.primary,
+      textAlign: "center",
+      // marginBottom: 8,
+    },
+    description: {
+      fontSize: textSize.md,
+      fontFamily: Fonts.montserrat.regular,
+      color: colors.text.secondary,
+      textAlign: "center",
+      // marginBottom: 24,
+    },
+  });

package/src/components/ui/termsPopup.tsx

@@ -0,0 +1,56 @@
+import { ScrollView, Text, View } from "react-native";
+import CustomPopUp from "./customPopup";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+
+interface TermsPopupProps{
+    showTerms: boolean;
+    generalTerms: string[];
+    onAgree: ()=>void;
+    title:string;
+    description: string;
+    buttonText: string;
+}
+export default function TermsPopup({showTerms, generalTerms, onAgree, title, description, buttonText}: TermsPopupProps){
+    const {colors} = useAppTheme();
+    return (
+    <CustomPopUp
+        visible={showTerms}
+        title={title}
+        header={
+          <Text style={{
+            fontFamily: Fonts.montserrat.regular,
+            fontSize: textSize.sm,
+            color: colors.text.secondary,
+            marginBottom: 4,
+          }}>
+            {description}
+          </Text>
+        }
+        body={
+          <ScrollView
+            style={{ maxHeight: 280 }}
+            scrollEventThrottle={16}
+            showsVerticalScrollIndicator={false}
+          >
+            {generalTerms.map((term: string, i: number) => (
+              <View key={i} style={{ flexDirection: "row", gap: 8, marginBottom: 8 }}>
+                <Text style={{ color: colors.primary }}>•</Text>
+                <Text style={{
+                  fontFamily: Fonts.montserrat.regular,
+                  fontSize: textSize.sm,
+                  color: colors.text.secondary,
+                  flex: 1,
+                  lineHeight: 20,
+                }}>
+                  {term}
+                </Text>
+              </View>
+            ))}
+          </ScrollView>
+        }
+        agreeText={buttonText}
+        onAgree={onAgree}
+      />
+    )
+}

package/src/components/ui/themeToggle.tsx

@@ -0,0 +1,98 @@
+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 { Fonts, textSize } from "../../tokens/typography";
+import Svg, { Path } from "react-native-svg";
+
+interface TextTheme {
+  label?: string;
+}
+
+const TRACK_W = 52;
+const TRACK_H = 30;
+const THUMB   = 22;
+const MARGIN  = 4;
+const TRAVEL  = TRACK_W - THUMB - MARGIN * 2;
+
+export default function ThemeToggle({ label }: TextTheme) {
+  const { isDark, toggleTheme, colors } = useAppTheme();
+  const translateX = useRef(new Animated.Value(isDark ? TRAVEL : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(translateX, {
+      toValue: isDark ? TRAVEL : 0,
+      useNativeDriver: true,
+      bounciness: 6,
+    }).start();
+  }, [isDark]);
+
+  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} />
+      }
+
+      {label && (
+        <Text style={{
+          fontFamily: Fonts.montserrat.regular,
+          fontSize: textSize.md,
+          color: colors.text.primary,
+          
+        }}>
+          {label}
+        </Text>
+      )}
+
+      <TouchableOpacity onPress={toggleTheme} activeOpacity={0.9}>
+        <View style={{ width: TRACK_W, height: TRACK_H }}>
+          {/* Track SVG — fill + border */}
+          <Svg
+            width={TRACK_W}
+            height={TRACK_H}
+            viewBox="0 0 58 34"
+            style={{ position: "absolute" }}
+          >
+            {/* Fill */}
+            <Path
+              d="M0.576172 16.5552C0.576172 7.71862 7.73962 0.555176 16.5762 0.555176H40.5762C49.4127 0.555176 56.5762 7.71862 56.5762 16.5552C56.5762 25.3917 49.4127 32.5552 40.5762 32.5552H16.5762C7.73961 32.5552 0.576172 25.3917 0.576172 16.5552Z"
+              fill={colors.primary}
+            />
+            {/* Border */}
+            <Path
+              d="M16.5762 0.555176C19.0518 0.621842 21.5273 0.685176 24.0029 0.745176C29.5273 0.87907 35.0518 0.996364 40.5762 1.09706C48.8146 1.06558 55.9659 8.51881 55.6907 16.5552C55.6907 16.5552 55.6907 16.5552 55.6907 16.5552C55.8007 24.604 48.5576 31.7464 40.5762 31.5552C32.5762 31.5552 24.5762 31.59 16.5762 31.6596C8.54491 31.9309 1.10353 24.7824 1.13849 16.5552C1.13849 16.5552 1.13849 16.5552 1.13849 16.5552C0.96865 10.834 4.30374 5.12979 9.49713 2.41467C11.6569 1.26135 14.098 0.618935 16.5762 0.555176C14.0986 0.48538 11.5935 1.00216 9.32675 2.07501C3.8814 4.58411 0.0515389 10.4081 0.0138575 16.5552C0.0138575 16.5552 0.0138575 16.5552 0.0138575 16.5552C-0.365635 25.3731 7.56226 33.5939 16.5762 33.4507C24.5762 33.5204 32.5762 33.5552 40.5762 33.5552C40.5762 33.5552 40.5762 33.5552 40.5762 33.5552C49.6399 33.7784 57.7661 25.5516 57.4616 16.5552C57.4616 16.5552 57.4616 16.5552 57.4616 16.5552C57.6009 7.54638 49.383 -0.369685 40.5762 0.0132933C35.0518 0.113988 29.5273 0.231282 24.0029 0.365176C21.5273 0.425176 19.0518 0.488509 16.5762 0.555176ZM16.5762 0.555176"
+              fill={colors.text.primary}
+            />
+          </Svg>
+
+          {/* Thumb */}
+          <Animated.View style={{
+            position: "absolute",
+            top: MARGIN,
+            left: MARGIN,
+            width: THUMB,
+            height: THUMB,
+            borderRadius: THUMB / 2,
+            backgroundColor: colors.text.primary,
+            transform: [{ translateX }],
+            overflow: "hidden",
+            justifyContent: "center",
+            alignItems: "center",
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3,
+            elevation: 4,
+          }}>
+            {isDark
+              ? <LightModeIcon width={20} height={20} color={colors.background.main} />
+              : <DarkModeIcon width={16} height={16} color={colors.background.main} />
+            }
+          </Animated.View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/ui/toast.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Animated,
+  Modal,
+  StyleSheet,
+  Text,
+  View,
+} 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";
+interface ToastProps {
+  visible: boolean;
+  message: string;
+  type:"error"|"success"|"warning"|"info"
+  duration?: number;
+  onHide?: () => void;
+}
+
+export default function Toast({
+  visible,
+  message,
+  type = "success",
+  duration = 2500,
+  onHide,
+}: ToastProps) {
+  const { colors } = useAppTheme();
+
+  const translateY = useRef(new Animated.Value(-120)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!visible) return;
+
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: -120,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onHide?.();
+      });
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [visible]);
+
+  const contentColor = colors.text.primary;
+  if (!visible) return null;
+  const toastStyle = {
+  success: {
+    background: colors.semantic.success,
+    text: contentColor,
+    icon: <CheckMarkIcon width={20} height={20} color={contentColor} />,
+  },
+  error: {
+    background: colors.semantic.error,
+    text:contentColor,
+    icon: <CloseIcon width={20} height={20} color={contentColor}/>,
+  },
+  warning: {
+    background: colors.semantic.warning,
+    text: contentColor,
+    icon: <WarningIcon width={20} height={20} color={contentColor}/>,
+  },
+  info: {
+    background: colors.semantic.border,
+    text: contentColor,
+    icon: <InformationIcon width={20} height={20} color={contentColor}/>,
+  },
+}[type];
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+    >
+      <View style={styles.modal}>
+        <Animated.View
+          style={[
+            styles.container,
+            {
+              backgroundColor: toastStyle.background,
+              opacity,
+              transform: [{ translateY }],
+            },
+          ]}
+        >
+            {toastStyle.icon}
+          <Text
+            style={[
+              styles.text,
+              {
+                color: toastStyle.text,
+              },
+            ]}
+          >
+            {message}
+          </Text>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+    pointerEvents: "box-none",
+  },
+
+  container: {
+    flexDirection:"row",
+    gap:10,
+    position: "absolute",
+    top: 60,
+    left: 16,
+    right: 16,
+
+    borderRadius: 10,
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+
+    elevation: 20,
+
+    shadowColor: "#000",
+    shadowOpacity: 0.18,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+  },
+
+  text: {
+    fontFamily: Fonts.montserrat.semiBold,
+    fontSize: textSize.sm,
+  },
+});

package/src/components/ui/warningModel.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Modal, Pressable, Text, View } from "react-native";
+import SharpButton from "./sharpButton";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+
+interface WarningModalProps {
+  visible: boolean;
+  icon?: React.ReactNode;
+  title?: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  loading?:boolean;
+  mainColor?:string;
+}
+
+export default function WarningModal({
+  visible,
+  icon,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  loading,
+    mainColor,
+}: WarningModalProps) {
+  const { colors } = useAppTheme();
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent
+      onRequestClose={onCancel}
+      statusBarTranslucent
+    >
+      {/* Overlay */}
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0,0,0,0.60)",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 24,
+        }}
+        onPress={onCancel}
+      >
+        {/* Card */}
+        <Pressable
+          onPress={() => {}}
+          style={{
+            width: "100%",
+            maxWidth: 380,
+            backgroundColor: colors.background.card,
+            borderRadius: 22,
+            padding: 24,
+            alignItems: "center",
+          }}
+        >
+          {icon && (
+            <View
+              style={{
+                marginBottom: 18,
+              }}
+            >
+              {icon}
+            </View>
+          )}
+
+          {title && (
+            <Text
+              style={{
+                fontFamily: Fonts.montserrat.bold,
+                fontSize: textSize.lg,
+                color: colors.text.primary,
+                textAlign: "center",
+                marginBottom: 10,
+              }}
+            >
+              {title}
+            </Text>
+          )}
+
+          <Text
+            style={{
+              fontFamily: Fonts.montserrat.regular,
+              fontSize: textSize.sm,
+              color: colors.text.secondary,
+              textAlign: "center",
+              lineHeight: 22,
+              marginBottom: 24,
+            }}
+          >
+            {description}
+          </Text>
+
+          <View
+            style={{
+              width: "100%",
+              gap: 12,
+            }}
+          >
+            {confirmLabel && (
+              <SharpButton
+                text={confirmLabel}
+                bgColor={mainColor}
+                textColor={colors.text.primary}
+                onPress={onConfirm}
+                loading={loading}
+              />
+            )}
+
+            {cancelLabel && (
+              <SharpButton
+                text={cancelLabel}
+                bgColor={colors.background.card}
+                borderColor={colors.semantic.border}
+                textColor={colors.semantic.border}
+                onPress={onCancel}
+              />
+            )}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/constants/language.ts

@@ -0,0 +1,15 @@
+// constants/languages.ts
+import { LanguageType } from "../types/language";
+
+export const LANGUAGES: LanguageType[] = [
+  {
+    code: "en",
+    name: "English",
+    logo: require("../assets/images/en.jpg"),
+  },
+  {
+    code: "fr",
+    name: "Français",
+    logo: require("../assets/images/fr.jpg"),
+  },
+];

package/src/context/LanguageContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const LANGUAGE_KEY = "app_language_preference";
+
+export type Language = "en" | "fr";
+
+type LanguageContextValue = {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  isLoaded: boolean;
+};
+
+const LanguageContext = createContext<LanguageContextValue | null>(null);
+
+export function LanguageProvider({
+  defaultLanguage = "en",
+  children,
+}: {
+  defaultLanguage?: Language;
+  children: React.ReactNode;
+}) {
+  const [language, setLanguageState] = useState<Language>(defaultLanguage);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    AsyncStorage.getItem(LANGUAGE_KEY).then((saved) => {
+      if (saved === "en" || saved === "fr") setLanguageState(saved);
+      setIsLoaded(true);
+    });
+  }, []);
+
+  const setLanguage = async (lang: Language) => {
+    setLanguageState(lang);
+    await AsyncStorage.setItem(LANGUAGE_KEY, lang);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, isLoaded }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error("useLanguage must be used inside LanguageProvider");
+  return ctx;
+}