@l4yercak3/cli 1.3.2 → 2.0.0-alpha.1

package/src/generators/quickstart/components-mobile/index.js

@@ -1,1440 +0,0 @@
-/**
- * Mobile Component Generator
- * Generates React Native components for Expo/React Native projects
- */
-
-const fs = require('fs');
-const path = require('path');
-const { ensureDir, writeFileWithBackup, checkFileOverwrite } = require('../../../utils/file-utils');
-
-class MobileComponentGenerator {
-  /**
-   * Generate React Native components 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 = {};
-
-    // Determine output directory for Expo
-    let outputDir;
-    if (fs.existsSync(path.join(projectPath, 'src'))) {
-      outputDir = path.join(projectPath, 'src', 'components', 'l4yercak3');
-    } else if (fs.existsSync(path.join(projectPath, 'app'))) {
-      // Expo Router uses app/ directory
-      outputDir = path.join(projectPath, 'components', 'l4yercak3');
-    } else {
-      outputDir = path.join(projectPath, 'components', 'l4yercak3');
-    }
-
-    ensureDir(outputDir);
-
-    const ext = isTypeScript ? 'tsx' : 'jsx';
-
-    // Generate CRM components
-    if (features.includes('crm')) {
-      results.contactList = await this.generateContactList(outputDir, ext, isTypeScript);
-      results.contactCard = await this.generateContactCard(outputDir, ext, isTypeScript);
-    }
-
-    // Generate Events components
-    if (features.includes('events')) {
-      results.eventList = await this.generateEventList(outputDir, ext, isTypeScript);
-      results.eventCard = await this.generateEventCard(outputDir, ext, isTypeScript);
-    }
-
-    // Generate Products components
-    if (features.includes('products') || features.includes('checkout')) {
-      results.productCard = await this.generateProductCard(outputDir, ext, isTypeScript);
-    }
-
-    // Generate component index
-    results.index = await this.generateIndex(outputDir, ext, features);
-
-    return results;
-  }
-
-  async generateContactList(outputDir, ext, isTypeScript) {
-    const outputPath = path.join(outputDir, `ContactList.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getContactListTS()
-      : this.getContactListJS();
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getContactListTS() {
-    return `/**
- * ContactList Component (React Native)
- * Displays a searchable list of contacts
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  TextInput,
-  ActivityIndicator,
-  StyleSheet,
-  RefreshControl,
-} from 'react-native';
-import { useContacts } from '../lib/l4yercak3/hooks/use-contacts';
-import { ContactCard } from './ContactCard';
-import type { Contact } from '../lib/l4yercak3/types';
-
-interface ContactListProps {
-  onSelect?: (contact: Contact) => void;
-}
-
-export function ContactList({ onSelect }: ContactListProps) {
-  const [search, setSearch] = useState('');
-  const [refreshing, setRefreshing] = useState(false);
-
-  const { data, isLoading, error, refetch } = useContacts({
-    search: search || undefined,
-  });
-
-  const contacts = data?.contacts || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>Failed to load contacts</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <TextInput
-        style={styles.searchInput}
-        placeholder="Search contacts..."
-        value={search}
-        onChangeText={setSearch}
-        placeholderTextColor="#9CA3AF"
-      />
-
-      <FlatList
-        data={contacts}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <ContactCard
-            contact={item}
-            onPress={() => onSelect?.(item)}
-          />
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No contacts found</Text>
-          </View>
-        }
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  searchInput: {
-    backgroundColor: '#FFFFFF',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E7EB',
-    fontSize: 16,
-  },
-  list: {
-    padding: 16,
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16,
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  getContactListJS() {
-    return `/**
- * ContactList Component (React Native)
- * Displays a searchable list of contacts
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  TextInput,
-  Text,
-  ActivityIndicator,
-  StyleSheet,
-  RefreshControl,
-} from 'react-native';
-import { useContacts } from '../lib/l4yercak3/hooks/use-contacts';
-import { ContactCard } from './ContactCard';
-
-export function ContactList({ onSelect }) {
-  const [search, setSearch] = useState('');
-  const [refreshing, setRefreshing] = useState(false);
-
-  const { data, isLoading, error, refetch } = useContacts({
-    search: search || undefined,
-  });
-
-  const contacts = data?.contacts || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>Failed to load contacts</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <TextInput
-        style={styles.searchInput}
-        placeholder="Search contacts..."
-        value={search}
-        onChangeText={setSearch}
-        placeholderTextColor="#9CA3AF"
-      />
-
-      <FlatList
-        data={contacts}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <ContactCard
-            contact={item}
-            onPress={() => onSelect?.(item)}
-          />
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No contacts found</Text>
-          </View>
-        }
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  searchInput: {
-    backgroundColor: '#FFFFFF',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E7EB',
-    fontSize: 16,
-  },
-  list: {
-    padding: 16,
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16,
-  },
-  errorText: {
-    color: '#EF4444',
-    fontSize: 16,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  async generateContactCard(outputDir, ext, isTypeScript) {
-    const outputPath = path.join(outputDir, `ContactCard.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getContactCardTS()
-      : this.getContactCardJS();
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getContactCardTS() {
-    return `/**
- * ContactCard Component (React Native)
- * Displays a single contact in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import type { Contact } from '../lib/l4yercak3/types';
-
-interface ContactCardProps {
-  contact: Contact;
-  onPress?: () => void;
-}
-
-export function ContactCard({ contact, onPress }: ContactCardProps) {
-  const initials = \`\${contact.firstName?.[0] || ''}\${contact.lastName?.[0] || ''}\`.toUpperCase();
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      <View style={styles.avatar}>
-        <Text style={styles.avatarText}>{initials || '?'}</Text>
-      </View>
-
-      <View style={styles.info}>
-        <Text style={styles.name} numberOfLines={1}>
-          {contact.firstName} {contact.lastName}
-        </Text>
-        {contact.email && (
-          <Text style={styles.email} numberOfLines={1}>
-            {contact.email}
-          </Text>
-        )}
-      </View>
-
-      {contact.tags && contact.tags.length > 0 && (
-        <View style={styles.tags}>
-          {contact.tags.slice(0, 2).map((tag) => (
-            <View key={tag} style={styles.tag}>
-              <Text style={styles.tagText}>{tag}</Text>
-            </View>
-          ))}
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#FFFFFF',
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  avatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: '#DBEAFE',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  avatarText: {
-    color: '#3B82F6',
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  info: {
-    flex: 1,
-    marginLeft: 12,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  email: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 2,
-  },
-  tags: {
-    flexDirection: 'row',
-    gap: 4,
-  },
-  tag: {
-    backgroundColor: '#F3F4F6',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
-  },
-  tagText: {
-    fontSize: 12,
-    color: '#6B7280',
-  },
-});
-`;
-  }
-
-  getContactCardJS() {
-    return `/**
- * ContactCard Component (React Native)
- * Displays a single contact in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
-export function ContactCard({ contact, onPress }) {
-  const initials = \`\${contact.firstName?.[0] || ''}\${contact.lastName?.[0] || ''}\`.toUpperCase();
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      <View style={styles.avatar}>
-        <Text style={styles.avatarText}>{initials || '?'}</Text>
-      </View>
-
-      <View style={styles.info}>
-        <Text style={styles.name} numberOfLines={1}>
-          {contact.firstName} {contact.lastName}
-        </Text>
-        {contact.email && (
-          <Text style={styles.email} numberOfLines={1}>
-            {contact.email}
-          </Text>
-        )}
-      </View>
-
-      {contact.tags && contact.tags.length > 0 && (
-        <View style={styles.tags}>
-          {contact.tags.slice(0, 2).map((tag) => (
-            <View key={tag} style={styles.tag}>
-              <Text style={styles.tagText}>{tag}</Text>
-            </View>
-          ))}
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#FFFFFF',
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  avatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: '#DBEAFE',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  avatarText: {
-    color: '#3B82F6',
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  info: {
-    flex: 1,
-    marginLeft: 12,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  email: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 2,
-  },
-  tags: {
-    flexDirection: 'row',
-    gap: 4,
-  },
-  tag: {
-    backgroundColor: '#F3F4F6',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
-  },
-  tagText: {
-    fontSize: 12,
-    color: '#6B7280',
-  },
-});
-`;
-  }
-
-  async generateEventList(outputDir, ext, isTypeScript) {
-    const outputPath = path.join(outputDir, `EventList.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getEventListTS()
-      : this.getEventListJS();
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getEventListTS() {
-    return `/**
- * EventList Component (React Native)
- * Displays a list of events with filtering
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  Text,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  RefreshControl,
-} from 'react-native';
-import { useEvents } from '../lib/l4yercak3/hooks/use-events';
-import { EventCard } from './EventCard';
-import type { Event } from '../lib/l4yercak3/types';
-
-interface EventListProps {
-  onSelect?: (event: Event) => void;
-}
-
-export function EventList({ onSelect }: EventListProps) {
-  const [statusFilter, setStatusFilter] = useState<'upcoming' | 'past' | 'all'>('upcoming');
-  const [refreshing, setRefreshing] = useState(false);
-
-  const { data, isLoading, error, refetch } = useEvents({
-    status: statusFilter,
-  });
-
-  const events = data?.events || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Filter Tabs */}
-      <View style={styles.tabs}>
-        {(['upcoming', 'past', 'all'] as const).map((status) => (
-          <TouchableOpacity
-            key={status}
-            style={[styles.tab, statusFilter === status && styles.tabActive]}
-            onPress={() => setStatusFilter(status)}
-          >
-            <Text style={[styles.tabText, statusFilter === status && styles.tabTextActive]}>
-              {status.charAt(0).toUpperCase() + status.slice(1)}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-
-      <FlatList
-        data={events}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <EventCard
-            event={item}
-            onPress={() => onSelect?.(item)}
-          />
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No events found</Text>
-          </View>
-        }
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  tabs: {
-    flexDirection: 'row',
-    padding: 16,
-    gap: 8,
-  },
-  tab: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-    backgroundColor: '#F3F4F6',
-  },
-  tabActive: {
-    backgroundColor: '#3B82F6',
-  },
-  tabText: {
-    fontSize: 14,
-    color: '#6B7280',
-    fontWeight: '500',
-  },
-  tabTextActive: {
-    color: '#FFFFFF',
-  },
-  list: {
-    padding: 16,
-    paddingTop: 0,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  getEventListJS() {
-    return `/**
- * EventList Component (React Native)
- * Displays a list of events with filtering
- * Auto-generated by @l4yercak3/cli
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  FlatList,
-  Text,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  RefreshControl,
-} from 'react-native';
-import { useEvents } from '../lib/l4yercak3/hooks/use-events';
-import { EventCard } from './EventCard';
-
-export function EventList({ onSelect }) {
-  const [statusFilter, setStatusFilter] = useState('upcoming');
-  const [refreshing, setRefreshing] = useState(false);
-
-  const { data, isLoading, error, refetch } = useEvents({
-    status: statusFilter,
-  });
-
-  const events = data?.events || [];
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
-
-  if (isLoading && !refreshing) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Filter Tabs */}
-      <View style={styles.tabs}>
-        {['upcoming', 'past', 'all'].map((status) => (
-          <TouchableOpacity
-            key={status}
-            style={[styles.tab, statusFilter === status && styles.tabActive]}
-            onPress={() => setStatusFilter(status)}
-          >
-            <Text style={[styles.tabText, statusFilter === status && styles.tabTextActive]}>
-              {status.charAt(0).toUpperCase() + status.slice(1)}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-
-      <FlatList
-        data={events}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <EventCard
-            event={item}
-            onPress={() => onSelect?.(item)}
-          />
-        )}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-        }
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>No events found</Text>
-          </View>
-        }
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F9FAFB',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  tabs: {
-    flexDirection: 'row',
-    padding: 16,
-    gap: 8,
-  },
-  tab: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-    backgroundColor: '#F3F4F6',
-  },
-  tabActive: {
-    backgroundColor: '#3B82F6',
-  },
-  tabText: {
-    fontSize: 14,
-    color: '#6B7280',
-    fontWeight: '500',
-  },
-  tabTextActive: {
-    color: '#FFFFFF',
-  },
-  list: {
-    padding: 16,
-    paddingTop: 0,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: '#6B7280',
-    fontSize: 16,
-  },
-});
-`;
-  }
-
-  async generateEventCard(outputDir, ext, isTypeScript) {
-    const outputPath = path.join(outputDir, `EventCard.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getEventCardTS()
-      : this.getEventCardJS();
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getEventCardTS() {
-    return `/**
- * EventCard Component (React Native)
- * Displays a single event in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import type { Event } from '../lib/l4yercak3/types';
-
-interface EventCardProps {
-  event: Event;
-  onPress?: () => void;
-}
-
-export function EventCard({ event, onPress }: EventCardProps) {
-  const startDate = event.startDate ? new Date(event.startDate) : null;
-
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'published':
-        return { bg: '#D1FAE5', text: '#047857' };
-      case 'draft':
-        return { bg: '#F3F4F6', text: '#6B7280' };
-      default:
-        return { bg: '#FEE2E2', text: '#DC2626' };
-    }
-  };
-
-  const statusColors = getStatusColor(event.status);
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      <View style={styles.content}>
-        {/* Date Badge */}
-        {startDate && (
-          <View style={styles.dateBadge}>
-            <Text style={styles.dateDay}>{startDate.getDate()}</Text>
-            <Text style={styles.dateMonth}>
-              {startDate.toLocaleDateString('en-US', { month: 'short' })}
-            </Text>
-          </View>
-        )}
-
-        {/* Event Info */}
-        <View style={styles.info}>
-          <Text style={styles.name} numberOfLines={2}>{event.name}</Text>
-          {startDate && (
-            <Text style={styles.time}>{formatDate(startDate)} • {formatTime(startDate)}</Text>
-          )}
-          {event.location && (
-            <Text style={styles.location} numberOfLines={1}>{event.location}</Text>
-          )}
-        </View>
-
-        {/* Status Badge */}
-        <View style={[styles.status, { backgroundColor: statusColors.bg }]}>
-          <Text style={[styles.statusText, { color: statusColors.text }]}>
-            {event.status}
-          </Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    marginBottom: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  content: {
-    flexDirection: 'row',
-    padding: 16,
-    alignItems: 'flex-start',
-  },
-  dateBadge: {
-    width: 56,
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  dateDay: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#3B82F6',
-  },
-  dateMonth: {
-    fontSize: 12,
-    color: '#6B7280',
-    textTransform: 'uppercase',
-  },
-  info: {
-    flex: 1,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 4,
-  },
-  time: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-  location: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 2,
-  },
-  status: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
-  },
-  statusText: {
-    fontSize: 12,
-    fontWeight: '500',
-    textTransform: 'capitalize',
-  },
-});
-`;
-  }
-
-  getEventCardJS() {
-    return `/**
- * EventCard Component (React Native)
- * Displays a single event in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
-export function EventCard({ event, onPress }) {
-  const startDate = event.startDate ? new Date(event.startDate) : null;
-
-  const formatDate = (date) => {
-    return date.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (date) => {
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  };
-
-  const getStatusColor = (status) => {
-    switch (status) {
-      case 'published':
-        return { bg: '#D1FAE5', text: '#047857' };
-      case 'draft':
-        return { bg: '#F3F4F6', text: '#6B7280' };
-      default:
-        return { bg: '#FEE2E2', text: '#DC2626' };
-    }
-  };
-
-  const statusColors = getStatusColor(event.status);
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      <View style={styles.content}>
-        {/* Date Badge */}
-        {startDate && (
-          <View style={styles.dateBadge}>
-            <Text style={styles.dateDay}>{startDate.getDate()}</Text>
-            <Text style={styles.dateMonth}>
-              {startDate.toLocaleDateString('en-US', { month: 'short' })}
-            </Text>
-          </View>
-        )}
-
-        {/* Event Info */}
-        <View style={styles.info}>
-          <Text style={styles.name} numberOfLines={2}>{event.name}</Text>
-          {startDate && (
-            <Text style={styles.time}>{formatDate(startDate)} • {formatTime(startDate)}</Text>
-          )}
-          {event.location && (
-            <Text style={styles.location} numberOfLines={1}>{event.location}</Text>
-          )}
-        </View>
-
-        {/* Status Badge */}
-        <View style={[styles.status, { backgroundColor: statusColors.bg }]}>
-          <Text style={[styles.statusText, { color: statusColors.text }]}>
-            {event.status}
-          </Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    marginBottom: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  content: {
-    flexDirection: 'row',
-    padding: 16,
-    alignItems: 'flex-start',
-  },
-  dateBadge: {
-    width: 56,
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  dateDay: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#3B82F6',
-  },
-  dateMonth: {
-    fontSize: 12,
-    color: '#6B7280',
-    textTransform: 'uppercase',
-  },
-  info: {
-    flex: 1,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 4,
-  },
-  time: {
-    fontSize: 14,
-    color: '#6B7280',
-  },
-  location: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 2,
-  },
-  status: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
-  },
-  statusText: {
-    fontSize: 12,
-    fontWeight: '500',
-    textTransform: 'capitalize',
-  },
-});
-`;
-  }
-
-  async generateProductCard(outputDir, ext, isTypeScript) {
-    const outputPath = path.join(outputDir, `ProductCard.${ext}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const content = isTypeScript
-      ? this.getProductCardTS()
-      : this.getProductCardJS();
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-
-  getProductCardTS() {
-    return `/**
- * ProductCard Component (React Native)
- * Displays a single product in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
-import type { Product } from '../lib/l4yercak3/types';
-
-interface ProductCardProps {
-  product: Product;
-  onPress?: () => void;
-  onAddToCart?: (product: Product) => void;
-}
-
-export function ProductCard({ product, onPress, onAddToCart }: ProductCardProps) {
-  const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(price / 100);
-  };
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      {/* Image */}
-      {product.imageUrl ? (
-        <Image source={{ uri: product.imageUrl }} style={styles.image} />
-      ) : (
-        <View style={styles.imagePlaceholder}>
-          <Text style={styles.imagePlaceholderText}>No image</Text>
-        </View>
-      )}
-
-      {/* Content */}
-      <View style={styles.content}>
-        <Text style={styles.name} numberOfLines={2}>{product.name}</Text>
-        {product.description && (
-          <Text style={styles.description} numberOfLines={2}>
-            {product.description}
-          </Text>
-        )}
-
-        <View style={styles.footer}>
-          <Text style={styles.price}>{formatPrice(product.price)}</Text>
-          {onAddToCart && (
-            <TouchableOpacity
-              style={styles.addButton}
-              onPress={() => onAddToCart(product)}
-            >
-              <Text style={styles.addButtonText}>Add</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  image: {
-    width: '100%',
-    height: 160,
-    resizeMode: 'cover',
-  },
-  imagePlaceholder: {
-    width: '100%',
-    height: 160,
-    backgroundColor: '#F3F4F6',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  imagePlaceholderText: {
-    color: '#9CA3AF',
-    fontSize: 14,
-  },
-  content: {
-    padding: 12,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  description: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 4,
-  },
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 12,
-  },
-  price: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#111827',
-  },
-  addButton: {
-    backgroundColor: '#3B82F6',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-  },
-  addButtonText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-});
-`;
-  }
-
-  getProductCardJS() {
-    return `/**
- * ProductCard Component (React Native)
- * Displays a single product in a card format
- * Auto-generated by @l4yercak3/cli
- */
-
-import React from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
-
-export function ProductCard({ product, onPress, onAddToCart }) {
-  const formatPrice = (price) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(price / 100);
-  };
-
-  return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      {/* Image */}
-      {product.imageUrl ? (
-        <Image source={{ uri: product.imageUrl }} style={styles.image} />
-      ) : (
-        <View style={styles.imagePlaceholder}>
-          <Text style={styles.imagePlaceholderText}>No image</Text>
-        </View>
-      )}
-
-      {/* Content */}
-      <View style={styles.content}>
-        <Text style={styles.name} numberOfLines={2}>{product.name}</Text>
-        {product.description && (
-          <Text style={styles.description} numberOfLines={2}>
-            {product.description}
-          </Text>
-        )}
-
-        <View style={styles.footer}>
-          <Text style={styles.price}>{formatPrice(product.price)}</Text>
-          {onAddToCart && (
-            <TouchableOpacity
-              style={styles.addButton}
-              onPress={() => onAddToCart(product)}
-            >
-              <Text style={styles.addButtonText}>Add</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  image: {
-    width: '100%',
-    height: 160,
-    resizeMode: 'cover',
-  },
-  imagePlaceholder: {
-    width: '100%',
-    height: 160,
-    backgroundColor: '#F3F4F6',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  imagePlaceholderText: {
-    color: '#9CA3AF',
-    fontSize: 14,
-  },
-  content: {
-    padding: 12,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  description: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 4,
-  },
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 12,
-  },
-  price: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#111827',
-  },
-  addButton: {
-    backgroundColor: '#3B82F6',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-  },
-  addButtonText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-});
-`;
-  }
-
-  async generateIndex(outputDir, ext, features) {
-    const outputPath = path.join(outputDir, `index.${ext === 'tsx' ? 'ts' : 'js'}`);
-
-    const action = await checkFileOverwrite(outputPath);
-    if (action === 'skip') {
-      return null;
-    }
-
-    const exports = [];
-
-    if (features.includes('crm')) {
-      exports.push("export { ContactList } from './ContactList';");
-      exports.push("export { ContactCard } from './ContactCard';");
-    }
-
-    if (features.includes('events')) {
-      exports.push("export { EventList } from './EventList';");
-      exports.push("export { EventCard } from './EventCard';");
-    }
-
-    if (features.includes('products') || features.includes('checkout')) {
-      exports.push("export { ProductCard } from './ProductCard';");
-    }
-
-    const content = `/**
- * L4YERCAK3 React Native Components
- * Auto-generated by @l4yercak3/cli
- */
-
-${exports.join('\n')}
-`;
-
-    return writeFileWithBackup(outputPath, content, action);
-  }
-}
-
-module.exports = new MobileComponentGenerator();