create-ern-boilerplate 0.0.37 → 0.0.38

package/package.json

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

package/templates/agent-generator/.gitignore-template

@@ -68,4 +68,5 @@ expo-env.d.ts
 # @end expo-cli
 
 # Other
-structure.txt
+structure.txt
+.claude

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

@@ -11,6 +11,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { View, Text, FlatList, RefreshControl, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useThemeStore } from '@/store/themeStore';
 import { Card } from '@/components/common/Card';
 import { Button } from '@/components/common/Button';
@@ -123,7 +124,7 @@ export default function NewsListScreen() {
 
   // Main content
   return (
-    <View className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
       <FlatList
         data={news}
         renderItem={renderItem}
@@ -133,6 +134,6 @@ export default function NewsListScreen() {
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#3b82f6" />
         }
       />
-    </View>
+    </SafeAreaView>
   );
 }

package/templates/agent-generator/src/components/auth/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
 // components/auth/ProtectedRoute.tsx
 import React from 'react';
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, Text, ActivityIndicator } from 'react-native';
 import { Redirect } from 'expo-router';
 import { useAuth } from '@/hooks/useAuth';
 import { useTheme } from '@/hooks/useTheme';
@@ -18,9 +18,15 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout
   // Show loading state while checking authentication
   if (isLoading) {
     return (
-      <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View
+        className="flex-1 justify-center items-center p-6"
+        style={{ backgroundColor: colors.background }}
+      >
         <ActivityIndicator size="large" color={colors.primary} />
-        <Text style={[styles.loadingText, { color: colors.text }]}>
+        <Text
+          className="mt-4 text-base font-semibold"
+          style={{ color: colors.text }}
+        >
           Checking authentication...
         </Text>
       </View>
@@ -35,16 +41,31 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout
   // Check admin access if required
   if (requireAdmin && user?.role !== 'admin') {
     return (
-      <View style={[styles.container, { backgroundColor: colors.background }]}>
-        <View style={[styles.errorContainer, { backgroundColor: `${colors.error}10` }]}>
+      <View
+        className="flex-1 justify-center items-center p-6"
+        style={{ backgroundColor: colors.background }}
+      >
+        <View
+          className="p-8 rounded-3xl items-center max-w-md"
+          style={{ backgroundColor: `${colors.error}10` }}
+        >
           <ShieldAlert size={64} color={colors.error} />
-          <Text style={[styles.errorTitle, { color: colors.error }]}>
+          <Text
+            className="text-2xl font-extrabold mt-4 mb-2"
+            style={{ color: colors.error }}
+          >
             Access Denied
           </Text>
-          <Text style={[styles.errorMessage, { color: colors.textSecondary }]}>
+          <Text
+            className="text-base text-center mb-2"
+            style={{ color: colors.textSecondary }}
+          >
             You don't have permission to access this page.
           </Text>
-          <Text style={[styles.errorHint, { color: colors.textSecondary }]}>
+          <Text
+            className="text-sm text-center italic"
+            style={{ color: colors.textSecondary }}
+          >
             This page is only accessible to administrators.
           </Text>
         </View>
@@ -55,42 +76,6 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout
   return <>{children}</>;
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  errorContainer: {
-    padding: 32,
-    borderRadius: 24,
-    alignItems: 'center',
-    maxWidth: 400,
-  },
-  errorTitle: {
-    fontSize: 24,
-    fontWeight: '800',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  errorMessage: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  errorHint: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontStyle: 'italic',
-  },
-});
-
 // Usage Example in Settings Screen:
 // import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 //

package/templates/agent-generator/src/components/common/Button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TouchableOpacity, Text, ActivityIndicator, TouchableOpacityProps } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
 
 interface ButtonProps extends TouchableOpacityProps {
   title: string;
@@ -19,12 +20,7 @@ export function Button({
   className = '',
   ...props
 }: ButtonProps) {
-  const variantClasses = {
-    primary: 'bg-primary-600 active:bg-primary-700',
-    secondary: 'bg-gray-600 active:bg-gray-700',
-    outline: 'border-2 border-primary-600 bg-transparent active:bg-primary-50',
-    ghost: 'bg-transparent active:bg-gray-100',
-  };
+  const { colors } = useTheme();
 
   const sizeClasses = {
     sm: 'px-3 py-2',
@@ -38,30 +34,63 @@ export function Button({
     lg: 'text-lg',
   };
 
-  const textColorClasses = {
-    primary: 'text-white',
-    secondary: 'text-white',
-    outline: 'text-primary-600',
-    ghost: 'text-primary-600',
+  // Get dynamic colors based on variant
+  const getButtonStyles = () => {
+    switch (variant) {
+      case 'primary':
+        return { backgroundColor: colors.primary };
+      case 'secondary':
+        return { backgroundColor: colors.textSecondary };
+      case 'outline':
+        return {
+          backgroundColor: 'transparent',
+          borderWidth: 2,
+          borderColor: colors.primary
+        };
+      case 'ghost':
+        return { backgroundColor: 'transparent' };
+      default:
+        return { backgroundColor: colors.primary };
+    }
+  };
+
+  const getTextColor = () => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return '#ffffff';
+      case 'outline':
+      case 'ghost':
+        return colors.primary;
+      default:
+        return '#ffffff';
+    }
+  };
+
+  const getLoaderColor = () => {
+    return variant === 'outline' || variant === 'ghost' ? colors.primary : '#ffffff';
   };
 
   return (
     <TouchableOpacity
       className={`
-        ${variantClasses[variant]}
         ${sizeClasses[size]}
         ${fullWidth ? 'w-full' : ''}
         ${disabled || loading ? 'opacity-50' : ''}
         rounded-lg items-center justify-center
         ${className}
       `}
+      style={getButtonStyles()}
       disabled={disabled || loading}
       {...props}
     >
       {loading ? (
-        <ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#3b82f6' : '#ffffff'} />
+        <ActivityIndicator color={getLoaderColor()} />
       ) : (
-        <Text className={`${textColorClasses[variant]} ${textSizeClasses[size]} font-semibold`}>
+        <Text
+          className={`${textSizeClasses[size]} font-semibold`}
+          style={{ color: getTextColor() }}
+        >
           {title}
         </Text>
       )}

package/templates/agent-generator/src/components/common/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import { useTheme } from '@hooks/useTheme';
+import { useTheme } from '@/hooks/useTheme';
 
 interface CardProps extends ViewProps {
   children: React.ReactNode;

package/templates/agent-generator/src/components/common/Input.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View, TextInput, Text, TouchableOpacity, TextInputProps } from 'react-native';
-import { useTheme } from '@hooks/useTheme';
+import { Eye, EyeOff } from 'lucide-react-native';
+import { useTheme } from '@/hooks/useTheme';
 
 interface InputProps extends TextInputProps {
   label?: string;
@@ -52,9 +53,11 @@ export function Input({
         
         {secureTextEntry && (
           <TouchableOpacity onPress={() => setShowPassword(!showPassword)} className="ml-2">
-            <Text style={{ color: colors.textSecondary }}>
-              {showPassword ? '🙈' : '👁️'}
-            </Text>
+            {showPassword ? (
+              <EyeOff size={20} color={colors.textSecondary} />
+            ) : (
+              <Eye size={20} color={colors.textSecondary} />
+            )}
           </TouchableOpacity>
         )}
         

package/templates/agent-generator/src/components/common/Loading.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ActivityIndicator, Text } from 'react-native';
-import { useTheme } from '@hooks/useTheme';
+import { useTheme } from '@/hooks/useTheme';
 
 interface LoadingProps {
   text?: string;

package/templates/agent-generator/src/hooks/useTheme.ts

@@ -1,4 +1,5 @@
 import { useThemeStore } from '@/store/themeStore';
+import { colors as themeColors } from '@/theme/colors';
 
 /**
  * Hook for accessing theme state and actions
@@ -8,11 +9,16 @@ export function useTheme() {
   const colorScheme = useThemeStore((state) => state.colorScheme);
   const setColorScheme = useThemeStore((state) => state.setColorScheme);
   const toggleColorScheme = useThemeStore((state) => state.toggleColorScheme);
+  const isDark = colorScheme === 'dark';
+
+  // Get colors based on current color scheme
+  const colors = isDark ? themeColors.dark : themeColors.light;
 
   return {
     colorScheme,
     setColorScheme,
     toggleColorScheme,
-    isDark: colorScheme === 'dark',
+    isDark,
+    colors,
   };
 }