@imksh/create 1.0.25 → 1.0.27

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

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

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

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Portal } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import { Txt } from "../common/Typography";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAuthStore } from "../../features/auth/store/useAuthStore";
+import { sidebarConfig } from "../../config/sidebar.config";
+import { router } from "expo-router";
+import Image from "./data-display/Image";
+
+const { width } = Dimensions.get("window");
+const SIDEBAR_WIDTH = width * 0.75;
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  side?: "left" | "right";
+  children?: React.ReactNode;
+}
+
+const MenuItem = ({
+  icon,
+  label,
+  onPress,
+  colors,
+}: {
+  icon: any;
+  label: string;
+  onPress?: () => void;
+  colors: any;
+}) => (
+  <TouchableOpacity
+    activeOpacity={0.7}
+    onPress={onPress}
+    className="flex-row items-center py-4 px-6 rounded-2xl mx-2"
+  >
+    <View className="w-10 h-10 rounded-full items-center justify-center bg-primary/10 mr-4">
+      <Ionicons name={icon} size={20} color={colors.primary} />
+    </View>
+    <Txt variant="md" className="text-base-content font-semibold">
+      {label}
+    </Txt>
+  </TouchableOpacity>
+);
+
+export default function Sidebar({
+  isOpen,
+  onClose,
+  side = "left",
+  children,
+}: SidebarProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+  const { user, logout } = useAuthStore();
+
+  const startValue = side === "left" ? -SIDEBAR_WIDTH : SIDEBAR_WIDTH;
+  const translateX = useSharedValue(isOpen ? 0 : startValue);
+  const backdropOpacity = useSharedValue(0);
+  const [isRendered, setIsRendered] = useState(false);
+
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+
+  useEffect(() => {
+    const targetValue = isOpen
+      ? 0
+      : side === "left"
+        ? -SIDEBAR_WIDTH
+        : SIDEBAR_WIDTH;
+    translateX.value = withTiming(targetValue, {
+      duration: 300,
+      easing: Easing.out(Easing.ease),
+    });
+
+    if (isOpen) {
+      backdropOpacity.value = withTiming(0.4, { duration: 300 });
+    } else {
+      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+        if (finished) {
+          runOnJS(setIsRendered)(false);
+        }
+      });
+    }
+  }, [isOpen, side, backdropOpacity, translateX, startValue]);
+
+  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  if (!isRendered && !isOpen) return null;
+
+  const role = user?.role?.toLowerCase() || "default";
+  const menuItems = sidebarConfig[role] || sidebarConfig.default;
+
+  return (
+    <Portal>
+      <View style={[StyleSheet.absoluteFill, { zIndex: 999 }]}>
+        {/* Backdrop Overlay */}
+        <TouchableWithoutFeedback onPress={onClose}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: "#000" },
+              backdropAnimatedStyle,
+            ]}
+          />
+        </TouchableWithoutFeedback>
+
+        {/* Sliding Sidebar Panel */}
+        <Animated.View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: side === "left" ? 0 : undefined,
+              right: side === "right" ? 0 : undefined,
+              width: SIDEBAR_WIDTH,
+              backgroundColor: colors.base100,
+              elevation: 24,
+              shadowColor: "#000",
+              shadowOffset: { width: side === "left" ? 5 : -5, height: 0 },
+              shadowOpacity: 0.2,
+              shadowRadius: 15,
+              overflow: "hidden",
+            },
+            sidebarAnimatedStyle,
+          ]}
+        >
+          {children || (
+            <View className="flex-1">
+              {/* Sidebar Header */}
+              <View
+                className="px-6 bg-base-200 border-b border-base-300 items-center flex flex-row gap-4"
+                style={{
+                  paddingTop: insets.top > 0 ? insets.top + 12 : 30,
+                  paddingBottom: 16,
+                }}
+              >
+                <TouchableOpacity
+                  onPress={() => {
+                    onClose();
+                    router.push("/(tenant)/profile");
+                  }}
+                  className="w-12 h-12 rounded-full bg-primary items-center justify-center"
+                  style={{
+                    shadowColor: colors.primary,
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowOpacity: 0.4,
+                    shadowRadius: 10,
+                    elevation: 8,
+                  }}
+                >
+                  {user?.avatar?.url ? (
+                    <View className="w-11 h-11 rounded-full border border-base-300 overflow-hidden">
+                      <Image
+                        src={user.avatar.url}
+                        style={{ width: 44, height: 44 }}
+                      />
+                    </View>
+                  ) : (
+                    <View className="w-11 h-11 rounded-full bg-primary/15 items-center justify-center border border-primary/10">
+                      <Ionicons
+                        name="person"
+                        size={22}
+                        color={colors.primary}
+                      />
+                    </View>
+                  )}
+                </TouchableOpacity>
+                <View className="flex-1">
+                  <Txt
+                    variant="md"
+                    className="font-bold text-base-content"
+                    numberOfLines={1}
+                  >
+                    {user?.name || "User Name"}
+                  </Txt>
+                  <Txt
+                    variant="xs"
+                    className="text-base-content/50"
+                    numberOfLines={1}
+                  >
+                    {user?.email || "user@example.com"}
+                  </Txt>
+                </View>
+              </View>
+
+              {/* Menu Items */}
+              <View className="flex-1 pt-4">
+                {menuItems.map((item, index) => (
+                  <MenuItem
+                    key={index}
+                    icon={item.icon}
+                    label={item.label}
+                    onPress={() => {
+                      onClose();
+                      router.push(item.route as any);
+                    }}
+                    colors={colors}
+                  />
+                ))}
+              </View>
+
+              {/* Footer */}
+              <View
+                className="p-6 border-t border-base-300"
+                style={{
+                  paddingBottom: insets.bottom > 0 ? insets.bottom + 10 : 20,
+                }}
+              >
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  className="flex-row items-center justify-center p-3 rounded-xl bg-error/10 border border-error/20"
+                  onPress={() => {
+                    onClose();
+                    logout();
+                  }}
+                >
+                  <Ionicons
+                    name="log-out-outline"
+                    size={20}
+                    color={colors.error}
+                  />
+                  <Txt variant="md" className="ml-2 font-bold text-error">
+                    Log Out
+                  </Txt>
+                </TouchableOpacity>
+              </View>
+            </View>
+          )}
+        </Animated.View>
+      </View>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,180 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  TouchableOpacityProps,
+  View,
+} from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+import { Ionicons } from "@expo/vector-icons";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
+  | "ghost"
+  | "outline";
+export type ButtonSize = "xs" | "sm" | "base" | "md" | "lg";
+
+export interface ButtonProps extends TouchableOpacityProps {
+  label: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  leftIcon?: keyof typeof Ionicons.glyphMap;
+  rightIcon?: keyof typeof Ionicons.glyphMap;
+  isFullWidth?: boolean;
+  soft?: boolean;
+  outline?: boolean;
+}
+
+export default function Button({
+  label,
+  variant = "primary",
+  size = "base",
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  isFullWidth = false,
+  soft = false,
+  outline = false,
+  style,
+  disabled,
+  ...props
+}: ButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const getVariantStyles = (): {
+    bg: string;
+    text: string;
+    border?: string;
+  } => {
+    switch (variant) {
+      case "primary":
+        return { bg: theme.primary, text: theme.primaryContent };
+      case "secondary":
+        return { bg: theme.secondary, text: theme.secondaryContent };
+      case "accent":
+        return { bg: theme.accent, text: theme.accentContent };
+      case "info":
+        return { bg: theme.info, text: "#fff" };
+      case "success":
+        return { bg: theme.success, text: "#fff" };
+      case "warning":
+        return { bg: theme.warning, text: "#fff" };
+      case "error":
+        return { bg: theme.error, text: "#fff" };
+      case "ghost":
+        return { bg: "transparent", text: theme.baseContent };
+      case "outline":
+        return {
+          bg: "transparent",
+          text: theme.baseContent,
+          border: theme.base300,
+        };
+      default:
+        return { bg: theme.primary, text: theme.primaryContent };
+    }
+  };
+
+  const getSizeStyles = (): {
+    height: number;
+    px: number;
+    fontSize: number;
+    iconSize: number;
+  } => {
+    switch (size) {
+      case "xs":
+        return { height: 30, px: 10, fontSize: 12, iconSize: 14 };
+      case "sm":
+        return { height: 36, px: 12, fontSize: 13, iconSize: 16 };
+      case "base":
+        return { height: 40, px: 12, fontSize: 14, iconSize: 16 };
+      case "md":
+        return { height: 48, px: 16, fontSize: 15, iconSize: 20 };
+      case "lg":
+        return { height: 56, px: 24, fontSize: 17, iconSize: 24 };
+      default:
+        return { height: 40, px: 12, fontSize: 14, iconSize: 16 };
+    }
+  };
+
+  const vStyles = getVariantStyles();
+  if (outline) {
+    vStyles.border = vStyles.bg === "transparent" ? theme.base300 : vStyles.bg;
+    vStyles.text = vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
+    vStyles.bg = "transparent";
+  } else if (soft && variant !== "ghost" && variant !== "outline") {
+    vStyles.text = vStyles.bg;
+    vStyles.bg = vStyles.bg + "26"; // ~15% opacity
+  }
+
+  const sStyles = getSizeStyles();
+
+  const isDisabled = disabled || isLoading;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      disabled={isDisabled}
+      style={[
+        {
+          backgroundColor: vStyles.bg as any,
+          height: sStyles.height,
+          paddingHorizontal: sStyles.px,
+          borderRadius: 12,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: isDisabled ? 0.6 : 1,
+          borderWidth: (variant === "outline" || outline) ? 1 : 0,
+          borderColor: vStyles.border,
+          width: isFullWidth ? "100%" : undefined,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {/* Loading overlay */}
+      {isLoading && (
+        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
+          <ActivityIndicator color={vStyles.text} size="small" />
+        </View>
+      )}
+
+      {/* Button content (hidden while loading to maintain dimensions) */}
+      <View style={{ flexDirection: "row", alignItems: "center", opacity: isLoading ? 0 : 1 }}>
+        {leftIcon && (
+          <Ionicons
+            name={leftIcon}
+            size={sStyles.iconSize}
+            color={vStyles.text}
+            style={{ marginRight: 8 }}
+          />
+        )}
+        <Txt
+          color={vStyles.text}
+          weight="semibold"
+          style={{ fontSize: sStyles.fontSize }}
+        >
+          {label}
+        </Txt>
+        {rightIcon && (
+          <Ionicons
+            name={rightIcon}
+            size={sStyles.iconSize}
+            color={vStyles.text}
+            style={{ marginLeft: 8 }}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+
+export interface ButtonGroupProps {
+  children: React.ReactNode;
+  orientation?: "horizontal" | "vertical";
+  spacing?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function ButtonGroup({
+  children,
+  orientation = "horizontal",
+  spacing = 8,
+  style,
+}: ButtonGroupProps) {
+  const isHorizontal = orientation === "horizontal";
+  
+  return (
+    <View
+      style={[
+        {
+          flexDirection: isHorizontal ? "row" : "column",
+          gap: spacing,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}