@towsila/expo-ui-library 1.0.0

package/src/components/screens/onBoarding.tsx

@@ -0,0 +1,178 @@
+import { Text, TouchableOpacity, View, StyleSheet, ImageSourcePropType, Image } from "react-native";
+import PageIndicator from "../ui/pageIndicator";
+import Button from "../ui/button";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
+import Arrow from "../../assets/customIcons/arrow.svg";
+import ArrowDark from "../../assets/customIcons/arrow_dark.svg";
+import SharpButton from "../ui/sharpButton";
+
+interface OnBoardingProps {
+  onSkip: () => void;
+  onNext: () => void;
+  image: React.ReactNode;
+  title: string;
+  description: string;
+  skipLabel: string;
+  nextLabel: string;
+  currentIndex: number;
+  total: number;
+}
+
+export default function OnBoarding({
+  onSkip,
+  onNext,
+  image,
+  title,
+  description,
+  skipLabel,
+  nextLabel,
+  currentIndex,
+  total,
+}: OnBoardingProps) {
+  const { colors, isDark } = useAppTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.background.main },
+      ]}
+    >
+      {/* ---------- Header ---------- */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
+          <Text
+            style={[
+              styles.skipLabel,
+              { color: colors.text.primary },
+            ]}
+          >
+            {skipLabel}
+          </Text>
+            <Arrow width={20} height={20} color={colors.text.primary} style={styles.skipIcon}/>
+        </TouchableOpacity>
+      </View>
+
+      {/* ---------- Content ---------- */}
+      <View style={styles.content}>
+        {/* Image */}
+        <View style={styles.imageContainer}>
+          {image}
+        </View>
+
+        {/* Text */}
+        <View style={styles.textContainer}>
+          <Text
+            style={[
+              styles.title,
+              { color: colors.text.primary },
+            ]}
+          >
+            {title}
+          </Text>
+
+          <Text
+            style={[
+              styles.description,
+              { color: colors.text.secondary },
+            ]}
+          >
+            {description}
+          </Text>
+
+          <View style={styles.indicatorContainer}>
+            <PageIndicator
+              total={total}
+              current={currentIndex}
+              color={colors.primary}
+              borderColor={colors.text.primary}
+              defaultColor={colors.background.main}
+            />
+          </View>
+        </View>
+      </View>
+
+      {/* ---------- Footer ---------- */}
+      <View style={styles.footer}>
+        <SharpButton
+          text={nextLabel}
+          bgColor={colors.primary}
+          onPress={onNext}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 32,
+    paddingTop: 50,
+    paddingBottom: 40,
+  },
+
+  header: {
+    alignItems: "flex-end",
+    minHeight: 40,
+  },
+
+  skipButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+  },
+
+  skipLabel: {
+    fontSize: textSize.md,
+    fontFamily: Fonts.montserrat.regular,
+  },
+
+  skipIcon: {
+    marginLeft: 6,
+  },
+
+  content: {
+    flex: 1,
+    justifyContent: "center",
+  },
+
+  imageContainer: {
+    flex: 0.58,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+  },
+
+  textContainer: {
+    flex: 0.42,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 12,
+  },
+
+  title: {
+    fontSize: textSize.xxl,
+    fontFamily: Fonts.montserrat.bold,
+    textAlign: "center",
+    marginBottom: 14,
+  },
+
+  description: {
+    fontSize: textSize.sm,
+    fontFamily: Fonts.montserrat.regular,
+    textAlign: "center",
+    lineHeight: 22,
+    marginBottom: 28,
+    paddingHorizontal: 10,
+  },
+
+  indicatorContainer: {
+    marginTop: 4,
+  },
+
+  footer: {
+    paddingTop: 24,
+  },
+});

package/src/components/screens/resetPassword.tsx

