@towsila/expo-ui-library 1.0.0

package/src/components/screens/AddReportScreen.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { Text, View, TouchableOpacity } from "react-native";
+import TemplateSubPage from "../reusable/templateSubPage";
+import { useSubmitReport } from "../../hooks/useSubmitReport";
+import SharpInput from "../ui/sharpInput";
+import { useAppTheme } from "../../context/ThemeContext";
+import SharpButton from "../ui/sharpButton";
+import { Fonts, textSize } from "../../tokens/typography";
+import ErrorMessage from "../ui/error";
+import { SharpContainer } from "../..";
+
+interface ReportProps {
+  title: string;
+  subtitle: string;
+  onBack: () => void;
+  categories: { value: string; label: string }[];
+  detailsPlaceholder?: string;
+  submitLabel: string;
+  onSubmit: (target: string, reason: string) => Promise<void>;
+  error?: string;
+  textLabel?: string;
+  selectLabel?:string;
+}
+
+export default function AddReport({
+  title,
+  subtitle,
+  onBack,
+  categories,
+  detailsPlaceholder,
+  submitLabel,
+  onSubmit,
+  error,
+  textLabel,
+  selectLabel,
+}: ReportProps) {
+  const form = useSubmitReport({ onSubmit });
+  const { colors } = useAppTheme();
+  const [charCount, setCharCount] = useState(0);
+  const MAX_CHARS = 500;
+
+  return (
+    <TemplateSubPage
+      title={title}
+      text={subtitle}
+      error={error}
+      onBack={onBack}
+    >
+      {/* Category chips */}
+      <View style={{ marginBottom: 16 }}>
+        {selectLabel && (
+          <Text style={{
+            fontSize: textSize.xs,
+            fontFamily: Fonts.montserrat.semiBold,
+            color: colors.text.primary,
+            letterSpacing: 0.8,
+            marginBottom: 10,
+          }}>
+            {selectLabel}
+          </Text>
+        )}
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+          {categories.map((cat, index) => {
+  const isSelected = form.values.target === cat.value;
+  return (
+   <View style={{ alignSelf: "flex-start", minWidth: 100}} key={index}>
+  <SharpContainer 
+    height={50}
+    bgColor={colors.background.main} 
+    borderColor={isSelected ? colors.primary : colors.semantic.border}
+  >
+    <TouchableOpacity
+      key={cat.value}
+      onPress={() => {
+        form.setValue("target", cat.value);
+        form.clearError("target");
+      }}
+      style={{ flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 14 }}
+    >
+      <Text style={{
+        fontSize: textSize.xs,
+        fontFamily: Fonts.montserrat.regular,
+        color: colors.text.secondary,
+      }}>
+        {cat.label}
+      </Text>
+    </TouchableOpacity>
+  </SharpContainer>
+</View>
+  );
+})}
+        </View>
+        {form.errors.target && <ErrorMessage message={form.errors.target} />}
+      </View>
+
+      {/* Details textarea */}
+      <View style={{ marginBottom: 16 }}>
+        <SharpInput
+          value={form.values.reason}
+          onChangeText={(text) => {
+            if (text.length <= MAX_CHARS) {
+              form.setValue("reason", text);
+              setCharCount(text.length);
+            }
+          }}
+          placeholder={detailsPlaceholder}
+          label={textLabel}
+          multiline
+          numberOfLines={4}
+          textAlignVertical="top"
+          height={100}
+          error={form.errors.reason}
+          onClearError={() => form.clearError("reason")}
+          bgColor={colors.background.main}
+        />
+        {/* Character counter */}
+        <Text style={{
+          fontSize: textSize.xs,
+          fontFamily: Fonts.montserrat.regular,
+          color: charCount >= MAX_CHARS ? colors.semantic.error : colors.text.placeholder,
+          textAlign: "right",
+        }}>
+          {charCount} / {MAX_CHARS}
+        </Text>
+      </View>
+
+      <SharpButton
+        text={submitLabel}
+        bgColor={colors.primary}
+        onPress={form.handleSubmit}
+        loading={form.loading}
+      />
+    </TemplateSubPage>
+  );
+}

package/src/components/screens/LegalScreen.tsx

