@imksh/create 1.0.24 → 1.0.26

package/templates/production-fullstack/mobile/src/components/common/TabHeader.tsx

@@ -0,0 +1,58 @@
+import { View, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+import { Txt } from "./Typography";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import Sidebar from "../ui/Sidebar";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function TabHeader({
+  title,
+  actions,
+  showMenuButton = false,
+}: {
+  title?: string;
+  actions?: React.ReactNode;
+  showMenuButton?: boolean;
+}) {
+  const { colorScheme } = useColorScheme();
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      <View
+        className="px-6 flex-row items-center justify-between border-b border-base-200 w-full"
+        style={{
+          backgroundColor: colors.base200,
+          height: insets.top + 56,
+          paddingTop: insets.top,
+        }}
+      >
+        <View className="flex-row items-center flex-1 mr-4">
+          {showMenuButton && (
+            <TouchableOpacity
+              onPress={() => setIsSidebarOpen(true)}
+              activeOpacity={0.7}
+              className="w-10 h-10 rounded-full bg-base-200/80 items-center justify-center mr-3 border border-base-300/10 shadow-sm"
+            >
+              <Ionicons
+                name="menu-outline"
+                color={colors.baseContent}
+                size={22}
+              />
+            </TouchableOpacity>
+          )}
+          <Txt variant="xl" className="text-primary">
+            {title}
+          </Txt>
+        </View>
+        <View className="flex-row items-center gap-2">{actions}</View>
+      </View>
+
+      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
+    </>
+  );
+}

package/templates/production-fullstack/mobile/src/components/common/Typography.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Text, TextProps } from "react-native";
+export const FontFamily = {
+  regular: "InterRegular",
+  medium: "InterMedium",
+  semibold: "InterSemiBold",
+  bold: "InterBold",
+  extrabold: "InterExtraBold",
+} as const;
+
+export type TxtVariant =
+  | "caption"
+  | "xxs"
+  | "xs"
+  | "sm"
+  | "base"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl";
+
+export interface TxtProps extends TextProps {
+  variant?: TxtVariant;
+  color?: string;
+  align?: "auto" | "left" | "right" | "center" | "justify";
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
+}
+
+export const Txt = ({
+  variant = "base",
+  color,
+  align,
+  weight,
+  style,
+  className = "",
+  children,
+  ...props
+}: TxtProps) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "caption":
+        return { fontFamily: FontFamily.regular, fontSize: 10 };
+      case "xxs":
+        return { fontFamily: FontFamily.regular, fontSize: 8 };
+      case "xs":
+        return { fontFamily: FontFamily.regular, fontSize: 10 };
+      case "sm":
+        return { fontFamily: FontFamily.regular, fontSize: 12 };
+      case "base":
+        return { fontFamily: FontFamily.regular, fontSize: 14 };
+      case "md":
+        return { fontFamily: FontFamily.medium, fontSize: 16 };
+      case "lg":
+        return { fontFamily: FontFamily.semibold, fontSize: 18 };
+      case "xl":
+        return { fontFamily: FontFamily.bold, fontSize: 20 };
+      case "2xl":
+        return { fontFamily: FontFamily.bold, fontSize: 24 };
+      case "3xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 30 };
+      case "4xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 36 };
+      case "5xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 48 };
+      case "6xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 60 };
+      case "7xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 72 };
+      default:
+        return { fontFamily: FontFamily.regular, fontSize: 14 };
+    }
+  };
+
+  const baseStyle = getVariantStyles();
+  const hasColorClass = className.split(" ").some((c) => {
+    if (!c.startsWith("text-")) return false;
+    const val = c.substring(5).split("/")[0]; // handle potential opacity suffix like text-white/80
+    const isSize = ["xxs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "caption"].includes(val);
+    return !isSize;
+  });
+  const defaultColorClass = hasColorClass
+    ? ""
+    : variant === "xs"
+      ? "text-secondary"
+      : "text-base-content";
+
+  // Override specific properties if provided
+  const customStyles: any = {};
+  if (color) customStyles.color = color;
+  if (align) customStyles.textAlign = align;
+  if (weight) {
+    if (weight === "bold" || weight === "black")
+      customStyles.fontFamily = FontFamily.bold;
+    if (weight === "semibold") customStyles.fontFamily = FontFamily.semibold;
+    if (weight === "medium") customStyles.fontFamily = FontFamily.medium;
+    if (weight === "normal") customStyles.fontFamily = FontFamily.regular;
+  }
+
+  return (
+    <Text
+      className={`${defaultColorClass} ${className}`}
+      style={[baseStyle, customStyles, style]}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};

package/templates/production-fullstack/mobile/src/components/common/Welcome.tsx

@@ -0,0 +1,55 @@
+import { View, Text } from "react-native";
+import { useState, useEffect } from "react";
+import LottieView from "lottie-react-native";
+import infinity1 from "../../../assets/animations/infinity.json";
+import { Txt } from "./Typography";
+import { useAuthStore } from "../../features/auth/store/useAuthStore";
+
+const emojis = [
+  "😎", "😍", "🤩", "🎉", "🥳", "💐", "✨", "😊", "👋", "💖", "🤗"
+];
+
+const Welcome = () => {
+  const { user } = useAuthStore();
+  const [i, setI] = useState(0);
+  const [emoji, setEmoji] = useState("😎");
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setI((prevI) => {
+        const nextI = (prevI + 1) % emojis.length;
+        setEmoji(emojis[nextI]);
+        return nextI;
+      });
+    }, 2000);
+    return () => clearInterval(timer);
+  }, []);
+  return (
+    <View className="flex-row flex-wrap justify-between item-center pl-4 mt-6 items-center">
+      <View className="w-[55%] relative justify-end">
+        <Txt variant="6xl"> Hey {user ? user.name : "There"}!</Txt>
+        <View className="flex-row w-64 items-center">
+          <Txt variant="6xl">Welcome Back</Txt>
+          <Text
+            key={i}
+            style={{ fontSize: 28 }}
+            className="animate-float-up relative top-3"
+          >
+            {" "}
+            {emoji}
+          </Text>
+        </View>
+      </View>
+      <View className="w-[45%] justify-center items-center ">
+        <LottieView
+          source={infinity1}
+          autoPlay
+          loop
+          style={{ width: 120, height: 120 }}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Welcome;

package/templates/production-fullstack/mobile/src/components/ui/BottomModal.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Portal } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const { height } = Dimensions.get("window");
+
+interface BottomModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  heightPercent?: number; // e.g. 0.5 for 50% of the screen height
+}
+
+export default function BottomModal({
+  isOpen,
+  onClose,
+  children,
+  heightPercent = 0.5,
+}: BottomModalProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  const MODAL_HEIGHT = height * heightPercent;
+  const translateY = useSharedValue(MODAL_HEIGHT);
+  const backdropOpacity = useSharedValue(0);
+  const [isRendered, setIsRendered] = useState(false);
+
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      translateY.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0.4, { duration: 300 });
+    } else {
+      translateY.value = withTiming(MODAL_HEIGHT, {
+        duration: 300,
+        easing: Easing.in(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+        if (finished) {
+          runOnJS(setIsRendered)(false);
+        }
+      });
+    }
+     
+  }, [isOpen]);
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (event.translationY > 0) {
+        // eslint-disable-next-line react-hooks/immutability
+        translateY.value = event.translationY;
+      }
+    })
+    .onEnd((event) => {
+      if (event.translationY > MODAL_HEIGHT * 0.3 || event.velocityY > 500) {
+        runOnJS(onClose)();
+      } else {
+        // eslint-disable-next-line react-hooks/immutability
+        translateY.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease),
+        });
+      }
+    });
+
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  if (!isRendered && !isOpen) return null;
+
+  return (
+    <Portal>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={[StyleSheet.absoluteFill, { zIndex: 999 }]}>
+          {/* Backdrop Overlay */}
+          <TouchableWithoutFeedback onPress={onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: "#000" },
+                backdropAnimatedStyle,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+
+          {/* Sliding Bottom Modal Panel */}
+          <Animated.View
+            style={[
+              {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: MODAL_HEIGHT,
+                backgroundColor: colors.base100,
+                borderTopLeftRadius: 30,
+                borderTopRightRadius: 30,
+                elevation: 24,
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: -5 },
+                shadowOpacity: 0.15,
+                shadowRadius: 15,
+                paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+              },
+              modalAnimatedStyle,
+            ]}
+          >
+            {/* Drag Handle Indicator */}
+            <GestureDetector gesture={panGesture}>
+              <View
+                className="items-center pt-4 pb-6 bg-base-100 rounded-t-[30px]"
+                style={{ zIndex: 10 }}
+              >
+                <View className="w-16 h-1.5 rounded-full bg-base-300" />
+              </View>
+            </GestureDetector>
+
+            {/* Modal Content */}
+            <View className="flex-1 px-6">{children}</View>
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </Portal>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/ClassicTabBar.tsx

