@imksh/create 1.0.23 → 1.0.25

package/templates/react-native/src/app/(auth)/edit-profile.tsx

@@ -0,0 +1,160 @@
+import React, { useState , useCallback } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import * as ImagePicker from "expo-image-picker";
+import { Ionicons } from "@expo/vector-icons";
+import Avatar from "../../components/ui/data-display/Avatar";
+
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import ScreenHeader from "@/components/common/ScreenHeader";
+import { toast } from "@/utils/toast";
+import { authService } from "@/services/auth.service";
+
+export default function EditProfileScreen() {
+  const { user, error, setUser, clearError } = useAuthStore();
+  const [loading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [name, setName] = useState(user?.name || "");
+  const [phone, setPhone] = useState(user?.phone || "");
+  const [avatarUri, setAvatarUri] = useState<string | null>(null);
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setAvatarUri(result.assets[0].uri);
+    }
+  };
+
+  const handleSave = async () => {
+    const formData = new FormData();
+    try {
+      setLoading(true);
+      if (name !== user?.name) formData.append("name", name);
+      if (phone !== user?.phone) formData.append("phone", phone);
+
+      if (avatarUri) {
+        const filename = avatarUri.split("/").pop() || "avatar.jpg";
+        const match = /\.(\w+)$/.exec(filename);
+        const type = match ? `image/${match[1]}` : `image`;
+
+        formData.append("file", {
+          uri: avatarUri,
+          name: filename,
+          type,
+        } as any);
+      }
+
+      // Only update if something changed
+      if (
+        (formData as any).getParts &&
+        (formData as any).getParts().length === 0
+      ) {
+        router.back();
+        return;
+      }
+
+      const res = await authService.updateMe(formData);
+      if (res.data.success) {
+        setUser(res.data.data);
+        toast.success("Profile updated successfully");
+        router.back();
+      } else {
+        toast.error(res.data.message);
+      }
+
+      console.log(res.data.data);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ScreenHeader title="Edit Profile" />
+      <ScrollContainer
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: 16,
+        }}
+        className="bg-base-100"
+      >
+        <View className="items-center mb-8">
+          <View className="relative">
+            <View className="w-28 h-28 rounded-full items-center justify-center border-4 border-base-100 shadow-sm shadow-base-content/20 overflow-hidden">
+              {avatarUri ? (
+                <Avatar url={avatarUri} size={104} />
+              ) : (
+                <Avatar
+                  url={
+                    user?.avatar?.url ||
+                    `https://placehold.co/600x400?text=${user?.name?.charAt(0).toUpperCase() || "U"}`
+                  }
+                  size={104}
+                />
+              )}
+            </View>
+            <TouchableOpacity
+              onPress={pickImage}
+              className="absolute bottom-0 right-0 bg-primary p-2 rounded-full border-2 border-base-100"
+            >
+              <Ionicons name="camera" size={18} color="#fff" />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {error ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          <Input
+            leftIcon="person"
+            placeholder="Full name"
+            value={name}
+            onChangeText={setName}
+          />
+
+          <Input
+            leftIcon="call"
+            placeholder="Phone number"
+            value={phone}
+            onChangeText={setPhone}
+            keyboardType="phone-pad"
+          />
+
+          <View className="mt-4">
+            <Button
+              label="Save Changes"
+              onPress={handleSave}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+        </View>
+      </ScrollContainer>
+    </>
+  );
+}