@@ -0,0 +1,41 @@
+import { ScrollView, Text, StyleSheet, View } from "react-native";
+import { useState } from "react";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+import TemplateSubPage from "../reusable/templateSubPage";
+interface PrivacyProps{
+    title:string;
+    subtitle:string;
+    content:string[];
+    onBack: ()=>void;
+}
+export default function LegalScreen({title, subtitle, content, onBack}:PrivacyProps){
+    const {colors} = useAppTheme();
+    
+    return(
+        <TemplateSubPage
+        title={title}
+        text={subtitle}
+        onBack={onBack}
+        >
+        
+  {content.map((item, index)=>{
+    return (
+        <View key={index}>
+        <Text style={{
+            fontSize: textSize.sm,
+            lineHeight: 24,
+            fontFamily: Fonts.montserrat.regular,
+            marginBottom: 14,
+            textAlign:"center",
+            color:colors.text.primary
+        }}
+        >
+            {item}
+        </Text>
+        </View>
+    )
+  })}
+</TemplateSubPage>
+    )
+}

package/src/components/screens/VerificationCodeScreen.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { textSize, Fonts} from "../../tokens/typography";
+import TemplateSubPage from "../reusable/templateSubPage";
+import OtpInput from "../ui/OTPInput";
+import { useCountdown } from "../../hooks/useCountdown";
+import SharpOtpInput from "../ui/sharpOtpInput";
+
+interface VerificationCodeScreenProps {
+  onVerify: (code: string) => void;
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  error?:string;
+  onResend: () => void
+  resendText?:string;
+  resendBtn?:string;
+  onBack: ()=>void;
+  loading?: boolean;
+}
+
+export default function VerificationCodeScreen({
+  onVerify,
+  title = "Verification code",
+  subtitle = "Enter the 6-digit code sent to your email or phone number",
+  buttonText = "Verify and continue",
+  error,
+  onResend,
+  resendText= "Resend in",
+  onBack,
+  loading,
+  resendBtn="Resend Code",
+}: VerificationCodeScreenProps) {
+  const { colors } = useAppTheme();
+  const [code, setCode] = useState("");
+  const { count, reset } = useCountdown(30);
+  const handleResend = () => {
+    onResend();
+    reset();
+  };
+  return (
+    <TemplateSubPage
+      title={title}
+      text={subtitle}
+      buttonText={buttonText}
+      handleFunction={() => onVerify(code)}
+      error={error}
+      onBack={onBack}
+      loading={loading}
+    >
+      <SharpOtpInput length={4} onChange={setCode} />
+      {count !== 0 ? (
+        <Text style={{ textAlign: "center", color: colors.text.placeholder, fontSize: textSize.xs, fontFamily: Fonts.montserrat.regular}}>
+          {resendText}: {count} seconds
+        </Text>
+      ) : (
+        <TouchableOpacity onPress={handleResend}>
+          <Text style={{ textAlign: "center", color: colors.primary, fontSize: textSize.sm, fontFamily: Fonts.montserrat.regular }}>
+            {resendBtn}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </TemplateSubPage>
+  );
+}

package/src/components/screens/aboutScreen.tsx

@@ -0,0 +1,139 @@
+import { StyleSheet, Text, View } from "react-native";
+import TemplateSubPage from "../reusable/templateSubPage";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+import Badge from "../ui/badge";
+
+interface AboutProps {
+  title: string;
+  subtitle: string;
+  logo: React.ReactNode;
+  appName: string;
+  slogan: string;
+  sections: { title: string; text: string }[];
+  onBack: () => void;
+}
+
+export default function AboutScreen({
+  title,
+  subtitle,
+  logo,
+  appName,
+  slogan,
+  sections,
+  onBack,
+}: AboutProps) {
+  const { colors } = useAppTheme();
+  const styles = createStyles(colors);
+
+  return (
+    <TemplateSubPage
+      title={title}
+      text={subtitle}
+      onBack={onBack}
+    >
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View style={{marginBottom:20, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
+            {logo}
+            <Badge
+            text="v1.0.0"
+            bgColor={colors.text.secondary+"40"}
+            textColor={colors.text.secondary}
+            />
+          </View>
+
+          <Text style={styles.appName}>{appName}</Text>
+
+          <Text style={styles.slogan}>
+            {slogan}
+          </Text>
+        </View>
+
+        {/* Sections */}
+        <View style={styles.sections}>
+          {sections.map((section, index) => (
+            <View key={index} style={styles.card}>
+              <Text style={styles.sectionTitle}>
+                {section.title}
+              </Text>
+
+              <Text style={styles.sectionText}>
+                {section.text}
+              </Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footer}>
+          <Text style={styles.copyright}>
+            © 2026 {appName}
+          </Text>
+        </View>
+      </View>
+    </TemplateSubPage>
+  );
+}
+
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    container: {
+      gap: 28,
+      paddingBottom: 24,
+    },
+
+    header: {
+      gap: 12,
+    },
+
+
+    appName: {
+      fontSize: textSize.lg,
+      fontFamily: Fonts.montserrat.bold,
+      color: colors.text.primary,
+    },
+
+    slogan: {
+      fontSize: textSize.md,
+      fontFamily: Fonts.montserrat.regular,
+      color: colors.text.secondary,
+      lineHeight: 22,
+    },
+
+    sections: {
+      gap: 16,
+    },
+
+    card: {
+      backgroundColor: colors.background.card,
+      borderRadius: 12,
+      padding: 18,
+      gap: 10,
+    },
+
+    sectionTitle: {
+      fontSize: textSize.lg,
+      fontFamily: Fonts.montserrat.semiBold,
+      color: colors.text.primary,
+    },
+
+    sectionText: {
+      fontSize: textSize.md,
+      fontFamily: Fonts.montserrat.regular,
+      color: colors.text.secondary,
+      lineHeight: 24,
+    },
+
+    footer: {
+      alignItems: "center",
+      marginTop: 8,
+    },
+
+    copyright: {
+      fontSize: textSize.sm,
+      fontFamily: Fonts.montserrat.regular,
+      color: colors.text.placeholder,
+    },
+  });

package/src/components/screens/forgotPasswordScreen.tsx

@@ -0,0 +1,60 @@
+import TemplateSubPage from "../reusable/templateSubPage";
+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";
+
+
+
+interface ForgetPwScreenProps {
+  onSubmit: (input: string) => Promise<void>;
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  errorMessage?: string;
+  inputLabel?:string;
+  inputPlaceholder: string;
+  onBack: ()=>void;
+}
+
+export default function ForgotPwScreen({
+  onSubmit,
+  title = "Forgot password",
+  subtitle = "Enter your email address below, and we’ll send you an opt code to reset your password.",
+  buttonText = "Send OTP",
+  errorMessage,
+  inputLabel,
+  inputPlaceholder,
+  onBack,
+}: ForgetPwScreenProps) {
+
+  const form  = useForgotPasswordForm({onSubmit});
+
+  return (
+    <TemplateSubPage
+      title={title}
+      text={subtitle}
+      buttonText={buttonText}
+      handleFunction={form.handleSubmit}
+      error={errorMessage}
+      onBack={onBack}
+      loading={form.loading}
+    >
+      <SharpInput
+        value={form.values.input}
+        onChangeText={(text) => form.setValue("input", text)}
+        placeholder={inputPlaceholder}
+        label={inputLabel}
+        keyboardType="email-address"
+        iconLeft={(color) => <MailIcon width={18} height={18} color={color}/>}
+        error={form.errors.input}
+        autoCapitalize="none"
+        autoComplete="email"
+        textContentType="emailAddress"
+        returnKeyType="next"
+        onClearError={() => form.clearError("input")}
+      />
+    </TemplateSubPage>
+  );
+}

package/src/components/screens/loginScreen.tsx

@@ -0,0 +1,165 @@
+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";
+import TemplatePage from "../reusable/templatePage";
+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"
+interface LoginScreenProps {
+  title?: string;
+  subtitle?: string;
+  onLogin: (email: string, password: string) => Promise<void>;
+  onForgotPassword: () => void;
+  onSignUp: () => void;
+  onGoogleLogin?: () => void;
+  errorMessage?: string | null;
+  emailLabel?: string;
+  passwordLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  forgotPasswordLabel?: string;
+  loginButtonLabel?: string;
+  dividerLabel?: string;
+  noAccountLabel?: string;
+  signUpLabel?: string;
+  googleLabel?: string;
+}
+
+export default function LoginScreen({
+  title = "Login here",
+  subtitle = "Welcome back you've been missed!",
+  onLogin,
+  onForgotPassword,
+  onSignUp,
+  onGoogleLogin,
+  errorMessage = null,
+  emailLabel = "Email address",
+  passwordLabel = "Password",
+  emailPlaceholder = "Enter you email...",
+  passwordPlaceholder = "Enter you password...",
+  forgotPasswordLabel = "Forgot your password?",
+  loginButtonLabel = "Sign in",
+  dividerLabel = "Or continue with",
+  noAccountLabel = "Don't have an account?",
+  signUpLabel = "Create one",
+  googleLabel,
+}: LoginScreenProps) {
+  const { colors, isDark } = useAppTheme();
+  const form = useLoginForm({ onLogin });
+
+  return (
+    <TemplatePage title={title}
+    subtitle={subtitle}
+    body={
+      <>
+        {errorMessage && <ErrorMessage message={errorMessage} position="center" fontSize={textSize.md} />}
+        <View style={{ marginBottom: 15 }}>
+          <SharpInput
+            label={emailLabel}
+            value={form.values.email}
+            onChangeText={(text)=>form.setValue("email", text)}
+            placeholder={emailPlaceholder}
+            keyboardType="email-address"
+            error={form.errors.email}
+            autoCapitalize="none"
+            autoComplete="email"
+            textContentType="emailAddress"
+            returnKeyType="next"
+            onClearError={() => form.clearError("email")}
+            iconLeft={(color)=><MailIcon width={18} height={18} color={color}/>}
+          />
+        </View>
+
+        <View style={{ marginBottom: 20 }}>
+          <SharpInput
+            label={passwordLabel}
+            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}/>}
+            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}/>}
+          />
+        </View>
+
+        <SharpButton text={loginButtonLabel} bgColor={colors.primary} onPress={form.handleSubmit} height={50} loading={form.loading}/>
+
+        <TouchableOpacity onPress={onForgotPassword} activeOpacity={0.7} style={{ alignSelf: "flex-end", marginTop: 14 }}>
+          <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
+            {forgotPasswordLabel}
+          </Text>
+        </TouchableOpacity>
+      </>
+    }
+    footer={
+      <View style={{flex: 1, justifyContent: "space-between"}}>
+        {(onGoogleLogin) && (
+          <View>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, marginVertical: 20, marginHorizontal: 20 }}>
+              <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
+              <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
+                {dividerLabel}
+              </Text>
+              <View style={{ flex: 1, height: 1, backgroundColor: colors.text.secondary, opacity: 0.5 }} />
+            </View>
+            <View style={{marginHorizontal: 28}}>
+            <SharpContainer
+            bgColor={colors.background.main}
+            borderColor={colors.text.primary}
+            height={50}
+          >
+            <TouchableOpacity style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 10 }} onPress={onGoogleLogin}>
+              <Google width={20} height={20} />
+              <Text style={{
+                fontSize: textSize.sm,
+                fontFamily: Fonts.montserrat.semiBold,
+                color: colors.text.primary,
+              }}>
+                {googleLabel}
+              </Text>
+            </TouchableOpacity>
+          </SharpContainer>
+          </View>
+          </View>
+        )}
+
+        <View style={{ flexDirection: "row", justifyContent: "center", gap: 4, marginBottom: 40 }}>
+          <Text style={{ fontSize: textSize.xs, color: colors.text.secondary, fontFamily: Fonts.montserrat.regular }}>
+            {noAccountLabel}
+          </Text>
+          <TouchableOpacity onPress={onSignUp} activeOpacity={0.7}>
+            <Text style={{ fontSize: textSize.xs, color: colors.primary, fontFamily: Fonts.montserrat.semiBold }}>
+              {signUpLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    }
+    />
+  );
+}
+
+
+const styles = StyleSheet.create({
+  socialIcons:{
+    alignItems: "center", 
+    justifyContent: "center"
+  }
+})