@towsila/expo-ui-library 1.0.0

package/src/components/ui/OTPInput.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState } from "react";
+import { View, TextInput, StyleSheet, StyleProp, ViewProps } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+
+interface OtpInputProps {
+  length?: number;
+  onComplete?: (code: string) => void;
+  onChange?: (code: string) => void;
+  style?: StyleProp<ViewProps>;
+  size?:number;
+  borderRadius?: number;
+  fontFamily?: string;
+}
+
+export default function OtpInput({ length = 6, onComplete, onChange, style, size = 45, borderRadius = 10, fontFamily=Fonts.montserrat.regular }: OtpInputProps) {
+  const { colors } = useAppTheme();
+  const styles = createStyles(colors);
+  const [digits, setDigits] = useState<string[]>(Array(length).fill(""));
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const refs = useRef<TextInput[]>([]);
+
+  const handleChange = (text: string, index: number) => {
+    const newDigits = [...digits];
+    newDigits[index] = text;
+    setDigits(newDigits);
+
+    const code = newDigits.join("");
+    onChange?.(code);
+
+    if (text && index < length - 1) {
+      refs.current[index + 1]?.focus();
+    }
+
+    if (code.length === length && newDigits.every((d) => d !== "")) {
+      onComplete?.(code);
+    }
+  };
+
+  return (
+    <View style={{ flexDirection: "row", justifyContent: "center", gap: 12, marginHorizontal: 20 }}>
+      {digits.map((digit, index) => (
+        <TextInput
+          key={index}
+          ref={(r) => { if (r) refs.current[index] = r; }}
+          style={[
+            styles.otpInput,
+            { borderColor: focusedIndex === index ? colors.primary : "transparent", width: size, height: size, borderRadius: borderRadius, fontFamily:fontFamily },
+            style
+          ]}
+          keyboardType="number-pad"
+          maxLength={1}
+          textAlign="center"
+          value={digit}
+          onChangeText={(text) => handleChange(text, index)}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex(null)}
+          placeholder="."
+        />
+      ))}
+    </View>
+  );
+}
+
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    otpInput: {
+      borderWidth: 2,
+      fontSize: textSize.md,
+      color: colors.text.primary,
+      backgroundColor: colors.background.card,
+    },
+  });

package/src/components/ui/PageTopBar.tsx

@@ -0,0 +1,41 @@
+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";
+
+interface PageProps{
+    title: string,
+    description: string;
+    onBack: ()=>void;
+}
+
+export default function PageTopBar({title, description, onBack}:PageProps){
+    const {colors, isDark} = useAppTheme();
+
+    return (
+        <View>
+            <View style={{
+                flexDirection: "row", 
+                alignItems: "center", marginBottom: 10 }}>
+                <TouchableOpacity onPress={onBack}>
+                    <ArrowBack width={24} height={24} color={colors.text.primary}/>
+                </TouchableOpacity>
+                <Text style={{ flex: 1, textAlign: "center", color: colors.text.primary, fontSize: textSize.xxl, fontFamily: Fonts.montserrat.bold }}>
+                    {title}
+                </Text>
+                <View style={{ width: 24 }} />
+            </View>
+            <Text style={{
+                fontSize: textSize.sm,
+                fontFamily: Fonts.montserrat.regular,
+                textAlign: 'center',
+                marginBottom: 15, 
+                color: colors.text.primary, 
+            }}>
+                {description}
+            </Text>
+        </View>
+    )
+}

package/src/components/ui/asidebar.tsx

