@imksh/create 1.0.23 → 1.0.25

package/templates/mern-react-native/mobile/src/components/ui/Sidebar.tsx

@@ -20,6 +20,9 @@ import { Txt } from "../common/Typography";
 import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAuthStore } from "../../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;
@@ -27,6 +30,7 @@ const SIDEBAR_WIDTH = width * 0.75;
 interface SidebarProps {
   isOpen: boolean;
   onClose: () => void;
+  side?: "left" | "right";
   children?: React.ReactNode;
 }
 
@@ -44,24 +48,30 @@ const MenuItem = ({
   <TouchableOpacity
     activeOpacity={0.7}
     onPress={onPress}
-    className="flex-row items-center py-4 px-4 rounded-2xl"
+    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="h3" className="text-base-content font-medium">
+    <Txt variant="md" className="text-base-content font-semibold">
       {label}
     </Txt>
   </TouchableOpacity>
 );
 
-export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
+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 translateX = useSharedValue(-SIDEBAR_WIDTH);
+  const startValue = side === "left" ? -SIDEBAR_WIDTH : SIDEBAR_WIDTH;
+  const translateX = useSharedValue(isOpen ? 0 : startValue);
   const backdropOpacity = useSharedValue(0);
   const [isRendered, setIsRendered] = useState(false);
 
@@ -70,24 +80,26 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
   }
 
   useEffect(() => {
+    const targetValue = isOpen
+      ? 0
+      : side === "left"
+        ? -SIDEBAR_WIDTH
+        : SIDEBAR_WIDTH;
+    translateX.value = withTiming(targetValue, {
+      duration: 300,
+      easing: Easing.out(Easing.ease),
+    });
+
     if (isOpen) {
-      translateX.value = withTiming(0, {
-        duration: 300,
-        easing: Easing.out(Easing.ease),
-      });
       backdropOpacity.value = withTiming(0.4, { duration: 300 });
     } else {
-      translateX.value = withTiming(-SIDEBAR_WIDTH, {
-        duration: 300,
-        easing: Easing.in(Easing.ease),
-      });
       backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
         if (finished) {
           runOnJS(setIsRendered)(false);
         }
       });
     }
-  }, [isOpen, backdropOpacity, translateX]);
+  }, [isOpen, side, backdropOpacity, translateX, startValue]);
 
   const sidebarAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
@@ -99,6 +111,9 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
 
   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 }]}>
@@ -120,12 +135,13 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
               position: "absolute",
               top: 0,
               bottom: 0,
-              left: 0,
+              left: side === "left" ? 0 : undefined,
+              right: side === "right" ? 0 : undefined,
               width: SIDEBAR_WIDTH,
               backgroundColor: colors.base100,
               elevation: 24,
               shadowColor: "#000",
-              shadowOffset: { width: 5, height: 0 },
+              shadowOffset: { width: side === "left" ? 5 : -5, height: 0 },
               shadowOpacity: 0.2,
               shadowRadius: 15,
               overflow: "hidden",
@@ -137,13 +153,17 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
             <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"
+                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: 8,
+                  paddingBottom: 16,
                 }}
               >
-                <View
+                <TouchableOpacity
+                  onPress={() => {
+                    onClose();
+                    router.push("/(tenant)/profile");
+                  }}
                   className="w-12 h-12 rounded-full bg-primary items-center justify-center"
                   style={{
                     shadowColor: colors.primary,
@@ -153,15 +173,36 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
                     elevation: 8,
                   }}
                 >
