@imksh/create 1.0.27 → 1.0.30

package/templates/react-native/src/components/common/TabHeader.tsx

@@ -1,58 +0,0 @@
-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/react-native/src/components/common/Welcome.tsx

@@ -1,55 +0,0 @@
-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 "@/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/react-native/src/components/ui/ClassicTabBar.tsx

@@ -1,129 +0,0 @@
-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,
-  },
-});

package/templates/react-native/src/components/ui/CustomTabBar.tsx

@@ -1,238 +0,0 @@
-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";
-import { LinearGradient } from "expo-linear-gradient";
-
-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}>
-        <View
-          style={[
-            styles.iconWrapper,
-            isFocused && {
-              backgroundColor: colors.primary,
-              width: 54,
-              height: 54,
-              borderRadius: 100,
-              alignItems: "center",
-              justifyContent: "center",
-            },
-          ]}
-        >
-          <Ionicons
-            name={iconName as any}
-            size={isFocused ? 20 : 24}
-            color={isFocused ? colors.primaryContent : colors.secondary}
-          />
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const CenterButton = ({ colors, onPress }: any) => {
-  return (
-    <View style={styles.centerButtonWrapper}>
-      <TouchableOpacity
-        activeOpacity={0.9}
-        onPress={onPress}
-        style={[
-          styles.centerButton,
-          {
-            backgroundColor: colors.primary,
-            shadowColor: colors.primary,
-          },
-        ]}
-      >
-        <Ionicons name="add" size={32} color={colors.primaryContent} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default function CustomTabBar({
-  state,
-  descriptors,
-  navigation,
-  showCenterButton = true,
-  onCenterButtonPress,
-}: any) {
-  const insets = useSafeAreaInsets();
-  const { colorScheme } = useColorScheme();
-  const colors = Colors[colorScheme ?? "light"];
-
-  const currentRoute = state.routes[state.index];
-  const currentOptions = descriptors[currentRoute.key].options;
-  if (currentOptions.tabBarStyle?.display === "none") {
-    return null;
-  }
-
-  const bottomOffset = insets.bottom > 0 ? insets.bottom : 20;
-  const totalTabBarHeight = bottomOffset + 70; // 70 is the height of the tab bar container
-
-  return (
-    <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
-      <LinearGradient
-        colors={[`${colors.base100}00`, colors.base100, colors.base100]}
-        locations={[0, 0.5, 1]}
-        style={{
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: totalTabBarHeight,
-        }}
-        pointerEvents="none"
-      />
-      <View
-        style={[
-          styles.container,
-          {
-            bottom: bottomOffset,
-            backgroundColor: colors.base100,
-            borderColor: colors.base300,
-          },
-        ]}
-      >
-        {state.routes.map((route: any, index: number) => {
-          const { options } = descriptors[route.key];
-          if (
-            options.href === null ||
-            options.tabBarItemStyle?.display === "none"
-          )
-            return null;
-
-          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 (
-            <React.Fragment key={route.key}>
-              {showCenterButton &&
-                index === Math.floor(state.routes.length / 2) && (
-                  <CenterButton colors={colors} onPress={onCenterButtonPress} />
-                )}
-              <TabItem
-                isFocused={isFocused}
-                onPress={onPress}
-                onLongPress={onLongPress}
-                iconName={iconName}
-                label={label as string}
-                colors={colors}
-              />
-            </React.Fragment>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginHorizontal: 20,
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderRadius: 40,
-    borderWidth: 1,
-    // shadowColor: "#000",
-    // shadowOffset: { width: 0, height: 5 },
-    // shadowOpacity: 0.10,
-    // shadowRadius: 10,
-    elevation: 1,
-    left: 0,
-    right: 0,
-    height: 70,
-  },
-  tabButton: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-  },
-  tabItem: {
-    alignItems: "center",
-    justifyContent: "center",
-    height: 50,
-  },
-  iconWrapper: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  activeIndicator: {
-    width: 20,
-    height: 3,
-    borderRadius: 2,
-    marginTop: 6,
-    position: "absolute",
-    bottom: -6,
-  },
-  centerButtonWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  centerButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: -40,
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.4,
-    shadowRadius: 15,
-    elevation: 15,
-  },
-});