@@ -0,0 +1,151 @@
+import {  TouchableOpacity, View, Text, Modal, Pressable, Animated } from "react-native";
+import { Menu } from "../../types/menu";
+import { useLanguage } from "../../context/LanguageContext";
+import LanguageSelect from "./languageSelect";
+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 ThemeToggle from "./themeToggle";
+const SIDEBAR_WIDTH = Dimensions.get("window").width * 0.7;
+
+interface AsideProps{
+    visible: boolean;
+    onClose: () => void;
+    logo: React.ReactNode;
+    name?: string;
+    menu: Menu[];
+    onLogout: ()=>void;
+    logoutLabel: string;
+    onNavigate: (link: string) => void;
+    themeLabel?:string;
+}
+
+export default function AsideBar({logo, menu, onLogout, logoutLabel, onNavigate, visible, onClose, themeLabel}:AsideProps){
+    const { language, setLanguage } = useLanguage();
+    const {colors} = useAppTheme();
+    const [activeIndex, setActiveIndex] = useState<number | null>(0);
+    const slideAnim = useRef(new Animated.Value(-SIDEBAR_WIDTH)).current;
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        } else {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: -SIDEBAR_WIDTH,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [visible]);
+
+    return(
+        <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
+        <View style={{ flex: 1, flexDirection: "row" }}>
+            {/* Animated sidebar panel sliding from left */}
+            <Animated.View style={{
+                justifyContent: "space-between",
+                height: "100%",
+                width: SIDEBAR_WIDTH,
+                backgroundColor: colors.background.main,
+                padding: 20,
+                transform: [{ translateX: slideAnim }],
+            }}>
+                {/* top container */}
+                <View style={{flex: 1, gap: 30}}>
+                    {/* logo, name and language row */}
+                    <View style={{flexDirection: "row", alignItems:"center", justifyContent:"space-between"}}>
+                        <View style={{flexDirection: "row", alignItems: "center", gap: 6}}>
+                            {logo}
+                        </View>
+                        <View>
+                            <LanguageSelect value={language} onChange={setLanguage} />
+                        </View>
+                    </View>
+
+                    {/* menu links */}
+                    <View style={{flex: 1, gap: 11}}>
+                    {menu.map((item, index) => {
+                        const isActive = activeIndex === index;
+                        return (
+                            <TouchableOpacity
+                                key={index}
+                                style={{
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    gap: 12,
+                                    paddingVertical: 14,
+                                    paddingHorizontal: 16,
+                                    borderRadius: 10,
+                                    backgroundColor: isActive ? colors.primary + "20" : "transparent"
+                                }}
+                                onPress={() => {
+                                    setActiveIndex(index);
+                                    onNavigate(item.link);
+                                    onClose();
+                                }}
+                            >
+                                {item.iconSvg && (
+                                    item.iconSvg(isActive ? colors.primary : "transparent")
+                                )}
+                                <Text style={{
+                                    fontFamily: isActive ? Fonts.montserrat.semiBold : Fonts.montserrat.regular,
+                                    fontSize: textSize.md,
+                                    color: isActive ? colors.primary : colors.text.primary,
+                                    flex:1
+                                }}>
+                                    {item.name}
+                                </Text>
+                            </TouchableOpacity>
+                        );
+                    })}
+                    </View>
+                </View>
+
+                {/* 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}/>
+                        <Text style={{
+                            fontFamily: Fonts.montserrat.regular,
+                            fontSize: textSize.md,
+                            color: colors.text.primary,
+                        }}>
+                            {logoutLabel}
+                        </Text>
+                    </TouchableOpacity>
+                    <ThemeToggle label={themeLabel}/>
+                </View>
+            </Animated.View>
+
+            {/* Dimmed backdrop — full remaining width, tap to close */}
+            <Animated.View style={{ flex: 1, opacity: fadeAnim }}>
+                <Pressable
+                    style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)" }}
+                    onPress={onClose}
+                />
+            </Animated.View>
+        </View>
+        </Modal>
+    )
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,21 @@
+import { Text } from "react-native";
+import { Fonts, textSize } from "../../tokens/typography";
+
+interface BadgeProps{
+    text: string;
+    bgColor: string;
+    textColor: string;
+}
+export default function Badge({text, bgColor, textColor}: BadgeProps){
+    return(
+        <Text style={{padding: 8,
+            backgroundColor: bgColor,
+            borderRadius: 10,
+            fontSize: textSize.sm,
+            fontFamily: Fonts.montserrat.semiBold,
+            color: textColor}}
+        >
+          {text}  
+        </Text>
+    )
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, TouchableOpacityProps, StyleProp, ViewStyle } from "react-native";
+import { Fonts, textSize } from "../../tokens/typography";
+type ButtonProps = {
+  text: string;
+  bgColor?: string;
+  textColor?: string;
+  onPress?: () => void;
+  fontSize?: number;
+  fontFamily?: string;
+  height?: number;
+  loading?: boolean;
+  borderColor?:string;
+  borderRadius?:number;
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function Button({
+  text,
+  bgColor,  
+  textColor, 
+  onPress,
+  fontSize = textSize.md,
+  fontFamily = Fonts.montserrat.semiBold,
+  height = 60,
+  loading,
+  borderColor,
+  borderRadius = 10,
+  style,
+}: ButtonProps) {
+  return (
+    <TouchableOpacity
+      key={text}
+      style={[styles.button, { 
+        backgroundColor: bgColor, 
+        height: height, 
+        borderColor: borderColor ?? "transparent",
+        borderWidth: borderColor ? 1 : 0,
+        borderRadius: borderRadius,
+      }, style]}      
+      onPress={onPress}
+    >
+      {loading ? (
+        <ActivityIndicator color={textColor} size="small" />
+      ) : (
+        <Text style={{ fontSize, fontFamily, color: textColor }}>
+          {text}
+        </Text>
+      )}
+      
+    </TouchableOpacity>
+  );
+}
+const styles= StyleSheet.create({
+  button: {
+  alignItems: "center",
+  justifyContent: "center",
+},
+});

package/src/components/ui/customPopup.tsx

@@ -0,0 +1,176 @@
+import { View, Text, StyleSheet, Modal, Animated, Dimensions } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts } from "../../tokens/typography";
+import Button from "../ui/button";
+import { useEffect, useRef } from "react";
+import SharpButton from "./sharpButton";
+
+const { height } = Dimensions.get("window");
+
+interface CustomPopUpProps {
+  visible: boolean;
+  title?: string;
+  header?: React.ReactNode;
+  body: React.ReactNode;
+  onClose?: () => void;
+  onAgree?: () => void;
+  closeText?: string;
+  agreeText?: string;
+  agreeDisabled?: boolean;
+  fontFamily?: string;
+
+  // autoDismiss?: boolean;
+  // dismissDelay?: number;
+}
+
+export default function CustomPopUp({
+  visible,
+  title,
+  header,
+  body,
+  onClose,
+  onAgree,
+  closeText = "",
+  agreeText = "",
+  agreeDisabled = false,
+  fontFamily= Fonts.montserrat.bold,
+}: CustomPopUpProps) {
+  const { colors } = useAppTheme();
+  const slideAnim = useRef(new Animated.Value(height)).current;
+  const overlayAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+  if (visible) {
+    // animate IN
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+      Animated.timing(overlayAnim, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  } else {
+    // animate OUT
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: height,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(overlayAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }
+}, [visible]);
+
+
+  const handleAgree = () => {
+  Animated.parallel([
+    Animated.timing(slideAnim, { toValue: height, duration: 300, useNativeDriver: true }),
+    Animated.timing(overlayAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
+  ]).start(() => {
+    onAgree ? onAgree() : undefined
+  }); // call onAgree AFTER animation finishes
+};
+const handleClose = () => {
+  Animated.parallel([
+    Animated.timing(slideAnim, {toValue: height, duration: 300,useNativeDriver: true,
+    }),
+    Animated.timing(overlayAnim, {toValue: 0,duration: 300,useNativeDriver: true,
+    }),
+  ]).start(() => {
+    onClose ? onClose(): undefined
+  });
+};
+
+
+
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none" // we handle animation manually
+      statusBarTranslucent
+    >
+      {/* overlay */}
+      <Animated.View style={[styles.overlay, { opacity: overlayAnim }]} />
+
+      {/* sheet */}
+      <Animated.View
+        style={[
+          styles.sheetWrapper,
+          { transform: [{ translateY: slideAnim }], paddingHorizontal: 10 },
+        ]}
+      >
+        <View style={[styles.container, { backgroundColor: colors.background.main }]}>
+          {/* handle bar */}
+          <View style={[styles.handle, { backgroundColor: colors.text.placeholder }]} />
+
+          <Text style={{
+            fontFamily,
+            fontSize: textSize.xxl,
+            color: colors.text.primary,
+            marginBottom: 10,
+          }}>
+            {title}
+          </Text>
+
+          {header && <View style={{ marginBottom: 10 }}>{header}</View>}
+          <View style={{ marginBottom: 20 }}>{body}</View>
+
+          <View style={{ gap: 8, width: "100%", marginTop: 20 }}>
+        {agreeText && <SharpButton
+          text={agreeText}
+          onPress={handleAgree}
+          bgColor={colors.primary}
+          fontSize={textSize.sm}
+          height={50}
+        />}
+  {closeText ? (
+    <SharpButton
+      text={closeText}
+      onPress={handleClose}
+      bgColor={colors.primary}
+      fontSize={textSize.sm}
+      height={50}
+    />
+  ) : null}
+</View>
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  sheetWrapper: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  container: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    padding: 24,
+    paddingBottom: 40,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: "center",
+    marginBottom: 0,
+  },
+});

