@l4yercak3/cli 1.2.18 → 1.2.20

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

@@ -0,0 +1,1440 @@
+/**
+ * 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();