@@ -0,0 +1,115 @@
+import TemplateSubPage from "../reusable/templateSubPage";
+import Input from "../ui/input";
+import { useResetPasswordForm } from "../../hooks/useResetPasswordForm";
+import PasswordRequirementsCard from "../ui/passwordRequirmentCard";
+import SharpInput from "../ui/sharpInput";
+import  LockIcon from "../../assets/customIcons/lock_closed.svg";
+import  EyeOffIcon from "../../assets/customIcons/eye_off.svg";
+import  EyeIcon from "../../assets/customIcons/eye.svg";
+
+
+interface ResetPasswordScreenProps {
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  passwordLabel?: string;
+  confirmPasswordLabel?: string;
+  passwordPlaceholder?: string;
+  confirmPasswordPlaceholder?: string;
+  cardTitle?:string,
+  cardItems?: string[],
+  onBack: () => void;
+  oldPasswordLabel?: string;
+  oldPasswordPlaceholder?: string;
+  includeOldPassword?: boolean;
+  onReset: (password: string, oldPassword?: string) => Promise<void>;
+  errorMessage?: string;
+}
+
+export default function ResetPasswordScreen({
+  title = "Reset Password",
+  subtitle = "Enter your new password below.",
+  buttonText = "Save",
+  passwordLabel = "Password",
+  confirmPasswordLabel = "Confirm password",
+  passwordPlaceholder = "Enter your new password",
+  confirmPasswordPlaceholder = "Re-enter your new password",
+  cardTitle,
+  cardItems,
+  onBack,
+  oldPasswordLabel = "Current Password",
+  oldPasswordPlaceholder = "Enter your current password",
+  includeOldPassword = false,
+  onReset,
+  errorMessage,
+}: ResetPasswordScreenProps) {
+  const form = useResetPasswordForm({ onReset , includeOldPassword});
+
+  return (
+    <TemplateSubPage
+      title={title}
+      text={subtitle}
+      buttonText={buttonText}
+      handleFunction={form.handleSubmit}
+      error={errorMessage}
+      onBack={onBack}
+      loading={form.loading}
+    >
+      {includeOldPassword && (
+        <SharpInput
+          label={oldPasswordLabel}
+          value={form.oldPassword}
+          onChangeText={form.setOldPassword}
+          placeholder={oldPasswordPlaceholder}
+          iconLeft={(color) => <LockIcon width={18} height={18} color={color} />}
+          iconRight={form.showOldPassword
+            ? (color) => <EyeOffIcon width={18} height={18} color={color} />
+            : (color) => <EyeIcon width={18} height={18} color={color} />
+          }
+          onPressIconRight={() => form.setShowOldPassword(!form.showOldPassword)}
+          secureTextEntry={!form.showOldPassword}
+          textContentType="password"
+          returnKeyType="next"
+          error={form.errors.oldPassword}
+          onClearError={() => form.clearError("oldPassword")}
+        />
+      )}
+      <SharpInput
+        label={passwordLabel}
+        value={form.password}
+        onChangeText={form.setPassword}
+        placeholder={passwordPlaceholder}
+        iconLeft={(color) => <LockIcon width={18} height={18} color={color}/>}
+        iconRight={form.showPassword ? (color)=><EyeOffIcon width={18} height={18} color={color}/> : (color)=><EyeIcon width={18} height={18} color={color}/>}
+        onPressIconRight={() => form.setShowPassword(!form.showPassword)}
+        secureTextEntry={!form.showPassword}
+        textContentType="password"
+        returnKeyType="next"
+        error={form.errors.password}
+        onClearError={() => form.clearError("password")}
+      />
+      {cardItems && (
+        <PasswordRequirementsCard
+        checks={form.passwordChecks}
+        cardTitle={cardTitle}
+        cardItems = {cardItems}
+      />
+      )}
+      
+      <SharpInput
+        label={confirmPasswordLabel}
+        value={form.confirmPassword}
+        onChangeText={form.setConfirmPassword}
+        placeholder={confirmPasswordPlaceholder}
+        iconLeft={(color) => <LockIcon width={18} height={18} color={color}/>}
+        iconRight={form.showConfirmPassword ? (color)=><EyeOffIcon width={18} height={18} color={color}/> : (color)=><EyeIcon width={18} height={18} color={color}/>}
+        onPressIconRight={() => form.setShowConfirmPassword(!form.showConfirmPassword)}
+        secureTextEntry={!form.showConfirmPassword}
+        textContentType="password"
+        returnKeyType="done"
+        error={form.errors.confirmPassword}
+        onClearError={() => form.clearError("confirmPassword")}
+      />
+    </TemplateSubPage>
+  );
+}