-                  <Txt variant="h3">
-                    {user?.name?.charAt(0).toUpperCase() || "U"}
-                  </Txt>
-                </View>
-                <View>
-                  <Txt variant="h2" className="text-xl mb-1">
+                  {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="caption" className="text-base-content/60">
+                  <Txt
+                    variant="xs"
+                    className="text-base-content/50"
+                    numberOfLines={1}
+                  >
                     {user?.email || "user@example.com"}
                   </Txt>
                 </View>
@@ -169,42 +210,30 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
 
               {/* Menu Items */}
               <View className="flex-1 pt-4">
-                <MenuItem
-                  icon="home-outline"
-                  label="Dashboard"
-                  onPress={onClose}
-                  colors={colors}
-                />
-                <MenuItem
-                  icon="person-outline"
-                  label="Profile"
-                  onPress={onClose}
-                  colors={colors}
-                />
-                <MenuItem
-                  icon="settings-outline"
-                  label="Settings"
-                  onPress={onClose}
-                  colors={colors}
-                />
-                <MenuItem
-                  icon="help-buoy-outline"
-                  label="Help & Support"
-                  onPress={onClose}
-                  colors={colors}
-                />
+                {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"
+                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"
+                  className="flex-row items-center justify-center p-3 rounded-xl bg-error/10 border border-error/20"
                   onPress={() => {
                     onClose();
                     logout();
@@ -215,11 +244,7 @@ export default function Sidebar({ isOpen, onClose, children }: SidebarProps) {
                     size={20}
                     color={colors.error}
                   />
-                  <Txt
-                    variant="mid"
-                    className="ml-2 font-bold"
-                    style={{ color: colors.error }}
-                  >
+                  <Txt variant="md" className="ml-2 font-bold text-error">
                     Log Out
                   </Txt>
                 </TouchableOpacity>

package/templates/mern-react-native/mobile/src/components/ui/buttons/Button.tsx

@@ -1,12 +1,26 @@
 import React from "react";
-import { TouchableOpacity, ActivityIndicator, TouchableOpacityProps } from "react-native";
+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 = "sm" | "md" | "lg";
+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;
@@ -17,17 +31,19 @@ export interface ButtonProps extends TouchableOpacityProps {
   rightIcon?: keyof typeof Ionicons.glyphMap;
   isFullWidth?: boolean;
   soft?: boolean;
+  outline?: boolean;
 }
 
 export default function Button({
   label,
   variant = "primary",
-  size = "md",
+  size = "base",
   isLoading = false,
   leftIcon,
   rightIcon,
   isFullWidth = false,
   soft = false,
+  outline = false,
   style,
   disabled,
   ...props
@@ -35,38 +51,73 @@ export default function Button({
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
 
-  const getVariantStyles = (): { bg: string; text: string; border?: string } => {
+  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 };
+      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 } => {
+  const getSizeStyles = (): {
+    height: number;
+    px: number;
+    fontSize: number;
+    iconSize: number;
+  } => {
     switch (size) {
-      case "sm": return { height: 36, px: 12, fontSize: 13, 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: 48, px: 16, fontSize: 15, iconSize: 20 };
+      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 (soft && variant !== "ghost" && variant !== "outline") {
+  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 (
@@ -83,7 +134,7 @@ export default function Button({
           alignItems: "center",
           justifyContent: "center",
           opacity: isDisabled ? 0.6 : 1,
-          borderWidth: variant === "outline" ? 1 : 0,
+          borderWidth: (variant === "outline" || outline) ? 1 : 0,
           borderColor: vStyles.border,
           width: isFullWidth ? "100%" : undefined,
         },
@@ -91,21 +142,39 @@ export default function Button({
       ]}
       {...props}
     >
-      {isLoading ? (
-        <ActivityIndicator color={vStyles.text} size="small" />
-      ) : (
-        <>
-          {leftIcon && (
-            <Ionicons name={leftIcon} size={sStyles.iconSize} color={vStyles.text} style={{ marginRight: 8 }} />
-          )}
-          <Txt style={{ color: vStyles.text, fontSize: sStyles.fontSize, fontWeight: "600" }}>
-            {label}
-          </Txt>
-          {rightIcon && (
-            <Ionicons name={rightIcon} size={sStyles.iconSize} color={vStyles.text} style={{ marginLeft: 8 }} />
-          )}
-        </>
+      {/* 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/mern-react-native/mobile/src/components/ui/buttons/IconButton.tsx

@@ -10,6 +10,7 @@ export interface IconButtonProps extends TouchableOpacityProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   isLoading?: boolean;
+  color?: string;
 }
 
 export default function IconButton({
@@ -17,6 +18,7 @@ export default function IconButton({
   variant = "ghost",
   size = "md",
   isLoading = false,
+  color,
   style,
   disabled,
   ...props
@@ -73,9 +75,9 @@ export default function IconButton({
       {...props}
     >
       {isLoading ? (
-        <ActivityIndicator color={vStyles.iconColor} size="small" />
+        <ActivityIndicator color={color || vStyles.iconColor} size="small" />
       ) : (
-        <Ionicons name={icon} size={sStyles.iconSize} color={vStyles.iconColor} />
+        <Ionicons name={icon} size={sStyles.iconSize} color={color || vStyles.iconColor} />
       )}
     </TouchableOpacity>
   );

package/templates/mern-react-native/mobile/src/components/ui/data-display/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, TouchableOpacity, Text } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -11,6 +11,7 @@ import Animated, {
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface AccordionProps {
   title: string;
@@ -60,7 +61,7 @@ export default function Accordion({ title, children }: AccordionProps) {
         onPress={toggleAccordion}
         style={{ padding: 16, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
       >
-        <Text style={{ color: theme.baseContent, fontWeight: "600", fontSize: 16 }}>{title}</Text>
+        <Txt color={theme.baseContent} weight="semibold" variant="md">{title}</Txt>
         <Animated.View style={iconStyle}>
           <Ionicons name="chevron-down" size={24} color={theme.baseContent} />
         </Animated.View>

package/templates/mern-react-native/mobile/src/components/ui/data-display/Avatar.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, Text, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import { Image } from "expo-image";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface AvatarProps extends ViewProps {
   url?: string;
@@ -37,9 +38,9 @@ export default function Avatar({ url, initials, size = 48, style, ...props }: Av
           contentFit="cover"
         />
       ) : (
-        <Text style={{ color: theme.baseContent, fontSize: size * 0.4, fontWeight: "600" }}>
+        <Txt color={theme.baseContent} weight="semibold" style={{ fontSize: size * 0.4 }}>
           {initials?.substring(0, 2).toUpperCase()}
-        </Text>
+        </Txt>
       )}
     </View>
   );

package/templates/mern-react-native/mobile/src/components/ui/data-display/Badge.tsx

@@ -1,19 +1,28 @@
 import React from "react";
-import { View, Text, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface BadgeProps extends ViewProps {
   label: string;
-  variant?: "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "neutral";
-  size?: "sm" | "md" | "lg";
+  variant?:
+    | "primary"
+    | "secondary"
+    | "accent"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "neutral";
+  size?: "xs" | "sm" | "base" | "md" | "lg";
   soft?: boolean;
 }
 
 export default function Badge({
   label,
   variant = "primary",
-  size = "md",
+  size = "base",
   soft = false,
   style,
   ...props
@@ -23,24 +32,39 @@ export default function Badge({
 
   const getVariantStyles = (): { bg: string; text: string } => {
     switch (variant) {
-      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 "neutral": return { bg: theme.neutral, text: theme.neutralContent };
+      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 "neutral":
+        return { bg: theme.neutral, text: theme.neutralContent };
       case "primary":
-      default: return { bg: theme.primary, text: theme.primaryContent };
+      default:
+        return { bg: theme.primary, text: theme.primaryContent };
     }
   };
 
   const getSizeStyles = () => {
     switch (size) {
-      case "sm": return { height: 20, px: 6, fontSize: 10 };
-      case "lg": return { height: 28, px: 12, fontSize: 14 };
+      case "xs":
+        return { height: 16, px: 4, fontSize: 6 };
+      case "sm":
+        return { height: 18, px: 6, fontSize: 8 };
+      case "base":
+        return { height: 22, px: 8, fontSize: 10 };
+      case "lg":
+        return { height: 28, px: 12, fontSize: 14 };
       case "md":
-      default: return { height: 24, px: 8, fontSize: 12 };
+      default:
+        return { height: 24, px: 8, fontSize: 12 };
     }
   };
 
@@ -68,9 +92,13 @@ export default function Badge({
       ]}
       {...props}
     >
-      <Text style={{ color: vStyles.text, fontSize: sStyles.fontSize, fontWeight: "600" }}>
+      <Txt
+        color={vStyles.text}
+        weight="semibold"
+        style={{ fontSize: sStyles.fontSize }}
+      >
         {label}
-      </Text>
+      </Txt>
     </View>
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/data-display/ImageViewer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { StatusBar } from "react-native";
 import ImageViewing from "react-native-image-viewing";
 import { ImageSource } from "react-native-image-viewing/dist/@types";
 
@@ -9,15 +10,24 @@ export interface ImageViewerProps {
   onRequestClose: () => void;
 }
 
-export default function ImageViewer({ images, imageIndex, visible, onRequestClose }: ImageViewerProps) {
+export default function ImageViewer({
+  images,
+  imageIndex,
+  visible,
+  onRequestClose,
+}: ImageViewerProps) {
   return (
-    <ImageViewing
-      images={images}
-      imageIndex={imageIndex}
-      visible={visible}
-      onRequestClose={onRequestClose}
-      swipeToCloseEnabled
-      doubleTapToZoomEnabled
-    />
+    <>
+      <StatusBar hidden={visible} />
+      <ImageViewing
+        images={images}
+        imageIndex={imageIndex}
+        visible={visible}
+        onRequestClose={onRequestClose}
+        swipeToCloseEnabled
+        doubleTapToZoomEnabled
+        presentationStyle="overFullScreen"
+      />
+    </>
   );
 }