package/src/components/ui/dynamicForm.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { ScrollView, 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"
+interface Props {
+  fields: Field[];
+  formState: Record<string, string>;
+  setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  errors: Record<string, string>;
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  clearError: (name: string) => void;
+  onStepChange?: (step: number, total: number) => void;
+  nextLabel?: string;
+  backLabel?: string;
+}
+// can i split it into 2 not only move the password if the number of fields is > 4
+function splitIntoSteps(fields: Field[]): Field[][] {
+  const info = fields.filter((f) => f.type !== "password");
+  const security = fields.filter((f) => f.type === "password");
+  return [info, security].filter((s) => s.length > 0);
+}
+
+export const DynamicForm: React.FC<Props> = ({
+  fields,
+  formState,
+  setFormState,
+  errors,
+  setErrors,
+  clearError,
+  onStepChange,
+  nextLabel,
+  backLabel,
+}) => {
+  const [showPasswordField, setShowPasswordField] = useState<Record<string, boolean>>({});
+  const [currentStep, setCurrentStep] = useState(0);
+  const { colors } = useAppTheme();
+
+  const steps = splitIntoSteps(fields);
+  const totalSteps = steps.length;
+  const stepFields = steps[currentStep] ?? [];
+
+  const goNext = () => {
+    // validate current step fields before proceeding
+    const newErrors = validateForm(stepFields, formState);
+    setErrors((prev) => ({ ...prev, ...newErrors }));
+    if (Object.keys(newErrors).length > 0) return;
+
+    const next = Math.min(currentStep + 1, totalSteps - 1);
+    setCurrentStep(next);
+    onStepChange?.(next, totalSteps);
+  };
+
+  const goPrev = () => {
+    const prev = Math.max(currentStep - 1, 0);
+    setCurrentStep(prev);
+    onStepChange?.(prev, totalSteps);
+  };
+
+  const renderInput = (field: Field) => (
+    <View key={field.name} style={{ marginBottom: 10 }}>
+      <Input
+        value={formState[field.name] || ""}
+        onChangeText={(text) => setFormState((prev) => ({ ...prev, [field.name]: text }))}
+        iconLeft={field.icon}
+        iconRight={
+          field.secureTextEntry
+            ? showPasswordField[field.name] ? "eye-off-outline" : "eye-outline"
+            : undefined
+        }
+        placeholder={field.placeholder}
+        onPressIconRight={
+          field.secureTextEntry
+            ? () => setShowPasswordField((prev) => ({ ...prev, [field.name]: !prev[field.name] }))
+            : undefined
+        }
+        secureTextEntry={field.secureTextEntry && !showPasswordField[field.name]}
+        returnKeyType="next"
+        error={errors[field.name]}
+        onClearError={() => clearError(field.name)}
+        label={field.label}
+      />
+    </View>
+  );
+
+  return (
+    <View style={{ gap: 4 }}>
+
+      {/* Stepper — only show if more than 1 step */}
+      {totalSteps > 1 && (
+        <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 12 }}>
+          {/* Back arrow */}
+          <View style={{ flex: 1 }}>
+          {currentStep > 0 && backLabel && (
+            <TouchableOpacity onPress={goPrev} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: 6 }}>
+                <ArrowBack width={16} height={16} color={colors.text.secondary}/>
+                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
+                {backLabel}
+                </Text>
+            </TouchableOpacity>
+          )}
+          </View>
+
+          {/* Pills */}
+          <View style={{ flexDirection: "row", gap: 8 }}>
+            {steps.map((_, i) => (
+              <View key={i} style={{
+                width: i === currentStep ? 28 : 10,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: i <= currentStep ? colors.primary : colors.text.placeholder + "40",
+              }} />
+            ))}
+          </View>
+          <View style={{ flex: 1 }} />
+        </View>
+      )}
+
+      {/* Fields */}
+        {stepFields.map((f) => renderInput(f))}
+
+      {/* Navigation */}
+      {totalSteps > 1 && (
+        <View style={{ gap: 10, marginTop: 4 }}>
+          {currentStep < totalSteps - 1 && (
+            <TouchableOpacity onPress={goNext} style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 6 }}>
+                <Text style={{ color: colors.text.secondary, fontFamily: Fonts.montserrat.semiBold, fontSize: textSize.sm }}>
+                {nextLabel}
+                </Text>
+                <Arrow width={16} height={16} color={colors.text.secondary}/>
+            </TouchableOpacity>
+            )}
+          
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/ui/error.tsx

@@ -0,0 +1,23 @@
+import { textSize, Fonts } from '../../tokens/typography'
+import { useAppTheme } from "../../context/ThemeContext";
+import {Text} from 'react-native';
+interface ErrorProps{
+    message: string, 
+    fontSize?: number,
+    position?: "left" | "center",
+    fontFamily?: string;
+}
+export default function ErrorMessage({message, fontSize = textSize.xs, position = "left", fontFamily = Fonts.montserrat.regular}:ErrorProps){
+    const {colors} = useAppTheme();
+    return(
+        <Text style={{
+            fontSize: fontSize,
+            color: colors.semantic.error,
+            fontFamily,
+            marginBottom: 10,
+            textAlign: position,
+            }}>
+            {message}
+        </Text>
+    )
+}