@l4yercak3/cli 1.3.1 → 2.0.0-alpha.0

package/src/generators/quickstart/screens/index.js

@@ -1,1498 +0,0 @@
-/**
- * Expo Screens Generator
- * Generates React Native screens for Expo/React Native projects
- */
-
-const fs = require('fs');
-const path = require('path');
-const { ensureDir, writeFileWithBackup, checkFileOverwrite } = require('../../../utils/file-utils');
-
-class ScreensGenerator {
-  /**
-   * Generate Expo screens based on selected features
-   * @param {Object} options - Generation options
-   * @returns {Promise<Object>} - Generated file paths
-   */
-  async generate(options) {
-    const { projectPath, features = [], isTypeScript } = options;
-
-    const results = {};
-
-    // Detect if using Expo Router or React Navigation
-    const hasExpoRouter = this.hasExpoRouter(projectPath);
-
-    // Determine output directory
-    let outputDir;
-    if (hasExpoRouter) {
-      // Expo Router uses app/ directory with file-based routing
-      outputDir = path.join(projectPath, 'app', '(tabs)', 'l4yercak3');
-    } else if (fs.existsSync(path.join(projectPath, 'src', 'screens'))) {
-      outputDir = path.join(projectPath, 'src', 'screens', 'l4yercak3');
-    } else if (fs.existsSync(path.join(projectPath, 'screens'))) {
-      outputDir = path.join(projectPath, 'screens', 'l4yercak3');
-    } else {
-      outputDir = path.join(projectPath, 'src', 'screens', 'l4yercak3');
-    }
-
-    ensureDir(outputDir);
-
-    const ext = isTypeScript ? 'tsx' : 'jsx';
-
-    // Generate CRM screens
-    if (features.includes('crm')) {
-      results.contactsScreen = await this.generateContactsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
-      results.contactDetailScreen = await this.generateContactDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter);
-    }
-
-    // Generate Events screens
-    if (features.includes('events')) {
-      results.eventsScreen = await this.generateEventsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
-      results.eventDetailScreen = await this.generateEventDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter);
-    }
-
-    // Generate Products screens
-    if (features.includes('products') || features.includes('checkout')) {
-      results.productsScreen = await this.generateProductsScreen(outputDir, ext, isTypeScript, hasExpoRouter);
-    }
-
-    // Generate layout file for Expo Router
-    if (hasExpoRouter) {
-      results.layout = await this.generateExpoRouterLayout(outputDir, ext, isTypeScript, features);
-    }
-
-    return results;
-  }
-
-  /**
-   * Check if project uses Expo Router
-   */
-  hasExpoRouter(projectPath) {
-    const packageJsonPath = path.join(projectPath, 'package.json');
-    if (!fs.existsSync(packageJsonPath)) {
-      return false;
-    }
-
-    try {
-      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-      const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-      return !!deps['expo-router'];
-    } catch {
-      return false;
-    }
-  }
-
-  async generateContactsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
-    const fileName = hasExpoRouter ? 'contacts' : 'ContactsScreen';
-    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getContactsScreenTS(hasExpoRouter)
-      : this.getContactsScreenJS(hasExpoRouter);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getContactsScreenTS(hasExpoRouter) {
-    const navigation = hasExpoRouter
-      ? `import { useRouter } from 'expo-router';`
-      : `import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';`;
-
-    const navHook = hasExpoRouter
-      ? `const router = useRouter();`
-      : `const navigation = useNavigation<NativeStackNavigationProp<any>>();`;
-
-    const navAction = hasExpoRouter
-      ? `router.push(\`/l4yercak3/contact/\${contact.id}\`);`
-      : `navigation.navigate('ContactDetail', { id: contact.id });`;
-
-    return `/**
- * Contacts Screen (Expo)
- * Displays list of contacts with search
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-${navigation}
-import { ContactList } from '../../components/l4yercak3';
-import type { Contact } from '../../lib/l4yercak3/types';
-
-export default function ContactsScreen() {
-  ${navHook}
-
-  const handleSelectContact = (contact: Contact) => {
-    ${navAction}
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ContactList onSelect={handleSelectContact} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-});
-`;
-  }
-
-  getContactsScreenJS(hasExpoRouter) {
-    const navigation = hasExpoRouter
-      ? `import { useRouter } from 'expo-router';`
-      : `import { useNavigation } from '@react-navigation/native';`;
-
-    const navHook = hasExpoRouter
-      ? `const router = useRouter();`
-      : `const navigation = useNavigation();`;
-
-    const navAction = hasExpoRouter
-      ? `router.push(\`/l4yercak3/contact/\${contact.id}\`);`
-      : `navigation.navigate('ContactDetail', { id: contact.id });`;
-
-    return `/**
- * Contacts Screen (Expo)
- * Displays list of contacts with search
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-${navigation}
-import { ContactList } from '../../components/l4yercak3';
-
-export default function ContactsScreen() {
-  ${navHook}
-
-  const handleSelectContact = (contact) => {
-    ${navAction}
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ContactList onSelect={handleSelectContact} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-});
-`;
-  }
-
-  async generateContactDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
-    const fileName = hasExpoRouter ? 'contact/[id]' : 'ContactDetailScreen';
-
-    // For Expo Router, create the subdirectory
-    let outputPath;
-    if (hasExpoRouter) {
-      const contactDir = path.join(outputDir, 'contact');
-      ensureDir(contactDir);
-      outputPath = path.join(contactDir, `[id].${ext}`);
-    } else {
-      outputPath = path.join(outputDir, `${fileName}.${ext}`);
-    }
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getContactDetailScreenTS(hasExpoRouter)
-      : this.getContactDetailScreenJS(hasExpoRouter);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getContactDetailScreenTS(hasExpoRouter) {
-    const params = hasExpoRouter
-      ? `import { useLocalSearchParams } from 'expo-router';`
-      : `import { useRoute } from '@react-navigation/native';
-import type { RouteProp } from '@react-navigation/native';`;
-
-    const paramsHook = hasExpoRouter
-      ? `const { id } = useLocalSearchParams<{ id: string }>();`
-      : `const route = useRoute<RouteProp<{ params: { id: string } }>>();
-  const { id } = route.params;`;
-
-    return `/**
- * Contact Detail Screen (Expo)
- * Displays individual contact details
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-} from 'react-native';
-${params}
-import { useContact } from '../../lib/l4yercak3/hooks/use-contacts';
-
-export default function ContactDetailScreen() {
-  ${paramsHook}
-
-  const { data: contact, isLoading, error } = useContact(id);
-
-  if (isLoading) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error || !contact) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load contact</Text>
-      </View>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Avatar */}
-        <View style={styles.avatarContainer}>
-          <View style={styles.avatar}>
-            <Text style={styles.avatarText}>
-              {(contact.firstName?.[0] || '') + (contact.lastName?.[0] || '')}
-            </Text>
-          </View>
-          <Text style={styles.name}>
-            {contact.firstName} {contact.lastName}
-          </Text>
-          {contact.email && (
-            <Text style={styles.email}>{contact.email}</Text>
-          )}
-        </View>
-
-        {/* Details */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Details</Text>
-
-          {contact.phone && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Phone</Text>
-              <Text style={styles.value}>{contact.phone}</Text>
-            </View>
-          )}
-
-          {contact.company && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Company</Text>
-              <Text style={styles.value}>{contact.company}</Text>
-            </View>
-          )}
-
-          {contact.status && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Status</Text>
-              <Text style={styles.value}>{contact.status}</Text>
-            </View>
-          )}
-        </View>
-
-        {/* Tags */}
-        {contact.tags && contact.tags.length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Tags</Text>
-            <View style={styles.tags}>
-              {contact.tags.map((tag: string) => (
-                <View key={tag} style={styles.tag}>
-                  <Text style={styles.tagText}>{tag}</Text>
-                </View>
-              ))}
-            </View>
-          </View>
-        )}
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  content: {
-    padding: 16,
-  },
-  avatarContainer: {
-    alignItems: 'center',
-    paddingVertical: 24,
-  },
-  avatar: {
-    width: 96,
-    height: 96,
-    borderRadius: 48,
-    backgroundColor: '#DBEAFE',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  avatarText: {
-    color: '#3B82F6',
-    fontSize: 32,
-    fontWeight: '600',
-  },
-  name: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#111827',
-  },
-  email: {
-    fontSize: 16,
-    color: '#6B7280',
-    marginTop: 4,
-  },
-  section: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 16,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F3F4F6',
-  },
-  label: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-  value: {
-    fontSize: 14,
-    color: '#111827',
-    fontWeight: '500',
-  },
-  tags: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  tag: {
-    backgroundColor: '#F3F4F6',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-  },
-  tagText: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-});
-`;
-  }
-
-  getContactDetailScreenJS(hasExpoRouter) {
-    const params = hasExpoRouter
-      ? `import { useLocalSearchParams } from 'expo-router';`
-      : `import { useRoute } from '@react-navigation/native';`;
-
-    const paramsHook = hasExpoRouter
-      ? `const { id } = useLocalSearchParams();`
-      : `const route = useRoute();
-  const { id } = route.params;`;
-
-    return `/**
- * Contact Detail Screen (Expo)
- * Displays individual contact details
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-} from 'react-native';
-${params}
-import { useContact } from '../../lib/l4yercak3/hooks/use-contacts';
-
-export default function ContactDetailScreen() {
-  ${paramsHook}
-
-  const { data: contact, isLoading, error } = useContact(id);
-
-  if (isLoading) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error || !contact) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load contact</Text>
-      </View>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Avatar */}
-        <View style={styles.avatarContainer}>
-          <View style={styles.avatar}>
-            <Text style={styles.avatarText}>
-              {(contact.firstName?.[0] || '') + (contact.lastName?.[0] || '')}
-            </Text>
-          </View>
-          <Text style={styles.name}>
-            {contact.firstName} {contact.lastName}
-          </Text>
-          {contact.email && (
-            <Text style={styles.email}>{contact.email}</Text>
-          )}
-        </View>
-
-        {/* Details */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Details</Text>
-
-          {contact.phone && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Phone</Text>
-              <Text style={styles.value}>{contact.phone}</Text>
-            </View>
-          )}
-
-          {contact.company && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Company</Text>
-              <Text style={styles.value}>{contact.company}</Text>
-            </View>
-          )}
-
-          {contact.status && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Status</Text>
-              <Text style={styles.value}>{contact.status}</Text>
-            </View>
-          )}
-        </View>
-
-        {/* Tags */}
-        {contact.tags && contact.tags.length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Tags</Text>
-            <View style={styles.tags}>
-              {contact.tags.map((tag) => (
-                <View key={tag} style={styles.tag}>
-                  <Text style={styles.tagText}>{tag}</Text>
-                </View>
-              ))}
-            </View>
-          </View>
-        )}
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  content: {
-    padding: 16,
-  },
-  avatarContainer: {
-    alignItems: 'center',
-    paddingVertical: 24,
-  },
-  avatar: {
-    width: 96,
-    height: 96,
-    borderRadius: 48,
-    backgroundColor: '#DBEAFE',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  avatarText: {
-    color: '#3B82F6',
-    fontSize: 32,
-    fontWeight: '600',
-  },
-  name: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#111827',
-  },
-  email: {
-    fontSize: 16,
-    color: '#6B7280',
-    marginTop: 4,
-  },
-  section: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 16,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F3F4F6',
-  },
-  label: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-  value: {
-    fontSize: 14,
-    color: '#111827',
-    fontWeight: '500',
-  },
-  tags: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  tag: {
-    backgroundColor: '#F3F4F6',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-  },
-  tagText: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-});
-`;
-  }
-
-  async generateEventsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
-    const fileName = hasExpoRouter ? 'events' : 'EventsScreen';
-    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getEventsScreenTS(hasExpoRouter)
-      : this.getEventsScreenJS(hasExpoRouter);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getEventsScreenTS(hasExpoRouter) {
-    const navigation = hasExpoRouter
-      ? `import { useRouter } from 'expo-router';`
-      : `import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';`;
-
-    const navHook = hasExpoRouter
-      ? `const router = useRouter();`
-      : `const navigation = useNavigation<NativeStackNavigationProp<any>>();`;
-
-    const navAction = hasExpoRouter
-      ? `router.push(\`/l4yercak3/event/\${event.id}\`);`
-      : `navigation.navigate('EventDetail', { id: event.id });`;
-
-    return `/**
- * Events Screen (Expo)
- * Displays list of events with filtering
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-${navigation}
-import { EventList } from '../../components/l4yercak3';
-import type { Event } from '../../lib/l4yercak3/types';
-
-export default function EventsScreen() {
-  ${navHook}
-
-  const handleSelectEvent = (event: Event) => {
-    ${navAction}
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <EventList onSelect={handleSelectEvent} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-});
-`;
-  }
-
-  getEventsScreenJS(hasExpoRouter) {
-    const navigation = hasExpoRouter
-      ? `import { useRouter } from 'expo-router';`
-      : `import { useNavigation } from '@react-navigation/native';`;
-
-    const navHook = hasExpoRouter
-      ? `const router = useRouter();`
-      : `const navigation = useNavigation();`;
-
-    const navAction = hasExpoRouter
-      ? `router.push(\`/l4yercak3/event/\${event.id}\`);`
-      : `navigation.navigate('EventDetail', { id: event.id });`;
-
-    return `/**
- * Events Screen (Expo)
- * Displays list of events with filtering
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-${navigation}
-import { EventList } from '../../components/l4yercak3';
-
-export default function EventsScreen() {
-  ${navHook}
-
-  const handleSelectEvent = (event) => {
-    ${navAction}
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <EventList onSelect={handleSelectEvent} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-});
-`;
-  }
-
-  async generateEventDetailScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
-    let outputPath;
-    if (hasExpoRouter) {
-      const eventDir = path.join(outputDir, 'event');
-      ensureDir(eventDir);
-      outputPath = path.join(eventDir, `[id].${ext}`);
-    } else {
-      outputPath = path.join(outputDir, `EventDetailScreen.${ext}`);
-    }
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getEventDetailScreenTS(hasExpoRouter)
-      : this.getEventDetailScreenJS(hasExpoRouter);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getEventDetailScreenTS(hasExpoRouter) {
-    const params = hasExpoRouter
-      ? `import { useLocalSearchParams } from 'expo-router';`
-      : `import { useRoute } from '@react-navigation/native';
-import type { RouteProp } from '@react-navigation/native';`;
-
-    const paramsHook = hasExpoRouter
-      ? `const { id } = useLocalSearchParams<{ id: string }>();`
-      : `const route = useRoute<RouteProp<{ params: { id: string } }>>();
-  const { id } = route.params;`;
-
-    return `/**
- * Event Detail Screen (Expo)
- * Displays individual event details
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-} from 'react-native';
-${params}
-import { useEvent } from '../../lib/l4yercak3/hooks/use-events';
-
-export default function EventDetailScreen() {
-  ${paramsHook}
-
-  const { data: event, isLoading, error } = useEvent(id);
-
-  if (isLoading) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error || !event) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load event</Text>
-      </View>
-    );
-  }
-
-  const startDate = event.startDate ? new Date(event.startDate) : null;
-  const endDate = event.endDate ? new Date(event.endDate) : null;
-
-  const formatDateTime = (date: Date) => {
-    return date.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Header */}
-        <View style={styles.header}>
-          <View style={styles.statusBadge}>
-            <Text style={styles.statusText}>{event.status}</Text>
-          </View>
-          <Text style={styles.title}>{event.name}</Text>
-          {event.description && (
-            <Text style={styles.description}>{event.description}</Text>
-          )}
-        </View>
-
-        {/* Date & Time */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Date & Time</Text>
-          {startDate && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Starts</Text>
-              <Text style={styles.value}>{formatDateTime(startDate)}</Text>
-            </View>
-          )}
-          {endDate && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Ends</Text>
-              <Text style={styles.value}>{formatDateTime(endDate)}</Text>
-            </View>
-          )}
-        </View>
-
-        {/* Location */}
-        {event.location && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Location</Text>
-            <Text style={styles.locationText}>{event.location}</Text>
-          </View>
-        )}
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  content: {
-    padding: 16,
-  },
-  header: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 20,
-  },
-  statusBadge: {
-    alignSelf: 'flex-start',
-    backgroundColor: '#D1FAE5',
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: 12,
-    marginBottom: 12,
-  },
-  statusText: {
-    color: '#047857',
-    fontSize: 12,
-    fontWeight: '600',
-    textTransform: 'capitalize',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
-  },
-  description: {
-    fontSize: 16,
-    color: '#6B7280',
-    lineHeight: 24,
-  },
-  section: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 16,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 12,
-  },
-  row: {
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F3F4F6',
-  },
-  label: {
-    fontSize: 12,
-    color: '#6B7280',
-    marginBottom: 4,
-  },
-  value: {
-    fontSize: 14,
-    color: '#111827',
-    fontWeight: '500',
-  },
-  locationText: {
-    fontSize: 14,
-    color: '#111827',
-  },
-});
-`;
-  }
-
-  getEventDetailScreenJS(hasExpoRouter) {
-    const params = hasExpoRouter
-      ? `import { useLocalSearchParams } from 'expo-router';`
-      : `import { useRoute } from '@react-navigation/native';`;
-
-    const paramsHook = hasExpoRouter
-      ? `const { id } = useLocalSearchParams();`
-      : `const route = useRoute();
-  const { id } = route.params;`;
-
-    return `/**
- * Event Detail Screen (Expo)
- * Displays individual event details
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-} from 'react-native';
-${params}
-import { useEvent } from '../../lib/l4yercak3/hooks/use-events';
-
-export default function EventDetailScreen() {
-  ${paramsHook}
-
-  const { data: event, isLoading, error } = useEvent(id);
-
-  if (isLoading) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error || !event) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load event</Text>
-      </View>
-    );
-  }
-
-  const startDate = event.startDate ? new Date(event.startDate) : null;
-  const endDate = event.endDate ? new Date(event.endDate) : null;
-
-  const formatDateTime = (date) => {
-    return date.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Header */}
-        <View style={styles.header}>
-          <View style={styles.statusBadge}>
-            <Text style={styles.statusText}>{event.status}</Text>
-          </View>
-          <Text style={styles.title}>{event.name}</Text>
-          {event.description && (
-            <Text style={styles.description}>{event.description}</Text>
-          )}
-        </View>
-
-        {/* Date & Time */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Date & Time</Text>
-          {startDate && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Starts</Text>
-              <Text style={styles.value}>{formatDateTime(startDate)}</Text>
-            </View>
-          )}
-          {endDate && (
-            <View style={styles.row}>
-              <Text style={styles.label}>Ends</Text>
-              <Text style={styles.value}>{formatDateTime(endDate)}</Text>
-            </View>
-          )}
-        </View>
-
-        {/* Location */}
-        {event.location && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Location</Text>
-            <Text style={styles.locationText}>{event.location}</Text>
-          </View>
-        )}
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  content: {
-    padding: 16,
-  },
-  header: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 20,
-  },
-  statusBadge: {
-    alignSelf: 'flex-start',
-    backgroundColor: '#D1FAE5',
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: 12,
-    marginBottom: 12,
-  },
-  statusText: {
-    color: '#047857',
-    fontSize: 12,
-    fontWeight: '600',
-    textTransform: 'capitalize',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#111827',
-    marginBottom: 8,
-  },
-  description: {
-    fontSize: 16,
-    color: '#6B7280',
-    lineHeight: 24,
-  },
-  section: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    padding: 16,
-    marginTop: 16,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 12,
-  },
-  row: {
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F3F4F6',
-  },
-  label: {
-    fontSize: 12,
-    color: '#6B7280',
-    marginBottom: 4,
-  },
-  value: {
-    fontSize: 14,
-    color: '#111827',
-    fontWeight: '500',
-  },
-  locationText: {
-    fontSize: 14,
-    color: '#111827',
-  },
-});
-`;
-  }
-
-  async generateProductsScreen(outputDir, ext, isTypeScript, hasExpoRouter) {
-    const fileName = hasExpoRouter ? 'products' : 'ProductsScreen';
-    const outputPath = path.join(outputDir, `${fileName}.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getProductsScreenTS(hasExpoRouter)
-      : this.getProductsScreenJS(hasExpoRouter);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getProductsScreenTS(_hasExpoRouter) {
-    return `/**
- * Products Screen (Expo)
- * Displays list of products with grid layout
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-  Text,
-  Alert,
-  RefreshControl,
-} from 'react-native';
-import { useProducts } from '../../lib/l4yercak3/hooks/use-products';
-import { ProductCard } from '../../components/l4yercak3';
-import type { Product } from '../../lib/l4yercak3/types';
-
-export default function ProductsScreen() {
-  const [refreshing, setRefreshing] = useState(false);
-  const { data, isLoading, error, refetch } = useProducts();
-
-  const products = data?.products || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  const handleAddToCart = (product: Product) => {
-    Alert.alert(
-      'Added to Cart',
-      \`\${product.name} has been added to your cart.\`,
-      [{ text: 'OK' }]
-    );
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load products</Text>
-      </View>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={products}
-        keyExtractor={(item) => item.id}
-        numColumns={2}
-        renderItem={({ item }) => (
-          <View style={styles.cardContainer}>
-            <ProductCard
-              product={item}
-              onAddToCart={handleAddToCart}
-            />
-          </View>
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        columnWrapperStyle={styles.row}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No products available</Text>
-          </View>
-        }
-      />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  list: {
-    padding: 8,
-  },
-  row: {
-    justifyContent: 'space-between',
-  },
-  cardContainer: {
-    flex: 0.48,
-    marginBottom: 16,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  getProductsScreenJS(_hasExpoRouter) {
-    return `/**
- * Products Screen (Expo)
- * Displays list of products with grid layout
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  ActivityIndicator,
-  StyleSheet,
-  SafeAreaView,
-  Text,
-  Alert,
-  RefreshControl,
-} from 'react-native';
-import { useProducts } from '../../lib/l4yercak3/hooks/use-products';
-import { ProductCard } from '../../components/l4yercak3';
-
-export default function ProductsScreen() {
-  const [refreshing, setRefreshing] = useState(false);
-  const { data, isLoading, error, refetch } = useProducts();
-
-  const products = data?.products || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  const handleAddToCart = (product) => {
-    Alert.alert(
-      'Added to Cart',
-      \`\${product.name} has been added to your cart.\`,
-      [{ text: 'OK' }]
-    );
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.centered}>
-        <Text style={styles.errorText}>Failed to load products</Text>
-      </View>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={products}
-        keyExtractor={(item) => item.id}
-        numColumns={2}
-        renderItem={({ item }) => (
-          <View style={styles.cardContainer}>
-            <ProductCard
-              product={item}
-              onAddToCart={handleAddToCart}
-            />
-          </View>
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        columnWrapperStyle={styles.row}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No products available</Text>
-          </View>
-        }
-      />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  list: {
-    padding: 8,
-  },
-  row: {
-    justifyContent: 'space-between',
-  },
-  cardContainer: {
-    flex: 0.48,
-    marginBottom: 16,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  async generateExpoRouterLayout(outputDir, ext, isTypeScript, features) {
-    const outputPath = path.join(outputDir, `_layout.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getExpoRouterLayoutTS(features)
-      : this.getExpoRouterLayoutJS(features);
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getExpoRouterLayoutTS(features) {
-    const screens = [];
-    if (features.includes('crm')) {
-      screens.push(`        <Stack.Screen name="contacts" options={{ title: 'Contacts' }} />`);
-      screens.push(`        <Stack.Screen name="contact/[id]" options={{ title: 'Contact Details' }} />`);
-    }
-    if (features.includes('events')) {
-      screens.push(`        <Stack.Screen name="events" options={{ title: 'Events' }} />`);
-      screens.push(`        <Stack.Screen name="event/[id]" options={{ title: 'Event Details' }} />`);
-    }
-    if (features.includes('products') || features.includes('checkout')) {
-      screens.push(`        <Stack.Screen name="products" options={{ title: 'Products' }} />`);
-    }
-
-    return `/**
- * L4YERCAK3 Expo Router Layout
- * Auto-generated by @l4yercak3/cli
- */
-
-import { Stack } from 'expo-router';
-
-export default function L4yercak3Layout() {
-  return (
-    <Stack
-      screenOptions={{
-        headerStyle: {
-          backgroundColor: '#3B82F6',
-        },
-        headerTintColor: '#fff',
-        headerTitleStyle: {
-          fontWeight: '600',
-        },
-      }}
-    >
-${screens.join('\n')}
-    </Stack>
-  );
-}
-`;
-  }
-
-  getExpoRouterLayoutJS(features) {
-    const screens = [];
-    if (features.includes('crm')) {
-      screens.push(`        <Stack.Screen name="contacts" options={{ title: 'Contacts' }} />`);
-      screens.push(`        <Stack.Screen name="contact/[id]" options={{ title: 'Contact Details' }} />`);
-    }
-    if (features.includes('events')) {
-      screens.push(`        <Stack.Screen name="events" options={{ title: 'Events' }} />`);
-      screens.push(`        <Stack.Screen name="event/[id]" options={{ title: 'Event Details' }} />`);
-    }
-    if (features.includes('products') || features.includes('checkout')) {
-      screens.push(`        <Stack.Screen name="products" options={{ title: 'Products' }} />`);
-    }
-
-    return `/**
- * L4YERCAK3 Expo Router Layout
- * Auto-generated by @l4yercak3/cli
- */
-
-import { Stack } from 'expo-router';
-
-export default function L4yercak3Layout() {
-  return (
-    <Stack
-      screenOptions={{
-        headerStyle: {
-          backgroundColor: '#3B82F6',
-        },
-        headerTintColor: '#fff',
-        headerTitleStyle: {
-          fontWeight: '600',
-        },
-      }}
-    >
-${screens.join('\n')}
-    </Stack>
-  );
-}
-`;
-  }
-}
-
-module.exports = new ScreensGenerator();