package/src/components/screens/settingScreen.tsx

@@ -0,0 +1,85 @@
+import {Settings } from "../../types/settingsFields"
+import { useAppTheme } from "../../context/ThemeContext";
+import { Text, View, TouchableOpacity, ScrollView } from "react-native"
+import { textSize, Fonts } from "../../tokens/typography"
+import SharpButton from "../ui/sharpButton";
+import TemplatePage from "../reusable/templatePage";
+import { SharpContainer } from "../..";
+import Arrow from "../../assets/customIcons/arrow.svg";
+
+interface Props{
+    title: string;
+    subtitle: string;
+    onNavigate: (link: string) => void;
+    deleteLabel?:string;
+    fields: Settings[]; 
+    onDelete:()=>void;
+}
+
+export default function SettingsScreen({title, subtitle, onNavigate, deleteLabel="", fields, onDelete}: Props) {
+  const { colors } = useAppTheme();
+
+  return (
+    <TemplatePage title={title} subtitle={subtitle} marginTop={-150} body={
+          <View style={{
+            gap:12
+          }}>
+            {fields.map((item) => (
+                <SharpContainer key={item.id} height={56} bgColor={colors.background.main} borderColor={colors.semantic.border}>
+              <TouchableOpacity
+                onPress={() => item.route && onNavigate(item.route)}
+                activeOpacity={0.65}
+                style={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    flex: 1,
+                    paddingHorizontal: 15
+                }}
+                >
+                <View
+                    style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 4,
+                    }}
+                >
+                    <View
+                    style={{
+                        width: 36,
+                        height: 36,
+                        borderRadius: 10,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }}
+                    >
+                    {item.iconLeft}
+                    </View>
+
+                    <Text
+                    style={{
+                        fontFamily: Fonts.montserrat.semiBold,
+                        color: colors.text.primary,
+                        fontSize: textSize.sm,
+                    }}
+                    >
+                    {item.title}
+                    </Text>
+                </View>
+
+                <Arrow width={20} height={20} color={colors.primary} />
+                </TouchableOpacity>
+              </SharpContainer>
+            ))}
+          </View>}
+          footer={
+            <View style={{marginTop: 30, paddingHorizontal:30 }}>
+                <SharpButton
+                    text={deleteLabel}
+                    bgColor={colors.semantic.error}
+                    onPress={onDelete}
+                />
+            </View>
+          }/>
+  );
+}

package/src/components/screens/signUpScreen.tsx