@@ -0,0 +1,129 @@
+import { Txt } from "../common/Typography";
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useColorScheme } from 'nativewind';
+import { Colors } from '../../constants/Colors';
+import { getTabConfig } from '../../config/tabNavigation';
+
+const TabItem = ({ isFocused, onPress, onLongPress, iconName, label, colors }: any) => {
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityState={isFocused ? { selected: true } : {}}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={styles.tabButton}
+      activeOpacity={0.8}
+    >
+      <View style={styles.tabItem}>
+        <Ionicons 
+          name={iconName as any} 
+          size={24} 
+          color={isFocused ? colors.primary : colors.secondary} 
+          style={{ marginBottom: 4 }} 
+        />
+        <Txt 
+          style={{ 
+            color: isFocused ? colors.primary : colors.secondary, 
+            fontWeight: isFocused ? '600' : '500', 
+            fontSize: 11 
+          }}
+        >
+          {label}
+        </Txt>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default function ClassicTabBar({ state, descriptors, navigation }: any) {
+  const insets = useSafeAreaInsets();
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? 'light'];
+
+  return (
+    <View style={[
+      styles.container, 
+      { 
+        backgroundColor: colors.base100, 
+        borderTopColor: colors.base300,
+        height: 60 + insets.bottom,
+        paddingBottom: insets.bottom > 0 ? insets.bottom : 8,
+      }
+    ]}>
+      {state.routes.map((route: any, index: number) => {
+        const { options } = descriptors[route.key];
+        const tabConfig = getTabConfig(route.name);
+        const label = options.tabBarLabel !== undefined
+          ? options.tabBarLabel
+          : options.title !== undefined
+          ? options.title
+          : tabConfig?.title || route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        let iconName: any = tabConfig?.baseIcon || "home";
+        iconName = isFocused ? iconName : `${iconName}-outline`;
+
+        return (
+          <TabItem
+            key={route.key}
+            isFocused={isFocused}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            iconName={iconName}
+            label={label as string}
+            colors={colors}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderTopWidth: 1,
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 5,
+  },
+  tabButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  tabItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 50,
+  },
+});