create-ern-boilerplate 0.0.39 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ern-boilerplate",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Expo React Native boilerplate generator",
   "bin": {
     "create-ern-boilerplate": "./create.js",

package/templates/agent-generator/app/(auth)/login.tsx

@@ -2,19 +2,17 @@ import React, { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
 import { Link } from 'expo-router';
 import { useAuthStore } from '@/store/authStore';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { Button } from '@/components/common/Button';
 
 export default function LoginScreen() {
   const login = useAuthStore((state) => state.login);
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const isDark = colorScheme === 'dark';
-
   const handleLogin = async () => {
     if (!email || !password) return;
 

package/templates/agent-generator/app/(auth)/register.tsx

@@ -1,20 +1,18 @@
 import React, { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
 import { Link, useRouter } from 'expo-router';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { Button } from '@/components/common/Button';
 
 export default function RegisterScreen() {
   const router = useRouter();
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const isDark = colorScheme === 'dark';
-
   const handleRegister = async () => {
     if (!name || !email || !password) return;
 

package/templates/agent-generator/app/(tabs)/index.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { useAuthStore } from '@/store/authStore';
 import { Card } from '@/components/common/Card';
 
 export default function HomeScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
   const user = useAuthStore((state) => state.user);
 
-  const isDark = colorScheme === 'dark';
-
   return (
     <ScrollView
       className="flex-1"

package/templates/agent-generator/examples/component.example.tsx

@@ -11,7 +11,7 @@
 
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 
 // Example: Item Card Component
 interface ItemCardProps {
@@ -31,8 +31,7 @@ export function ItemCard({
   variant = 'default',
   className = '',
 }: ItemCardProps) {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
-  const isDark = colorScheme === 'dark';
+  const { colors, isDark } = useTheme();
 
   const baseClasses = `rounded-lg p-4 ${className}`;
   const variantClasses = variant === 'highlighted'

package/templates/agent-generator/examples/screens/detail-screen.example.tsx

@@ -25,7 +25,7 @@ import {
   Image,
   Alert,
 } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import Toast from 'react-native-toast-message';
 
@@ -62,10 +62,9 @@ const mockProductService = {
 };
 
 export default function ProductDetailScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
   const router = useRouter();
   const params = useLocalSearchParams();
-  const isDark = colorScheme === 'dark';
 
   // Get product ID from params
   const productId = params.id as string;

package/templates/agent-generator/examples/screens/form-screen.example.tsx

@@ -26,7 +26,7 @@ import {
   ScrollView,
   ActivityIndicator,
 } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import Toast from 'react-native-toast-message';
 
@@ -67,10 +67,9 @@ const mockProductService = {
 };
 
 export default function ProductFormScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
   const router = useRouter();
   const params = useLocalSearchParams();
-  const isDark = colorScheme === 'dark';
 
   // Check if we're in edit mode
   const isEditMode = !!params.id;

package/templates/agent-generator/examples/screens/list-screen-no-auth.example.tsx

@@ -24,7 +24,7 @@ import {
   TouchableOpacity,
   Image,
 } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { useRouter } from 'expo-router';
 
 // Example: News interface
@@ -61,9 +61,8 @@ const mockNewsService = {
 };
 
 export default function NewsListScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
   const router = useRouter();
-  const isDark = colorScheme === 'dark';
 
   // State management
   const [news, setNews] = useState<NewsItem[]>([]);

package/templates/agent-generator/examples/screens/list-screen-with-auth.example.tsx

@@ -24,7 +24,7 @@ import {
   RefreshControl,
   TouchableOpacity,
 } from 'react-native';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { useAuthStore } from '@/store/authStore';
 import { useRouter } from 'expo-router';
 
@@ -65,10 +65,9 @@ const mockTaskService = {
 };
 
 export default function TaskListScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
+  const { colors, isDark } = useTheme();
   const { user, isAuthenticated } = useAuthStore();
   const router = useRouter();
-  const isDark = colorScheme === 'dark';
 
   // State management
   const [tasks, setTasks] = useState<Task[]>([]);

package/templates/agent-generator/src/components/shared/ConfirmDialog.tsx

@@ -1,7 +1,8 @@
 // components/shared/ConfirmDialog.tsx
 import React from 'react';
-import { View, Text, Modal, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, Text, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { AlertTriangle } from 'lucide-react-native';
+import { useTheme } from '@/hooks/useTheme';
 
 interface ConfirmDialogProps {
   visible: boolean;
@@ -12,7 +13,6 @@ interface ConfirmDialogProps {
   onConfirm: () => void;
   onCancel: () => void;
   loading?: boolean;
-  colors: any;
   destructive?: boolean;
 }
 
@@ -25,9 +25,10 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onConfirm,
   onCancel,
   loading = false,
-  colors,
   destructive = false,
 }) => {
+  const { colors } = useTheme();
+
   return (
     <Modal
       visible={visible}
@@ -35,39 +36,54 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       animationType="fade"
       onRequestClose={onCancel}
     >
-      <View style={styles.dialogOverlay}>
-        <View style={[styles.dialogContent, { backgroundColor: colors.background }]}>
+      <View className="flex-1 justify-center items-center px-6" style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
+        <View
+          className="w-full max-w-[360px] rounded-2xl p-6 shadow-xl"
+          style={{
+            backgroundColor: colors.background,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.2,
+            shadowRadius: 12,
+            elevation: 8,
+          }}
+        >
           {destructive && (
-            <View style={styles.iconContainer}>
+            <View className="items-center mb-4">
               <AlertTriangle size={48} color="#ef4444" />
             </View>
           )}
-          
-          <Text style={[styles.dialogTitle, { color: colors.text }]}>{title}</Text>
-          <Text style={[styles.dialogMessage, { color: colors.textSecondary }]}>
+
+          <Text className="text-xl font-extrabold mb-3 text-center" style={{ color: colors.text }}>
+            {title}
+          </Text>
+          <Text className="text-sm font-medium leading-5 text-center mb-6" style={{ color: colors.textSecondary }}>
             {message}
           </Text>
 
-          <View style={styles.dialogActions}>
+          <View className="flex-row gap-3">
             <TouchableOpacity
-              style={[styles.dialogButton, styles.cancelButton, { borderColor: colors.border }]}
+              className="flex-1 py-3.5 rounded-xl items-center justify-center border-2"
+              style={{ borderColor: colors.border }}
               onPress={onCancel}
               activeOpacity={0.8}
               disabled={loading}
             >
-              <Text style={[styles.dialogButtonText, { color: colors.text }]}>
+              <Text className="text-base font-bold" style={{ color: colors.text }}>
                 {cancelText}
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
-              style={[
-                styles.dialogButton,
-                styles.confirmButton,
-                {
-                  backgroundColor: destructive ? '#ef4444' : colors.primary,
-                  opacity: loading ? 0.7 : 1,
-                },
-              ]}
+              className="flex-1 py-3.5 rounded-xl items-center justify-center shadow-md"
+              style={{
+                backgroundColor: destructive ? '#ef4444' : colors.primary,
+                opacity: loading ? 0.7 : 1,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.15,
+                shadowRadius: 4,
+                elevation: 3,
+              }}
               onPress={onConfirm}
               activeOpacity={0.8}
               disabled={loading}
@@ -75,7 +91,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               {loading ? (
                 <ActivityIndicator size="small" color="#FFFFFF" />
               ) : (
-                <Text style={[styles.dialogButtonText, { color: '#FFFFFF' }]}>
+                <Text className="text-base font-bold text-white">
                   {confirmText}
                 </Text>
               )}
@@ -86,66 +102,3 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
     </Modal>
   );
 };
-
-const styles = StyleSheet.create({
-  dialogOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 24,
-  },
-  dialogContent: {
-    width: '100%',
-    maxWidth: 360,
-    borderRadius: 20,
-    padding: 24,
-    elevation: 8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 12,
-  },
-  iconContainer: {
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  dialogTitle: {
-    fontSize: 20,
-    fontWeight: '800',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  dialogMessage: {
-    fontSize: 14,
-    fontWeight: '500',
-    lineHeight: 20,
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  dialogActions: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  dialogButton: {
-    flex: 1,
-    paddingVertical: 14,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cancelButton: {
-    borderWidth: 2,
-  },
-  confirmButton: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  dialogButtonText: {
-    fontSize: 15,
-    fontWeight: '700',
-  },
-});

package/templates/agent-generator/src/components/shared/FormInput.tsx

@@ -1,33 +1,37 @@
 // components/shared/FormInput.tsx
 import React from 'react';
-import { View, Text, TextInput, StyleSheet, TextInputProps } from 'react-native';
+import { View, Text, TextInput, TextInputProps } from 'react-native';
 import { User, Mail, Lock } from 'lucide-react-native';
+import { useTheme } from '@/hooks/useTheme';
 
 interface FormInputProps extends TextInputProps {
   label: string;
   icon?: 'user' | 'mail' | 'lock';
-  colors: any;
   required?: boolean;
 }
 
 export const FormInput: React.FC<FormInputProps> = ({
   label,
   icon,
-  colors,
   required = false,
   ...textInputProps
 }) => {
+  const { colors } = useTheme();
   const IconComponent = icon === 'user' ? User : icon === 'mail' ? Mail : Lock;
 
   return (
-    <View style={styles.inputGroup}>
-      <Text style={[styles.inputLabel, { color: colors.text }]}>
-        {label} {required && <Text style={styles.required}>*</Text>}
+    <View className="gap-2">
+      <Text className="text-sm font-semibold mb-1" style={{ color: colors.text }}>
+        {label} {required && <Text className="text-red-500">*</Text>}
       </Text>
-      <View style={[styles.inputContainer, { backgroundColor: `${colors.primary}08` }]}>
+      <View
+        className="flex-row items-center px-4 py-3 rounded-xl gap-2.5"
+        style={{ backgroundColor: `${colors.primary}08` }}
+      >
         {icon && <IconComponent size={18} color={colors.textSecondary} />}
         <TextInput
-          style={[styles.input, { color: colors.text }]}
+          className="flex-1 text-base font-medium"
+          style={{ color: colors.text }}
           placeholderTextColor={colors.textSecondary}
           {...textInputProps}
         />
@@ -36,32 +40,5 @@ export const FormInput: React.FC<FormInputProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  inputGroup: {
-    gap: 8,
-  },
-  inputLabel: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 4,
-  },
-  required: {
-    color: '#ef4444',
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 12,
-    gap: 10,
-  },
-  input: {
-    flex: 1,
-    fontSize: 15,
-    fontWeight: '500',
-  },
-});
-
 
 

package/templates/agent-generator/src/components/shared/RoleSelector.tsx

@@ -1,42 +1,39 @@
 // components/shared/RoleSelector.tsx
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
 
 interface RoleSelectorProps {
 	selectedRole: 'admin' | 'user' | any;
 	onSelectRole: (role: 'admin' | 'user') => void;
-	colors: any;
 }
 
 export const RoleSelector: React.FC<RoleSelectorProps> = ({
 	selectedRole,
 	onSelectRole,
-	colors,
 }) => {
+	const { colors } = useTheme();
+
 	return (
-		<View style={styles.roleSelector}>
+		<View className="flex-row gap-3">
 			{(['user', 'admin'] as const).map((role) => (
 				<TouchableOpacity
 					key={role}
-					style={[
-						styles.roleOption,
-						{
-							backgroundColor: selectedRole === role
-								? colors.primary
-								: `${colors.primary}10`,
-						},
-					]}
+					className="flex-1 py-3 rounded-xl items-center"
+					style={{
+						backgroundColor: selectedRole === role
+							? colors.primary
+							: `${colors.primary}10`,
+					}}
 					onPress={() => onSelectRole(role)}
 					activeOpacity={0.7}
 				>
 					<Text
-						style={[
-							styles.roleOptionText,
-							{
-								color: selectedRole === role ? '#FFFFFF' : colors.text,
-								fontWeight: selectedRole === role ? '700' : '500',
-							},
-						]}
+						className="text-sm"
+						style={{
+							color: selectedRole === role ? '#FFFFFF' : colors.text,
+							fontWeight: selectedRole === role ? '700' : '500',
+						}}
 					>
 						{role.charAt(0).toUpperCase() + role.slice(1)}
 					</Text>
@@ -45,19 +42,3 @@ export const RoleSelector: React.FC<RoleSelectorProps> = ({
 		</View>
 	);
 };
-
-const styles = StyleSheet.create({
-	roleSelector: {
-		flexDirection: 'row',
-		gap: 12,
-	},
-	roleOption: {
-		flex: 1,
-		paddingVertical: 12,
-		borderRadius: 12,
-		alignItems: 'center',
-	},
-	roleOptionText: {
-		fontSize: 14,
-	},
-});