@@ -0,0 +1,119 @@
+// import { useRouter } from "expo-router";
+import React, { useState, useEffect } from "react";
+import TemplatePage from "../reusable/templatePage";
+import { Text, TouchableOpacity, View } from "react-native";
+import TermsPopup from "../ui/termsPopup";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+import Button from "../ui/button";
+import { DynamicForm } from "../ui/dynamicForm";
+import { Field } from "../../types/formFields";
+import { useFormSubmit } from "../../hooks/useSignup";
+import ErrorMessage from "../ui/error";
+import SharpButton from "../ui/sharpButton";
+import { SharpDynamicForm } from "../ui/sharpDynamicForm";
+interface SignupProps{
+title: string;
+subtitle: string;
+formState: Record<string, string>;
+setFormState: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+onSubmit: (formState: Record<string, string>) => Promise<void>;
+onLogin: () => void;
+errorMessage?: string;
+haveAccountLabel: string;
+loginLabel: string;
+buttonLabel: string;
+fields: Field[];
+nextLabel: string;
+backLabel: string;
+generalTerms: string[];
+dialogTitle:string;
+dialogDescription: string;
+dialogButton: string;
+}
+export default function SignupPage({
+  title, 
+  subtitle,
+  formState, 
+  setFormState, 
+  onSubmit, 
+  onLogin, 
+  errorMessage, 
+  haveAccountLabel, 
+  loginLabel, 
+  buttonLabel, 
+  fields, 
+  nextLabel, 
+  backLabel, 
+  generalTerms,
+  dialogTitle,
+  dialogDescription,
+  dialogButton
+}: SignupProps) {
+   const [showTerms, setShowTerms] = useState(true);
+   const {colors} = useAppTheme();
+   const [isLastStep, setIsLastStep] = useState(false);
+
+ const {handleSubmit, errors, clearError, loading, setErrors} = useFormSubmit({
+    fields,
+    formState,
+    onSubmit,
+  });    
+  return (
+    <TemplatePage 
+    title={title}
+    subtitle={subtitle}
+    body = {
+      <View style={{gap:10}}>
+        {errorMessage && <ErrorMessage message={errorMessage} position="center" fontSize={textSize.md} />}
+       <SharpDynamicForm
+        onStepChange={(step, total) => setIsLastStep(step === total - 1)}
+        fields={fields}
+        formState={formState}
+        setFormState={setFormState}
+        errors={errors}
+        clearError={clearError}
+        nextLabel={nextLabel}
+        backLabel={backLabel}
+        setErrors={setErrors}
+       />
+       {isLastStep && (
+       <SharpButton
+            text={buttonLabel}
+            bgColor={colors.primary}
+            onPress={handleSubmit}
+            loading={loading}
+            height={50}
+          />
+       )}
+       <TermsPopup 
+       title={dialogTitle}
+       description={dialogDescription}
+       buttonText={dialogButton}
+       showTerms={showTerms} 
+       generalTerms={generalTerms} 
+       onAgree={()=>setShowTerms(false)}/>
+     </View> 
+    }
+    footer={
+        <View style={{flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 4,
+      marginTop: 15,}}>
+            <Text style={{fontSize: textSize.sm,
+      color: colors.text.secondary,
+      fontFamily: Fonts.montserrat.regular,}}>{haveAccountLabel}</Text>
+            <TouchableOpacity onPress={onLogin}>
+              <Text
+                style={{ fontSize: textSize.sm, fontFamily: Fonts.montserrat.semiBold, color: colors.primary }}
+              >
+                {loginLabel}
+              </Text>
+            </TouchableOpacity>
+          </View>
+    }
+    marginTop={-150}
+    />
+  );
+}

package/src/components/screens/splashScreen.tsx

