@imksh/create 1.0.31 → 1.0.33

package/templates/layers/react-native/base/src/app/screens/doc-viewer.tsx

@@ -0,0 +1,378 @@
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  Platform,
+  UIManager,
+  TouchableOpacity,
+} from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import ScreenHeader from "../../components/common/ScreenHeader";
+import { Txt } from "../../components/common/Typography";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import Container from "../../components/ui/layout/Container";
+import { Ionicons } from "@expo/vector-icons";
+import ProgressBar from "../../components/ui/feedback/ProgressBar";
+import * as FileSystem from "expo-file-system";
+import * as WebBrowser from "expo-web-browser";
+import * as Sharing from "expo-sharing";
+import { isExpoGo, hasNativeModule } from "../../utils/env";
+
+const hasPdfViewManager = (): boolean => {
+  try {
+    return Boolean(
+      UIManager.getViewManagerConfig &&
+      UIManager.getViewManagerConfig("RNPDFPdfView")
+    );
+  } catch {
+    return false;
+  }
+};
+
+const getPdfComponent = () => {
+  if (
+    isExpoGo() ||
+    !hasNativeModule("ReactNativeBlobUtil") ||
+    !hasPdfViewManager()
+  ) {
+    return null;
+  }
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require("react-native-pdf");
+    return mod.default || mod;
+  } catch {
+    return null;
+  }
+};
+
+const getWebViewComponent = () => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require("react-native-webview");
+    return mod.WebView || mod.default || mod;
+  } catch {
+    return null;
+  }
+};
+
+export default function DocViewerScreen() {
+  const router = useRouter();
+  const { url, name } = useLocalSearchParams<{
+    url: string;
+    name?: string;
+  }>();
+
+  useSafeAreaInsets();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const colors = Colors[isDark ? "dark" : "light"];
+
+  const [totalPages, setTotalPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [password, setPassword] = useState("");
+  const [isPasswordRequired, setIsPasswordRequired] = useState(false);
+  const [inputPassword, setInputPassword] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const [localUri, setLocalUri] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+
+  const PdfComponent = useMemo(() => getPdfComponent(), []);
+  const WebViewComponent = useMemo(() => getWebViewComponent(), []);
+
+  useEffect(() => {
+    if (!url) return;
+
+    if (url.startsWith("http")) {
+      const downloadFile = async () => {
+        try {
+          const filename = `doc_${Date.now()}.pdf`;
+
+          // Modern expo-file-system File API check
+          if (FileSystem.File?.downloadFileAsync && FileSystem.Paths?.cache) {
+            const destination = new FileSystem.File(FileSystem.Paths.cache, filename);
+            const downloaded = await FileSystem.File.downloadFileAsync(url, destination, {
+              onProgress: (progress) => {
+                if (progress.totalBytes > 0) {
+                  setDownloadProgress(progress.bytesWritten / progress.totalBytes);
+                }
+              },
+            });
+            setLocalUri(downloaded.uri);
+            return;
+          }
+
+          // Legacy downloadResumable fallback if supported
+          if (typeof (FileSystem as any).createDownloadResumable === "function") {
+            const baseDir =
+              (FileSystem as any).documentDirectory ||
+              (FileSystem as any).cacheDirectory ||
+              "";
+            const fileUri = `${baseDir}${filename}`;
+            const downloadResumable = (FileSystem as any).createDownloadResumable(
+              url,
+              fileUri,
+              {},
+              (progressEvent: any) => {
+                const progress =
+                  progressEvent.totalBytesExpectedToWrite > 0
+                    ? progressEvent.totalBytesWritten / progressEvent.totalBytesExpectedToWrite
+                    : 0;
+                setDownloadProgress(progress);
+              }
+            );
+
+            const result = await downloadResumable.downloadAsync();
+            if (result && result.uri) {
+              setLocalUri(result.uri);
+              return;
+            }
+          }
+
+          // Fallback to url directly if local download is unavailable
+          setLocalUri(url);
+        } catch (error) {
+          console.error("Download error:", error);
+          // Still fallback to original url
+          setLocalUri(url);
+        }
+      };
+      downloadFile();
+    } else {
+      setLocalUri(url);
+    }
+  }, [url]);
+
+  const handleShare = async () => {
+    try {
+      const targetUri = localUri || url;
+      if (targetUri && (await Sharing.isAvailableAsync())) {
+        await Sharing.shareAsync(targetUri, {
+          mimeType: "application/pdf",
+          dialogTitle: name || "Open Document",
+          UTI: "com.adobe.pdf",
+        });
+      } else if (url && url.startsWith("http")) {
+        await WebBrowser.openBrowserAsync(url);
+      }
+    } catch (e) {
+      console.warn("Failed to open or share document:", e);
+    }
+  };
+
+  if (!url) {
+    return (
+      <View style={{ flex: 1, backgroundColor: colors.base100 }}>
+        <ScreenHeader title="Document Viewer" onBack={() => router.back()} />
+        <View className="flex-1 items-center justify-center p-4">
+          <Ionicons
+            name="alert-circle-outline"
+            size={48}
+            color={colors.baseContent}
+            style={{ opacity: 0.5 }}
+          />
+          <Txt variant="base" className="mt-4 text-center opacity-70">
+            No document URL provided.
+          </Txt>
+        </View>
+      </View>
+    );
+  }
+
+  const handlePasswordSubmit = () => {
+    setPassword(inputPassword);
+    setIsPasswordRequired(false);
+    setErrorMsg("");
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.base100 }}>
+      <ScreenHeader
+        title={name || "Document Viewer"}
+        subtitle={totalPages > 0 ? `Page ${currentPage} of ${totalPages}` : undefined}
+        onBack={() => router.back()}
+        actions={
+          <TouchableOpacity
+            onPress={handleShare}
+            activeOpacity={0.7}
+            className="w-10 h-10 rounded-full bg-base-200/80 items-center justify-center border border-base-300/10 shadow-sm"
+          >
+            <Ionicons name="share-outline" color={colors.baseContent} size={20} />
+          </TouchableOpacity>
+        }
+      />
+
+      {isPasswordRequired ? (
+        <Container className="flex-1 justify-center items-center px-6">
+          <View
+            className="p-6 rounded-3xl w-full"
+            style={{ backgroundColor: colors.base200 }}
+          >
+            <Txt variant="xl" className="font-bold text-center mb-2">
+              Password Protected
+            </Txt>
+            <Txt variant="base" className="text-center text-base-content/70 mb-6">
+              This document requires a password to open.
+            </Txt>
+            <Input
+              placeholder="Enter password"
+              value={inputPassword}
+              onChangeText={setInputPassword}
+              secureTextEntry
+              className="mb-4"
+            />
+            {errorMsg ? (
+              <Txt variant="caption" className="text-error text-center mb-4">
+                {errorMsg}
+              </Txt>
+            ) : null}
+            <Button
+              label="Unlock Document"
+              variant="primary"
+              isFullWidth
+              onPress={handlePasswordSubmit}
+            />
+          </View>
+        </Container>
+      ) : (
+        <View style={styles.pdfContainer}>
+          {!localUri && !downloadError ? (
+            <View className="flex-1 items-center justify-center w-full relative">
+              <View className="w-3/4 max-w-sm absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-base-100 p-6 rounded-2xl shadow-lg border border-base-300">
+                <ProgressBar
+                  progress={downloadProgress * 100}
+                  label="Downloading Document"
+                />
+              </View>
+            </View>
+          ) : downloadError ? (
+            <View className="flex-1 items-center justify-center p-4">
+              <Ionicons
+                name="close-circle-outline"
+                size={48}
+                color={colors.error}
+                style={{ opacity: 0.8 }}
+              />
+              <Txt
+                variant="base"
+                className="mt-4 text-center text-error font-semibold"
+              >
+                {downloadError}
+              </Txt>
+              <Button
+                label="Go Back"
+                variant="outline"
+                style={{ marginTop: 20 }}
+                onPress={() => router.back()}
+              />
+            </View>
+          ) : PdfComponent ? (
+            <PdfComponent
+              source={{ uri: localUri!, cache: false }}
+              password={password}
+              onLoadComplete={(numberOfPages: number) => {
+                setTotalPages(numberOfPages);
+              }}
+              onPageChanged={(page: number) => {
+                setCurrentPage(page);
+              }}
+              onError={(error: unknown) => {
+                const err = error as { message?: string };
+                if (err?.message?.toLowerCase().includes("password")) {
+                  setIsPasswordRequired(true);
+                  setErrorMsg("Incorrect password. Please try again.");
+                }
+              }}
+              trustAllCerts={false}
+              style={[styles.pdf, { backgroundColor: colors.base200 }]}
+            />
+          ) : Platform.OS === "ios" && WebViewComponent ? (
+            <View style={{ flex: 1, width: "100%" }}>
+              <WebViewComponent
+                source={{ uri: localUri || url }}
+                style={[styles.pdf, { backgroundColor: colors.base200 }]}
+                originWhitelist={["*"]}
+                scalesPageToFit={true}
+              />
+            </View>
+          ) : Platform.OS === "android" &&
+            WebViewComponent &&
+            url &&
+            url.startsWith("http") ? (
+            <View style={{ flex: 1, width: "100%" }}>
+              <WebViewComponent
+                source={{
+                  uri: `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(url)}`,
+                }}
+                style={[styles.pdf, { backgroundColor: colors.base200 }]}
+                originWhitelist={["*"]}
+                scalesPageToFit={true}
+              />
+            </View>
+          ) : (
+            <View className="flex-1 items-center justify-center p-6 w-full">
+              <View
+                className="p-6 rounded-3xl w-full max-w-sm items-center border border-base-300"
+                style={{ backgroundColor: colors.base200 }}
+              >
+                <View
+                  className="w-16 h-16 rounded-full items-center justify-center mb-4"
+                  style={{ backgroundColor: `${colors.primary}20` }}
+                >
+                  <Ionicons
+                    name="document-text-outline"
+                    size={36}
+                    color={colors.primary}
+                  />
+                </View>
+                <Txt variant="lg" className="font-bold text-center mb-1">
+                  {name || "Document Ready"}
+                </Txt>
+                <Txt variant="caption" className="text-center opacity-70 mb-6">
+                  Native PDF rendering requires a development build. You can open or
+                  share this document in your device reader.
+                </Txt>
+                <Button
+                  label="Open in Device Reader"
+                  variant="primary"
+                  isFullWidth
+                  onPress={handleShare}
+                  className="mb-3"
+                />
+                {url && url.startsWith("http") ? (
+                  <Button
+                    label="Open in Web Browser"
+                    variant="outline"
+                    isFullWidth
+                    onPress={() => WebBrowser.openBrowserAsync(url)}
+                  />
+                ) : null}
+              </View>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pdfContainer: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  pdf: {
+    flex: 1,
+    width: Dimensions.get("window").width,
+    height: Dimensions.get("window").height,
+  },
+});

package/templates/layers/react-native/base/src/components/common/ConfirmationToast.tsx

@@ -1,17 +1,33 @@
 import { View, TouchableOpacity } from "react-native";
-import React from "react";
+
 import { Txt } from "./Typography";
 
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
+import { useTranslation } from "react-i18next";
+
+import { Portal } from "react-native-paper";
+
+export interface ConfirmationToastProps {
+  name?: string;
+  message: string;
+  fun: () => void;
+  setShow: (show: boolean) => void;
+  cancleText?: string;
+  confirmText?: string;
+}
 
 export default function ConfirmationToast({
   name,
   message,
   fun,
-  icon,
   setShow,
-}) {
+  cancleText,
+  confirmText,
+}: ConfirmationToastProps) {
+  const { t } = useTranslation();
+  const cText = cancleText ?? t("common.cancel");
+  const confText = confirmText ?? t("common.confirm");
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
 
@@ -21,47 +37,49 @@ export default function ConfirmationToast({
   };
 
   return (
-    <View className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-[90%]">
-      <View
-        className="my-4 pt-8 bg-base-100"
-        style={{
-          borderRadius: 20,
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 4,
-          },
-          shadowOpacity: 0.1,
-          shadowRadius: 8,
-          elevation: 8,
-        }}
-      >
-        <View className="justify-center items-center px-8">
-          <Txt variant="h1">{name}</Txt>
-          <Txt variant="body" className="mt-4" style={{ textAlign: "center" }}>
-            {message}
-          </Txt>
-        </View>
+    <Portal>
+      <View className="absolute inset-0 justify-center items-center bg-black/40 z-50">
         <View
-          className="flex-row mt-8"
-          style={{ borderTopWidth: 1, borderTopColor: colors.base300 }}
+          className="w-[90%] pt-8 bg-base-100"
+          style={{
+            borderRadius: 20,
+            shadowColor: "#000",
+            shadowOffset: {
+              width: 0,
+              height: 4,
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 8,
+            elevation: 8,
+          }}
         >
-          <TouchableOpacity
-            className="w-[50%] justify-center items-center h-20"
-            style={{ borderRightWidth: 1, borderRightColor: colors.base300 }}
-            onPress={() => setShow(false)}
-          >
-            <Txt variant="mid">Cancle</Txt>
-          </TouchableOpacity>
-          <TouchableOpacity
-            className="w-[50%] justify-center items-center"
-            style={{ borderLeftWidth: 1, borderLeftColor: colors.base300 }}
-            onPress={ok}
+          <View className="justify-center items-center px-8">
+            <Txt variant="xl">{name}</Txt>
+            <Txt variant="sm" className="mt-4" style={{ textAlign: "center" }}>
+              {message}
+            </Txt>
+          </View>
+          <View
+            className="flex-row mt-8"
+            style={{ borderTopWidth: 1, borderTopColor: colors.base300 }}
           >
-            <Txt variant="mid">Ok</Txt>
-          </TouchableOpacity>
+            <TouchableOpacity
+              className="w-[50%] justify-center items-center h-20"
+              style={{ borderRightWidth: 1, borderRightColor: colors.base300 }}
+              onPress={() => setShow(false)}
+            >
+              <Txt variant="sm">{cText}</Txt>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className="w-[50%] justify-center items-center"
+              style={{ borderLeftWidth: 1, borderLeftColor: colors.base300 }}
+              onPress={ok}
+            >
+              <Txt variant="sm">{confText}</Txt>
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
-    </View>
+    </Portal>
   );
 }

package/templates/layers/react-native/base/src/components/common/GoogleAuthButton.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { TouchableOpacity, View, ActivityIndicator } from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "./../../constants/Colors";
+import { Txt } from "./Typography";
+import { useAuthStore } from "./../../store/useAuthStore";
+import { toast } from "./../../utils/toast";
+import { Ionicons } from "@expo/vector-icons";
+import { isExpoGo, hasNativeModule } from "../../utils/env";
+
+interface GoogleAuthButtonProps {
+  onSuccess?: () => void;
+  label?: string;
+  isLogin?: boolean;
+}
+
+export default function GoogleAuthButton({
+  onSuccess,
+  label,
+  isLogin = true,
+}: GoogleAuthButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const { googleLogin } = useAuthStore();
+  const [loading, setLoading] = useState(false);
+
+  const handlePress = async () => {
+    if (isExpoGo() || !hasNativeModule("RNGoogleSignin")) {
+      toast.info(
+        "Development Build Required",
+        "Google Sign-In requires a custom development build (expo-dev-client)."
+      );
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      // Lazily require Google Sign-In only when running in a native custom development build
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const googleModule = require("@react-native-google-signin/google-signin");
+      const { GoogleSignin, statusCodes } = googleModule;
+
+      if (!GoogleSignin) {
+        toast.error("Error", "Google Sign-In module is not available.");
+        return;
+      }
+
+      GoogleSignin.configure({
+        webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID || "",
+        iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID || "",
+      });
+
+      await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
+
+      // Force account selection every time
+      try {
+        await GoogleSignin.signOut();
+      } catch {
+        // Ignore if already signed out
+      }
+
+      const userInfo = await GoogleSignin.signIn();
+      const idToken = userInfo.data?.idToken;
+
+      if (!idToken) {
+        throw new Error("No ID token returned from Google");
+      }
+
+      const ok = await googleLogin(idToken);
+      if (ok) {
+        const currentUser = useAuthStore.getState().user;
+        toast.success("Success", `Welcome back, ${currentUser?.name || "User"}`);
+        onSuccess?.();
+      } else {
+        toast.error("Error", "Google authentication failed");
+      }
+    } catch (error: unknown) {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const statusCodes = hasNativeModule("RNGoogleSignin")
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        ? require("@react-native-google-signin/google-signin").statusCodes
+        : undefined;
+
+      const err = error as { code?: string; message?: string };
+      if (err.code === statusCodes?.SIGN_IN_CANCELLED) {
+        // User cancelled the login flow
+      } else if (err.code === statusCodes?.IN_PROGRESS) {
+        // Operation is in progress already
+      } else if (err.code === statusCodes?.PLAY_SERVICES_NOT_AVAILABLE) {
+        toast.error("Error", "Google Play Services not available");
+      } else {
+        toast.error("Error", err.message || "An unexpected error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={handlePress}
+      disabled={loading}
+      className="w-full flex-row items-center justify-center py-4 rounded-xl mt-4 border"
+      style={{
+        backgroundColor: colors.base100,
+        borderColor: colors.base300,
+      }}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.primary} />
+      ) : (
+        <View className="flex-row items-center justify-center gap-2">
+          <Ionicons name="logo-google" size={20} color={colors.baseContent} />
+          <Txt className="font-semibold text-base text-base-content">
+            {label || (isLogin ? "Continue with Google" : "Sign up with Google")}
+          </Txt>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}