package/templates/react-native/src/app/(auth)/forgot-password.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+
+export default function ForgotPasswordScreen() {
+  const { genOtp, verifyOtp, resetPassword, loading, error, clearError } = useAuthStore();
+  const [step, setStep] = useState<"email" | "otp" | "password">("email");
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleSendOtp = async () => {
+    if (!email) return;
+    const success = await genOtp(email);
+    if (success) {
+      setStep("otp");
+      setTimer(60);
+    }
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp) return;
+    const success = await verifyOtp(email, otp);
+    if (success) {
+      setStep("password");
+    }
+  };
+
+  const handleResetPassword = async () => {
+    if (!newPassword) return;
+    const success = await resetPassword(newPassword);
+    if (success) {
+      router.replace("/(auth)/login");
+    }
+  };
+
+  return (
+    <ScrollContainer
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: "center",
+        padding: 16,
+      }}
+      className="bg-base-100"
+    >
+      <View className="w-full p-6">
+        <View className="items-center mb-8 w-full">
+          <Txt variant="xl" className="text-2xl mb-1 text-center">
+            {step === "email" && "Forgot Password"}
+            {step === "otp" && "Verify Email"}
+            {step === "password" && "Reset Password"}
+          </Txt>
+          <Txt
+            variant="sm"
+            className="text-xs text-base-content/50 text-center px-2"
+          >
+            {step === "email" && "Enter your email to receive an OTP"}
+            {step === "otp" && `Enter the OTP sent to ${email}`}
+            {step === "password" && "Enter your new password"}
+          </Txt>
+        </View>
+
+        {error ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-2">
+          {step === "email" && (
+            <>
+              <Input
+                leftIcon="mail"
+                placeholder="Email address"
+                value={email}
+                onChangeText={setEmail}
+                autoCapitalize="none"
+                keyboardType="email-address"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Send OTP →"
+                  onPress={handleSendOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "otp" && (
+            <>
+              <Input
+                leftIcon="key"
+                placeholder="Enter OTP"
+                value={otp}
+                onChangeText={setOtp}
+                keyboardType="numeric"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Verify OTP →"
+                  onPress={handleVerifyOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+              <View className="mt-4">
+                <Button
+                  label={timer > 0 ? `Resend OTP in ${timer}s` : "Resend OTP"}
+                  onPress={handleSendOtp}
+                  disabled={timer > 0 || loading}
+                  variant="outline"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "password" && (
+            <>
+              <Input
+                leftIcon="lock-closed"
+                rightIcon={showPassword ? "eye-off" : "eye"}
+                onRightIconPress={() => setShowPassword(!showPassword)}
+                placeholder="New Password"
+                value={newPassword}
+                onChangeText={setNewPassword}
+                secureTextEntry={!showPassword}
+              />
+              <View className="mt-2">
+                <Button
+                  label="Reset Password →"
+                  onPress={handleResetPassword}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+        </View>
+
+        <View className="mt-8">
+          <Txt
+            variant="sm"
+            className="text-sm text-base-content/50 text-center"
+          >
+            Remember your password?{" "}
+            <Txt
+              variant="md"
+              className="text-primary text-sm"
+              onPress={() => router.push("/(auth)/login")}
+            >
+              Sign in
+            </Txt>
+          </Txt>
+        </View>
+      </View>
+    </ScrollContainer>
+  );
+}

package/templates/react-native/src/app/{login.tsx → (auth)/login.tsx}

@@ -1,28 +1,34 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { View } from "react-native";
-import { useAuthStore } from "../store/useAuthStore";
-import { Txt } from "../components/common/Typography";
-import { Redirect } from "expo-router";
-
-import ScrollContainer from "../components/ui/layout/ScrollContainer";
-import Input from "../components/ui/inputs/Input";
-import Button from "../components/ui/buttons/Button";
-import Tabs from "../components/ui/navigation/Tabs";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { Redirect, router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import Tabs from "../../components/ui/navigation/Tabs";
 import Image from "@/components/ui/data-display/Image";
-import logo from "../../assets/images/logo/logo.png";
+import logo from "../../../assets/images/logo/logo.png";
 
 export default function LoginScreen() {
   const {
     login,
-    demoLogin,
     signup,
     sendOtp,
     loading,
     error,
     user,
     isCheckingAuth,
+    clearError,
+    demoLogin,
   } = useAuthStore();
 
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError]),
+  );
+
   const [mode, setMode] = useState("login");
   const [showPassword, setShowPassword] = useState(false);
   const [form, setForm] = useState({
@@ -32,6 +38,17 @@ export default function LoginScreen() {
     otp: "",
   });
   const [otpSent, setOtpSent] = useState(false);
+  const [timer, setTimer] = useState(0);
+
+  React.useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
 
   const handleChange = (name: string, value: string) => {
     setForm((prev) => ({ ...prev, [name]: value }));
@@ -44,7 +61,10 @@ export default function LoginScreen() {
     } else {
       if (!otpSent) {
         ok = await sendOtp(form.email);
-        if (ok) setOtpSent(true);
+        if (ok) {
+          setOtpSent(true);
+          setTimer(60);
+        }
       } else {
         ok = await signup(form.name, form.email, form.password, form.otp);
       }
@@ -62,22 +82,23 @@ export default function LoginScreen() {
         justifyContent: "center",
         padding: 16,
       }}
+      className="bg-base-100"
     >
-      <View className="w-full p-6">
+      <View className="w-full p-6 ">
         {/* Header */}
         <View className="items-center mb-8 w-full">
           <View className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 items-center justify-center mb-4">
             <Image src={logo} height={40} width={40} />
           </View>
           <Txt
-            variant="h1"
+            variant="xl"
             className="text-2xl mb-1 text-center"
             numberOfLines={1}
           >
             {mode === "login" ? "Welcome back" : "Create account"}
           </Txt>
           <Txt
-            variant="regular"
+            variant="sm"
             className="text-xs text-base-content/50 text-center px-2"
           >
             {mode === "login"
@@ -105,7 +126,7 @@ export default function LoginScreen() {
         {/* Error */}
         {error ? (
           <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
-            <Txt variant="mid" className="text-error text-xs text-center">
+            <Txt variant="md" className="text-error text-xs text-center">
               ⚠️ {error}
             </Txt>
           </View>
@@ -141,6 +162,18 @@ export default function LoginScreen() {
             secureTextEntry={!showPassword}
           />
 
+          {mode === "login" && (
+            <View className="items-end mt-1 mb-2">
+              <Txt
+                variant="md"
+                className="text-primary text-xs"
+                onPress={() => router.push("/(auth)/forgot-password")}
+              >
+                Forgot Password?
+              </Txt>
+            </View>
+          )}
+
           {mode === "signup" && otpSent && (
             <Input
               leftIcon="key"
@@ -170,9 +203,24 @@ export default function LoginScreen() {
           {mode === "login" && (
             <View className="mt-2">
               <Button
-                label="Use Demo Account"
-                onPress={demoLogin}
-                disabled={loading}
+                label="Demo Login"
+                onPress={() => demoLogin()}
+                isLoading={loading}
+                variant="outline"
+                isFullWidth
+              />
+            </View>
+          )}
+
+          {mode === "signup" && otpSent && (
+            <View className="mt-2">
+              <Button
+                label={timer > 0 ? `Resend OTP in ${timer}s` : "Resend OTP"}
+                onPress={async () => {
+                  const ok = await sendOtp(form.email);
+                  if (ok) setTimer(60);
+                }}
+                disabled={timer > 0 || loading}
                 variant="outline"
                 isFullWidth
               />
@@ -183,12 +231,12 @@ export default function LoginScreen() {
         {/* Footer */}
         <View className="mt-8">
           <Txt
-            variant="regular"
+            variant="sm"
             className="text-sm text-base-content/50 text-center"
           >
             {mode === "login" ? "New here? " : "Already have an account? "}
             <Txt
-              variant="mid"
+              variant="md"
               className="text-primary text-sm"
               onPress={() => {
                 setMode(mode === "login" ? "signup" : "login");

package/templates/react-native/src/app/(tabs)/index.tsx

@@ -9,6 +9,7 @@ import { toast } from "@/utils/toast";
 import ScrollContainer from "@/components/ui/layout/ScrollContainer";
 import Container from "@/components/ui/layout/Container";
 import Section from "@/components/ui/layout/Section";
+import Divider from "@/components/ui/layout/Divider";
 import { HStack, VStack } from "@/components/ui/layout/Stack";
 
 import Button from "@/components/ui/buttons/Button";
@@ -79,7 +80,7 @@ const Index = () => {
         >
           <HStack justify="space-between" align="center">
             <VStack>
-              <Txt variant="h2" className="font-extrabold tracking-tight">
+              <Txt variant="3xl" className="font-extrabold tracking-tight">
                 imksh-create
               </Txt>
               <Txt
@@ -115,12 +116,12 @@ const Index = () => {
                 <Badge label="SOFT" variant="primary" soft={true} />
               </HStack>
               <Txt
-                variant="h1"
+                variant="4xl"
                 className="text-primary font-black leading-tight"
               >
                 Stop configuring. Start building.
               </Txt>
-              <Txt variant="body" className="text-primary/70 font-medium">
+              <Txt variant="base" className="text-primary/70 font-medium">
                 Skip the setup. Build your product. A complete boilerplate with auth, state management, navigation, and beautiful prebuilt components.
               </Txt>
             </VStack>
@@ -197,7 +198,7 @@ const Index = () => {
                         size={50}
                       />
                       <VStack style={{ flex: 1 }}>
-                        <Txt variant="mid" className="font-bold">
+                        <Txt variant="md" className="font-bold">
                           Swipe me left!
                         </Txt>
                         <Txt
@@ -234,7 +235,7 @@ const Index = () => {
                       color={colors.accent}
                       style={{ marginBottom: 12 }}
                     />
-                    <Txt variant="h3" className="text-accent text-center">
+                    <Txt variant="2xl" className="text-accent text-center">
                       Double Tap or Swipe Up
                     </Txt>
                     <Txt
@@ -258,11 +259,11 @@ const Index = () => {
                     placeholder="Search components..."
                   />
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   <HStack justify="space-between" align="center">
                     <VStack>
-                      <Txt variant="mid" className="font-bold">
+                      <Txt variant="md" className="font-bold">
                         Biometric Login
                       </Txt>
                       <Txt
@@ -275,11 +276,11 @@ const Index = () => {
                     <Switch checked={isEnabled} onChange={setIsEnabled} />
                   </HStack>
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   <VStack spacing={12}>
                     <HStack justify="space-between" align="center">
-                      <Txt variant="mid" className="font-bold">
+                      <Txt variant="md" className="font-bold">
                         Intensity
                       </Txt>
                       <Badge label={`${sliderVal}%`} variant="secondary" />
@@ -292,7 +293,7 @@ const Index = () => {
                     />
                   </VStack>
 
-                  <View className="h-px w-full bg-base-300/50 mt-2" />
+                  <Divider style={{ marginTop: 8 }} />
 
                   {/* Text Input */}
                   <Input
@@ -301,7 +302,7 @@ const Index = () => {
                     leftIcon="mail-outline"
                   />
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   {/* Selection Controls */}
                   <VStack spacing={16}>
@@ -341,7 +342,7 @@ const Index = () => {
                   ]}
                 />
                 <View className="py-6 items-center justify-center">
-                  <Txt variant="body" className="text-base-content/60 italic">
+                  <Txt variant="base" className="text-base-content/60 italic">
                     Currently viewing {activeTab} content.
                   </Txt>
                 </View>
@@ -380,7 +381,7 @@ const Index = () => {
 
               <Card elevation={1} className="rounded-3xl p-6 mt-4">
                 <HStack justify="space-between" align="center" className="mb-4">
-                  <Txt variant="mid" className="font-bold">
+                  <Txt variant="md" className="font-bold">
                     Background Sync
                   </Txt>
                   <Spinner size={24} />
@@ -399,14 +400,14 @@ const Index = () => {
             <Section title="Information & FAQs" className="pb-20">
               <VStack spacing={12}>
                 <Accordion title="How to use this library?">
-                  <Txt variant="body">
+                  <Txt variant="base">
                     Simply import the components from the `@/components/ui`
                     directory. They are fully typed, gesture-driven, and styled
                     with NativeWind.
                   </Txt>
                 </Accordion>
                 <Accordion title="Does it support dark mode?">
-                  <Txt variant="body">
+                  <Txt variant="base">
                     Yes! All components automatically respond to the device&apos;s
                     color scheme, utilizing the custom CSS variables defined in
                     global.css.
@@ -437,11 +438,11 @@ const Index = () => {
               color={colors.primary}
             />
           </View>
-          <Txt variant="h2" className="text-center font-black">
+          <Txt variant="3xl" className="text-center font-black">
             Premium Modal
           </Txt>
           <Txt
-            variant="body"
+            variant="base"
             className="text-center text-base-content/70 leading-relaxed px-4"
           >
             This highly responsive bottom sheet is gesture-driven. You can