@@ -0,0 +1,170 @@
+import { useEffect } from "react";
+import { View, Text, StyleSheet, Dimensions } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSequence,
+  withDelay,
+  withSpring,
+  Easing,
+} from "react-native-reanimated";
+import * as SplashScreen from "expo-splash-screen";
+import { Fonts, textSize } from "../../tokens/typography";
+import { useAppTheme } from "../../context/ThemeContext";
+
+const { width } = Dimensions.get("window");
+
+interface SplashScreenProps {
+  speedLines: React.ReactNode;       // static background element
+  hook: React.ReactNode;             // animated element
+  logoText: React.ReactNode;         // title SVG
+  subtitle: string;                  // subtitle text
+  onFinish: () => void;              // called when animation ends, app decides where to go
+  duration?: number;                 // total animation duration before onFinish, default 2800
+  hookStartX?: number;               // hook entry X offset, default -80
+  hookStartY?: number;               // hook entry Y offset, default -180
+}
+
+export default function AnimatedSplashScreen({
+  speedLines,
+  hook,
+  logoText,
+  subtitle,
+  onFinish,
+  duration = 2800,
+  hookStartX = -80,
+  hookStartY = -180,
+}: SplashScreenProps) {
+  const { colors } = useAppTheme();
+
+  const hookY = useSharedValue(hookStartY);
+  const hookX = useSharedValue(hookStartX);
+  const hookRotate = useSharedValue(25);
+  const hookOpacity = useSharedValue(0);
+
+  const titleOpacity = useSharedValue(0);
+  const titleY = useSharedValue(24);
+  const subtitleOpacity = useSharedValue(0);
+  const subtitleY = useSharedValue(16);
+
+  useEffect(() => {
+    SplashScreen.hideAsync();
+
+    hookOpacity.value = withTiming(1, { duration: 100 });
+
+    hookX.value = withSequence(
+      withTiming(20, { duration: 600, easing: Easing.out(Easing.cubic) }),
+      withSpring(0, { damping: 5, stiffness: 80 })
+    );
+
+    hookY.value = withTiming(0, {
+      duration: 600,
+      easing: Easing.out(Easing.cubic),
+    });
+
+    hookRotate.value = withSequence(
+      withTiming(-5, { duration: 600, easing: Easing.out(Easing.cubic) }),
+      withSpring(8, { damping: 3, stiffness: 50 }),
+      withSpring(-5, { damping: 4, stiffness: 60 }),
+      withSpring(3, { damping: 5, stiffness: 80 }),
+      withSpring(0, { damping: 8, stiffness: 100 })
+    );
+
+    titleOpacity.value = withDelay(800, withTiming(1, { duration: 400 }));
+    titleY.value = withDelay(800, withTiming(0, {
+      duration: 400,
+      easing: Easing.out(Easing.quad),
+    }));
+
+    subtitleOpacity.value = withDelay(1100, withTiming(1, { duration: 400 }));
+    subtitleY.value = withDelay(1100, withTiming(0, {
+      duration: 400,
+      easing: Easing.out(Easing.quad),
+    }));
+
+    const timeout = setTimeout(() => {
+      onFinish();
+    }, duration);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  const hookStyle = useAnimatedStyle(() => ({
+    opacity: hookOpacity.value,
+    transform: [
+      { translateX: hookX.value },
+      { translateY: hookY.value },
+      { rotate: `${hookRotate.value}deg` },
+    ],
+  }));
+
+  const titleStyle = useAnimatedStyle(() => ({
+    opacity: titleOpacity.value,
+    transform: [{ translateY: titleY.value }],
+  }));
+
+  const subtitleStyle = useAnimatedStyle(() => ({
+    opacity: subtitleOpacity.value,
+    transform: [{ translateY: subtitleY.value }],
+  }));
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background.main }]}>
+      <View style={styles.imageContainer}>
+        {/* Static background element */}
+        {speedLines}
+
+        {/* Animated hook */}
+        <Animated.View style={[styles.hookWrapper, hookStyle]}>
+          {hook}
+        </Animated.View>
+      </View>
+
+      <View style={styles.textBlock}>
+        <Animated.View style={titleStyle}>
+          <View style={{ height: 55, overflow: "hidden", justifyContent: "center" }}>
+            {logoText}
+          </View>
+        </Animated.View>
+
+        <Animated.View style={subtitleStyle}>
+          <Text style={[styles.subtitle, { color: colors.text.primary }]}>
+            {subtitle}
+          </Text>
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+  },
+  imageContainer: {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    marginBottom: 16,
+  },
+  hookWrapper: {
+    position: "absolute",
+    left: "15%",
+    top: "20%",
+  },
+  textBlock: {
+    alignItems: "center",
+    gap: 4,
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: textSize.sm,
+    fontFamily: Fonts.montserrat.semiBold,
+    textAlign: "center",
+  },
+});